Divi’s fullwidth header module comes with a complete display possibility that can set the peak of the header to equivalent the peak of your browser window. This can be a wonderful means to spice up UX and design by means of holding the whole thing visual to the consumer (above the fold) it doesn’t matter what dimension their display is also. However you don’t have to forestall at one header.

On this put up, I’m going to turn you the way you’ll in reality use the fullwidth header module to create more than one “complete display” sections that can cleanly modify to the peak of your browser. And, by means of including some most sensible and backside “scroll to” buttons, this makes for a pleasing viewing enjoy for customers. As a substitute of scrolling, all they’ve to do is click on and the following phase will seem completely of their viewport.

Here’s what I’m going to hide:

  • Easy methods to create 4 distinctive complete display sections the use of the fullwidth header module
  • Easy methods to create customized scroll up buttons for the highest of each and every phase.
  • Easy methods to use vw devices to dimension to ensure content material remains proportional to display sizes.

Sneak Peek

Here’s a peek at what I will be able to be construction on this educational:

The Design

fullscreen section example

The capability

fullscreen section gif

The Objective and Technique

My technique for undertaking complete display sections comes to the use of Divi’s fullwidth header module. I’m mindful that the fullwidth header module isn’t designed for use for normal phase content material for your web page. You might be restricted to the content material and settings of the only module for all of the phase.

However, those complete display sections can paintings extraordinarily smartly for positive content material. In lots of circumstances (like a product function), you don’t wish to have a lot content material anyway. Simply a picture and a CTA is all you actually want. And the fullwidth header module is easiest for that more or less factor. I will be able to additionally see this operating for portfolio pages that wish to ensure photographs span to the total display because the consumer clicks thru.

One more reason I sought after to show off this design is to present examples of how you can use period devices with textual content and spacing to stay the content material constantly targeted and visual on all display sizes.

Growing Phase 1

For the ones of you who’re acquainted with the fullwidth header module, this will have to be simple and simple.

Create a brand new web page and upload a fullwidth phase with a fullwidth header module.

fullscreen section header

Then upload a background symbol (about 1920px by means of 1080px in dimension).

Replace the Fullwidth Header Module with the next:

Name: Chic Design
Subheading: Vivamus suscipit tortor eget felis porttitor volutpat.
Header Symbol URL: [upload image at least 800px wide]

fullscreen section bg image

Below the design tab, replace the next:

Textual content & Emblem Orientation: Targeted
Make Fullscreen: YES
Display Scroll Down Button: YES
Scroll Down Icon Measurement: 50px (desktop), 30px (smartphone)
Background Overlay Colour: rgba(240,91,76,0.91)
Textual content Colour: Mild
Name Textual content Measurement: 5vw Desktop, 32px Smartphone

Environment the textual content dimension to a vw worth will be certain that the textual content adjusts to the browser dimension. Including a pixel worth for smartphone will be certain that the textual content doesn’t scale down too small.

Below the Complex tab, input “one” for the CSS ID. This may occasionally permit the phase under to hyperlink again (or up) to this phase.

fullscreen section add id

Save Settings.

Here’s the general format. Beautiful easy.

fullscreen section one final

Growing Phase #2

For the second one phase, let’s replica the primary fullwidth header we simply created and replace the content material as follows:

Name: Touchdown Web page Conversion Optimization
Button #1 Textual content: Be told Extra
Button #2 Textual content: [press space bar to add a space so that the button shows]
Content material: Curabitur placerat leo leo, identification ultrices libero tincidunt a. Vestibulum turpis quam, condimentum a pellentesque.
Button #2 URL: #one

The button #2 goes for use for the up arrow for on the most sensible of this phase. Since we’re best going to want the button icon (now not the textual content), we simply wish to upload the gap to the button #2 textual content enter box in an effort to display the button. The “#one” URL for button quantity #2 goes for use to scroll as much as the highest phase.

fullscreen section2content

Below the Design tab, replace the next:

Textual content & Emblem Orientation: Left
Background Overlay Colour: rgba(51,51,51,0.9)
Name Textual content Measurement: 3vw (desktop), 3vw (pill)

Button Two Textual content Measurement: 50px (desktop), 30px (smartphone)
Button Two Border Width: 0px
Button Two Icon: [see screenshot]
Most effective display Icon On Hover for Button Two: NO
Button Two hover Background Colour: rgba(0,0,0,0)

Use Customized Kinds for Button One: YES
Button One Textual content Measurement: 2vw (desktop), 16px (smartphone)
Button One Background Colour: #f05b4c
Button One Border Colour: #f05b4c
Display Button One Icon: NO

Customized Padding: 7vw Proper, 7vw Left

Below the Complex tab, input “two” for the CSS ID. This CSS ID will correspond to the anchor hyperlink url we will be able to set in our button within the subsequent phase in order that the button will scroll again to the highest of this phase.

Then input the next customized CSS within the Header Container enter field:

width: 100%

That is not obligatory, however I assumed it will be great to extend the width of the content material container in order that it provides you with extra horizontal house on your content material.

Additionally, input the next customized css within the Button Two enter field:

place: absolute;padding-left:0.4em !necessary;most sensible: 0;left: 0;proper: 0;margin: 0 auto;width: 0px;

This css positions the button #2 icon on the most sensible of your phase.

fullscreen section2design

Now you’ve 3 operating buttons in our phase. Button #1 is the be told extra button for use in our content material space. Button #2 is the customized most sensible button with the anchor hyperlink that scrolls again as much as the former phase. And Button #3 is the scroll down button this is in-built to the fullwidth header already that can robotically scroll to the following phase under.

You’ll be able to see how this phase format will also be helpful for to create CTA’s on your featured services and products. All you would have to do is replica the phase and upload any other function. This may occasionally permit the consumer to simply click on thru your sections with no need to scroll.

Growing Phase #3

To create Phase #3, replica Phase #2 and replace the fullwidth header settings as follows:

Name: The Town
Button #2 URL: #two (this will likely hyperlink to phase #2 above)
Background Symbol: [upload image at least 1920px by 1080px]
Background Symbol Measurement: Quilt
Background Symbol Mix: Multiply

Background Overlay Colour: rgba(255,255,255,0)
Name Heading Stage: H2
Name Textual content Measurement: 5vw (desktop)
Button One Background colour: #333333
Button One border Colour: #333333


It’s possible you’ll wish to play with the identify textual content dimension vw worth relying for your wishes. Glance out for what occurs on actually huge screens because the textual content will keep growing.

fullscreen section 3 design

Growing Phase #4

To create phase #4, replica phase #3 after which replace the next:

For this phase, I’m going to make use of two colours in our heading textual content. To try this we will be able to wish to use some html. So take out the identify textual content and subheading textual content that was once copied over from phase #3 and paste within the following html within the content material field beneath the textual content tab.

<span taste="colour: #333;">The</span> Town

The html span is used to present the phrase “The” a dismal grey colour, leaving the phrase “Town” to be white.

Button #2 URL: #3 (this will likely hyperlink to Phase #3 above)

Left Gradient Colour: rgba(240,91,76,0.88)
Proper Gradient Colour: rgba(51,51,51,0.88)

Background Symbol Mix: Customary

Below the design tab….

Textual content & Emblem Orientation: heart
Content material Textual content Colour: #f05b4c
Content material Textual content Measurement: 8vw
Content material Line Top: 1.3em

Button One Textual content Measurement: 1.7vw

Delete present Button One Background Colour then upload the next gradient background:

Button One Left Gradient Colour: rgba(51,51,51,0.87)
Button One Left Gradient Colour: rgba(240,91,76,0.97)
Gradient Route 90deg
Get started Place: 50%
Finish Place: 50%

Button One Border Width: 0px
Button One Border Radius: 15px
Button One Letter Spacing: 1.3vw
Button One Hover Letter Spacing: 1.3vw

fullscreen section four settings

The important thing to this design is the content material and button textual content dimension blended with the button letter spacing. What the way it adjusts to the display dimension with out converting the design.

fullscreen section 4 gif

And this is the general end result with all 4 sections finished.

fullscreen section final result

Use Authentic Button Places as Scroll Hyperlinks

You probably have a easy format, you want to use the unique fullwidth header buttons as scroll hyperlinks. The trick this is to set one icon place to the left and one to the appropriate. And, in fact, be certain that your button URLs fit the phase you wish to have customers to scroll to.

fullscreen section button positions

Easy methods to Make Any Phase Complete Display

If you’re wish to department out from the simplicity of the use of the fullwidth header module for complete display web page sections, you’ll do that with customized CSS. However I should alert you, this may get slightly tough, particularly in case you have numerous content material (rows, modules) rows and modules inside of your complete display phase. You actually need to suppose cell first for this design, so you’re restricted to what you’ll have compatibility on a cell display. So a piece with 3 rows of content material will doubtedly have compatibility on a cell display.

So for now, I’ll simply provide the elementary thought. To modify a piece to span the total peak of the browser, you’ll upload the next CSS to the principle component field for your complicated phase settings:

peak: 100vh;

To account for the navigation header (and glued nav place), it is important to upload slightly exchange to the css.

peak: calc(100vh - 53px)

This trims the ground of your phase by means of 53px to account for the header navigation sitting on the most sensible of the web page.

To ensure your row remains vertically and horizontally targeted at the web page, it is important to upload the next customized CSS to the principle component enter field beneath the row settings complicated tab:

peak: 50%;width: 80%;place: absolute;most sensible: 0; left: 0; backside: 0; proper: 0; margin: auto !necessary;

After this, it is important to be certain that your module content material is scalable the use of the correct css period devices in order that the content material received’t overflow the display on cell units.

Here’s a fast instance of a piece and row with the customized CSS discussed above in position. I added a textual content module and a button module throughout the row to turn you what that will appear to be.

fullscreen section manual example

Absolute best for One Web page Web sites

Along with the use of the scroll hyperlinks to carry the consumer throughout the complete display sections of the web page, you’ll additionally upload customized anchor hyperlinks in your navigation menu that can permit the consumer to leap to any phase of the web page. That is the fundamental thought in the back of creating a one page website.

As an example, in case you sought after to show this web page right into a one web page web page, you possibly can easy create a customized menu and set your hyperlink URLs to compare the CSS IDs for each and every of your sections.

fullscreen section anchor links

Ultimate Ideas

Growing complete display sections the use of Divi’s fullwidth header module will unquestionably give extra prominence in your sections. And with the scroll hyperlinks, customers can simply navigate thru your content material like a large complete display vertical slider. The problem is to stay your content material having a look nice and becoming on all display sizes and the use of the vw period unit for textual content unquestionably makes it more straightforward.

The designs used on this put up for each and every of the sections was once intended to encourage and get the ones inventive juices flowing. My hope is that you are taking one of the crucial ways used right here and wow us all with your personal design.

I look ahead to listening to from you within the feedback.


The put up How to Create Full Screen Sections with Top and Bottom Scroll Links with Divi seemed first on Elegant Themes Blog.

WordPress Web Design

[ continue ]