Designing and Incorporating a Blog with Divi

Designing and Incorporating a Blog with Divi

All websites need an active blog. Did you know a website without an active blog is a website without the voice of the business and there’s no communication? Don’t keep the blog silent.

A log time ago in 1990… (17 years) when websites first started having a blog was a luxury. This would have to be added by a developer and was expensive. WordPress started out as a blogging platform in 2003. With the option to set the home page as a static page and not the blog page websites started to be created and the blog page was included in the website. From that time on we had a website that included a blog.

A Stand Alone Blog

WordPress has the added function of creating a stand alone Blog. To do this go to the Theme Customizer area and select Homepage settings. You’re setting the Home page as the blog posts.

Blog posts are in chronological order with the most recent post on top of the list. A stand alone Blog will have all the posts on the Homepage.

Creating blog posts generates fresh content and there is a better chance for your blog to be found especially if you’re writing about updated information or a change in service. The Internet is like a library, it’s full of organized information about different subjects. Your published Blog post will exist on the Web and this enables someone searching for the topic to find the article.

A Website With a Blog

The Hompage of the website is set to a Static Page. The Blog is a page that is added to the website and is put into the Main Navigation Menu. It doesn’t have to be in the Main Menu but this depends on the style and layout of the website. 

The Blog page will show all the published Blog posts with the most recent one on the top. In the Divi Theme the Blog Module pulls in the posts in the categories selected in the settings inside the Blog module.

Blog Page layout with Divi Blog Extended Plugin

Designing the Blog Page

Create a new page and name it Blog. You can name it Articles but we’re used to the word Blog which means articles. On this page you will pull in the blog post using the Blog Module. The most recent post will be listed on top. The Blog Module has the option include categories in the display.

The Blog Page should be designed simply without too many decorative trimmings. The title of the blog post should be the main attraction and the special effects secondary. A good practice is not to override a simple layout. The purpose of having a blog is to get the articles read.

 The built in Divi Blog Module works fine but it has some limitations. You can only do two layouts, fullwidth or grid mode.

The Divi Blog Extended plugin has more options to layout the blog posts on the blog page.

The Blog Page has articles in the blog category. WordPress has the option to create categories for the blog posts. Information is easier to find when it’s arranged acording to the subject or category.

Even though we might not think about this we visit a website and appreciate the arrangement of the categories instead of searching through all the titles of the blog posts listed in the general cateogry of blog.

Adding More Blog Pages

WordPress has the option to create categories for the different topics. This organizes the content and makes it easier to locate. 

Three Categories

Website Journey
WordPress
Divi

The three categories, Website Journey, WordPress, and Divi, have their own page which functions like a blog page but isn’t titled blog. The page title is the category. 

The Scout Page Layout was developed by Divi Extended the developers of Divi Blog Extras and Divi Blog Extended plugins. This is my affiliate link. I use these plugins on my websites and refer them to cleints. They are well made, updated regularly, don’t require code, and are easy to use.

The Blog Post

Everyone relies on the Internet to get information. To cut through the noise of misinformation the blog post needs a clean layout. This means minimum popups, or mid article advertisements.

When you want to give people information about something especially if it relates to your business practice the blog post content has to deliver. In three seconds the visitor looking at the blog content decides whether they should read it or not. If there’s too much work for the reader they skip out and go somewhere else.

One problem that has emerged is too many links in one sentence. The blog post is an informative piece of information and should be interesting to read.

Here is an example: The latest news on website building predicts an increase in website integration with email services.

All these links take you to another blog post. The result is disruptive reading. Attention is distracted by the links. The links are ‘stuffed’ into the sentence. Instead of worrying about the effect on the search engine, your content should be directed to the reader.

Displaying Other Posts

The Divi Blog Extended Module is used to set create a section on the blog page to bring in other posts in a specific category. You see this on websites with the heading: You Might Like.

How To Use Divi Builder Helper

How To Use Divi Builder Helper

Finding Help

The Divi Theme has a built in help feature in every module. The settings in the module give you the ability to style and position the content onto the web page without having to use HTML code.  It’s not easy to find something if you don’t know where to look.

Divi help icon

Locating the Help “?” Section

The Divi Builder Helper shows you how to use the settings within a module. The Text Settings are for the most part identifiable. 

Content

This is the section where content is created and where you organise the writing into headings and subheadings.

Design

In this section you can set the color of a Heading or Subheading. Change the position of text, adjust margins, create a box shadow set the spacing. All these commands enable you to style the text.

Advanced

In this section you can enhance styles using CSS, set the visibility of the module on mobile view, and position the module.

If this sounds complicated, you might need help to implement some of these settings. Scroll to the bottom of the Text Module and locate the question mark icon “?” with Help next to it. Click on the icon and access the Divi Builder Helper.

The Divi Builder Helper

When you click on the Help icon the Divi Builder Helper module opens. Here you can access Three video tutorials. There are a lot of settings built into the Text Module. The settings don’t requre any code until you want to add a specific style using CSS. The CSS styling is not as complex as HTML and is a lot easier to understand in the even that you need to use it.

In the Text Settings Module the Builder Helper contains three videos:

  1. An Introduction To The Text Module
  2. Design Settings And Advanced Module
  3. Saving And Loading From The Library

These videos show you how to use the settings. You can see exactly what to do. There’s nothing better than a video to show you the steps.

Divi video tutorial

Divi Theme Options Help

When you see the “?” icon this is an indication there is further information available. It is helpful especially as there are a lot of options to choose from in Divi. The help in the Theme Options area are instructional and can often solve a problem because the setting wasn’t enabled.

Instead of ‘googling it’ and finding a whole lot of information that might not be relevant, this help feature goes straight to the point and explains what to do before using the map module. The link provided takes you to the Divi Map Module Documentation with a detailed description of how generate a Google API key. This is all from the Theme Options “?” icon.

Support Center Inside WordPress

Access the Support Center from the WordPress Dashboard. Locate Divi and the popup menu and slect Support Center.

Chat Support

Initiating Chat Support takes you directly to Elegant Themes tech support chat on their website.  They do not have a support ticket sytem but communicate via email directly to you when necessary.

Remote Access

This is only needed when tech support needs access to your website and this will generate a support ticket which is only active for four days.

Elegant Themes Support

Elegant Themes Tech Support and  Documentation

The Tech Support is available 24/7 using the chat feature. In all the time I have been with Elegant Themes since 2012, I have not ever experienced a problem with tech support.

When I first started to use Divi I needed a whole lot of support. No matter what my crazy question was there was always someone who would answer it and resolve the problem. The tech support team was so good they taught me how to use Divi.

Since Divi was created in 2012 it has become the world’s most used theme because of it’s versatility and ease of use. When something is this good even the top level tech people know it and use Divi.

Of Course You Can “Google It”

The Google search engine is refined and when you search for something you find it.  The most important thing to look for when doing a Google search is; when was the article or video published and who is the author.

If an article is written in 2012 it may still apply to the software you’re using in 2020. Especially if that software was created in 2012.

Divi Resources

If you don’t already subscribe to the Divi Newsletter you should. Every day they publish a relevant article about Divi on the Elegant Themes Blog. This Blog has a million visitors daily. There are also Divi Developers who create plugins especially for Divi.

Three plugins I use all the time on my website and client’s. These are my affiliate links. I only recommend a plugin I use and its updated regularly with good tech support. 

Divi Bars

Divi Blog Extras

Divi Users Official Facebook Group  another excellent help resource.

If you’re not a member of Elegant Themes and want to get the Divi Theme you can purchase Divi here.

Connect with other Divi users and join a Divi Meetup Group. The Divi Nation is now worldwide and you can connect with other Divi users. Go to Meetup and seach using Divi and the name of your city. Chances are you’ll find a Meetup in your location. If you live in Chicago join the Divi-Chicago Meetup group. Meetups are virtual while we wait out the COVID-19 virus.

Quickly Build a Website in Divi

Quickly Build a Website in Divi

"Procrastination is the thief of time."

You've had the idea for so long but the website still isn't anywhere near being created.

Moving Forward

Create a website without the labor inspired with a premade layout, and quickly build a website in Divi.

Build It Fast

One of the advantages to creating a website is the ability to create it without delay, in real time. The Divi Theme comes with 125+ Premade Layout Packs. These are already designed and available in the Divi Library. A website has many components but you can speed up the process when you go about creating it with an existing layout.

Every layout has a specific style and topic but this can be changed to suit the topic.  This is the header image from the Tea Shop Layout. The image tells you the Tea Shop is about brewing tea. In this article we’re going to change the first two sections in the Tea Shop Layout Pack into a completely different topic.

This is the header image from the Tea Shop Layout. Images are essential in a website. Images tell stories without words. The next image is the same header from the Tea Shop Layout but with a different image. 

The Tea Shop Became a Global Business

Just by changing the background image and the color of the text we went from a Tea Shop to Business Consulting. You can change the color of the button or leave it if you like the color. The point here is, you’re able to do these changes quickly. Of course if you don’t know how to use the software it will be confusing. No one knows how something works before they’ve used it. But just because you’re not familiar with how it works doesn’t mean you shouldn’t use the software.

You can change the button color to match the colors of the picture in the Button Settings area of the Button Module. All of this will come to you as you work with a premade layout because the design element is already in place. You’re not looking at a blank page and wondering what to put onto the page. As you use the many features in Divi you’ll find creating a website is a whole lot easier than you imagined.

The next image is the section immediately below the main header of the Tea Shop. The image used represents the concept of doing business on a global scale, using the Internet and the phone. 

The GlobalBusiness

Mauris et diam eu turpis

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce suscipit faucibus dui non dignissim. Integer mi tellus, dictum scelerisque venenatis eu, iaculis laoreet eros. Mauris et diam eu turpis mattis cursus et non lorem. 

With the global communication concept of business online, you can see how the image using the globe with the woman talking on the phone combines the communication tools we use. And the text is positioned so that you can put some content to further explain what your business does.

As you can see by the above images it’s a matter of seeing the layout and then the idea comes as to how to bring in an image that conveys the message. The whole process happens fast this is why you can quickly build a website using one of the premade layout packs.

 

Using the Style Guide

The layout pack has a built in style. This may not correspond with what you had in mind when you created your Style Guide. First use the built in style and then experiment with a different font. You don’t need to stress out about the fonts. All the fonts that are available to you in Divi are Google fonts, all 600 of them.

Subtle Layout vs Animated Layout

These days you can create all sorts of animated affects on a web page. Some of them are good and some of them are just plain irritating. A website is a visual communication. We read text and look at pictures and watch videos. The way we navigate on a web page is by using the mouse. This requires work and effort. If there’s too much to do on a web page it creates eye fatigue and we tire of having to move the mouse around all the time.

The style of the website should be subtle with the right balance of bold and subtle colors.

If there’s no white space on the page the eyes cannot rest.

If the colors are too bright they hurt the eyes.

If the font is too light it is harder to read.

All of these things need to be taken into consideration when putting content onto a web page. When using one of the Layout Packs the style is already built in with the right amount of subtle animation and color.

Is The Content Accessible?

This doesn’t only apply to people with a disability, it’s for everyone who interacts with a website. Is the content visible or is it hidden by a special effect? Too many moving parts on a website are a distraction. Some people have vertigo sickness and cannot look at a background with moving images. Others are bothered by the GIF’s. Small movies that loop and replay the event over and over.

When you choose a font make sure it’s readable. The scripting fonts are hard to read even though they look good. It’s important that your website complies with the Web Content Accessibility Guidelines. These guidelines were developed by the World Wide Web Consortium. Here’s a link to the Quick Reference Checklist.

“Information and user interface components must be presentable to users in ways they can perceive.”

There are four main concepts to remember with Accessibility:

  1. Content must be perceivable.
  2. Content must be operable.
  3. Content must be understandable.
  4. Content must be robust.

Users must be able to comprehend the information and it shouldn’t be hidden.

Example of perceivable.

The text on the right has two sides. Unless you mouse over the content you won’t see the information on the other side. But you don’t know you can mouse over the content unless there is a command that reads: mouse over to read the back side.

"Procrastination is the thief of time."

You've had the idea for so long but the website still isn't anywhere near being created.

Moving Forward

Create a website without the labor inspired with a premade layout, and quickly build a website in Divi.

Premade Layouts Make Sense

The experience of creating a website is a major project, but you can see how simple it is to change an image and rearrange content using the four accessibility concepts. The premade layout comes with the right balance of subtle eye catching animation.

Think about what irritates you when you visit a website. Too many popups, messages, push notifications. Videos that start playing when you land on a page. You scroll down the page and if the video is still playing it jumps to the bottom of the view. The font is too small. The font is too faint to read. The font is too fancy and you can’t read it.

Take all those things that irritate you and don’t use them on your website. If you’re irritated then your visitors will be too. But if you want to quickly build a website, then use one of the Premade Layout Packs in the Divi Library. When using a Layout Pack you can concentrate on the content and the images and convey the message and purpose of your website. The design and layout is already done. It’s like using a template, you’re putting content into the placeholder.

If you need help with your website, contact me. I can show you how to use a layout pack. Click the Need Help button and get in touch with me.

How To Avoid Website Hosting Problems

How To Avoid Website Hosting Problems

How To Avoid Website Hosting Problems

By Joan | Sep 9, 2019 | Blog

Upload the Theme .zip file

Install WordPress and activate the Theme. It won’t activate because there’s insufficient memory for your theme. Now what? You just signed up with this Hosting Company.

Websites Have Changed

Gone is the template with one or two layout styles, buttons, and tabs. Now we look at beautifully designed web pages with artwork and style.  The WordPress software allows for a smooth interface, inline editing, video streaming, libraries, data intensive content, and adding specific functions with WordPress plugins. All this activity in a website increases the need for memory.

A Hosting Company should provide sufficient memory for your website. If they don’t, they’re not a good Hosting Company and it’s time to leave them even if you just signed up. You can exit and get a full refund.

If you contact the Hosting Company you’re with and they want more money to upgrade the memory for your website, you’re with the wrong Hosting Company. Even if your website is only a few pages it still has to have sufficient memory for the site to operate.

When deciding on a Hosting Company go directly to their website and take a look at what they offer.  Most of them offer a lower monthly introduction rate if you sign up for two or three years in advance. After the sign up period the monthly rate will go up.

What kind of technical support do they have? Something will go wrong with your website at some point, that’s how technology is. It doesn’t always work the way it is supposed to. Web software has bugs in it, there will be updates, security patches, error logs. It’s all part of the equation with a website. With a Hosting Company you want to know there is tech support twenty-four seven, in other words, when you need it, any time, even at two in the morning.

Is This The Right Deal?

Read the pricing tables carefully. A low introductory rate for a two or three year period isn’t bad. In fact, it’s to your advantage. What is the monthly rate after the introductory period? We tend to remember the low introductory rate. Wow, the hosting fee per month is only $3.95! And this figure stays in your mind as the cost of hosting.

Do the math, multiply the monthly rate by twelve before you sign up. We know this, but we often don’t calculate the cost and get sticker shock for renewal. An introductory rate means after the initial period the fee goes up to the regular price per month.

Don’t Do Free Web Hosting

Why? It’s cheap. No it’s expensive as you’ll find after signing up for the free hosting. You’ll have adds on your website that you can’t remove without upgrading. You’ll have limited tech support, if any. You have to rely on community support. When it comes to a website you need a better strategy.

Websites have a back end and a front end. The back end is the database that holds all the files in the website. The front end is where you’ll be working and putting in the content into the site.

If You Already Have a Domain

This domain exists with the Domain Registrar when you purchased the Domain.

If you decide to change the hosting company you will have to go through the DNS (domain name servers) transfer protocol as the owner of the domain. The DNS tranfer protocol has built in protection so someone doesn’t transfer your domain somewhere else without your permission.

Domain Logistics

What is the name of your website? The Domain Name you choose needs to be descriptive so someone knows what it is by looking at the domain.

A hosting company is a Domain Registrar, which means you can register your domain with them. When you sign up for Web Hosting everything happens fast, they want your business. Before you know it you have registered your domain, and have a name for your website.

Take Ownership of Tech Information

Your website will have a lot of details that you didn’t know about initially. Technology isn’t that complicated. All you have to do is press the buttons and read the tool tip prompts as you work in the website.

You Get What You Pay For

How much is too much and how much is too little?

Cheap is a temporary fix to our not wanting to part with money. It’s wise not to want to part with money, but not wise to want quality service for less.

Read more about Web Hosting.

Blogs with the Divi Visual Builder about how to build a website with Divi. Helps people build professional websites in real time. When she’s not busy helping you with your website, she’s learning more about Divi’s new features.

Joan

From the Writer’s Desk in Real Time about The Divi Theme

Divi Builder

Divi Builder

Blog With Divi Using the Divi Builder Ever since the Divi Theme came out in 2013, I have been using it and this is why you see all these articles...

read more