Divi’s Fullwidth Header Module includes lots of image style options, letting Divi users create beautiful images and layouts for their headers. The header image can be styled in many ways to create interesting layouts and designs. It gets even more interesting when it’s coupled with the various text and button designs. In this post, we’ll see how to style an image in your Divi Fullwidth Header Module and share three examples to help you design your Fullwidth Header Module.
Let’s get started!
Phone Fullwidth Header Image Example One
Desktop Fullwidth Header Image Example Two
Phone Fullwidth Header Image Example Two
Desktop Fullwidth Header Image Example Three
Phone Fullwidth Header Image Example Three
Add an Image to Your Fullwidth Header
Here’s the full-width header that we’ll use in this example. First, let’s see how to build it. We’re using images and design queues from the free Flower Farm Layout Pack that’s available within Divi.
To add the Divi Fullwidth Header module to your page, you’ll need a new section container with a one-column row. Once you have that, add the Fullwidth Header Module to your row’s column.
Fullwidth Header Text
Next, add your Title, Subtitle, Button One text, Button Two text, and Content.
Header Image
Scroll down to Images, choose Header Image, and add your image.
Next, scroll down to Background, select the Gradient tab, and add four Gradient Stops:
Next, enable Place Gradient Above Background Image. Leave the other settings at their defaults.
Select the Background Image tab and add your image. Next, we’ll style the Fullwidth Header Module.
Title Text
Select the Design tab and scroll down to Title Text. Select H1 and choose Italiana for the Font. Set the Alignment to Left and choose white for the Color.
Set the desktop Size to 80px, the tablet Size to 40px, and the phone Size to 32px.
Next, scroll down to Body Text. Set the Alignment to Left, choose Roboto for the Font, and change the Color to white.
Change the desktop Size to 18px, the tablet Size to 16px, and the phone Size to 14px.
Next, scroll down to Subtitle Text. Choose Roboto for the Font and set the Weight to Heavy. Choose TT for the Style, set the Alignment to Left, and change the Color to #b5a68f.
Next, change the Spacing to 0.2em, and the Line Height to 1.7em. Leave the Font Size at its default, 18px.
Scroll down to Button One and select Use Custom Styles for Button One. Set the Font Size to 14px, the Text Color to #aa6a3c, and the Background Color to #f5f3ef.
Set the Border Color to #aa6a3c, the Letter Spacing to 0.15em, the Font to Roboto, the Weight to Bold, and the Style to TT.
Scroll down to Button One Padding. Change the Top and Bottom Padding to 20px and the Left and Right Padding tot 30px.
Button Two
Next, scroll down to Button Two. Select Use Custom Styles for Button Two. Set the Font Size to 14px, the Text Color to white, and the Background Color to rgba(255,255,255,0).
Set the Border Color to white, the Letter Spacing to 0.15em, the Font to Roboto, the Weight to Bold, and the Style to TT.
Scroll down to Button Two Padding and set the Top and Bottom Padding to 20px, and the Left and Right Padding to 30px. That’s it for the Fullwidth Header Module styling. Now, we’ll see three ways to style the image.
Fullwidth Header Image Style Examples
Here’s a look at three examples using our layout as a starting point. I’ll make some adjustments to the layout for each of the examples.
Fullwidth Header Image Example One
For our first Fullwidth Header Image example, we’ll create a rounded top with a border. Go to the Design tab and scroll down to Image. Un-sync the Values and change the Top Border to 400px.
Change the Border Width to 2px and the Border Color to white.
Next, we’ll adjust the Alignment of the text and image to adjust their placement on the screen. For this example, we’ll leave the image and text in their current positions, but we’ll change the vertical alignment for the text and buttons. Selecting Fullscreen opens an option for Vertical Text Alignment in the Text options.
First, go to the Design tab. Under Layout, set the Text Alignment to right and enable Make Fullscreen.
Lastly, scroll down to Text. You’ll now see an option labeled Text Vertical Alignment. Set it to Bottom. Close the module and save your settings.
Fullwidth Header Image Example Two
For this example, we’ll use a different button text and image. First, change the Button One text to Information.
Next, scroll down to Background and choose a different image. This image will take around 1/3 of the screen’s width. I’m using the same image as the background.
Next, go to the Advanced tab and scroll down to the Header Image field. Add CSS to set the width to 150% and the Height to auto. Close the module and save your settings.
Header Image CSS:
Now with the image and button text in place, we’ll make our adjustments. We can adjust the Alignment of the text and image to adjust their placement on the screen. First, go to the Design tab. Under Layout, leave the Text Alignment to Left and enable Make Fullscreen.
Next, scroll to Title Text and set the Alignment to Center.
Next, scroll down to Body Text. Change the Text Alignment to Center.
Next, scroll to Subtitle Text and set the Alignment to Center.
Scroll down to Button One Margin and change the Left Margin to 29% for desktops, 18% for tablets, and 19% for phones.
Scroll down to Button Two Margin and change the Left Margin to 30% for tablets, and 31% for phones.
Scroll down to Sizing and set the Width to 104% for phones. This centers the content correctly for narrow screens.
Fullwidth Header Image Example Three
First, go to the Design tab. Under Layout, set the Text Alignment to Right. In my case, the text is left-aligned, but yours might be centered if you haven’t specified the alignment.
Scroll down to Image. Change the Border Width to 4px and the Border Color to #b5a68f.
Next, scroll to Title Text and change the Alignment to Centered.
Scroll to Body Text and change the Alignment to Centered.
Next, scroll to Subtitle Text and change the Alignment to Centered.
Next, go to the Content tab and change the Button One text to Information just for phones.
Go back to the Design tab and add a 5% Right Margin to Button Two’s phone tab.
Lastly, scroll down to Sizing and set Content Width to 52% for desktops, and 100% for tablets and phones. Close the module and save your settings.
Phone Fullwidth Header Image Example One
Desktop Fullwidth Header Image Example Two
Phone Fullwidth Header Image Example Two
Desktop Fullwidth Header Image Example Three
Phone Fullwidth Header Image Example Three
Ending Thoughts
That’s our look at how to style your Divi Fullwidth Header Module. The image is easy to style, and it can be placed in several locations within the module. The module’s various layout options give you lots of design possibilities. Be sure to test your designs on all screen sizes to ensure the best user experience.
We want to hear from you. Have you styled your images in Divi’s Fullwidth Header Module? Let us know about your experience in the comments.
This content was originally published here.