Block settings control how each Block looks and behaves inside a Section. Show or hide a Block on desktop and mobile, set its width, add color, borders, and shadows, and animate it as visitors scroll.
Settings apply to one Block at a time, so you can fine-tune a single Block without changing the rest of the Section. To adjust a whole Section instead, see Customize Page section settings.
Open the Block Editor
Every setting in this article starts in the Block Editor.
From the Dashboard, click Website, then Website Pages or Landing Pages.
Click the Title of the page to open it in the page editor or click on Customize on the right.
In the sidebar, select the Section that contains the Block.
Click the Block to open the Block Editor.
To add, rename, hide, or reorder Blocks first, see Add and manage blocks on pages.
Customize the block layout
Block layout settings, like Section layout settings, have a Desktop Layout and a Mobile Layout, so you can optimize each individual Block for desktop and mobile devices. To adjust a whole Section's layout instead, see Customize Page section settings.
Desktop layout settings
From the Dashboard, click Website, then Website Pages or Landing Pages.
Click the Title of the page to open it in the page editor or click on Customize on the right.
In the sidebar, select the Section that contains the Block.
Click the Block to open the Block Editor.
In Block Settings, click Desktop Layout.
Hide Block: Hide the Block on desktop devices
Alignment: Align the Block content to the left, center, or right of the Block space
Inside Spacing: Shift the Block content by adjusting the space inside the Block
Outside Spacing: Shift the Block content by adjusting the space outside the Block
Make Flush: Remove the spacing around the Block. Turn on Show guides in Design Tools to see the change. Learn how to show guides
Place this block on its own row: Move the Block to its own row within the Section
Tip: To overlap Blocks, set a negative value in Outside Spacing. The right-most Block you want to overlap sits on top. Negative spacing can distort your layout on different screen sizes, such as desktop, tablet, and mobile.
Mobile layout settings
From the Dashboard, click Website, then Website Pages or Landing Pages.
Click the Title of the page to open it in the page editor or click on Customize on the right.
In the sidebar, select the Section that contains the Block.
Click the Block to open the Block Editor.
In Block Settings, click Mobile Layout.
Tip: Switch the preview to Mobile View, at the top of the editor, to see your Mobile Layout changes as you make them.
Alignment: Align the Block content to the left, center, or right of the Block space
Hide Block: Hide the Block on mobile devices
Inside Spacing: Shift the Block content by adjusting the space inside the Block. Hold the
shiftkey while you click the spacing values to adjust in increments of 10, in both your Mobile and Desktop layoutsOutside Spacing: Shift the Block content by adjusting the space outside the Block
Image on Top: If the Block contains an Image, move the Image to the top of the Section on mobile devices
Customize the block width
Each Section is divided into a 12-column grid, and Blocks sit inside that grid. A Block's width is the number of columns it takes up. Change a Block's width to control how much space it uses in the Section and how your content looks.
From the Dashboard, click Website, then Website Pages or Landing Pages.
Click the Title of the page to open it in the page editor or click on Customize on the right.
In the sidebar, select the Section that contains the Block.
Click the Block to open the Block Editor.
At the top of the Block, select the Column Number to set the Block width.
Click Save to keep your changes.
Note: Changing one Block's width can change how the other Blocks fit in the Section.
Tip: Turn on Show guides and Show Grid in Design Tools to see your columns and keep your design accurate and symmetrical. Learn how to build a page with design tools
Customize block background settings
Change a Block's background color, add and adjust a border, and add depth with a shadow. To customize a Section's background instead, see Customize Page section settings. To learn how Sections and Blocks work together, see Add Sections to pages.
From the Dashboard, click Website, then Website Pages or Landing Pages.
Click the Title of the page to open it in the page editor or click on Customize on the right.
In the sidebar, select the Section that contains the Block.
Click the Block to open the Block Editor.
In the sidebar, click Background.
Block background color
Select the background color for your Block with the color picker.
Tip: Use the Opacity Slider in the color picker to adjust the opacity of the Block background color.
Border type
Select a Border Type to change the appearance of the border:
None
Solid
Dotted
Dashed
Double
Ridge
Border width
Set the width of the border to adjust its thickness.
Border color
Set the color of the border to fit your page and branding.
Tip: Combine the Block background color, border color, and border type to create unique designs and shapes.
Border radius
Use the Border Radius slider to make the Block's corners more rounded or more squared.
Box shadow
Select a Box Shadow effect to add depth to the Block.
Customize block animations
Animations add motion to a Block as the page loads and as visitors scroll to it. Choose the type, direction, delay, and duration of each animation.
From the Dashboard, click Website, then Website Pages or Landing Pages.
Click the Title of the page to open it in the page editor or click on Customize on the right.
In the sidebar, select the Section that contains the Block.
Click the Block to open the Block Editor.
Select the Section that contains the Block, hover over the Block, and click Edit.
In the sidebar, find Block Settings.
Click Animations to open the Block Animation Settings.
Choose the animation type, direction, delay, and duration.
Click Save to keep and apply your changes.
Identify Blocks with animations enabled
Blocks that have animation settings enabled are easy to spot while you customize your page:
Animation types
None: Turn animations off for the Block
Fade: Fade the Block onto the page
Flip: Flip the Block onto the page
Zoom: Zoom the Block onto the page
Fade animation
Make your Block fade onto the page when a visitor scrolls to it.
Flip animation
Make your Block flip onto the page when a visitor scrolls to it.
Zoom animation
Make your Block zoom onto the page when a visitor scrolls to it.
Animation direction
Select the direction of the animation:
Up
Down
Left
Right
Animation delay
Set the number of seconds before the animation starts once a visitor reaches the Block.
Tip: Keep your delay between about 0.1 and 1 second. In that range, visitors notice the animation without confusion and move smoothly through your page.
Animation duration
Set how many seconds the animation lasts. A shorter duration makes the Block appear quickly. A longer duration makes it appear slowly as your visitor scrolls to it.