How to Configure Banner Size, Color, and Text Settings?
Questions:
- How do I change the spacing around my banner?
- How do I set a background color?
- How do I format the heading and sub-heading?
Description:
This guide explains how to adjust the structural spacing, background color, and text visibility for your banner components. You can use these settings to ensure your content fits perfectly within the page layout and aligns with your brand typography.
We'll show you, step by step, how to:
- Adjust Whitespace: Control margins, padding, and full-width display.
- Set Backgrounds: Choose a solid color from the palette.
- Format Typography: Toggle headings, sub-headings, and body content while adjusting alignment.
Solution:
-
Size And Whitespace, Background Color, Title Text Settings, and Text Settings are located at the top of the component settings. The available configuration options are displayed based on the selected component.
-
Toggle Full Window Width
Activate the "Use full window width" switch to expand your banner across the entire screen.
-
Adjust Margins and Padding
Use the plus and minus buttons to increase or decrease the spacing for the Top and Bottom margins and padding. This controls the empty space inside and outside your component container.
-
Change the Background Color
Select a solid shade from the color grid to apply a background color. You can also click the crossed-out circle icon to remove any background color completely.
-
Configure the Main Heading
Turn on the "Render heading" toggle to display your main title. Use the dropdown menus to select the heading level (such as H2), and click the alignment icon to position the text.
-
Enable the Sub-heading
Activate the "Render sub-heading" switch if you want to display an additional line of text below your main title.
-
Format the Body Content
Turn on the "Render content" toggle to make your main paragraph text visible. Use the associated dropdown and alignment icons to style and position this text block.
Tips and Tricks:
Pro-Tips:
- Use padding to create breathing room inside your banner, preventing text from touching the very edges of the container.
- Always preview your heading alignments on different screen sizes to ensure the text remains centered or aligned properly on mobile devices.
Warnings:
- Disabling the "Render heading" or "Render content" toggles will hide that text completely on the live page, even if you already typed information into those fields.
- Be careful when significantly increasing top or bottom margins, as this can create unusually large blank gaps between sections on your live page.