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.
.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
.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.
.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.
#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.
/* 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:
.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: DEMO
