The Divi Booster WordPress Plugin

If you have already installed and activated the Divi theme By Elegant Themes you will want to head over to the Divi Booster Plugin Website and grab yourself a copy. This plugin has many options built in to make customising many Divi elements very easy and extend the customisations offered by Divi theme alone. Customisations like replacing footer attribute text, css bug fixes, improved modules like the pricing table and the blog page, add custom css fields, and a whole lot more. With an easy to use interface code is still not required to make all the extra changes you need to the Divi theme. If you have any other advice or code snippets of your own for Divi don’t forget to comment below.

Disclaimer: Most resources we recommend are free. However our website can contain affiliate links to third party sites for which we receive commissions. These commissions go to make web design bird more awesome and keep our resources and tutorials totally free. We ONLY recommend products that we rate highly and have personally tried and tested thoroughly.

Animated Scroll Down Indicator On Full Width Header

How To Create An Animated Scroll Down Indicator

Using the Divi theme by Elegant Theme’s allows you to easily create full with headers that look great on a website. These full width headers fill up the width and viewport height to display a full screen advertisement, contact details, images, videos or sliders. However using a full screen element as a landing page may confuse some people, not realising that there is more to read scrolling down the page. Divi, and others, try and combat this with a scroll down indicator, usually an arrow. Using the full width header options within the Divi page builder allows you to select your scroll down indicator icon, and the size, very easily.

I personally like scroll down icon indicators on full page landing displays as they help visitors realise there’s more to see, but I find an icon on it’s own doesn’t really portray scrolling down, and most do not even realise the indicator doubles up as a link to see further down the page. Hover effects will only help links be plainly visible when being viewed on laptops and tablets, hover your mouse and you see it’s clickable by the changing hover effect. However visitors using mobiles and tablets will not see any hover effects on links until pressed, so these need to become even more visible without hover.

I find animating this button helps enormously with notifying people that your site has more to offer. For an example of an animated scroll down indicator in action, where better to look than here – the greatest website on earth (in our opinion anyway). Notice on the homepage of the site the arrow bounces to clearly show there is more content as you scroll down the page.

If you too are using the Divi theme by Elegant Themes for WordPress the code below will help show your customers that the header is only the beginning of the page.

.scroll-down {
-webkit-animation: bounce 2s infinite;animation: bounce 2s infinite;}

/* Scroll down indicator (bouncing) */
@-webkit-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0); }
40% {
-webkit-transform: translateY(-30px); }
60% {
-webkit-transform: translateY(-15px); } }
@-moz-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-moz-transform: translateY(0); }
40% {
-moz-transform: translateY(-30px); }
60% {
-moz-transform: translateY(-15px); } }
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0); }
40% {
-webkit-transform: translateY(-30px);
-moz-transform: translateY(-30px);
-ms-transform: translateY(-30px);
-o-transform: translateY(-30px);
transform: translateY(-30px); }
60% {
-webkit-transform: translateY(-15px);
-moz-transform: translateY(-15px);
-ms-transform: translateY(-15px);
-o-transform: translateY(-15px);
transform: translateY(-15px); } }

Extra Tips: I found my scroll down indicator was overlapping elements within my header making buttons unclickable in overlapping areas, or even covering up my scroll down indicator completely, mainly using mobile phones in portrait mode. I was using in my header a logo, a tagline, 2 buttons and now a scroll down indicator so the header was pretty full. Trying to fit these on every sized screen needed some work. This was even before I animated it. To conquer this I adjusted the size of my header elements to be smaller, and also added this code below to help the scroll down indictor be seen on portrait mobile phone views.

@media all and (max-width: 980px) {
.et_pb_fullwidth_header .et_pb_fullwidth_header_container.center .header-content {padding-top: 0 !important; min-height: 49vh !important;}
.et_pb_fullwidth_header_0.et_pb_fullwidth_header .header-content h1 {font-size: 12px !important;}
.et_pb_fullwidth_header .et_pb_fullwidth_header_container .header-content a.et_pb_button {margin-top: 8px !important;}
}

@media all and (max-width: 590px) {
.et_pb_fullwidth_header .et_pb_fullwidth_header_container .et_pb_button_one, .et_pb_fullwidth_header .et_pb_fullwidth_header_container .et_pb_button_two {margin-right:40px; margin-left:40px}
}

@media all and (max-width: 420px) {
.et_pb_fullwidth_header .et_pb_fullwidth_header_container .et_pb_button_one, .et_pb_fullwidth_header .et_pb_fullwidth_header_container .et_pb_button_two {margin-right:5px; margin-left:5px}
}

Decrease Size of Submenu To See All Menu Items (Useful For Tablets)

Decrease Size of Submenu To See All Menu Items

The menu options on Divi are quite limited. Some layout changes, changing colour, font and some size elements are the only customisations offered. You may find that if you have a lot of submenu links, these take up a lot of vertical space and sometimes go beyond the bottom of the screen becoming invisible until you scroll down. If you are using a fixed or sticky menu for your site this can also have other ramifications. Once the width of the browser/device reaches a lower amount (usually 980px width) a sticky menu in Divi becomes static at the top of the page. This will allow the user to scroll down a big submenu and see these hidden submenu items below “the fold”. If the navigation menu did not change to static at this width, a long list of submenu items will be permanently invisible if they stretch over the bottom of the page, and will not allow the user to scroll down to see them.

What Divi, and many others, haven’t taken into account is most people who use tablet devices to browse the web primarily use landscape view. On more upmarket tablets the width of these devices then becomes over the tipping point of 980px. When this happens the sticky menu remains a sticky menu, and any submenu items appearing beyond the bottom of the screen stay hidden from the user and are never seen, even when scrolling, as the menu scrolls down with you. Even wide screen laptops can have this issue if a site has many submenu items. The user can rotate their tablet to portrait view to combat this but that is not known by the general public.

You can combat this by entering the mobile menu at a wider tipping point. This adopts the “mobile first” design policy used by the better web designers today. If you are like me however and do not like to see a “mobile menu” on desktops this can be hard to rectify. The easiest solution is to decrease the size and padding of the submenu items so they can easily fit on those mobile devices which are quite wide, still ensuring these are large enough to click with people width stumpy fingers. Be careful not to decrease padding to small or it will be hard to click.

#top-menu li li a {
font-size: 12px;
padding: 3px 10px;
}

.nav li ul {padding: 10px 0;}