This post aims to demystify the process of quickly installing WordPress and Avada. Once set up, you can customize the website as much or as little as you need to match your marketing goals and branding. Website design can be an enjoyable and satisfying activity if you have the right tools in place.

WordPress is powerful but not complicated; however, there is a small learning curve for anyone new to this platform. If you want to build a website for your business, it can be challenging to get over that initial ‘hump’ of familiarity with the world’s favored Content Management System (CMS).

The best way to harness WordPress’s power and expand its functionality is to use a tool that brings everything together in one place. Avada is not just a WordPress theme; it is more than that. It is a Website Builder and the go-to solution for more than 998k beginners, marketers, and professionals when it comes to designing and maintaining world-class websites. In this post, we’ll show you how.

Being prepared before starting a new website is paramount because it ensures a clear direction and purpose, which guides all subsequent decisions. Additionally, preparation streamlines the entire design process, making it more efficient and minimizing the likelihood of errors or delays.

Here is a basic preparation checklist:

From a technical perspective, preparation ensures that all necessary elements, such as hosting and domain setup, security measures, and backup solutions, are in place from the start. Furthermore, integrating a clear Search Engine Optimization (SEO) and marketing strategy into the plan from the beginning helps achieve better results.

The first step assumes you have already purchased Avada on the Themeforest marketplace. If you still need to, please see this detailed help file on how to purchase Avada.

To start the installation process, you must download the correct installation files and, while at it, the purchase code to register Avada, as explained in Step 3.

Log into your Themeforest marketplace account and navigate to the downloads page. At this stage, you are presented with these options:

Download the “Installable WordPress file only” and a copy of the license certificate. For more information on what is included with your Avada purchase, please see this help file.

The next step is to log in to your website’s Dashboard. By default, you can find your login page by adding /wp-admin/ to the end of the domain where you installed WordPress (e.g., http://yoursite.com/wp-admin/).

With each vanilla WordPress installation, a default theme is set as the active theme and will change once you upload Avada.

Once logged in, navigate to Themes > Upload Theme and upload the ‘Avada.zip‘ file you downloaded from your ThemeForest marketplace account.

WordPress will notify you as soon as the Avada upload is completed, giving you three choices. Choose > Activate.

Once activated, you will be redirected to the main Avada Dashboard page.

At this point, you will be ready to proceed to the next step: installing the required plugins (Avada Builder, Avada Core), registering Avada, and getting started with customizing.

Registering Avada involves verifying your purchase. This process allows you to receive free automatic updates for life, import prebuilt websites directly from within your WordPress dashboard, and access Avada Studio prebuilt content.

Log into the Themeforest marketplace account used to purchase Avada to locate your purchase code. For detailed instructions, please see this help file (Locating the purchase code is also explained in Step 1).

The Avada Builder and Avada Core plugins are required and must be installed for Avada to work as intended. To install them, navigate to the Avada > Plugins screen.

Installation is straightforward and completed in a matter of seconds.

On the Plugins page, you will see a range of plugins divided into REQUIRED, PREMIUM, and RECOMMENDED.

An Avada prebuilt website is a professionally designed website template included with your purchase of Avada. These websites, also known as “demos,” are created by the in-house Avada design team and intended to showcase the versatility and functionality of Avada and WordPress. They provide a quick and easy way for users to set up a professional-looking website without needing to design it from scratch.

There are currently 109 websites to choose from (with new websites being added regularly), arranged into various industry categories. Before the import, you can filter by category and preview each website. You can also view all Avada prebuilt websites online.

These prebuilt websites include complete layouts, styles, and dummy content that can be imported into a WordPress installation with just a few clicks. Each prebuilt website is tailored for specific industries or purposes, such as business, portfolio, e-commerce, blog, or landing pages, allowing users to choose a design that closely matches their needs.

On the import screen, you will see options. You can import all the content, import specific content types only, or remove previously imported content.

Importing an Avada website will give you layouts, pages, posts, forms, icons, global options, widgets, sidebars, sliders, and miscellaneous settings to replicate the original site accurately.

Once imported, you can customize the dummy content, layouts, and other elements to fit your unique requirements, leveraging Avada’s powerful features and flexibility to create your perfect website.

There are several approaches you can take when it comes to creating your new website, and how much and how far you customize the imported website will be entirely up to you and your goals. You may want to do low-level customization and only change the core branding, such as the logo and favicon, dummy wording, and general contact information, essentially leaving all of the imported pages and layout structure intact.

Or, you may want to go the whole hog and customize everything (header, footer, layouts, content, media, images, pages, and posts). Avada gives you the flexibility and creative freedom to design any website layout, add an e-commerce online store, and more.

In addition to the prebuilt websites, Avada offers a wide range of creative resources that will enhance and inspire your workflow. These include prebuilt Avada Studio content, tutorial videos, an advanced help center, and world-class professional support.

Getting a website up and running can seem intimidating, especially when switching to a new framework or using one for the first time. However, starting with Avada is much easier than you may think.

Following the steps in this article, you can set up a basic website in no time. From there on out, customizing and aligning the content to match your business or brand is all that would be needed.

Image size for websites is a deep and complex subject. There are many factors to understand and to take into account, and it’s not a topic where an easy, one size fits all answer will suffice. But if you want to know more about how images work with your Avada website, and get a general overview of the factors at play, read on.

When we speak of image size, it is useful to keep in mind the two different sides of the issue. The first one is “What size images should I upload?”, while the other side is “What affects how large my images are displayed?” And these are not independent questions. You can’t answer the first one without also considering the second.

With this Image Size Guide, we aim to give you the information you need to gauge how big or small your images should be to fit your website, as well as to ensure that they look crisp on your viewers’ screens. The size and quality of the images on your website depends on a whole range of factors, such as how big you upload them, your site width, whether they’re in columns or being used as a background image, whether you use sidebars, and even the resolution of the end user’s screen, to name just a few. Continue reading below to learn more about these factors. Also, take a look at our extensive blog article, ‘A Comprehensive Guide To WordPress Image Optimization’, to explore the basics of image optimization.

These days, most people won’t set foot in a store or an office without looking it up online beforehand. With online directories, such as Google Maps, Yelp, and TripAdvisor, you can learn everything you need about any business from your phone.

Online business directories might seem complicated at first; however, at their core, they all require a common framework and functionality to deliver marketable information. You should be able to share business locations, reviews, photos, prices, and any other vital information with your audience. With the right WordPress theme, plugin, and approach, you can set up your online business directory as a marketing and public service powerhouse.

In this article, we’ll talk about why starting your business directory is much easier than you think. We’ll discuss what features every great directory needs and teach you how to pull it off using WordPress, Avada and the GeoDirectory plugin. Let’s get started!

At their core, business directories are all about listings. You gather the relevant information about a business, add it to your directory list, and that’s about it:

In practice, however, people expect a lot of functionality from business directories these days. To give you an idea, here’s a quick list of features we couldn’t live without:

With an online directory, you can drive sales to the businesses you want to promote, and it is a great way for businesses to boost their local SEO. Using the right tools, you can even monetize the project by charging companies and services to be listed within the directory, over and above standard advertising. On top of all that, you’re also providing a public service by giving people the information they need to find the products and services they want.

You will need a clean WordPress installation and hosting provider to get started. Once WordPress is set up and ready to go, you can move on to the next step, installing Avada.

The first thing you’ll need for your business directory site is a theme that’s both highly customizable and works well alongside the GeoDirectory plugin (which is the tool we’ll be using to add in crucial functionality). GeoDirectory has put together a comprehensive guide about setting up GeoDirectory with Avada.

Avada fits both of those criteria, on top of packing in a lot more cool features. In fact, the GeoDirectory plugin works out of the box with the Avada Builder, and you can set up and customize your website, without having to touch any code.

Please see this quick setup guide for a detailed overview of how to purchase, install Avada, and then import any of the 109 Avada prebuilt websites available.

The GeoDirectory plugin is free to use, and it also offers a lot of premium add-ons you can install to extend its functionality:

Right out of the box, this plugin packs all the features you’ll need to create a robust business directory. Including the ability to select a location such as a street or even a whole city, enable visitors to submit listings, and much more.

Let’s go ahead and install the plugin so that you can check it out firsthand. As soon as you activate it, you’ll get access to a setup wizard:

First, select the maps API you want the plugin to use. By default, it will use the Google Maps API with OpenStreetMap as an alternative choice. The OpenStreetMap option is great for most users, so let’s stick with that setting.

Next, we will move to the next step, where you can set a default location for your business directory. That’s the map that will show up on your website and will help users find the businesses they want:

The following section is for extra features. There are three free recommendations and s list of optional extras that can be purchased for an annual or monthly fee:

The final step is content. At this point, you can connect your site via an API to the GeoDirectopry servers and import content or test your directory by adding dummy data. Using dummy data is an excellent way to get an idea of what your directory might look like once it starts to grow.

In the previous screen, we opted to import dummy data. The final screen confirms a successful import. A privacy option allows you to opt into or out of sharing non-sensitive diagnostic data and usage information with GeoDirectory.

Let’s move on to step 3, creating your first directory listing.

For now, though, let’s review the process of manually adding a real listing. To do that, go to the WP Dashboard > Places and click on Add New. Now you get to create a new listing using the WordPress editor:

Go ahead and set a name and a description for your listing. Once you start scrolling down, you’ll see options to add all the other information a business listing requires that includes a location, category, contact information, social media accounts, and much more:

This information is the heart of your business directory, so you’ll want to be as thorough as possible. All listings added to the directory will show up within the WP Dashboard > Places tab:

The GeoDirectory plugin is integrated and works as expected with the Avada and the Avada Live Visual Builder. You can build your page layouts and content with the Avada Builder and use the vast array of GeoDirectory Avada Builder Elements they have hooked in to create dynamic business listing pages.

You can place these Design Elements on any page and customize them, giving you full control over how your directory looks. GeoDirectory has created two excellent tutorial posts illustrating how to design an AirBnB-style listings page and a standard directory website using Avada.

Now, all that’s left is to keep adding listings. Plus, if you’re up for it, you may want to flesh out your business website with a few more pages.

Building a successful business directory is no small feat. That is, of course, if you’re not using WordPress. With Avada and the GeoDirectory plugin, you can have your business directory set up in no time. Then it’s just a matter of attracting enough businesses, and the users will follow.

It’s been no secret to anyone using a mobile device over the past few years – webpages have become more feature-rich, while delivery speed has been sometimes lacking. While ‘mobile-first’ initiatives have been helpful in bridging this gap, more effort is necessary to bring browsing speeds into the 21st Century.

Fortunately, a number of major developers have looked to tackle the speed issue head on. Both Google and Apple have released projects to improve mobile content delivery speed (Accelerated Mobile Pages and Apple News Publisher respectively). However, one major developer has been so far conspicuous by their absence, despite their overall dominance of our web time.

Instant Articles is Facebook’s own initiative to improve mobile browsing speeds and much like the AMP Plugin for Google’s project, Automattic has stepped up to develop their own plugin for WordPress integration.

In this article, we’ll look at what Instant Articles is, its limitations and how to integrate it with your WordPress website. In our article on integrating AMP with WordPress, we explained some of the technical terms found here, so it’s worth reading through that first, to get up to speed.

If you’re ready, let’s get started!

Announced as far back as May 2015, Facebook’s Instant Articles has similar goals to both Google’s and Apple’s offerings, delivering web content quickly to mobile devices. However, while Google’s Accelerated Mobile Pages (AMP) was designed as an ‘open-source’ project (i.e. It enables anyone to assist with development.), Instant Articles is a ‘closed-source’ proprietary platform. As such, content is only viewable on mobile devices within the Facebook app and using Instant Articles means working completely within Facebook’s ecosystem.

Publishing articles happens directly from WordPress through an RSS feed edited with HTML5. Instant Articles are published at the same time as the desktop article and any changes or updates are automatically captured and pushed to your feed.

To actually increase content delivery speed, Instant Articles borrows the same technology used to display images and videos in the Facebook app. This, coupled with the benefits of caching, means articles may load up to ten times faster than normal.

While AMP focuses on speed at the expense of extra functionality, Facebook has given content producers a number of tools to make articles immersive and interactive:

News Feed article previews can be customized to match brand identity and can even include video. Of course, with this being Facebook, user engagement can be tracked through your page’s normal analytics screen.

While all of these features are impressive, you’d be forgiven for thinking that this extra functionality could impact page speeds. As alluded to earlier though (and much like Google itself), Facebook will cache all compatible Instant Articles on their servers, keeping the load time to a minimum.

Finally, there looks to be more good news for content providers, publishers selling adverts through Instant Articles get to keep all revenue generated. For those extending their campaigns outside of Facebook, there’s still the option to take advantage of the Facebook Audience Network, though that appears to follow the same guidelines it always has.

Now we’ve looked at what Instant Articles is, lets look at some of the format’s limitations.

While speed and the immersion tools are big benefits, Instant Articles comes with a number of limitations to consider:

Websites with less than 50 eligible posts will be rejected outright. If your site does meet this post count, your site joins the queue to be manually reviewed. As with any manual process, wading through the inevitable applications takes time, and it could be that your competitors are taking advantage of Instant Articles before you.

Publishers will need multiple solutions to show the same page via the different platforms and those solutions may not be consistent in their implementation, nor play nicely with each other. Furthermore, some of the immersion tools mentioned above will need to be coded into your pages and as far as WordPress is concerned, some plugins may also need more code to be compatible.

In an FAQ on their developer website, Facebook stated there will be no News Feed ranking benefit to Instant Articles; and because all interactions (such as reactions, comments, and shares) take place with the Facebook app, overall this could mean your Facebook user engagement rises, but your reach may not – leaving your original website article languishing from a lack of user interaction.

While Facebook’s terms (such as the aforementioned 100% ad revenue) are favorable for publishers right now, if Instant Articles has a large adoption rate, these terms may change. After all, providing a tempting sign-up offer to only lock users into a lesser deal later is not a new business move. To which, Facebook may choose to remove competitor’s ads (such as Google AdSense), replacing them with their own versions and further locking in content providers.

Finally (if you haven’t guessed by now), most aspects of Instant Articles are handled entirely within the Facebook ecosystem. The relative merits of a ‘walled garden’ approach are beyond the scope of this article, but it may be worth considering if you enjoy the freedom of using non-proprietary solutions.

Now that we’ve discovered what Instant Articles is and looked at some of its limitations, let’s look at the final step: WordPress integration.

To get your WordPress website integrated with Instant Articles, you’ll need at least two things:

While you probably have the first one, it’s the plugin, which is a a joint effort between Automattic and Norwegian developers Dekode, called Instant Articles for WP, that you may not have. Let’s take a look!

Much like Automattic’s AMP plugin, Instant Articles for WP provides no settings to tweak. All of the magic happens elsewhere. Once installed, a new RSS feed is created, which you can see by appending either /?feed=instant-articles or /feed/instant-articles (depending on your permalink settings) to your website’s URL:

http://www.example.com/?feed=instant-articles

http://www.example.com/feed/instant-articles

For the rest of the process, you’ll need to sign up to Instant Articles – enable your page on the next screen – then log into your Facebook Page, navigate to the Settings screen, and select Instant Articles from the left hand menu. The setup process has a number of steps, but you can skip most of the Initial Setup section if you want to get up and running straight away:

Step 2 involves actually submitting your articles, but this won’t be possible until you’ve connected your RSS feeds. Scroll past Step 2 and find sections to enter your RSS feeds, including a development feed if you have one, then back up to Step 2, where you’ll submit each article for review.

It’s at this point that the review process begins and once accepted, any new articles received from your RSS feed will be pushed to the readers’ devices.

Styling of your Instant Article page takes place within the Facebook Style Editor, such as font color, typography, and identity images; among other options. Facebook has provided a comprehensive design guide to what’s possible when using the Style Editor.

Mobile browsing dominates our time, but the speed at which we receive web content is sometimes left wanting. While Google and Apple have looked to address the issue with initiatives for the open web, content providers for Facebook have had nothing until now.

Instant Articles is the answer to rapid content delivery within the Facebook ecosystem. To get your WordPress website ready, you need to do the following:

Major developers are looking to drag our mobile browsing speeds into the 21st Century, but at this point you may be wondering whether you need both AMP and Instant Articles to deliver an improved experience to mobile readers. For the answers to that question, look out for a future post where we’ll compare both platforms directly.

Are you going to be an adopter of Instant Articles? How will it help your business connect with people? Give us your opinion in the comments section below or let us know if you have questions about using Avada with WordPress!

Image credit: geralt.

We may live in an age of visual media, but I’m willing to bet that text still makes up the majority of your website’s content. What many web masters don’t appreciate is that the typography you choose can make a big difference between engaging with or turning off your readers.

This is where you can make a positive difference. Learning the basics of web typography and applying your newfound skills will ensure that your website’s content is attractive, accessible and engaging. It needn’t take long either.

In this post, we’ll cover how to get started with web typography and accessibility, then show you how to apply what you’ve learned to your website using Avada’s industry leading network of options.

To begin your typographic education, you must first learn how typography has evolved from print into the digital age.

There’s one key difference to consider, which is so simple that its implications are easily passed by in the design process:

Keep in mind that when you are designing with web typography, what you see isn’t necessarily what everyone else is going to see. To truly understand how it changes, you’d need to check out your site on as many different operating systems, devices, and browsers as possible. If you do want to get into browser testing across multiple platforms, you can do so by using any of the browser testing tools listed here.

My point is, perfectionism is not the goal here. Simple, accessible typography is easier to implement than you think; you don’t need it to be ‘pixel perfect’ for your readers to readily consume your content around the world with minimal readability issues.

Web accessibility is easy to forget if you do not suffer from any disabilities, but there are numerous folks out there with a range of barriers that prevent them from enjoying the web to its fullest. You can learn more about user diversity on the web at the W3 website.

The recommended rule of thumb is to assume that your readers struggle to read online text, in one way or another. Your goal is to assist them by designing your typography to meet their needs.

Even for those who are not impaired, typography designed to be easy on the eye will be appreciated by all. Think about the way we use elevators – not all of us physically require the use of one, but it sure is nice to not have to walk up so many flights of stairs.

By paying attention to typography and designing for accessibility, you reduce the chances of users distorting your website by zooming in to read it, or simply leaving in frustration.

To be fair, becoming an expert on pairing web fonts is a skill that develops with time and practice. However, getting started doesn’t have to be difficult! Here are some basics that will help you:

Avada allows you to use Google Fonts, unlimited custom fonts, and even standard fonts. And the advanced theme options allows you to control all aspects of styling like font size, font family, line height, letter spacing and more so you are only limited to your imagination!

Choosing the right fonts is your first step, but next you need to determine how those fonts should display.

Font size is similar to how you would set your font size in a text document on your computer. However, the default for web font sizing is in pixels (px) rather than points (pt). Pixels are used to measure resolution on a screen, points are used to measure against physical media.

Line height is how far away each line of text is from the next.

When it comes to usability, small fonts may look beautiful aesthetically, but are difficult to read. Here are two simple guidelines to follow for optimal reading sizes:

You can adjust these settings with Avada in the Typography Options.

You may be noticing a trend – what works well from a purely aesthetic point of view may not be entirely functional or kind to your readers and their eyes.

Subtle colors between your text and backgrounds can be beautiful, but in the end, this design decision doesn’t serve your readers well.

In order to avoid this problem, do the opposite! Choose high contrast colors for your design. There are a number of initiatives to help create more accessible web design that provide tools to determine whether your colors are high contrast enough, such as this Contrast Checker by WebAIM.

Ready to apply this knowledge? Avada has an advanced network of options that includes Theme Options, Page Options and Builder Options. Avada’s Theme Options is the section dedicated to adjusting all aspects of the typography used on your site.

Theme Options are logically grouped into sections so everything is easy to find, and there is a search field that can quickly pull options up with a single keyword or two.

The typography controls in Avada are out of this world. Virtually every font used on your site (Headings, body font, menus, widgets, etc) can be fully controlled using Avada, and it even shows you a live preview of the font settings while you choose them! Below is an example of the advanced typography controls in Avada.

Don’t lose readers to poor typography; instead, use Avada to take control and fine-tune your website’s typography!

Let’s recap the steps we covered in this article that will help you to produce highly readable typography:

Have you taken the time to hone in your typography skills and improve the readability of your site? We’re curious to know what changes you’ve made, and how it impacted your reader’s engagement, so let us know in the comments section below!

Image Credits: Wikimedia Commons, Lindsay Henwood, Amador Loureiro

You invest a lot of time creating great content for your blog, so don’t lose the reader’s interest by publishing content with thoughtlessly scattered images (or even worse, none at all!).

Capture your readers’ attention and elicit an emotional reaction by treating each blog post like its own landing page. Tell a rich multimedia story with your text and images, and you’ll put your content head and shoulders over the alternatives.

Are you ready to turn your dreary blog posts into compelling visual stories? In this post, you’ll learn which tools to use to leverage powerful images on your Avada blog.

Blog posts don’t have to be plain text with images dropped in ad hoc. In fact, there’s really no excuse for that in our age of audiovisual interaction. Engaging blog posts tell a story by using a variety of text and image formats to lead the eye from one section to the next, keeping the reader engaged and curious to see what new information is just around the corner. We’re not making this up, either. Combining photos with text is proven to increase engagement.

Now let’s explore three key ways in which you can use images to add color and depth to your blog posts, and ultimately tell a more captivating story. Each of the following techniques are based on using Avada’s Fusion Builder to write your blog posts.

When it comes to adding photos, many people simply ‘Add Media’, take the default settings, and move on with their blog post.

The first step to improve your use of images is to take advantage of basic image placement variations – floating left or right, or hanging out in the center. It’s best to mix up these placements keep the reader’s eye flowing through the page. When everything looks the same, the brain tends to wander.

You have a few options to make this happen.

When you insert an image into the page, you have the option to choose how it interacts with the rest of your content.

Depending on whether you’d like the image to act as an aside to the content, or interrupt the flow of text with its own message, you can align it left or right within the text, or center it to give it special focus.

Let’s say you want your image centered with text on both sides. Is that possible? Not within the normal WordPress scope, but with Avada, of course!

The trick is to be creative with your image placement and use the Fusion Builder’s columns to take granular control of your images and ensure they display exactly how you intend them to. Here is an example of this setup:

In id faucibus eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed rhoncus lorem urna, at pretium nisi placerat non. Mauris lobortis mi vitae augue blandit, sed porttitor urna aliquam. Maecenas tincidunt tincidunt urna ut facilisis. Etiam ullamcorper cursus tortor a dictum. Integer ante elit, maximus eu vulputate cursus, accumsan vitae elit. Quisque aliquam odio nisi, at sagittis urna suscipit at. Duis eu posuere enim.

In id faucibus eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed rhoncus lorem urna, at pretium nisi placerat non. Mauris lobortis mi vitae augue blandit, sed porttitor urna aliquam.

In id faucibus eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed rhoncus lorem urna, at pretium nisi placerat non. Mauris lobortis mi vitae augue blandit, sed porttitor urna aliquam. Maecenas tincidunt tincidunt urna ut facilisis. Etiam ullamcorper cursus tortor a dictum. Integer ante elit, maximus eu vulputate cursus, accumsan vitae elit. Quisque aliquam odio nisi, at sagittis urna suscipit at. Duis eu posuere enim.

Below is what this looks like, set up, using the Fusion Builder:

Elements used:

Occasionally you’ll find yourself with a certain quote or standout piece of text, or some other content that really needs to set itself apart from the crowd.

You can accomplish this visually by giving it its very own background image or color, right within the post. Again, within the normal confines of WordPress this would be difficult to achieve, but using Avada’s Builder makes it easy.

So get creative. Make use of the parallax background options to animate your story even further! (WPMU DEV has a great post about how to use parallax to tell a story.)

If you feel that is taking things a little too far, it’s easy to reference our One Page Parallax Demo for subtle touches that make your page feel that much more visually interesting. Images subtly fade in, buttons bounce; the world is your oyster here.

Here are a couple of simple examples for how to use backgrounds to make your text pop.

In some cases, you may find yourself wanting to create an actual multimedia presentation within your blog post.

Instead of relying on third party services like SlideShare, you can build your own slides and presentations right within Builder. There are two choices for this:

You may be losing reader engagement on poorly designed blog posts, but with the Fusion Builder it’s easy to take the content you’ve worked so hard on and compliment it with multimedia interaction to match.

Take the extra few minutes to create immersive experiences for your readers. Fine-tune how your images are displayed, take advantage of full width parallax backgrounds, or even include native slideshows.

Do you use the Fusion Builder in your blog posts? How effective do you find these techniques to be when applied your (no longer) regular blog? Tell us how you keep readers engaged in the comments section below!

Designing effective website page layouts is essential for higher reader engagement and conversions. Still, most people don’t understand how or when to use the correct type of layout for their content. By learning about a few patterns that readers on the web follow, you can create layouts that fit these patterns, making them more likely to be read and acted upon.

Using Avada and WordPress and following basic design principles, you can decide how to best structure your website content. In this article, we will examine studies performed by user experience experts to determine how reader patterns interact with the most common types of web pages to create effective page layouts. Let’s get started!

A web page layout refers to the arrangement and organization of visual elements on a web page. It defines how content, such as text, images, navigation menus, and multimedia, is structured and displayed to users. The layout is a crucial aspect of web design as it impacts user experience, readability, navigation, and the overall effectiveness of the web page.

While you can apply the techniques explained in this article to the headers, footers, and sidebars, we’ll focus on the text, media, and clickable actions unique to the Avada web page(s) you create. Each section focuses on a typical ‘type’ of web content and then explains how to lay out that content to create an engaging user experience.

Before moving on to building more complex layouts using the Avada Layout Builder, it’s good to start with the basic concept of the Gutenberg Diagram. If you’re working on a page that must consist of plain text Columns (for example: long-winded documentation, reports, or privacy statements), this layout is for you. It is one of the layouts that have been addressed the least, but it calls for your consideration.

The main idea is that attention begins in the upper left-hand corner and is drawn down to a final stopping point in the lower right-hand corner. You can visualize this as follows:

You will usually work on pages other than this, but understanding how this theory applies will improve your ability to write better content and design more complex layouts.

Using the Gutenberg Diagram is simple – you must write your content appropriately.

Indeed, plain text pages without any headings are rare, but if you are designing one, the strategies you should use are as follows. We recommend using headers and tying your content into Layout 3 below.

Regardless, the design theory that the reader’s eye naturally travels from the top left and looks for an action point on the bottom right goes far beyond plain text, as you’ll see with the following layouts.

Let’s say you’re building a homepage or landing page for your most recent product. These pages usually have many big images, videos, and strong typography, leaving out large bodies of smaller text. In these situations, create your design layout using the Z pattern design principle that capitalizes on natural eye movement and reading behavior of users in Western cultures.

The Z pattern is an extension of the Gutenberg Diagram and how it applies to readers scanning a web page when you’re offering more than plain text. You can see how similar the concept is:

Since there is more to take in on the page, the reader tends to do a full scan in a Z-shaped pattern before finally reaching the lower right corner. It fits right on top of the Gutenberg Diagram, with the strongest points being the top left and lower right corners. Here’s how it comes together in practical terms:

As a practical example, you can check out how our design team employed this tactic on the Avada homepage.

You can create an alternative visual hierarchy with strong graphics to manipulate the Z pattern. However, this is not recommended as it can create user experience friction.

Suppose you’re really into design theory and want to learn more. In that case, we recommend reading How the Human Eye Reads a Website and Understanding the Z Layout in Web Design.

Implementing the Z pattern is more complicated than writing your content in a certain way. You’ll want to plan out your content’s layout before building it on your website. This is called wireframing, and it’s a lot easier than you think! We recommend sketching out your ideas first. Here are a few resources to get you started:

Once you’ve sketched a practical layout, it’s time to implement it on your website, which is incredibly easy to do with Avada’s Layout Builder. You can go from concept to a completed page in minutes!

Your most typical scenario for the F pattern will be blog posts and articles. A strong hierarchy is created for the F pattern when using headings to split the page. This is compared to Example 1 in this article, which relates to lots of text without many headings.

Due to the nature of the content (lots of text), the reader’s attention is different here. You can see how it changes with the following graphic:

Even ignoring the differences, this pattern still borrows from some of the ideas in the Gutenberg Diagram, particularly that readers will always begin in the upper left-hand corner of the page. A few of the overarching principles to keep in mind:

The F pattern greatly benefits from adding imagery to the page. Images throughout the page help maintain attention by moving the eye through the page, much like using large and bolded text headings. It’s easiest to understand how the F pattern works by using a hypothetical heat map.

Red is where the user is likely to pay attention, while purple is where readers will spend the least time scanning the page. For further education, read Understanding the F Layout in Web Design.

From the example above, you can see that headings build a structure for the reader to scan through. Use effective headings to construct a virtual outline to help the reader understand your content’s most important ideas. Once readers know your content has what they are looking for, they’ll likely slow down and pay attention.

If you need another example, try skimming through this article, reading only the headings! We use this principle with every blog post we write.

Building an effective Avada page layout depends on what kind of content you are dealing with. Most people do not know how to recognize the reader patterns on which to build page layouts.

By understanding the type of content you are working with and how to pair it with common reader patterns, you can intentionally direct attention to the most critical elements on your page by using the principles for each pattern.

Good design is subjective. Just because you think something looks amazing or because a design has received good responses in the past doesn’t mean it will resonate with your customers.

Thanks to constantly evolving web technology, however, you can find out exactly how your customers interact with your site. You can do this by analyzing real user behavior through a handful of apps that help you track “hotspot analytics”.

In this article, we will explain hotspot analytics, demonstrate just how valuable they can be, explain what features offer the greatest benefits, and show you how to improve your Avada-powered site with them.

Putting a beautiful WordPress website together is now easy with options like Avada.

However, there are so many things to consider when creating your site. Should you use a homepage slider? How can you better utilize the layout on your features page to drive more sales? How can you determine the best approach to setting up your website in terms of what delivers the greatest value in conversions and sales?

Surveys and questionnaires can help you get some initial feedback, but they leave at least one key aspect unresolved: what customers aren’t telling you.

Quantitative data from real behavior will help you cut through the clutter and gain better insight into what website changes or additions need to be made.

That leads us to ‘hotspot analytics’ – a form of advanced analysis that uses heat mapping technology to determine real-time interactive user activity on a website. It does this by tracking everything from cursor location and movement to clicks and even touch screen taps.

By using hotspot analytics, you can determine what information and graphics are most interacted with on your site.

Now that we’ve gone over what hotspot analytics is and why it matters, let’s get into specific features and the benefits that they offer.

Hotspot analytics will offer you a lot of information about user behavior on your site. Let’s go through the top three features of hotspot analytics and the benefits that each offer.

A heat map is a graphical representation of where users’ cursers hover on your site, displayed in colors, identifying areas of greatest volume.

The goal of a heat map is to help you determine where people are (and aren’t) interacting with your website.

In order to get a basic heatmap so you can begin to uncover how people are actually using your site, SumoMe is an easy, affordable option.

Scroll maps, like heat maps, are a graphical representation of how far down a page users are scrolling. This enables you to determine how much information is being consumed by knowing at which point most users abandon a page.

Research shows that 80.3% of user time is spent above the fold of a page! Knowing this – and being able to discover exactly where users are focusing on your page – will help you design a site more effectively.

The aforementioned SumoMe provides a scroll map option that can provide a basic breakdown of where people might be dropping off. PTengine also includes scroll maps, while combining it with other page analysis features to help you measure and improve content performance.

Click distribution, sometimes referred to as ‘overlay’, shows the number of clicks that each element of a page receives. It works just like heat mapping, but instead of showing you where a user’s mouse moves, it highlights where mouse clicks are taking place.

This helps you to determine whether your primary objectives on a page are being used, as well as what might be distracting or ineffective to users.

CrazyEgg can help you get a basic understanding of where your visitors are interacting with your site (as well as segmenting those users by a number of variables like their referral source). Otherwise, ClickTail can help provide you with detailed, enterprise-grade user behavior testing.

Click distribution will show you not only where on the page your customers’ attention is drawn to, but exactly what they are (and aren’t) clicking on. Now you know what hotspot analytics are, let’s move onto show how you can use them.

Fortunately for us, all of the above hotspot analysis tools are quick and easy to install. Most provide a variety of WordPress installation options, including plugins or embed codes.

With that said, let’s move onto the practical side of improving your website as a result of the results of hotspot analytics reports!

When it comes to analyzing your heat mapping results, your primary objectives can be boiled down to two categories of focus: macro conversions and micro conversions.

As mentioned earlier, viewers only give you about ten seconds to lure them in. If they have to scroll down the page or search for information on a cluttered site, they’ll simply find the information somewhere else.

For example, one option on the Avada demo currently has a great header area emphasizing their primary “macro” conversion (i.e. Purchase Avada):

But what if you wanted to see the impact for adding an additional call-to-action for a “micro” conversion? (For example, all the people who aren’t ready to purchase can learn more about the features, etc.) Navigate down to the call-to-action section on the Avada Slider homepage, and you can add another Button Element.

Now you’ll see that we added another button that’s a little less prominent. This intuitively communicates priority to the visitor; helping them make a quick decision (based on hierarchy) without even having to think about it.

Another common area you might want to generate “macro” or “micro” conversions is in your sidebar. There’s only one problem: “Banner Blindness”.

Banner blindness refers to how website visitors today will commonly ignore anything that looks remotely like a banner advertisement. Most of us do it without even knowing.

However, that’s an issue if your beautifully designed site has important elements that might appear as a banner.

For example, if you’re selling services, a portfolio is incredibly important to showcase your work to future prospects. With this in mind, what if you were concerned about how your portfolio design and layout were affecting user behavior?

One place to start is by setting up a simple heatmap on your current two column Portfolio page layout.

After collecting some initial data, it might make sense to instead change the Portfolio layout to a single column with supplementary text and calls-to-action. Switching the Portfolio layout is easy. Start by opening your Portfolio page and click to edit the Portfolio Element:

The Portfolio Element has a plethora of configurable options that you can utilize to change and style your layout. For this usage case we will be selecting Text Layout as Default = Boxed and Content Position as Next to Image as follows:

Once you have selected your layout changes, saved the Element and page, your portfolio will look like this on your site:

Now you could run the tests again and collect information to see what (if any) impact those layout and design changes had. Typically, the length of these types of tests all depend on the number of visitors you’re currently getting to make sure you’re getting a statistically significant sample size.

Good design is easy with Avada, but figuring out how to lay everything out can be difficult, and if done wrong, can cause usability problems.

Hotspot analytics plugins, in tandem with your Avada theme, will dramatically change your approach to website design and layout. By using the heat mapping technology, you will know with certainty what aspects of your site to keep and what to ditch.

It’s worth it to know exactly what your customers – both potential and retained – are engaging with on your site. If you haven’t made use of this new technology, it’s time to get on it.

Have you ever tried using any of these tools? Have you made changes on your website because of real user behavior testing? Let us know in the comments section below!

WordPress powers over 25% of all websites for a reason: it’s open source, supported by a huge community, and almost infinitely extensible. However, with great power comes responsibility and risk – WordPress is a target for hackers, due largely to its popularity.

Fortunately, WordPress can be a highly secure platform if you maintain your installation. And one major element of security is updates – including WordPress ‘core’ itself, plus themes and plugins.

With the above in mind, in this article we’re going to cover everything you need to know about updating WordPress core, themes, and plugins. We’ll start by explaining in greater detail why keeping everything updated is so important, then take you through the best process for updating.

There are three main reasons to stay on top of updates:

1. Innovation: The pace of innovation within the WordPress ecosphere is astounding. Without staying on top of updates, your site will fall behind and you’ll be unable to tap into updated and additional functionality.

2. Compatibility: With innovation moving at such a pace, plugins that aren’t kept up to date will tend to suffer from compatibility issues as you update WordPress. Put simply, your site may stop working as it is intended to do if you do not keep up with updates.

3. Security: Major WordPress core updates can address security-related issues. When these updates are released, the security ‘holes’ that have been plugged up become common knowledge, which means that nefarious types can take advantage. What was previously a potential problem can soon become a foregone conclusion if you don’t keep WordPress updated.

This may all sound rather intimidating, and perhaps even put you off from using WordPress, but these are problems that you will encounter when using any Content Management System. Transferring to a less functional and user-friendly option to avoid having to update is folly, especially when you understand just how easy it is to update WordPress core, themes and plugins.

Before rushing to hit update, there is one important step you must take: back everything up!

Backing up your database and WordPress files before updating anything means that, if something untoward should happen, you can roll everything back to the old version and get your site back online in minutes. (For peace of mind, it’s worth pointing out that a core update is highly unlikely to ‘break’ your site, and the same can be said for any themes and plugins from reputable developers.)

Fortunately, there are a few plugins that can help make your life simple on the backups front. The follow three plugins will help you setup backups on an ongoing basis, then automatically send them to your file storage of choice:

I mentioned that backing up is the step you must take, but there is one other item of consideration depending upon how adventurous a WordPress user you have been: custom code. In other words, have you been tweaking any theme or plugin code? If you have, that data will be lost upon updating.

The time is now to make amends for your roguish coding ways and make your tweaks the right way. In a nutshell, create your own plugin (it’s easier than you think!) or use functions.php for custom code, and create a child theme or utilize a sensible location for custom CSS (like Jetpack’s Custom CSS module) when it comes to tweaking your themes.

By this point you should have (1) a backup of your site available, and (2) no custom code floating around in vulnerable places, which means that you’re ready to update. So, let’s get to it!

Updating WordPress core, themes and plugins couldn’t be an easier (unless it were entirely automatic, and we’ll get onto that shortly). Simply click on Updates from under the Dashboard menu in the sidebar, and you’ll be presented with an option to update WordPress core, themes and plugins in one click:

It really is just a point and click affair, but for a detailed step-by-step guide on upgrading WordPress, check out these Extended Instructions.

It’s worth saying at this point that, in an ideal world, you’d update to a ‘staging’ environment (i.e. a copy of your live site inaccessible to the public) to check that everything’s hunky dory on the updates front before going live. Depending upon the size of your site and the potential fallout of any update-related issues, this could be something worth considering. If you’re interested and would like to learn more, check out this excellent tutorial courtesy of WPBeginner.

In a nutshell, once you’ve updated WordPress core, themes and plugins, you need to check that everything is working correctly. It is very important to always clear the various forms of cache to ensure you are viewing the latest files.

You can wait for your users to tell you if something’s broken, but I wouldn’t recommend it! That said, this advice is more pertinent to sites with extended functionality, by which I mean everything from contact forms to fully-fledged e-commerce sites.

The simplest check is to simply browse through your site and make sure that everything ‘looks okay’, but ideally you’ll go into a little more depth than that.

It’s up to you how far you take your testing, and the importance of any given element’s functionality should be your guide. For example, if you run an e-commerce site, I would personally recommend that you go through the checkout process to ensure that visitors can still buy items from your site.

It’s ultimately up to you. If you’ve updated to the latest version of WordPress and are using highly rated and regularly updated themes and plugins, you’re unlikely to run into any problems.

Now, what if something has gone wrong?

When it comes to functionality, it’s almost invariably a plugin-related issue (WordPress core developers aren’t in the habit of breaking things majorly when it comes to updates). Depending upon the nature of the issue, you may be able to guess the culprit (for example, if your contact form is broken, it’s likely that there’s an issue with your contact form plugin), in which case, you can deactivate it. Otherwise, you should deactivate and reactivate each plugin in turn until you discover the offending plugin.

Once you’ve identified the plugin causing the issue, you have a decision to make: ditch the plugin and find a better alternative, or roll back to a previous backup and contact the developer for further information (they may well have a fix on the way). As a rule of thumb, if you’re looking at a plugin that hasn’t been updated in months, it’s probably best that you move on. Checking out reviews on WordPress.org can also be a good indicator (i.e. are other people having similar issues?).

All of the above may sound like a real headache, but in reality, you’re unlikely to have to take many (if any) of the above steps. The vast majority of the time it will simply be a case of clicking ‘Update’ and moving on with your day. The alternative – not updating core, themes and plugins – is an absolute no-no, for reasons already covered.

Now, what if you want updates to simply ‘happen’, without any intervention on your part?

You’ve got a few options. Before we get onto them, it’s worth saying that automatic updates carry risk; if something does break, you may not catch it immediately. It’s ultimately a convenience versus functionality debate that you need to have in your head.

Here are the three best options for automatic updates:

Jetpack. Developed by Automattic, this plugin provides a wealth of functionality. You may well already have it installed, in which case, you just need to activate the Manage module for automatic plugin updates.

WP Updates Settings. This fantastic plugin gives you control over just about every element of WordPress updates. This is what you want if you’re looking for a hands-off approach to updates.

Advanced Automatic Updates. This lightweight plugin adds the kind of automation you’re probably looking for with the minimum of fuss.

Other than picking one of the above plugins, you could switch to a managed hosting provider or even use a WordPress maintenance service like WP Maintainer.

If you are using the Avada theme, you can access the automatic theme updater through the Avada Welcome Screen. Once setup, you can update the theme with a few clicks. Please see this documentation post for details.

In addition, ThemeFusion does a great job of displaying important information in regards to each update. Before you update, always check the changelog and the important update information. These two resources will inform you of any new features, code changes and overall improvements and fixes.

The ThemeFusion documentation is also a great resource to check for solutions to any known issues. And as always, the helpful ThemeFusion support team is just a support ticket away.

By now you should be in no doubt as to the importance of keeping WordPress core, themes and plugins regularly updated. Better still, you know exactly what to do: