Saturday , July 20 2019
Home / Uncategorized / How to move to a dark layout in 5 steps using the efficiency features of Divi

How to move to a dark layout in 5 steps using the efficiency features of Divi



When designing a website, one of the first decisions that you consciously or unconsciously make is the color style you want to assign to your website. The brave among us would have the courage to opt for a full vibrant color palette but, let's be honest, it's incredibly difficult to make. That's why it's usually safer to go with a clear or dark layout. In the Premade Layout section of the Divi Library, you can find lots of light and dark layouts that you're free to use when building any type of website. But what if you like the layout, but would you rather have a darker color palette or vice versa?

With the efficiency features of Divi, switching from a lightweight to a dark and vice-versa layout package is easier than ever. In this post, we'll show you how to turn a clear layout into a dark one in just 5 steps. The amount of time it takes to make this transition is crazy if you use the right techniques. Know that the number of steps you need to take will always depend on the layout you are working on, but once you get the general approach, you will be able to make it work for any layout you are dealing with.

We're going now!

Preview

In only 5 steps, we will change the landing page of the Web Freelancer Layout Pack to a dark one.

dark layout

Upload to Freelancer Web landing page

Add a new page and activate Visual Builder

Start by adding a new page, giving your page a title and switching to Visual Builder.

dark layout

Upload the Freelancer Web layout package

Among the three options that appear on the screen, choose to load a premade layout.

dark layout

Find the landing page of the Freelancer Web layout package in the list of free layout packages and upload it by clicking the green button that says & # 39; Use this layout & # 39 ;.

dark layout

Step 1: Change the general background color

Change the Background color section of the first section

It's time to start! The first step we suggest you do is change the background color of all the sections on your page. Once you do that, you'll be able to quickly notice which design elements need to be modified to fit the dark background color. Open the first section of the page and choose & # 39; # 0c0c0c & # 39; as the background color of the section.

dark layout

Extend the style to all sections

As soon as you add the background color, right-click and click on the "Extend background color" option.

dark layout

Once done, choose to extend the background color to all sections of the page.

dark layout

Step 2: Change the colors of the text

Open the Fullwidth header form and change the color of the text

The next step you need to take is to change the colors of the text you are using. As you may or may not know, there is a default option in Divi that allows you to choose a light or dark color palette for the text on your page. Once you've chosen a custom color, however, this option is replaced with the custom color you've chosen. Instead of checking each of the items to see if there is a custom color, go ahead and choose "Light" as the text color in the Fullwidth header form.

dark layout

Extend style to all modules

Then, extend this light text color by right clicking and selecting the "Extend text color" option.

dark layout

Extend this new color to all modules in the entire page.

dark layout

Change custom colors using the multi-select function

As mentioned above, the previous step does not apply to colors that have been chosen in advance. Switching modules, for example, have a custom title text color. Instead of individually changing each of the buttons, select them all at once using the control / command key on the keyboard and clicking on each of the modules individually. Once you have all selected, click on the settings icon.

dark layout

Now you can apply the changes to each of the selected modules at the same time. In this case, we are changing the color of the title text in "# 848484".

dark layout

Step 3: Change the buttons

Open the One button Settings of the full width header

It is important to make sure that the invitations to action on your page continue to match the color palette of the layout. In this case, we have a Button module that looks perfect with both a clear and a dark layout. That's why we will also extend it to the other buttons on the page. Go ahead and open the Fullwidth header form and go to Button One settings.

dark layout

Extend the button style to all the buttons on the page

Then, right-click on the Button One settings and select the "Extend button one style" option.

dark layout

Extend the button style to all buttons on the whole page.

dark layout

Change the 2 Text Color button in the Hero section

The extension function does not reach the second button on the Fullwidth header form because it is not a stand-alone module. That's why we'll open the Button Two settings and change the text color to "#ffffff".

dark layout

Extend styles to all Fullwidth headers on the page

To make sure that this text color is applied to all Fullwidth header forms on the page, we will also extend it.

dark layout

After right clicking on the text color and selecting the "Extend button with two text colors" option, proceed and apply it to all Fullwidth headers throughout the page.

dark layout

Step 4: Remove the custom margin and replace with the custom fill

Remove the custom margin

When switching to a dark layout, it is also important to remove all custom margin values ​​that bring whitespace to your page.

dark layout

Use custom fill instead

However, you can keep the distance that was there before by adding the custom margin instead as a custom fill.

dark layout

Step 5: Search and change the special design settings

Determines special design settings

The last step you need to perform is very specific for each of the layouts. Even the design elements that are unique to a layout must be modified. This may include, but is not limited to, some of the following settings:

  • Box Shadows
  • Column backgrounds
  • Colors icon
  • Divider colors

Use Find & Replace in the shadow color of the row box

For this particular layout, one of the things we'll have to change is the color of the shadow of the row box that is used. Open the row settings and right-click on the shadow of the box without changing it. Then, select the & # 39; Find and replace & # 39; option.

dark layout

Using the Find and Replace feature is the best way to go if you want to change a specific color code on the whole page. You can easily replace it with another color code, in this case & # 39; # 33302f & # 39 ;. This will ensure that you do not have to explore all the design elements to see exactly where a color was used.

dark layout

Manually change the occasional settings

There are, however, occasional recurring design settings within layouts. To change them, you will have to do it manually. The line in the print screen below, for example, has a shadow color of the box that has not been used elsewhere on the page. That's why we're editing it manually in "# 33302f".

dark layout

Preview

We give a final look at the final result after performing the five steps.

dark layout

Final thoughts

In this post, we showed you how to turn a lightweight layout package into a dark one in just 5 steps. The number of steps to perform will always depend on the layout you are working on, but overall the approach remains the same. If you have any questions or suggestions, please let us know in the comments section below!


Source link

Leave a Reply

Your email address will not be published.