Today in this article, we are going to create a similar SendGrid homepage’s layout using AIO Extended Module and spice things up a little. What we are going to do is:
- Create 2 rows and the first row is the title with two buttons.
- The 2nd row will have 2 columns with background images.
We will not be going through the default Divi settings such as Font Family, Font Size, Line Height, Button styling and etc.
Title and Button Animation with delay
Go to Advanced Design Settings Tab and apply fadeIn animation to the title with 0.1s delay. Make sure you turn on Title Animation Show/Hide on Scroll to have the delay speed slider range shown up. What it does is that this title animation will come in after 0.1s
Buttons Animation with delay
Go to Advanced Design Settings Tab and scroll all the way down to the bottom. Find and turn on Button #1 Animation Effect and Button #2 Animation Effect. Make sure you turn on Button Show/Hide on Scroll as well on both buttons to have the delay speed slider range shown up. I will apply 0.3s delay and also animation fadeInLeft on Button #1 and fadeInRight on Button #2.
Button Video Popup
Somehow I decided go use Video Popup on Button two. It’s quite easy and just a few clicks. Turn on Video Popup #2 and paste your link on the Video URL input. If you are using YouTube, use the link that as /embed/ eg https://www.youtube.com/embed/FkQuawiGWUw and if you want to to autoplay, just add ?rel=0&autoplay=1 at the back of the link.
Somehow I can’t change padding on the default Divi button settings. So some css are required to make it similar to SendGrid button. Go to Custom CSS Tab and find Button 1 and Button 2.
I use this:
padding: 13px 45px !important;
Row Settings on the first row
I applied a custom width of 60% on the row. Quite similar to the example we are creating. After we are done, go ahead and save and see the changes. You will see the animation will come in nicely.
Upload Background Images to the 2 columns
By default, AIO background images have the css property of:
-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-repeat: no-repeat; background-position: center center;
What it does: Scale the background image to be as large as possible so that the background area is completely covered by the background image. So that it looks great across all devices.
On the General Setting Tab, scroll and find Use Background Image. Turn that on and upload your background image. Like I mentioned earlier, the background will scale so that it look great on all devices. So you don’t have to worry about anything. It’s already there for you. 🙂
Background Image Zoom In on Hover with Grayscale
We are going to spice things up a little especially on these two columns. We want our visitors to know that they are hovering over the column(and this is very useful with you switch on the whole div link option) A fast zooming on hover and grayscale can help impress a little.
Find Image Zoom In on Hover and turn it on and select Fast(which is what I’m using on the demo). Next turn on Use Image Fliter and select grayscale. There are 4 types to choose from. Play around with it and find one would suit you best.
Show Gradient Overlay Only on Hover
I assumed you already enter the title, button, button links and content. Now we will show you how to create a overlay only on hover. Scroll all the way down on the General Setting Tab and find Overlay. Turn on that and also make sure Overlay Style is Full Overlay Background. You can set any gradient style because it doesn’t matter since we are going to use the same gradient color anyway. Set your preferred gradient on both 1st gradient and 2nd gradient. Now we are done with Overlay. Save and you will see overlay appear only when you hover.
Text Alignment and Text Vertical Alignment
This is important because we want the wrapper content to be at the bottom of the column. Remember the fullwidth header has this text vertical alignment setting as well? But there’s only Center and Bottom. AIO has 3 options: Top, Center and Bottom. We included Top option for you to play around with it so you can have more flexibility but in this example we are going to set Text Vertical Alignment it as bottom and text alignment as Center.
This will have a horizontal line before or after the title but in this example we are going to use After and also set Fancy Line Orientation as Center since we are using center for text alignment too. Find and turn on Use Fancy Line on Title.
AIO Extended module also allow you to style the color, width, height and spacing. Not to mention about tablet and mobile is also available. Go ahead and click on the mobile icon and you can set different width, height or spacing on different devices but in this example I will just leave it as it is. You can take a look at the setting below:
Custom CSS Tab
We are going to have some very simple css such as padding, width and margin on some areas. We will be touching Content Description and AIO Wrap.
We will setting padding on Content Description because on the SendGrid website, it does have padding on the outer div.
By default the AIO Wrap have a width of 100% and it doesn’t look similar as seen on Sendgrid. So we have to set the following to make it center, with a max width of 410px:
max-width:410px; margin:0 auto; left:0; right:0;
Final setting before it’s done
There are two things needed to be done. The height of the AIO and the background color of the AIO content wrap. Go to Advanced Design Settings Tab, look for Module Height and AIO Wrap Content Styling
Set Height as 500px (You can set for mobile and tablet too)
Set your preferred background color (I’m using rgba(255,255,255,0.95) in this example)
We are done! Let me know what you think about this by commenting below. This example is using the latest WordPress 4.7, Divi 3.0.22 and AIO 1.1.4