Child Navigation (Row 1, Mod 1)

Child Navigation: (R1M2) The navigation for your website goes in the next row.

The navigation at the very top is DiviNation.tech navigation- so you will need to create your own navigation, and then later you’ll hide the DiviNation.tech navigation and only your navigation will display. ChildNavigation in the top Nav bar is there to help you find your way back here if you get lost. CSC-Home is the link to the demonstration website.

Sample Nav, yours will be different as you choose (Row2, Module1)

Home   Blog    Portfolio   Contact

Sample Nav creates links to each of my sample pages. (Row 2, Mod.2)

Because there are many of us sharing this website, the administration label for each of your pages should begin with your own unique routing code. Mine is csc, my initials, so my Home nav link will be csc-home.

Next I have to make my Home Page, so I have something for my Nav to link to. Because this is a Child Nav, I’ll not use WordPress Menu (it’s already taken by DiviNation.tech) for my Nav- instead my Child Nav Module is a standard Text Module. If you have your own WordPress enabled domain, you’ll use the Menu for your primary Navigation. It’s an advantage, but it comes with complications, too. For the moment lets not worry about it.

To start a new page, click <new page> , then choose a <text>page. Mine will simply say  <h1> Home</h1>, and the administration label for the first module of csc-home is text csc-home-title.

Then, I’ll link Home in my Nav to csc-home- click on the blue arrow to link it, see it show as a URL, it turns red if there’s no link. Then, you’ll want to do the same thing for your other pages in the Nav. First create them (if only as a place-holder with an administrative title), and then link to them from your Nav. For this demonstration, I’ll have four pages- each of a different type. Home a text module, Blog uses a blog module, Portfolio uses an image module, and Contact uses form modules. If you want to color your <h1> font blue for a link, use the colors in the toolbar, in <p> it links itself in blue.

Row 2 Mod 3.

As you work on your site, you will be flipping back and forth between the front side and the back side of the website, and notations on this page showing Rows and Mods (which you won’t see any more) are to help you familiarize yourself with the process. On large screens, the rows show at once. On small screens, the rows read in order. You will only see the next row when you’ve seen the last module of the last row. This is how Divi solves the perennial problem of “float”. From the front side, you’ll click <edit page>, and it will send you to the back side. From the back side you make changes, and then you have to save them with <save and exit><update>, then if you want to see what your change looks like on the front side, click <view page>.

When you click <new row>, Divi will ask you how many modules wide you want the next row to be, and their size. They read from left to right. This makes website design very easy for even newbies like me, and it works fine on all devices. The better you make your administration labels, the easier it will be when the time comes you want to start changing things around. Rearranging your rows and modules easily makes updating, changing, rearranging, adding, deleting quick and easy. The real advantage to Divi is how fast it is.

I suggest you learn to use “edit page” and the “Divi Builder”, where you have a choice of visual or code to learn how Divi works and how it relates to HTML, which we’ve studied. After that, there are times when the “visual builder” will let you make surface changes faster and easier, especially with different size photos or correcting typos. Creating links is easier on “edit page”. Most WordPress themes offer only the “visual builder”, and they supply the structure for your website with their choice of Themes. Divi opens up many more possibilities. In their “Library” a there’s a wide choice of pre-fab page layouts, but you can create your own, put it in the library- copy your own layouts page to page.

I like to build a “protosite” with all the content the client gives you put in modules, one per row- all on one page, roughly in the order you think it will be viewed- and then “save to Library”. When you build a new page you can start with your “protosite” layout from the library, and delete all the content you don’t want on that page and leave header, nav, footer, logo, favicon, etc- which you want on every page. This is where the good labeling helps most, so you know what to save and what to delete without having to look at it over and over.

If you want to build websites for others, you can choose whether to let them work on them, or reserve that privilege for yourself.  Once you’ve built their site, they can go their way with a finished product. The only reason they have to get WordPress or Divi for themselves is if they want to make changes, but don’t want to talk to you. The real value in Divi, to me, is that I can give them a site they can manage themselves- until they want to do something they don’t know how to do. DiviNation.tech is intended to serve that need.