In Part 1 of this series ( Build your first page with Divi – Pt 1 ) I showed you how to activate the Divi Builder on a new page, how to insert a Fullwidth Section and a Fullwidth Header Module. In this part you will learn how to insert image resources and how to define some styles for the text and for the overall “Fullwidth Header Module”. Let’s get to it !
Divi Builder Flashback
In the first part you should have already put in some basic strings for the Fullwidth Header Module in the Divi Builder. Bring up the module settings (hamburger icon) and make sure to fill out Title, Subheading Text, Button #1 Text & Button #2 Text, like in the pictures below:
The Background Picture
For our landing page we want to have a nice, big, photograph in the background. You are still in the settings of the Fullwidth Header Module inside the Divi Builder, on the “Content” Tab: Scroll down a bit until you reach the “Background” setting. For the background we have 4 options: solid color, gradient color, image or video. Let’s take “image” (it’s the third tab) and upload any picture you like. If you can, resize it 1920 x 1080 pixel and 72 dpi but since this is only a tutorial it won’t matter much. If you are looking for some great, free-to-use image resources check out www.unsplash.com. Once you uploade a picture, you should see something like this:
The rest of the background settings you can leave by default: Use Parallax Effect (NO), Background Image Size (COVER), Background Image Repeat (NO REPEAT), Background Image Blend (NORMAL).
Make it Fullscreen !
By now we should have put in all the content we need like text for the title, background picture and so on. Let’s get to the first interesting setting, which will define a segnificant look for our Fullwidth Header Module. If you remember, in the settings we see 3 main categories: Content; Design & Advanced. Switch over to “Design”. The first setting you can see there is called “Layout”. 2 things we can choose here: Text & Logo Orientation and “Make Fullscreen”. Let’s activate the “Make Fullscreen” option. This will expand the header to be actual fullscreen (width & height). By default it’s only fullwidth and not full height.
Title & Subtitle
If you previewed the page already inside the Divi Builder or on the frontend you will notice that the text is dark by default. Since we used a dark background image for this example, the title and subtitle is hardly visible. If you scroll down a bit on the Design tab within the Fullwidth Header Module Settings you will be presented with 4 groups of text settings. Text (for general settings) , Title Text, Content Text and Subhead Text. You remember we only filled in Header, Subline and 2 buttons so let’s concentrate on those 2 text group settings for now, Title Text & Subhead Text.
Try to use following settings for Title Text (non-mentioned settings will be set by default)
- Heading Level: H1
- Title Font: Muli
- Font Weight: Light
- Size: 60px
- Title Text Color: #ffffff
And for the Subhead Text try to use following settings:
- Subhead Font: Muli
- Subhead Font Weight: Bold
- Size: 35px
- Color: #0fffd7
By now your Fullwidth Header Module should look something like this:
This is it for Part 2 of “Build your first page with Divi“. Make sure to check out Part 3 , the final part, when we finalize the landing page with buttons styles and some custom CSS. See ya !