Design customize

Under Customize > Design customize you can customize the appearance of pages such as content width, padding, colors, background image, and preloader.

Theme Dark Mode

Dark mode settings can be enabled in Customize > Design customize > Theme Dark Mode.

Enable Dark Theme allows you to switch the site to dark colors. 

Menu Theme Switcher adds the switcher icon to the primary menu:

 

Pages Content Width

Pages Content Width settings are located under Customize > Design customize > Pages Content Width.

Here you can customize the width of the content, making it full width or boxed with your custom value.

Sections padding

Customize > Design customize > Sections padding allows you to change the distance between sections.

There are 4 options:

The default padding is Medium.

Colors

Customize > Design customize > Colors menu allows customizing the general colors of the site.

You can either enter a hexadecimal number (e.g. d33131) representing the color or choose from the color picker by clicking the desired color on the palette.

Let's review every option in detail.

Background Color

The background color option allows you to set up the default background color for all pages build with WP Bakery or Elementor.

An example of the primary accent color items you can see below.

Primary Accent Color

The Primary Accent Color option allows to set up the color for the general notification icon and the main parts of the site. Generally, it will replace almost all the orange elements of the theme.

An example of the primary accent color items you can see below.

Secondary Accent Color

The secondary Accent Color option allows to set up the color for message notification icons and the second main parts of the site. Generally, it will replace almost all the blue elements of the theme.

For an example of the primary accent color items, you can see below.

Third Accent Color

The third Accent Color option allows to set up the color for friends requests notification icons and the third main part of the site. Generally, it will replace almost all the purple elements of the theme.

An example of the primary accent color items you can see below.

Post-Thumbnail Background Color

Post-Thumbnail Background Color allows to set up the background color for the post's description on the general blog page. 

An example of the primary accent color items you can see below.

Icons Color

Icons Color allows to set up custom colors for all the Olympus icons, including Lef Menu Panel icons.

An example of the primary accent color items you can see below.

Background Image

Customize > Design customize > Background Image

The background image section allows selecting an optional background image to use instead of the background image for all pages, built with WP Bakery or Elementor.

To set up the background image, you need to follow the next steps:

  1. Click on the select image button to upload the image.
  2. Below the image, you will also be able to see the background image options. Under preset, you can select how you want the background image to be displayed: fill the screen, fit screen, repeat, or custom.
  3. You can also select background image position by clicking on the arrows below, it allows the image to be positioned Left, Center, or Right. Clicking on the center will align the image to the center of the screen. 
The changes will be applied to the whole site, but easily can be changed for the individual page in internal page settings.

Preloader

You can enable or disable the preloader via Customize > Design customize > Preloader.

Essentially, the preloader is what you see on the screen while the rest of the page's content is still loading. Usually, the preloader is an image or complex animation that is used to keep visitors entertained while server operations finish processing.