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!
In only 5 steps, we will change the landing page of the Web Freelancer Layout Pack to a dark one.
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.
Upload the Freelancer Web layout package
Among the three options that appear on the screen, choose to load a premade 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 ;.
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.
Extend the style to all sections
As soon as you add the background color, right-click and click on the "Extend background color" option.
Once done, choose to extend the background color to all sections of the page.
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.
Extend style to all modules
Then, extend this light text color by right clicking and selecting the "Extend text color" option.
Extend this new color to all modules in the entire page.
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.
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".
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.
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.
Extend the button style to all buttons on the whole page.
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".
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.
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.
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.
Use custom fill instead
However, you can keep the distance that was there before by adding the custom margin instead as a custom fill.
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.
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.
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".
We give a final look at the final result after performing the five steps.
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!