You can change the background design or color of content elements to integrate your brand colors and adapt your website to your corporate identity. If you edit the background design of individual content elements only, those elements will be highlighted and add visual variety to your website layout.
Topic overview:
How to edit the background design
Once you've added a content element to a page, you can edit its background design.
- Select the content element or hover over it. A blue bar appears at the top of the content element.
- Select
.
- Select one of the following options:
-
Single-color background:
Select the color square to choose your background color. -
Gradient background:
Make the desired settings for a color-gradient background. For further information, refer to Use color gradients as backgrounds. -
Background image:
Drag an image onto the field or select Add image to upload one. Set the image alignment by selecting either the top, the bottom
, or the middle
as the center of the image. Use the Color overlay opacity slider to add a black overlay. Depending on the color of the elements on the image, an overlay with a higher opacity can improve accessibility and readability.
-
Single-color background:
-
Under Background width, decide whether the background should adjust to the width of the page content or span the full width of the page.
Info
Depending on the selected theme, some designs include whitespace on the left and right of the content, while others span the full width. With this option, you can choose whether the background design should follow or deviate from the theme’s default width.
-
If you want to restore the default background color for this content element, select Reset.
Note
The Reset option restores the default color of your theme, not the color you previously selected. If you want to keep the color that was active before editing, select Cancel instead of saving the changes.
- Select Save.
You have edited the background design. To change the background design for other content elements or to edit a background design again, repeat the steps above. Your changes are applied directly to your website.
How to pick a color
Select your desired color from the color palette . You can also select one of the predefined colors
. These options always include the basic colors black and white. You can also find your currently selected shop colors in this area. If you want to pick an exact color shade, enter a hex color code in the input field
.
By selecting Reset, you restore the default color of your theme, not the color you previously selected. If you want to keep the color that was active before editing, select Cancel instead of saving the changes.
You can immediately see how your changes appear in the shop preview in the background.
Note
If you want to use a specific color for your shop, you can use a color picker to identify the corresponding hex code. This allows you to select the exact shade quickly. Color pickers are available for free on various websites and as browser extensions.
Tips for the background design
The following tips can help you achieve a cohesive and professional look for your website.
-
If you have selected a full-width theme, the background design spans the entire page. If the theme is not full-width, the background design is limited to the content area. This ensures a consistent layout that matches the theme’s structure.
Full-width design Not a full-width design - Your selected background colors are retained when you change the theme. If you choose a theme color from a previous theme as a background color, that color is kept and not automatically adapted when you switch to a new theme. After selecting a different theme, review your background settings to make sure your website continues to look consistent.
- Use colors that match your brand or company identity and that your visitors recognize. This helps create a uniform and trustworthy appearance.
- Try to use colors from the same color family. Using too many unrelated colors can distract visitors from the important content in your website.
- For content elements that present your product range, lighter background colors often work best. They keep the focus on your products rather than the design elements.
- Maintain high contrast between the background color and other elements such as text and buttons to ensure good readability and accessibility.