HomeLayout Examples
By default, when you create a new Block it will in many cases 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 also configure the appearance of a map in a block. In this case displayed here 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. However, 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%.
