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 used in 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.

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.

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.

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.

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. A GIF is a small clip of a movie that loops, and replays 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.

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.