Divi homepageHomepage of Divi
It will be available in two different editions, the desk top one and the one suited for both tablets and phones. This is the outcome we are going to build on the desktop: Results on the cell phones are slightly different and look like this: We' ll be creating two different types of pages: a desktops one and a tablets and phones one.
This way we can be sure that the page looks good on all our equipment. First we will create the desktops first. We are using only one section for this example, which contains all the lines with the contents we need (for both the desktops and the mobiles versions).
You can also divide the desktops and mobiles into two areas. Each of the navigational elements has more or less the same look with different levels of detail, as you can see in the results thumbnail above. For each of the navigational elements you want to make, most of the options are identical.
Therefore, we'll show you how to make the first line in detail, and then show you how to make changes to the other navigational elements you want to include on the page. But before we start adding any module, we will make sure that the line options are available, so go ahead and open the line options.
When we are on the Contents page, we will first insert a wallpaper to your line. It is recommended to use an picture with a width of'1400px' and a hight of'934px', as it will give the best results. Also make sure that you set the picture to 'no repeat'.
Next, we want to create some spaces between the different navigational elements, so we will create a top and bottom border of '5px' for the line. As soon as the line setup is complete, you can insert a first text module into the line columns and use the following text subset preferences on the Design tab:
That width ensures that our text module does not traverse the wallpaper of our line when we append the minus sign to it. We want the text module to be on the leftside of our line without the line wallpaper being overlapped, as stated in the preceding walk.
Since we also want some distance between the upper part of the line frame and the beginning of the text modules, we also use an upper part. Next, insert a splitting modul directly below the text modul. In the Visibility sub-category, activate the'Show partition' checkbox.
Then go to the Design page and append'#FFFFFFFF' as the splitter colour. Continue and select'Solid' as the splitter style and 'Top' as the splitter position. Finally, make the following Customizing entries for the Sizing subcategory: When you are finished with the splitting module, insert another text module directly below it.
The text module will be our navigational element. Go to the preferences, type the text and insert a shortcut. If you are still on the Contents page, use the following grace backgrounds: Then go to the Design page and make the following setting for the Text subcategory Links page:
The text module must also appear on the leftside of the display, so we add the leftside to it. In addition, we want the distance between the separator module and this text module to be smaller, because the top edge of the text module is located there. Finally, we want the slope wallpaper to become bigger, so we use the upper and lower upholstery.
Different navigational elements on your page will have more or less the same preferences. There' three things you gotta fix, let's take a look. First thing you need to do is modify the wallpapers of the copies of your line. Again, be sure to use an aspect ratio of'1400px' and a hight of'943px' to get the best results.
Then open the Text module menu point and modify the text together with the shortcut. Finally, you also need to modify the text module's text module's grace wallpaper. Modify the colour of the second colour sequence in'rgba(224,43,32,0. 62)' and modify the value of the start location according to the length of your new point of navigating.
When you have a navigational point that is quite long, you should adjust the starting position to a higher value until it falls into place. After we have finished creating the desktops we will also be creating the tablets and mobiles. Styles of the different modules are similar to the one of the desktops, but behind the curtains the structures of our ranks are totally different.
Due to the many changes you'd have to make to each of the modules if you wanted to klone them, I'll just show you how to rebuild it from the ground up without having to klone a single one from the desktop as well. As with the desktop edition, this will require only one colum.
This setting ensures that our line occupies the entire width of the display. Finally, deactivate this line on the desktops because we have other lines that are shown on the desktops instead. Insert the first text module into the line. The following setting applies to the Text subcategory:
Then open the Sizing sub-category and use a width of '71%' and a central module orientation. Finally, this text module requires an upper and lower cushion of '10px'. You can see that margins are not required in the tables and mobiles versions because we choose centered orientation instead.
We do not need a splitting module for the mobile edition, so we will skiip this one. Instead, we immediately added the Text module navigational point directly below the text module we previously used. We will use the same desktop wallpaper as the desktop wallpaper for this text module:
Configure the following for the Text subcategory: Just like the wallpaper edition, this text navigator requires an upper and lower pad of'80px' to make the slope wallpaper bigger. Finally, insert an images modul as the last one in your line and load an images of your choosing.
The same applies to the portable edition; you can copy the currently generated line as often as necessary to include the other navigational elements. Three things you need to make every single move you make to adding a new point of navigating, let's take a look. First thing you need to edit is the text and hyperlink in the Contents box on the Contents page of your Text module navigator.
Then you can also modify the second colour in ''rgba(224,43,32,0. 62)'' and adjust the starting point value according to the length of your text. Finally, you can also modify the picture of the picture module within this line. As soon as you have built both the desktops and mobiles, you have a breathtaking page that looks good on your desktops, tablets and mobiles.
The creation of a navigational page as a start page will definitely make an impression on your users. Sign up for our e-mail newsletters and YouTube channels so you don't miss any big announcements, useful tips or Divi Free!