Fullwidth Header
Walkthrough
In this walkthrough, we build a fullwidth header and use it to fill the entire screen.
We already learned how to create a fullwidth post title like the one at the top of this post, now we learn how to create a fullwidth element to use on site pages.
Sliders are fine, but they feel slightly out of date now. The fullwidth header is starting to show up more commonly on new sites.
Insert the Section
For this experiment, create a new page.
Add a FULLWIDTH section.
In the module section menu, choose fullwidth header.
NOTE: because we want to use a fullwidth header, it must be placed in the context of a fullwidth section.
Content Tab
Add a title and some text.
NOTE: you can use the Subtext field AND/OR the Body field to add text to the header. The Body field gives you more opportunity for customization.
If you want to add a button, just add some text to the Button Link Text field. You can add two buttons. If you don’t want a button, leave these fields blank.
Add an image to the Background sub-menu. Decide if you want the parallax effect.
You can add an image as an icon AND/OR as a header image. The location of these two images varies depending on the setting you choose on the Design tab > Layout > Text & Logo Orientation.
Design Tab
Under Layout, choose Make Fullscreen. This will format the image so it fills the entire screen.
Tweak your overall design
Take a moment to resize the title and body text to your liking. Don’t forget to toggle between the various device sizes and check your layout there!
Also, consider adding an overlay color to your background image if your text isn’t popping off the screen.
Text too dark? Go to Design > Text > Text Color and change to Light.
Still not able to see the text on your image? Try adding a gradient to the background. Choose two dark colors. Place the gradient above the background image. Change the transparency of the gradient.
Final Details
Add a “scroll down icon” to let your audience know there is more content below. Resize the icon on all three device sizes.
Duplicate Your Header
Now that you have one fullwidth header configured, you can easily fill out the rest of the page with duplicate headers. Just click the duplicate button on the fullwidth section. Then update the image and text on the duplicates to create a modern-looking page based only on a series of fullwidth headers.
Don’t forget to check the layout on mobile devices!
Hide Your Menu?
If you want to suppress your primary menu for any even cleaner look, go into Divi > Theme Options. Scroll all the way down to the Custom CSS field and paste in the following CSS:
#main-header { display:none; }
#page-container {
padding-top:0px !important;
margin-top:-1px !important
}
Hi, I think your website might be having browser compatibility issues.
When I look at your website in Safari, it looks fine but when opening in Internet Explorer, it has some overlapping.
I just wanted to give you a quick heads up!
Other then that, very good blog!
Here is my web page :: اخبار ورزشی ایران اینترنشنال – https://varzeshikhabari.Ir,