Wix Editor: Customizing Your Site's Theme and Design

4 min read
With just two panels in the editor, you can change your entire site's look, feel, and aesthetic. 
Use the Site Design panel to choose your color and text theme, and change your page backgrounds and transitions. You can then add themed elements from the Add Elements panel to reinforce your site's look throughout.
In this article, learn more about:
The site design panel open in a Wix site Editor.

Choosing your site's theme

Your site theme includes all the colors and text styles on your site. There are a variety of suggested styles to choose from, and you can click through them to see how your site changes with each one. 
After picking a theme you like, you can then customize the text and colors to further personalize it to your needs. 

To choose and customize a site theme:

  1. Go to your editor.
  2. Click Site Design  on the left side of the editor.
  3. Click Change Theme.
  4. Select a theme from the list. 
  5. (Optional) Customize the theme's fonts and colors: 
    • Colors: Choose the colors and palette that are featured and displayed across your site. 
    • Text: Choose the text theme and customize the styles for the different types of text (such as headings and paragraphs) that are used across your site. 
A screenshot showing the cursor selecting a different site theme from the panel.

Adding themed elements

Add themed elements to ensure your site's design is consistent throughout. These elements have been handpicked for you, as they match your chosen color and text styles. 
Since themed elements are tied in to your site's theme, they automatically update if you choose a new theme from the Site Design panel.

To add themed elements to your site:

  1. Go to your editor.
  2. Click Add Elements  on the left side of the editor.
  3. Click the themed section (e.g. "Themed Text").
  4. Click an element to add it, or drag it to the relevant location.
The text tab in the Add Elements panel. The themed text subheading is highlighted.
Note:
Not all elements in the Add Elements panel contain themed versions.

Setting your page background

From the Site Design panel, you can change the background of the page you are on in the editor. Choose between a color, image or video background and adjust it to suit your design needs.

To choose your page background:

  1. Go to your editor.
  2. Click Site Design  on the left side of the editor.
  3. Click Page Background
  4. Select the background type you want for your page:
    • Color background: Select a color from your site colors, or add a new one to your page background. 
    • Image background: Choose from a range of free and priced stock images to add to your page background, or upload your own. 
    • Video background: Choose from a variety of high-quality stock footage to set as your page background, or upload your own video for that personal touch. 
Screenshot showing a color being selected as a page background from the panel.
Tip:
Set a background for multiple pages on your site by clicking Apply to Other Pages at the bottom.

Applying page transition effects

Choose how your pages transition when your site visitors navigate between them. This can create a fun and lively navigation experience for your visitors, which encourages them to keep exploring. 

To apply a transition effect to pages:

  1. Go to your editor.
  2. Click Site Design  on the left side of the editor.
  3. Click Page Transitions.
  4. Select a transition for your pages from the available options
Gif showing the horizontal page transition between the home and contact page.

Did this help?

|