Edit the background design for content elements

By changing the background design/colour for content elements, you can for example integrate your brand colours and tailor your shop to match your corporate identity. If you only edit the background design of individual content elements, these elements are highlighted and bring variety to your shop layout.

How to edit the background design

Once you've added a content element to a page, you can edit its background design. All changes will be directly shown in the preview area of the Editor.

1. Select the content element or hover over it. You'll see a blue bar at the top of the content element.
2. In the blue bar, select .
3. Select your desired option:
   • Single-color background
     Select the colour square to pick your background colour.
   • Gradient background
     Make the desired settings for a colour gradient background. For further information, refer to Use colour gradients as backgrounds.

4. 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.

5. If you want to restore the default background colour for this content element, select the Reset link.

   Note that this will restore the default colour of your theme, not the colour you selected earlier (if you have already done so). If you want to keep the colour that was selected when you started editing, you must cancel the process by selecting Cancel.
6. 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 will be directly applied to your shop.

How to pick a colour

Select your desired colour from the colour palette . You can also select one one of the predefined colours . These always include the basic colours black and white. Furthermore, you can find the currently selected shop colours here. To pick an exact colour shade, you can also enter a hex colour code in the input field .

By selecting the Reset link, you will restore the default colour of your theme, not the colour you selected earlier (if you have already done so).

You can immediately see how your changes will look like in your shop preview in the background.

If you want to use a specific colour for your shop, you can use a colour picker to identify the corresponding hex code. This way you can quickly select the exact shade. Colour pickers are available for free on various websites and as extensions for the most popular browsers.

Tips for the background design

The background settings offer many possibilities, but using them to create an appealing design can also be a challenge.

To help you with designing your shop, we have put together some tips for you:

• If you have selected a full-width theme, the background design will also be displayed across the entire page. If the theme is not full-width, the background design will not be displayed across the entire page. This ensures a harmonious and consistent design in your shop.

  Full-width design	Not a full-width design

• Your selected background colours are retained when you change the theme. If you have selected one of the theme colours from the previous theme as a background colour, this colour will be retained and not automatically adapted to the newly selected theme. When you select a different theme, check your settings to ensure that your shop looks nice and consistent.
• It is recommended to use colours that match your brand/company and that your customers are used to. This ensures a uniform and professional design.
• Try to use colours from the same colour family. Too many different colours in your shop could be distracting for your customers.
• Sometimes less is more. When it comes to the background design of content elements that present your product range, you should opt for light background colours so that potential customers can focus on your products.
• Keep a high contrast between the background colour and other elements such as text and buttons to ensure good readability.