Every section, column, inner column and box has the same kind of Design panel: how its contents are laid out, its background, its frame, its spacing and size, and its animations. This article goes through it option by option. For adding and arranging sections and columns, see Sections, columns and layout.
How to open it
- Click the section, column or box on the canvas. The toolbar shows a badge such as Section, Column or Inner.
- Click Design in the toolbar. The panel opens on the right.
- Pick the screen size at the top of the editor first if you only want to change Tablet or Mobile. Settings marked with the screen-size dot can differ per screen size; the rest apply everywhere.
The panel's groups, top to bottom: Visibility (only on dynamic pages when something inside is connected to a collection field), Layout, Style (with Shape dividers, Cursor trail and Media vortex inside it), Spacing, Size and Animations & Effects.
Layout
- Direction: Vertical (stacked rows) or Horizontal (side-by-side columns). On Mobile it shows what phones show: a row whose columns stack reads Vertical. Clicking Horizontal there keeps the columns side by side on phones only.
- Horizontal: Left, Center or Right. When Direction is Horizontal you also get Space Between, Space Around and Space Evenly to spread the columns across the width. Set per screen size. The line under it reminds you that words in a text widget follow that widget's own Text alignment, and counts any text widgets inside set differently.
- Vertical: Top, Center or Bottom. When Direction is Vertical you also get Space Between, Space Around and Space Evenly. This moves the boxes inside up or down when the container is taller than its content. When there's no spare height the panel says "The content fills this box, so there is no spare height to move it in." Raise Height (under Size) or lower the top and bottom padding.
- Full width (sections only): on, the section spans the whole page ("The section now takes up the entire width of the page."). Off, it's held to the theme's page width ("Section is constrained to page max-width."). The gray box below shows the room left for content inside its padding.
- Mirror for right-to-left (sections only, shown when the site has a right-to-left language such as Arabic or Urdu): on by default, so columns, menus and arrows swap sides on those pages. Turn it off to keep this section as designed; its words still read right to left. See Multi-language sites.
How alignment and size work together is explained in Sections, columns and layout.
Style
Three tabs at the top choose the background type: Color, Image or Video. Under the tabs are the frame options, which apply whatever the background. The background is one value for every screen size.
Color
- Background color: a theme color, any color, or a gradient. See Color picker.
- Gradient layers: Add layer puts an extra gradient (it starts as a soft white highlight in the top-left) over the background color. Up to 6 layers, drawn top layer first. Use see-through colors so the layers below show. Remove one with its x. More in Gradients and text effects.
- Change color on scroll: off by default. On, the box shows the Scroll color until it has come far enough up the screen, then changes to its Background color. Scrolling back changes it again.
- Scroll color: the color or gradient shown before the change. Nothing happens until you pick one.
- Trigger at: 0–100%, default 25%. How far up from the bottom of the screen the box's top must come before it changes.
- Transition: Fade (default), Slide left, Slide right, Slide up, Slide down, Wipe left, Wipe right, Wipe up, Wipe down, Zoom in, Zoom out or Instant.
- Duration: 0–3000 ms, default 300. Hidden for Instant. Visitors who've asked their device for less motion get an instant change.
Image
Click Add images (or paste an address into Paste image URL… and click Add). You can pick several pictures at once. "Multiple images create a background carousel": two or more pictures become a slideshow.
- Default / Static / Parallax (position type): Default scrolls with the page. Static keeps the picture fixed while the page scrolls over it ("Not supported on iOS Safari": iPhones and iPads show it as Default). Parallax moves the picture at a different speed from the page; Velocity 1–10, default 4, sets how strong. Headers don't offer Parallax.
- The picture list: drag the handle to reorder, click x to remove, click a picture to open it:
- Change image opens the image window.
- Position: a 3×3 grid choosing which part stays in view when the picture is cropped. Default center.
- Size: Cover (fill, cropping; default), Contain (whole picture), Auto (its own size) or Fixed with a Width and Height in px, % or auto. "Auto on one side keeps the picture's shape."
- Repeat: None (default), Both, X only or Y only. Useful for small patterns with Size set to Auto.
- Opacity: 0–100%, default 100. Fades the picture so the background color shows through.
- Overlay: a color laid over the picture, under the content. Turning it on starts at black, 50%. Color, Opacity 0–100%, and Blend (Normal, Multiply, Screen, Overlay, Darken, Lighten, Color dodge, Color burn, Hard light, Soft light, Difference, Exclusion, Hue, Saturation, Color, Luminosity).
With two or more pictures you also get the slideshow settings:
- Transition: Fade (default), Slide left, Slide right, Slide up or Slide down.
- Transition duration: 100–3000 ms, default 800.
- Auto-advance: on by default. Advance every: 1–15 seconds in half seconds, default 5.
- Navigation arrows: off by default. Shows previous and next arrows.
- Dot indicators: off by default. Shows a dot per picture.
Video
Click Choose video to pick a client video, upload one, choose one from the site's library, or paste a YouTube, Vimeo or direct .mp4 link on the Paste a link tab. Once set, the video shows with Replace and Remove. The full how-to is in Use video on a site.
- Remove (next to the video's name) takes it off. The box under the name lets you change the link.
- Autoplay, Loop and Mute: all on by default. Mute says "Required for autoplay in most browsers".
- Controls (sections, headers and footers): off by default. Shows play and volume controls.
- Display on mobile: on a section this is set for the screen size you're editing, and is on by default; "Static image displayed when off". On a column or box it's one switch, off by default, with the note "YouTube/Vimeo iframes have limited mobile support".
- Display mode: Fill (default) crops the video to cover the box. Full video shows the whole frame with your background filling the sides.
- Focal point (Fill, and only for an uploaded or direct video): a 3×3 grid that aims the crop on desktop. Tablet and mobile fit full width automatically.
- Poster image: Add, then Change or Remove. Shown while the video loads and wherever the video is hidden.
- Pattern over video: Choose picture (or Or paste a picture URL…) puts a dot, line or texture picture over the video, under the words. Then Size, Repeat (Tile, Once, Across, Down) and Opacity.
Frame (under every tab)
- Corner radius: 0–100px, default 0. Turn on Each corner to set Top left, Top right, Bottom right and Bottom left separately.
- Border: width 0–20px (default 0) and color. The gear picks the style: Solid, Dashed, Dotted or Double ("Double lines show at 3px wide or more."). Sides (Top, Right, Bottom, Left) shows the border on some sides only. Each side gives every side its own width and color.
- Opacity: 0–100%, default 100. Fades the whole box and everything in it. Per screen size.
- Rotation: −180° to 180°, default 0. Per screen size.
- Shadow: off by default. On, choose Outer or Inner, then click one of 9 squares for the direction (the middle one is an even glow all round), and set Color. Turning it on starts with the shadow below the box.
- Glass morphism (columns, inner columns and boxes only): a frosted-glass look that blurs whatever is behind the box.
- Tint: Light, Dark, or any color from the swatch. Default light.
- Blur: 0–40px, default 8.
- Background opacity: 0–100%, default 20.
- Border opacity: 0–100%, default 40.
Shape dividers, Cursor trail and Media vortex
These sit at the bottom of the Style group:
- Shape dividers: a wave, curve, angle or other shape along the top or bottom edge. See Shape dividers.
- Cursor trail: a trail of brush strokes or characters behind the content that follows the visitor's mouse. See Cursor trail.
- Media vortex: photos and videos flying in a 3D tunnel behind the content. See Media vortex.
Spacing
- Gap: the space between the things inside, 0–120px on the slider or up to 200px typed. Its name says what it spaces: Gap between columns (side-by-side section), Gap between rows (stacked section), Gap between inner-columns (column) or Gap between widgets (inner column). New containers start at 24px.
- Margin (outer spacing): the outer ring of the box diagram. Click a number to type it; negative values are allowed.
- Padding: the inner box. Click a number to type it. The link button on its top edge sets all four sides at once. Press Tab to move to the next side.
- Connected to theme spacing shows when the padding comes from the theme (Theme > Width & Spacing). Reset to theme spacing goes back to it.
- Gap, margin and padding can be set per screen size.
Size
- Height: Auto (as tall as the content, showing its current height) or px, 0–1200. Switching to px starts at the current height. Per screen size. Dragging the box's bottom edge on the canvas sets the same value.
- Width, Max width and Position (columns, inner columns and boxes): Width is Fill, px (up to 2560) or % (up to 100). Max width is None, px or %. Position (Place left, Place center, Place right, or Reset) places a box narrower than its parent. Switching a unit converts the size the box shows now, so nothing jumps. The gray box underneath says how wide it really shows and why, for example "Shows at 820px wide. Held by Max width (820px)." The full rules are in Sections, columns and layout.
Animations & Effects
Not on the header. Three sub-groups, Hover, Entrance and Scroll, each with its own list of effects and settings: see Animations and effects.
- Stagger children: off by default. On, the things inside play their entrance one after another, 20–500 ms apart (default 80).
Header and footer
The footer's panel is the same as a section's, without Visibility. The header's panel starts with its own behavior settings (logo on scroll, sticky header, change on scroll) and Change Preset, then the same Layout, Style, Spacing and Size groups, but no Parallax and no Animations & Effects. Full width and Mirror for right-to-left are sections only. See Header, footer and navigation.
Examples
- A plumber's hero with a calm video: section Style > Video, pick the client's van clip, keep Autoplay, Loop and Mute on, add a poster, then Pattern over video with a dot pattern at 30% so the white heading reads.
- A roofer's gallery band: Style > Image, add four job photos, Transition Fade, Advance every 4 seconds, Overlay black at 40% with white text on top.
- A dentist's service cards: three inner columns with Corner radius 16, Shadow Outer pointing down, and Stagger children 120 ms on the column so they appear one by one.
- A glass card over a photo: section with a photo background, inner column with Glass morphism Light, Blur 12, Background opacity 25.
Limits and what it can't do
- The background (color, pictures, video, overlay) is the same on every screen size. Only video visibility, opacity, rotation, alignment, spacing, height and width change per screen size.
- Up to 6 gradient layers. The shadow has 9 directions and a color; you can't type an exact blur or spread.
- Static backgrounds don't stay fixed on iPhones and iPads. Parallax isn't offered on the header.
- Glass morphism isn't on sections, headers or footers. Put an inner column inside the section and give it the glass.
- Reset Layout in the More menu is grayed out; it doesn't do anything yet.
Who can use it
Anyone with the Mount Olympus tool. Client people (see Client permissions) need Editor to see the Design panel; Widget content alone can't change design. Agency people can right-click a section or column and choose Lock Editing for Client (or More > Lock for client editing) so client people can't change it or anything inside.
Troubleshooting
- The background video won't autoplay: turn Mute back on. Most browsers refuse to start a video with sound by itself. Also check Autoplay is on, and that visitors haven't asked their device for less motion (they see the poster).
- The video doesn't show on phones: check Display on mobile while editing the Mobile view (sections) or the one switch (columns). YouTube and Vimeo videos play poorly as phone backgrounds; upload the video instead, and add a Poster image for when it's hidden.
- The picture doesn't stay fixed on an iPhone: Static isn't supported there. Use Parallax for movement that works on phones too, or Default.
- Change color on scroll does nothing: pick a Scroll color; the change only runs once one is set. Then scroll the canvas: it works in the editor as well as on the live site. If it changes too early or late, adjust Trigger at.
- Vertical alignment doesn't move anything: the panel says "The content fills this box…". Raise Height or lower the top and bottom padding.
- The text is still centered after I set Horizontal to Left: Horizontal places the boxes and widgets. Words follow each text widget's own Text alignment.
- The slideshow settings are missing: they show only with two or more pictures.
- I can't find Full width on a column: it's a section-only setting. A column uses Width and Max width under Size.