Monday , July 22 2019
Home / Uncategorized / How to add creative background designs to the bottom bar of Divi

How to add creative background designs to the bottom bar of Divi



The bottom bar of Divi's feet is a small but significant piece of your website. And with some page layouts, you may need to add a creative finishing touch to that bar at the bottom.

In this tutorial, I'll show you how to add custom background designs for the Divi bottom bar. By eliminating the default background color of the foot bottom bar and adding a custom margin to a section, you can take advantage of the design settings of a section to create fantastic background designs.

Let's begin.

A peek

Here is a preview of some design examples that you can create with this tutorial.

bottom bottom bar

Customize the bottom bar of the pedestal in the theme Customizer

Before we can add custom backgrounds behind our bottom bar, we have to delete the default background color used.

Go to the theme customizer and go to Footer> Bottom Bar. Then change the background color to be completely transparent.

bottom bottom bar

You may not notice much of a change in the preview because there is still a background color of the footer sitting behind the bottom bar. The background color of the footer can be changed to Footer> Layout, but it is advisable to leave the background color active as fallback. The custom background will be added to the bottom bar using a section on a page-by-page basis. So having this background will ensure that the background bar has a background on pages that do not have the custom background in place.

You can also change the text color of the bottom bar and the color of the blank social icon if you plan to have a darker background. This will ensure that the content is more readable.

bottom bottom bar

Creating the background drawing of the section for the lower bar

Now that the bottom footer bar has a transparent background, we are ready to design the background of our section and place it behind the bar.

If you have not already done so, create a new page and choose "Create from scratch". Then enter a single-column layout for the section row.

bottom bottom bar

There is no need to add a form to the row since we will only need the section and the row for the background drawings.

Next, go to the row settings and add a spacing as follows:

Custom margin: 0px at the top, 0px at the bottom
Custom padding (desktop): 80px at the top, 80px at the bottom
Custom padding (tablet): 100px at the top, 100px at the bottom

bottom bottom bar

This spacing is necessary to give a little height to our section, preserving the space required for the section dividers that we will add for our background design.

Now go to the section settings and update the spacing as follows:

Custom margin (desktop): -55px lower
Custom margin (tablet): -94px at the bottom
Custom filling: 0px at the top, 0px at the bottom

bottom bottom bar

The bottom margin of -55px drags the bottom bar in the section area so that any design added to our section is positioned behind the bottom bar. The bottom bar by default is 54px in height on the desktop and about 94px in height on tablets, which is why you need a larger negative margin for the tablet.

Eliminating the upper and lower padding maximizes the space required for the section divider that we will add later.

Adding the lower divider

Next, add a divider at the bottom of the section to frame the footer content as follows:

Bottom Divider Style: see screenshot
Color divider: # 121212
Divider height: 120px (desktop), 150px (tablet), 150px (smartphone)
Horizontal repetition divider: 0.9x (desktop), 0.5x (tablet), 0.5x (smartphone)
Flip Divider: vertical

bottom bottom bar

At the moment, the contents of the lower bar (text and social icons) are hidden behind the divider, even if the divider's arrangement is set below the contents of the section. This is because the bottom footer is not technically part of the content of the section. To solve this problem, we must add a custom z-index to our section so that it is behind the lower footer.

In the Advanced tab, add the following custom CSS snippet to the parent:




z-index: 0;

bottom bottom bar

Now the content of your bottom bar is located above your section and you have a nice background design that frames your bottom bar.

bottom bottom bar

And it will also adapt to the mobile phone.

bottom bottom bar

With this basic structure in place you have a nice section design on which to build. With this in mind, go ahead and save this section in your library so that you can use this structure as a starting point to explore projects now.

bottom bottom bar

Now you are ready to explore new projects. You can change the bottom divider in different styles and colors to create countless background frame designs. It may be necessary to add the divider height and the horizontal repetition values ​​according to the style of the chosen divider.

Here are some examples.

bottom bottom bar

bottom bottom bar

Using the upper divider with a custom background gradient

The use of a single lower divider as the design of the background frame for the lower leg is rather limiting. But if you use an upper divider as a frame design, you can use a custom background gradient for the section. This will open new doors to explore.

Go to the section settings and set the style of the lower divider to none. Then add a background gradient to the background of the section.

bottom bottom bar

Now you can add a dividing style that is superior to your section to create a new look.

bottom bottom bar

Here are some examples of possible designs simply by changing the gradient background and the divider style.

bottom bottom bar

bottom bottom bar

Combination of dividers with background shading for a multicolored frame

Now it's time to raise it a notch. Remember, there are many possibilities to create unique background designs within sections and rows. So, for this last example, I'm going to show you how to combine these features to create a completely unique design.

To start this project, go ahead and use the section you saved in your library by clicking to add a new section in the visual builder, selecting the addition from the library tab and choosing the section layout.

Once the section has been added to the page, we are ready to customize.

For beginners, go to the section settings and update the following:

Background gradient color on the left: # 29c4a9
Background gradient color on the left: # 2b87da

Gradient direction: 90 °
Initial position: 50%
Final position: 0%

bottom bottom bar

Now add an upper divider as follows:

Top Divider Style: see screenshots
Color divider: #ffffff
Divider height: 120px (desktop), 150px (tablet), 150px (smartphone)
Horizontal repetition divider: 0.9x (desktop), 0.5x (tablet), 0.5x (smartphone)
Flip Divider: vertical

These divider settings completely reflect the lower divider so that it creates a border around the lower divider. Since the divider itself is white, this leaves the impression that the background gradient is an extension of the lower separator.

bottom bottom bar

Now go to the row settings and add a background gradient as follows:

Background gradient background color: # df52ff
Background gradient color on the left: # 2b87da

Gradient direction: 90 °
Initial position: 50%
Final position: 0%

bottom bottom bar

To equalize the width of each color segment for the background, give the line a custom width of 50%.

bottom bottom bar

Here is the final design!

bottom bottom bar

bottom bottom bar

Final thoughts

Having a custom background design for the bottom foot bar of Divi can be a refreshing addition to your page. Just a few customizations for a section at the bottom of the page. Unfortunately, the design is limited to a single page and can not be applied throughout the site. This is why the background color of the footer is used as a fallback. But once you save the section in your library, you can easily insert it on any desired page. You can even add to any of our premade layouts for use in your next project. All you need to do is make sure to add the section at the end of the page. I hope you find it useful!

In addition, you may be interested in framing your navigation menu using a similar technique.

I can not wait to hear from you in the comments.

Greetings!




Source link

Leave a Reply

Your email address will not be published.