"A footer that appears on the scroll", I did not find anything better to name this superb effect that can be found in some WordPress sites. Some premium themes offer this option but not Divi.
How then to get a fixed footer that only appears when the mouse goes down to the bottom of the page? And this, on a site that was created with Divi ?
We'll see in this tutorial that it's super simple. Just add a little bit of CSS code to get this "footer-hidden" effect.
What does the base footer look like?
When you use the theme Divi, footer – footer – appears following the main content of the web page. That is, when the page scrolls, the footer follows. When I say "footer", I mean the bottom bar, the one where your credits are, but also the part where the widgets are placed..
In this video you can see what a "basic footer" looks like with the theme Divi:
What is a "footer that appears in the scroll"?
To make the difference, here's what will look like the footer of your Divi site after adding CSS rules you will find a little lower in this article.
If you look carefully, the footer is fixed behind the main content of your site. As a result, it looks like a curtain unveils your footer.
What CSS rules should be used?
In fact, to carry out this footer unveiling effect, we must use 4 specific CSS rules. It is good to understand them so that you can modify them as needed, according to your plans... rather than copy and paste the code and leave me a comment by telling me "I don't understand, it doesn't work".
Know that with CSS, everything works, there are no bugs like with Javascript for example. Just use the right properties and values and especially apply them to the right selectors.
Discover all you can do with the theme Divi
Rule 1: z-index
This property allows you to set the position of your layers, a bit like on Photoshop. So if you want an element to pass behind another element, you have to give a negative value (and vice versa). For more information on the z-indexI invite you to read this Article.
It is therefore this property which allows place the footer section in the background with "z-index: -1". The main content, however, will "z-index: 2".
Rule 2: fixed positiond
Next, the property Position will have the value Fixed. This allows the footer to be fixed so that it is frozen in the background (through the z-index). Read this Article to learn more about the "Location" property.
Rule #3: the box-shadow
This property allows to add a nice shade under the main content. As a result, it looks like it's a curtain that unveils the content of your footer. Without this property, you'd feel less like the footer is revealed. This Article, allows you to better understand the box-shadow.
Rule #4: the media queries
The media queries use to define specific CSS rules depending on the size of the screens. It's thanks to the media queries that one can make responsible websites. So this notion is very important because the footer appearing on the scroll will need a fit according to screen sizes.
To explain quickly, the Divi theme already embarks a style sheet.css. If we don't redefine rules, it's Divi's rules that are applied. So in our case of footer-hidden, we will need to redefine certain rules according to the size of the screens.
In the code I present below, I have defined 4 different sizes thanks to media queries. If you find which do not match what you are looking for, you will simply change the value of the property margin-bottom or even the values of media queries.
In the meantime, you can document you on this topic here.
The code for a footer to reveal WITHOUT widgets
If you use only the bottom bar of the footer – the one where the credits are – you won't need to take the lead, the following code should suffice:
/* css code if no widgets at footer */ #main-content { margin-bottom: 53px; z-index: 2; -webkit-box-shadow: 1px 1px 10px 1px black; -moz-box-shadow: 1px 1px 10px 1px black; box-shadow: 1px 1px 10px 1px black; #main-footer {width: 100%; position: fixedd; left: 0; bottom: 0; z-index: -1; }
The code for a footer to unveil WITH widgets
However, if you use widgets at footer, you will have to play with the values of margin-bottom and media queries so that the unveiling the footer be adaptable to screens = responsive.
The following code works in response, as shown in the above video (to be copied and pasted in its entirety):
/* CSS FOR A CODE WITH WIDGET IN ACCORDANCE WITH ECRAN RAILS */ /* for screens of 1200px minimum */ @media screen and (min-width: 1200px) { #main-content { margin-bottom: 350px; z-index: 2; -webkit-box-shadow: 1px 1px 10px 1px black; -moz-box-shadow: 1px 1px 10px 1px black; box-shadow: 1px 1px 10px 1px black; #main-footer {width: 100%; position: fixedd; left: 0; bottom: 0; z-index: -1; } } /* for screens between 1000 and 1199px */ @media screen and (min-width: 1000px) and (max-width: 1199px) { #main-content { margin-bottom: 300px; z-index: 2; -webkit-box-shadow: 1px 1px 10px 1px black; -moz-box-shadow: 1px 1px 10px 1px black; box-shadow: 1px 1px 10px 1px black; #main-footer {width: 100%; position: fixedd; left: 0; bottom: 0; z-index: -1; } } /* for screens between 900 and 999px */ @media screen and (min-width: 900px) and (max-width: 999px) { #main-content { margin-bottom: 500px; z-index: 2; -webkit-box-shadow: 1px 1px 10px 1px black; -moz-box-shadow: 1px 1px 10px 1px black; box-shadow: 1px 1px 10px 1px black; #main-footer {width: 100%; position: fixedd; left: 0; bottom: 0; z-index: -1; } } /* for screens between 800 and 899px */ @media screen and (min-width: 800px) and (max-width: 899px) { #main-content { margin-bottom: 450px; z-index: 2; -webkit-box-shadow: 1px 1px 10px 1px black; -moz-box-shadow: 1px 1px 10px 1px black; box-shadow: 1px 1px 10px 1px black; #main-footer {width: 100%; position: fixedd; left: 0; bottom: 0; z-index: -1; } }
Note that screen sizes that are not defined in the above code will behave in the "basic" way, that defined by Divi.
Attention also to the number of widgets used. If there are several per zone, The footer effect that appears in the scroll will only be relevant on large screens. You can then get rid of some media queries so that the footer works the basic way on small screens.
Here's what the footer appearing on the scroll If you do NOT use the media queries:
In this video, you see that the main content is always blocked at the same height (window level). This is not appropriate since the design does not fit according to the screens: on medium screen you see a white bar that you should not see and on smaller screen the widgets are "cut".
Where to insert the CSS code in Divi?
If you have never added CSS to your WordPress/Divi site, you can do so easily: there are various solutions that will be the subject of a next article... Meanwhile, you can add the CSS to the tab Appearance > Customize > Additional CSS.
In conclusion...
Divi is so easy to change! In just a few clicks, you can stand out from other sites created with Divi. On Astuces Divithere are already several tutorials that have been published on Divi's footer And others will come...
9 Comments