1.1 Requirements to have a website.

To have a website online, you need only three things:
1. A domain name
2. A host to serve your site to the internet
3. The files to put on that host that make your website work.

The Domain Name. A domain name is purchased, or more accurately, rented from a domain name registrar. After dealing with a number of domain name registrars over the past 30 years, I have found the best service and value is from domains.google.com. We can help you get the domain name you want.

The Web Host. This is a company that maintains powerful computers that store the files that comprise your website, along with (usually) thousands of other websites. They provide all the software you need to run these files and to serve them to your website visitors. You can host your website yourself, but this is such a hassle that we recommend hiring a web hosting company. Our current favorite host is a2hosting.com, because for many years they have been reliable, they have all solid-state drives on their servers, and they have outstanding customer service.

With your registered domain name, and an account with a web hosting company, you are ready to build the files that make up your website. That is what the entire rest of this document is about.  

1.2 The Elements of website files

Websites run on many different kinds of files, and several different kinds of languages.

Because we use WordPress, you do not need to learn or become fluent in HTML, javascript, PHP, CSS, MySQL, python, C, C#, or any of the other many languages used to build websites.

The only thing you will have to deal with are text files (text data) and image files (photographs and graphics), and this guidbook will lead you through what you need to know about these types of files.

The remainder of this Guide will cover a bit about WordPress, and a lot about Divi, which is a theme we use.

2.1. The elements of a WordPress website

All websites built by David Miller Web Designs in recent years are built on the WordPress platform.

WordPress is a powerful, well-supported platform that is highly intrusion-resistant if we take the proper precautions, and it currently powers about 2/3 of the websites in the world.

There are four Amain components of a WordPress-based website:
1. The WordPress Core
2. The Theme for the site
3. Any Plugins installed on the site
4. The actual content of the site.

Let’s address each of those now.

The WordPress Core is open-source, meaning it’s free and you can see and manipulate the code that runs it, but the rule is NEVER TOUCH THE CORE. The core is maintained by a strong team of experts at the Automattic company, and they update it regularly to introduce new features and to fix any vulnerabilities that are discovered.

The WordPress Core in your website should be updated two to four times per year. Most websites are set up so this is done automatically.

The THEME for the site governs how the site looks, and to a certain degree, how it acts. There are more than a hundred thousand themes available for WordPress websites. About half of them are free, and the rest are “Premium,” meaning you have to pay for them. We use the Divi theme exclusively, for reasons we will discuss in the rest of this guide.

PLUGINS provide extra functionality to your website.  WordPress on its own has good functionality, but it is limited because websites have such a wide variety of needs. Themes provide additional functionality, but they are also necessarily limited. For any functionality you need that is not provided by the core or your theme, the worldwide watchword among WordPress developers is, “There’s a plugin for that.”

For example, in the menu of this website, under Admin>Login/Logout, clicking that link will give you a popup form. We used two plugins to provide that functionality.

If you prefer video to writing, here is a “Getting Started with Divi Builder” video produced by the company that makes the Divi theme.

Now let’s get on with our own description of a Divi Website.

3.1. The elements of a Divi website (Summary)

As we said above, we use the Divi theme by Elegant Themes exclusively on our websites, but before you learn how to do things in Divi, it is best if you are familiar with the elements that you will be working with. The elements of a Divi page dictate the LAYOUT of that page.

There are five main elements that comprise a Divi layout. They are
1. The Page
2. The Section
3. The Row
4. The column
5. The module.

 Starting from the bottom, each element is contained within the one above it, and there will be one or more of each subordinate element within the one above it.

The main thing to remember is CONTENT is ONLY contained in a MODULE.

So one of the most simple Divi web pages would be this: Some text inside a Text Module, inside a single column, inside a row, inside a section, inside the page.

IMPORTANT CONCEPT: STYLE (pay attention!)

One of the most important concepts in web design in the last 15 years is this:
CONTENT is always kept separate from STYLE.

Style is everything about an element on a page, EXCEPT the text or image.

For example, a background color, image or video is part of the styling.
A box shadow or drop shadow is part of the styling.
The rotation of an element is part of the styling.
Font color, typeface, size, and spacing are part of the styling.
Even lines across the page (and their color) are part of the styling.

With that said, in Divi, you can control the styling of ANY of the elements that make up the layout of the page. We’ll tell you how to do that later in this guide.

3.2. The PAGE (Top-level Divi Element)

There is only ONE Page on any given WordPress page or post in a Divi website. It encompasses the entire visible area, even those areas scrolled off the screen.

The controls for the PAGE element are color-coded with PURPLE in Divi. When editing a page in Divi (we’ll cover how to get there later), at the bottom center of your screen, you will see a purple cirle with three dots in it. The purple color indicates it is a PAGE control.

If you click that dot, it will expand to a set of seven icons.

The fact that these icons are purple indicates they will affect the PAGE in some way. You can hover your mouse cursor over each one to see a tool tip telling what they do.

You do not need to get involved with any of these icons, unless you want to implement a style on the entire page. We do not advise you do this, as we have never done it ourselves.

But you should notice that when you click the three-dot icon to open the bottom line set of icons, you will also get additional control bars, a dark grey one you WILL use later, and the green  SAVE (or Publish/Save Draft) icons to save your work.

By the way, if you look at the SAVE button illustrtion above, just to the left of the green Save button you will see a white question mark in a grey circle on our most recently built or updated websites. Clicking this will open up a “Divi Builder Helper” window where you can watch a a number of “Getting Started” video by the makers of Divi on how to get started. You should watch these when you can.

3.3. The SECTION

The SECTION is the primary visible layout element on any web page. There must be at least one section on a page, although there can be as many as you need.

Section CONTROLS are indicated in BLUE. When you are in visual builder, when you move your mouse cursor around the page you are editing, sections will have a blue outline pop up as your mouse passes over them, and when you click on a section, a CONTROL BAR will appear at the top left of the section:

We will explain the icons in this control bar in another section of this guide.

3.4. The ROW

Rows are the primary horizontal alignment element in a Divi layout.  There will always be one or more ROWS in each section.

Rows are indicated by GREEN outlines when you mouse over them, and green control boxes in the top center when you click on a row:

3.5. The COLUMN

Inside each row will be one or more COLUMNS. These are the primary horizontal layout elements in each row.

When you add a new row, you will be asked to select the column layout:

Columns can be STYLED by bringing up the ROW Settings Dialog (click the cogwheel on the Row Control Bar, illustrated above), then clicking on the cogwheel for each column in that row:

3.6. The MODULE

THIS is the element with which you will work the most, because this is the only element that can contain CONTENT.

(…more…)

Okay, now we are finally getting down to actions you can use. In this section, we will show you how to make simple edits to the text on your website.

Many of these simple edits can be accomplished in a minute or less.

4.1. Overview

Just like any other action on a computer, there are four basic steps:
1. Set up the program for edits
2. Select the text you want to edit
3. Make your changes
4. Save your changes

We will look at each of these steps, but if you would rather watch it in a video, here is a demonstration of the process.

4.2. Setting Up to Edit.

To be able to edit your website, you need to log in to your site. If you cannot log in to your site, contact your site administrator to get the proper login credentials and ensure you have the ability to make updates.

Once you are logged in to your website, navigate to the page on which you want to make changes, and then in the top bar above the website, click the button that says “Enable Visual Builder”:

You are now ready to make edits to this page.

4.3. Doing the Edit.

The easiest way to wrap your mind around doing the edit, once you have enabled the Visual Builder, is to think of it as just another WORD PROCESSOR.

Just as with any word processor, all you have to do is to click your mouse so you can see the edit cursor (which is a flashing vertical bar) in the location where you want to make the edit, then just DO the edit.

You can use DELETE or BACKSPACE to get rid of characters, and you can type in new characters.

You can select a word or series of words and change their color, their weight, their size, or even their font face.

The controls for doing these things are intuitive, and if you hover your mouse cursor over the controls that appear when you make a selection, a tool tip will appear that tells you what that button will do.

If you need more information about how you can perform these edits, please refer to the Divi documentation about the Text Module, here.

4.4. When Finished Editing…

Just as when making any changes at all in a computer document, when you are finished editing, you must SAVE your changes.

In Divi Builder, this means clicking the SAVE button, then – if you have no more editing to do on this page, click the Exit Visual Builder button at the top of the screen.

Lorem ipsum dolor est …

Lorem ipsum dolor est …

Lorem ipsum dolor est …