Recently while working on a theme, I started thinking how we could make it easier to tell our site visitor which actions we wanted them to take and how we could highlight the important information they might be searching for.
Personally, I’ve always loved the way Divi and most website headers are fixed as you scroll so my idea is creating a fixed section that will stick to the bottom of your screen as you scroll through the page.
Step one editing our section:
So firstly we are going to setup our call to action section so that it is fixed to the bottom of our page all the time as we scroll.
You can place this section anywhere on the page just be sure to give it the CSS class cta-sec and add the following CSS to your stylesheet or Divi custom CSS section.
CSS Snippet
.cta-sec.et_pb_section {
position: fixed!important;
bottom: 0px!important;
z-index:99!important;
width: 100%;
padding-top:0px;
padding-bottom:0px;
}
step two editing our row:
now that you’ve fixed your call to action to the bottom of the page we focus on the row a bit.
First we want to make the row fullwidth.
Secondly, we want to change the gutter width to 2.
finally, we will add a line of CSS for our row to be a little bit slimmer
CSS Snippet
.cta-sec .et_pb_row {
padding-top:10px;
padding-bottom:10px;
}adding our call to actions:
Now that we’ve got most of our call to actions section is done it time to actually put some call to actions into the sections depending on how many columns layout you selected, insert the Divi button module into each one and link it the important section of your website.
You can style the button through the module settings but for our demo purpose, we used the following the CSS code.
CSS Snippet
.cta-sec .et_pb_button{
width:100%;
background:#fff;
color:#000!important;
border-top: 0px;
border-left:0px;
border-right:0px;
border-bottom:5px solid #c5c5c5;
}
.cta-sec .et_pb_button:hover {
background:#fff;
border-bottom:5px solid #fff;
}
Make sure you are not hiding the footer:
Because we’ve fixed our section to the bottom of the page it is going to hide our copyrights and social media links, so we will add the following CSS to make the footer be on top of our section when we get to the bottom of the page.
CSS Snippet
#main-footer{
margin-bottom:70px;
}Making sure it play nicely on all screens:
We will need to make sure this section looks good on all screen size but personally, I would consider not displaying it mobile devices, you can hide this section from the section settings otherwise we recommend unfixing the section on mobile, here are responsive CSS.
CSS Snippet
/* landscape Tablets */
@media ( min-width: 981px ) and ( max-width: 1099px ) {
.cta-sec.et_pb_section {
width: 100%;
padding-top:0px!important;
padding-bottom:0px;
}
.cta-sec .et_pb_row {
padding-top:10px;
padding-bottom:10px;
}
.cta-sec .et_pb_column{
width:31%!important;
padding-left:1%!important;
}
}
/* Portrait Tablets*/
@media ( min-width: 768px ) and ( max-width: 980px ) {
.cta-sec.et_pb_section {
width: 100%;
padding-top:0px!important;
padding-bottom:0px;
}
.cta-sec .et_pb_row {
padding-top:10px;
padding-bottom:10px;
}
.cta-sec .et_pb_column{
width:32%!important;
padding-left:1%;
margin-bottom:0px;
}
}
/* Landscape Phones */
@media ( min-width: 480px ) and ( max-width: 767px ) {
.cta-sec.et_pb_section {
position:relative!important;
}
#main-footer{
margin-bottom:0px!important;
}
}
/* Portrait Phones */
@media ( max-width: 479px ) {
.cta-sec.et_pb_section {
position:relative!important;
}
#main-footer{
margin-bottom:0px!important;
}
}here is all the CSS:
CSS Snippet
.cta-sec.et_pb_section {
position: fixed!important;
bottom: 0px!important;
z-index:99!important;
width: 100%;
padding-top:0px;
padding-bottom:0px;
}
.cta-sec .et_pb_row {
padding-top:10px;
padding-bottom:10px;
}
.cta-sec .et_pb_button {
width: 100%;
background:#fff;
color:#000!important;
border-top: 0px;
border-left:0px;
border-right:0px;
border-bottom:5px solid #c5c5c5;
}
.cta-sec .et_pb_button:hover {
background:#fff;
border-bottom:5px solid #fff;
}
#main-footer{
margin-bottom:70px;
}
/* landscape Tablets */
@media ( min-width: 981px ) and ( max-width: 1099px ) {
.cta-sec.et_pb_section {
width: 100%;
padding-top:0px!important;
padding-bottom:0px;
}
.cta-sec .et_pb_row {
padding-top:10px;
padding-bottom:10px;
}
.cta-sec .et_pb_column{
width:31%!important;
padding-left:1%!important;
}
}
/* Portrait Tablets*/
@media ( min-width: 768px ) and ( max-width: 980px ) {
.cta-sec.et_pb_section {
width: 100%;
padding-top:0px!important;
padding-bottom:0px;
}
.cta-sec .et_pb_row {
padding-top:10px;
padding-bottom:10px;
}
.cta-sec .et_pb_column{
width:32%!important;
padding-left:1%;
margin-bottom:0px;
}
}
/* Landscape Phones */
@media ( min-width: 480px ) and ( max-width: 767px ) {
.cta-sec.et_pb_section {
position:relative!important;
}
#main-footer{
margin-bottom:0px!important;
}
}
/* Portrait Phones */
@media ( max-width: 479px ) {
.cta-sec.et_pb_section {
position:relative!important;
}
#main-footer{
margin-bottom:0px!important;
}
}I think this idea is a great way to help visitors to our site find the most important part of your website and to take the action you like them to take. you can see the demo here:
Glad to see you’re writing tutorials again! Love this one, and I’m def. saving to my “divi stuff” Evernote folder 😉
Glad you like it Corey, I really loved this idea which is why I couldn’t wait to share with the community. Will definitely be posting a lot more often 🙂
Nice! Exactly what I’m looking for!
Thanks for sharing James!
Glad you like it, would love to see what you do with the idea 🙂
Cool stuff… I have a problem with this when the Divi setting “boxed layout” is activated though – then the sticky footer aligns too much to the right… any ideas on how to fix that?
Thanks for putting this out there James! 🙂