Adding an Image banner section
1. From your Fourthwall dashboard, go to Site design > Layout tab, and in the dropdown, make sure you are on the page you want to add the image banner section
2. In the left-hand side menu, you need to scroll down and click where it says "Add page section."
3. This will show the section options available - see image below. There find Image banner and click "Add" to add this section.
4. Once you have added the image banner, it will take you to Image banner section settings. We'll cover that in detail in the section below.
Image banner section settings
The image banner section settings has many options to customize this to your brand and liking. Let's go through the various options
Text details
Here, you can add and edit the top text, heading text, and sub-header text. You can leave these empty as you prefer if there is no text you want to add
Buttons details
In this setting, you can add, edit, or remove buttons that are part of the Image banner section. These buttons can lead to a collection page, a blog page, a specific social media, etc - you can decide what you want to link to the call action. We recommend keeping it to 1-2 buttons to avoid too many calls of action in this section, but you can add more as it depends on your preference and how you are planning to use it!
For each button, you have the settings to edit the button text, the link/URL you want the button to lead to, and the icon you want to show next to the text, if any. The button's color is based on your site color & appearance settings—it uses the primary color; however, you can choose section-specific colors in the advanced settings (more details here).
Background details
Here you can add/remove the image that you want to use for your Image banner section background. The banner image aspect ratio should be 3:1 (width:height) and we recommend a 1029x731 px image.
In this setting, you can also add an overlay effect to the image and select what color this overlay is, the opacity for the overlay, and the background blend mode.
Colors & appearance details
Within the colors & appearance settings, you can edit things like the section width (original image size or full-width), section and header size, alignment of the text and button of the image banner section, and the text color for each of the text options in the section.
Advance settings
The advanced settings allow you to customize this specific section further by adding custom CSS code or customizing colors for the Image banner section. The code you add or colors you select here, will only impact this section and not your general site.
Adjusting the section
You also have the option to "move," "hide," or "delete" the Image banner section from your layout.
-
To move, click and hold down to drag the section to your desired location
-
To hide, hover over the section and click on the eyeball
-
To delete, click into the section and click on "delete section" at the bottom left
Adding an Image Section
Image section settings
The image section setting has various options for you to customize to your liking. Let's go through the various options
Image setting
The image setting is where you add or remove the image you want to use for the Image section. You can also add an image link with a URL where you want the image to direct users when they click the image. This can be a product page, a promotional page, or any relevant link.
Appearance and advanced setting
You can adjust the Image Section settings to fit your design:
- Make Section Full Width: Expands the image to fit the entire width of the page.
- Top & Bottom Padding: Adjusts spacing around the image to control its placement and balance.
- Custom CSS Code: Allows you to apply additional styling for advanced customization. (only impacts this section)
- Customize Section Colors: Change the background colors associated with the image section. (only impacts this section)