HomeLayout Examples
By default, when you create a new block in many cases the block will be composed of two items - an editable text area and the particular item, a gallery, a map or an FAQ list etc. By default the text is shown above the item on desktop, but by going to EDIT BLOCK > Edit Styles you can change this so that they both show side-by-side or the text can be below the item.
The Gallery in this block has had the spacing removed in Edit Styles giving a different effect.
You can do the same with a map, and in this case you'll see we've rounded the corners in Edit Styles which may suit some site designs.
On a small device like a mobile phone the text and the item will always be shown one above the other.
Side by Side on Desktop
Below you can see an example where two consecutive blocks are set to 50% width. This allows them to be shown side-by-side on desktop view. It doesn't affect how they're shown on mobile devices. To try this go to EDIT BLOCK > Edit Styles and set the Block Width to half. We've done this below with a form block and a map block shown side-by-side if you're on a desktop.
By default, forms are shown with fieldset legends a few pixels above the fieldset border, but in this case, to make the two blocks look the same shape we've set the form style to 'Squared' in Edit Styles.
The gallery below has the items set to 100 item height in Edit Block. We've then gone to Edit Styles and set the border rounding to -1. This uses a preset style which rounds the images by 50%, but also adds an animation when you hover over an item so that the rounding changes to 25%.
