In November 2017 I spoke to you about the fabulous Divi template, which allows you to create websites in a very simple way and for “non-technical” users.
This time I bring you a practical example in which we are going to make a complete website thanks to the Divi Builder plugin.
In a simple way, with an easy language and very easy to follow, I am going to review all the necessary steps to have a website working, with the technology of WordPress and Divi and through which your potential clients can contact you.
Upgrade: We now have a free Divi course on our Websites Are Us University platform
I have to warn that this example that I am going to build has the following features (or notices) you have to take into account:
Steps and previous concepts before any website
Since I started in the world of web creation, I have been learning through sticks. It is usually the best route. I’m going to try to summarize the basic concepts that you have to be clear before you get fully into Divi.
I also want to comment right here, that what we always tend to is to directly upload the content to a website, without thinking about how you are going to structure, where what element is going to go, etc.
I tell you from experience that the best is define well the requirements that your page must have, make a sketch how it would look, prepare well the organized content (texts, photos …), configure well all the options (fonts, colors, etc.), and once you have everything that is not content prepared, then, and as almost the last step, upload content.
You will see that this saves a lot of headaches, especially if you are a WordPress implementer and work with clients who want to change the structure, once everything is assembled.
What do we need to have a website
A website created with a content manager like WordPress requires a space on a computer, where they will stay:
- The WordPress base files (which you download from WordPress.org).
- Extra WordPress files (templates, plugins, etc.).
- The files they give lifetime to your website (images, audios, etc).
- A database where all the content and configuration of your website (articles, pages, menus, users, etc.) will be stored.
Space for web files
You can have this space perfectly on your home computer. The problem comes when you find out that said computer has to be working and connected to the Internet 24 hours a day, so that people can visit your website (hosted on your computer).
You also start to drop a drop of cold sweat on your forehead when they tell you that if many people visit you at once, your website will will fall because your computer is not powerful enough to receive so many visits through the Internet at the same time.
Therefore, what is normally done is hire a service hosting (accommodation) either shared or private.
Websites Are Us, for example, is a service of hosting (I could use an affiliate link here in case you sign up, but no, I’m not going to add it, because it wouldn’t be very reasonable for me).
I myself (regardless of whether I write articles for them or not) I host my main website with Websites Are Us, and I am very happy (especially for the support and customer service they have).
In fact, I was with them, then I switched to a company of hosting well-known that begins with “B”, and after a few months I turned, because I missed close treatment that Websites Are Us gave me.
How do you visit that “space” in the hosting
Once you are clear where you have put the files of your website (which in the future you will manage with the Divi plugin), you simply have to help your future visits so that they can tell their Internet browser what your website is called, so that they can visit it.
And I mean as it is called because normally, without having a domain, what your visitors would have to write in their Internet browser to see your website would be something like https: //XX.XX.XXX.XX/index.html (being the X you IP number).
And since it is very unfriendly for your website to be visited by such a long and rare number, which makes domain is precisely to show the content of that web address, in a way pretty. (www.yourdomain.com).
You can usually buy domains where you usually rent the space for your website.
Inspiration from other examples we like
With each new client that comes to me through my website, I always ask them to write me two or three examples of websites that they liked, in order to have a reference and design something they like.
You can do the same to create your own website.
If you do not know where to start, I recommend that you visit several websites (it does not have to be from the same sector) to inspire you and catch ideas for your design (remember that the good thing about Divi is that you can create the design and structure of a website to your liking).
I recommend you visit this website to get some ideas. For my example, I liked this website (which I’m going to use as a reference, but it doesn’t have to be the same).
Step 1: making the mockup
Let’s get down to business!
What I like most about the whole process is creating the web design in style eraser or mockup. This means that by placing very basic blocks and example texts, you can get an idea of how you want your website to look like, so that you can be guided when building it.
To create sayings mockups I always use Adobe XD, but if you don’t have the license you can use any other program or software to do it, and even a paper and a pencil! (if you like what Handbook I recommend you do it on a blackboard type whiteboard).
With my clients, what I always do is a first “tree” of structure, to understand the functionalities of the web and the route that the future visitor will have. (We are not going to do this step here, because our website is very simple).
Then I create a mockup very basic, with large tables and sample texts, so that the client can approve and define it, and work well on the nuances of where it is better for which element to go.
Finally, I make said mockup basic in your more realistic version, with real content, and as it will be on the web (at least 95%) once online. (We are not going to do this step in this article).
For the example website, these are the elements that I am going to build, which we can take as the requirements of our project:
Is named Hero to that part of the web that you see as soon as you enter it. It can be both a static image with some very large letters, a static color with beautiful typography letters, a background video … there are many possibilities. But I recommend two elements that have to appear yes or yes in this section:
- A call to action (a button to fill out a form, visit the store, request a quote, subscribe to a newsletter … whatever you need).
- It does not cover the entire screen, to that there is more content by scrolling down.
The website will have two services: creation web and maintenance Web.
I’m going to put a total of 3 people (a designer, a commercial and a programmer).
They will appear 3 testimonials different from 3 happy customers.
They will appear 5 logos of 5 companies that we have had as clients.
There is going to be a form to send a message directly to the commercial.
Step 2: Preparing the web environment
Once we have the sketch of how we want the website to be, we will prepare the WordPress environment with everything you need to create the content of our mockup in web version with the Divi plugin.
Create the necessary pages
As our website will be of type one page (scroll through different sections) the pages themselves will not exist, if not they will be sections defined by a “ID” (example: #testimonios).
Create the Home
The home page, in our example, is the entire website, since as I mentioned above, the example I do is type one page.
If your project has other different pages, define which one will be the one that will be seen as soon as you land on your website.
Since we don’t have individual pages, permalinks in this case they will simply be the different sections of the web. For example: www.miweb.com/#testimonios.
If your website has individual pages, be sure to check the permalinks in the options WordPress.
Step 3: Preparing Divi
The Divi installation process is through a plugin. In the article mentioned at the beginning, you have all the necessary information to know how to install it. (The process is very simple).
Create and connect Divi builder home page
Since we only have one page (but a very long one) with content, we just need to make sure that the home page of our website is correct.
Next we are going to go into the bowels of Divi, to configure it to our liking, before uploading all the content.
Get your logo to Good resolution, that looks great on all possible screens, and upload it to Divi.
Define one or two main colors (the most visible) for your website. Use online tools to find the best color combinations. For example: yellow with black, blue and green etc.
With Divi we will configure than elements we want them to appear in our header in the web. (Hence the importance of having the menus preconfigured, as well as the uploaded logo).
The same for the elements of the footer. Normally it is enough to have contact information, links to social networks, and even pages of legal texts such as “privacy policies” and “terms and conditions”.
Avoid putting these pages in the main menu in the header.
In the video (just after step 4) we are going to review the most advanced options that Divi offers, in order to customize our website to the maximum.
Step 4: Uploading the content
Follow mockup structure
This is where the importance of having a good defined mockup and that you like (or that is approved by your client) lies, for later avoid structure and functional changes at the web level.
Keep in mind that if you dedicate yourself directly to creating the content “blindly”, you will always want to change it every two times three, and it is not the same to change it in a graphic design program, as in “code” (by many click and drag you use).
In the video we are going to create well all the sections of the web, and upload content (example in my case, but real in yours) to go adapting the web as much as possible to how we have defined in the mockup.
Create form (for our example)
Now is the time to create a form. We will put the fewer fields the better, so that it does not take too long for our potential clients.
Tip: you don’t always need a form
Depending on the business, you don’t always need to put a form.
- If you have a hairdresser, restaurant, bar, etc., what will work best for you is to put your clearly visible phone always in the header.
- If you are a doctor, physiotherapist, tutor, perhaps you are interested in setting a dynamic calendar so that you can book an appointment, depending on the free spaces you have in your work schedule.
- If you just don’t like the forms, put your email directly (but be careful, because you may receive a lot spam long-term).
In the video below we will carry out steps 3 and 4, and you will see how well the web looks:
And this has been all about the article on the practical case on how to build a website with Divi.
I hope that it has served you and that you liked it. If you have any questions, suggestions and to contact me directly, you can send me a message through my page, or on Twitter.
A hug and see you in the next article!