Back to Top
A control to quickly return to the top of the page.
Location: Footer -> Back to top
Options overview
This block offers layout customization and styling options for content on a page. Settings are grouped into:
Layout
Dividing line
Background
Interactions
Shadow
Some options depend on others (e.g., certain fields appear only if a feature is enabled).
Layout
Top spacing
Options: None, Small, Medium, Normal
What it does: Adds vertical space above and below the block to create breathing room between sections.
How to choose:
None: No extra space; block sits flush with neighboring content.
Small/Medium/Normal: Increases the gap to improve readability.
Accessibility tip: Ensure enough whitespace so the block is distinct but not isolated.
Width
Options: Default, Boxed, Wide
What it does: Controls how wide the block stretches across the page.
Default: Uses the page’s standard content width.
Boxed: The block sits within a narrower, boxed area with margins on both sides.
Wide: The block expands further toward the edges of the screen.
Note: The Wide option is designed for screens 1440px wide and larger.
Practical guidance:
On large screens, Wide can create a bold, edge-to-edge look.
On small screens, ensure readability; you may prefer Default or Boxed.
Dividing line
Show
What it does: Displays or hides a horizontal line that separates content within or under the block.
Tip: Use a line to visually group related content or separate sections.
Width
Options: Fullwidth, Content width
What it does: Determines how the line spans.
Fullwidth: Line runs edge-to-edge across the block.
Content width: Line aligns with the main content area, leaving margins on the sides.
Note: This feature typically does not work on mobile devices.
Mobile note
If the line isn’t visible on mobile, consider whether it helps clarity on small screens or if it adds clutter.
Background
Background
Options: Hide, Color, Gradient, Image
What it does: Sets the base background of the block.
Hide: Transparent background.
Color: Solid color background.
Gradient: Smooth transition between colors.
Image: Background image (may include options for positioning and tiling).
Color
Width: Fullwidth, Content width
Fullwidth: Color spans the entire block width.
Content width: Color aligns with the main content width.
Top, bottom spacing: None, Small, Medium, Normal
Adjusts vertical padding inside the colored area.
Colors
Lines color: Color used for dividers or accent lines inside the block.
Button color: Color of buttons within the block.
Show background: Toggles visibility of a background layer behind content (often related to overlays or layered visuals).
Background gradient
If you choose Gradient, this setting defines the gradient’s colors, direction, and stops.
Great for subtle, modern visuals or brand-specific looks.
Border
What it does: Adds or removes a border around the block (and may include thickness and color options).
Accessibility tip: Ensure the border color contrasts well with the background.
Text
What it does: Controls text color and general typography inside the block.
Tip: Maintain readability with sufficient contrast against the background.
Interactions
Show background on hover
What it does: When you hover the mouse over the block, the background changes (color, image, or gradient).
Usage note: Use sparingly to avoid distracting users.
Background hover
What it does: Extra hover effect specifically for the background.
Background gradient hover
What it does: Hover state for a gradient background (e.g., shifting colors or angle).
Border hover
What it does: Hover state for the border (color, width, or style).
Text hover
What it does: Hover state for text (color, decoration, underline).
Shadow (optional)
Enable shadow
What it does: Adds a shadow around or under the block to create depth.
If enabled: Two additional options appear:
Shadow: The base shadow styling (offset, blur, color).
Shadow hover: Shadow styling when the block is hovered.
Practical notes
Subtle shadows help separate the block from its background.
Reserve stronger shadows for emphasis; too heavy a shadow can look bulky.
Last updated