Basics – Avada Website Builder

How To Fix GoDaddy Hosting Issue

Geoff — Thu, 09 Jan 2025 20:27:32 +0000

Sometimes, users with GoDaddy Hosting have reported errors when loading the Avada Builder. This can be a 404 error, the page just doesn’t load, or it loads in a small window.

To fix any of these errors, which are caused at the server level, add the following code to your .htaccess file.

# BEGIN Line too long fix
SubstituteMaxLineLength 10M
# END Line too long fix

How To Add Custom Social Media Icons in Avada

Geoff — Wed, 18 Dec 2024 20:35:30 +0000

There is a wide range of Social Media Icons available in Avada for use in the Social Links and Person Elements, but if you need another one, you can always make a custom social media icon. Read on to find out how…

How To Add Custom Social Media Icons

Social Media Icons are found in the Global options, under Socail Media > Social Media Icons. There you will find a Repeater Row, where you can add your own social media icons.

Step 1 – Go to the Avada > Options > Social Media > Social Media Icons panel.

Step 2 – In the repeater field, select ‘Custom’ from the dropdown. The ‘Custom’ option is the last option in the dropdown.

Step 3 – Once ‘Custom’ is selected, the options on the repeater field will change.

Step 4 – Add your custom URL link in the ‘Link (URL)’ option.

Step 5 – Add your custom tooltip name in the ‘Custom Icon Title’ field.

Step 6 – Upload your custom icon image by clicking the ‘Upload’ button, then choose the appropriate image from your computer or media library.

Step 7 – Once you’re finished, don’t forget to click the ‘Save Changes’ button.

How to Set Images Used for Sharing on Social Networks

Geoff — Mon, 07 Oct 2024 00:00:17 +0000

When users share your site to social media, it’s nice to be able to control what image and description go with the share. This is the domain of the Open Graph tag. Read on to find out more about OG tags, and watch the video below for a visual overview of this topic.

For privacy reasons YouTube needs your permission to be loaded.

Open Graph Meta Tags

Open Graph meta tags are snippets of code that control how URLs are displayed when shared on social media. They’re part of Facebook’s Open Graph protocol and are also used by other social media sites, including LinkedIn and X, but there’s varying levels of support, so they’re not always respected.

There are OG tags for titles, descriptions and images, and what we are looking at today is how to best implement these on your Avada site.

Global Options

To start, there are a couple of Global options that relate to this topic. Under the Advanced > Features tab, there is an option called Description and Open Graph Meta Tags. As the description for this option explains, you turn this on to enable custom description meta tag and open graph meta tags in Avada.

As it also notes, it’s IMPORTANT to know that some optimization plugins, like for example Yoast SEO or RANK MATH, add their own implementation of this. You can choose whether to use Avada’s implementation of this or the plugin’s, but you should not use both, as this can cause duplicate tags.

There is also another option above this one called Meta Tags Separator. This just controls the separator character that can then be used in the Avada Page Options SEO tab for post title and description meta tags.

Page Options

Then there are the page options section of a post or a page. On the SEO tab, there are options for the SEO Title, a Meta Description, and an Open Graph Image. If these are set, which is on a page by page basis, these tags will be used when sharing the post or page to social media.

If there is a featured image set on the page or post, and no image has been added in the SEO tab of the page options, then the featured image will be used instead.

If nothing is set anywhere, then the logo from the Global options will be used.

Facebook Options

It’s also worth noting that the various social networks can have different requirements for images. Facebook for example has this page – https://developers.facebook.com/docs/sharing/webmasters/images/ – which specifies the size and even aspect ratio for images, and you can even test your shares out with the Debugger tool – https://developers.facebook.com/tools/debug.

Staging Sites vs. Local Development Environments

Geoff — Thu, 26 Sep 2024 22:13:49 +0000

Staging Sites

A Staging site is typically a clone of a production site, where you can safely test any updates, or try out new features, before pushing them live. It’s usually on the same server as your live site.

Staging is a service offered by many hosting companies. With many hosts, particularly the larger ones, it’s a simple process to clone your site and set it up as a staging site. See the How to Set Up An Avada Staging Site With Siteground video below for a specific example of that.

Cloning your production site to a staging site allows you to test WordPress, theme and plugin updates before implementing them on your live site. It also allows you to add new plugins and try out new Avada features or content without any concern about how they might affect the live site. When you are happy with the staging site, you can simply deploy that to the live site, and you’re good to go.

So staging sites have a very specific purpose, and are usually on the same server and directly connected to the live site for easy deployment. You can have a local staging site, but deployment is not as easy, and if the local server configuration is different to the live one, there’s no guarantee that it would work correctly when pushed to the live site.

For privacy reasons YouTube needs your permission to be loaded.

Local Development Environments

So what’s different about a Local Development Environment. Well, just about everything. In our context, this is simply a local Avada install that can be registered, so you can add plugins, import prebuilts, run the Setup Wizard, and generally play with and explore Avada.

This is set up on your computer, and is a development sandpit so to speak, where you can play and explore without the content ever being intended to go live.

With a single license of Avada, you can not only run your live site but it also supports an associated staging site for your convenience. How you use the Staging Site is of course up to you.

For example, if you see a particular design feature on one of the prebuilts, you can just import that prebuilt, and see how it’s built. With Cross domain copying, you can even just copy and paste the feature to your live site.

Another huge benefit is being able to use the Avada Setup Wizard. You can create a new site and explore how the Setup Wizard creates multiple Layouts and Layout sections, how it creates and populates WooCommerce shop pages, and how it uses a range of post cards to display the dummy content on the features selected. This alone is a solid reason to have a local development area.

So in a nutshell, a local development area gives you the freedom to fully explore and learn the ins and outs of what Avada can do. You can’t easily do these things on a live site or a staging site.

In many ways, its good to have all three. A live site, a staging site, and a local development area. In that way you can have your live site, a gold standard method for updating, and a local environment to explore and learn.

For privacy reasons YouTube needs your permission to be loaded.

Container Publishing Status Options

Geoff — Mon, 29 Jul 2024 23:03:28 +0000

A very useful set of options can be found in the Container Element, on the General tab, just under the Visibility options. It’s the Container Publishing Status Options.

For privacy reasons YouTube needs your permission to be loaded.

Published

By default, all containers are Published, which is one of the choices in the option. So there’s not much to say about that. It’s the other three that offer some great features, particularly for those with seasonal or temporary content.

Published Until

The second option is Published Until. If you select this, a date and time picker appears, and here you can select the specific time that the Container is published until. After that time, it reverts to draft status, and is then only visible to logged in users with the capability to publish posts.

This feature is particularly useful to website owners with seasonal or temporary content, as in this way, they can automate the publication of the container, and not have to manually come in to sort it on a particular date.

Published After

The next option is Publish After. This is the same in the sense that if you select this, you choose a date and time, after which the container’s status becomes published.

So you can design and set up your container to be published on a particular day and time.

Any time after it’s published, you could edit it again, and this time select Published Until, and set the date for it to be unpublished. Once it reaches that date, the container reverts back to Draft status, and is not visible to the public.

Draft

Draft status is also useful if you are updating a live site with a new container, but you don’t get finished. You can just set it to draft, and save your work, and then you can come back another time to complete and publish the container.

OK, these often overlooked options can be very useful for controlling content on a container by container basis.

Behind the Scenes

When using the publishing status options on containers, they are not hidden as they would be with the visibility options. Instead they are treated like conditional rendering is applied. If the container is in draft mode or scheduled for a later date, it won’t render at all, and thus there is no indexing, and also no additional weight on page load.

The Avada Role Manager

Geoff — Tue, 04 Jun 2024 22:05:15 +0000

The Avada Role Manager allows you to completely control access to Avada components to the full range of users on your site. Each user type has defaults appropriate for the role, and you can fully customize each role to suit your needs.

The Avada Role Manager can be found at the very bottom of the Avada Builder Options, found from the Avada Dashboard at Options > Builder Options.

Roles

The user roles you see in the Role Manager will depend on your setup. The default WordPress roles are: Editor, Author, Contributor, and Subscriber. If you have WooCommerce enabled, you will also have Customer and Shop Manager. Other plugins may also add further roles, such as Keymaster, Moderator, Participant, Spectator, and Blocked, which are all added by bbPress. Furthermore, if you add a custom user role with a plugin, they will also be added to the list.

Default Access levels

Each user role has a default level of access. As you go down from Editor to Subscriber, these levels of access will of course lessen. The strength of the Role Manager is that it allows you to individually customize the Access levels for each user type to suit your requirements. You can also Reset a role at any time to restore the default access levels for that user role.

Example

Let’s look at the Editor User Role to see what options can be set. The same options are on all user roles; the only difference is what options are enabled.

The Editor role has the most access of all the user roles. As can be seen below, only access to the Avada Global Options, the Avada Prebuilts (Avada > Website) and Avada Studio is off by default.

With most sections you can enable or disable dashboard access, as well as enabling or disabling the Backend or Live Builder, as well as the Page Options.

With this powerful tool at your disposal, you can set your user access permissions to whatever you like, protecting the integrity of your website.

How To Use Z-Index in Avada

Geoff — Sun, 02 Jun 2024 23:12:01 +0000

Z index is a CSS property that controls overlapping HTML elements’ stacking order. With this property, elements with a higher index are placed on top of those with a lower one.

In Avada, you will find a Z-index option in all Containers and Columns, as well as in a few other specific elements like the Image, Pagination, and Scroll Progress Elements, as well as Off Canvases. Read on to find out more about using Z-Index in Avada, and watch the video below for a visual overview.

For privacy reasons YouTube needs your permission to be loaded.

There are a few typical places you will need to use Z-index when building a website. A common example would be anytime you have overlapping content, like images. Menus are another common example where a Z-index can really come in handy. This could be a sticky menu, a mobile menu, a drop-down sub-menu, or mega menus. In all these situations, we want the menus to be on top. Let’s use these as examples as to what the Z-index can do.

Overlapping images

In the example below, there are two images in a column, and I have overlapped them by manipulating the margin values on the second image. The later in the DOM, the higher the element’s stacking, and so the second image is above the first. But with a Z-index value, you can decide which image should be on top.

So if we edit the first image and head to the design tab, we can set a z-index of say 100.. and it is now on top. The number just has to be high enough to place the element above the other one. See below for more on the Z-index numbers.

menus

As noted before, there are many situations with menus where using a Z-index can come in handy. Whether it’s a sticky menu or a container holding a menu with dropdown menus, the concept is the same.

With menus, the best strategy is to make sure the container holding the menu is above everything else. For example, with this header layout section shown below, there are both submenus and mega menus, and we always want them to be above the content below.

So here, we just go to the holding container, and on the design tab, set a very high Z-index to ensure the container, and its content, stay on the top.

How High Do you Need to Set the z-index?

When it comes to the number you use for a Z-index, there are no arbitrary rules. A negative value will place content below anything that has a higher value, and a very high value will place the content above everything else. Theoretically, you could use a value of 1 to place something above something else that has a value of 0. But in reality, there are a lot of elements in the dom, and it’s perhaps easiest to use a standard numbering system.

One way to do it is to add the z-index in steps of 100. This gives plenty of room for values in between in case you later have to add another element above one item, but below another.

Another method, when wanting to add something to the very top is to use a very high number like 9999, as an ‘absolute top ever value’. In the end, you just need a higher value than the content you want to be below it, so just experiment your way forward.

OK, that’s the Z-index in Avada. Go wild!

How To Set Favicons In Avada

Geoff — Tue, 07 May 2024 21:54:53 +0000

A favicon, short for favorites icon, is an icon displayed in the tab bar of a browser accessing the site and next to the site name in a list of saved bookmarks. You can see a large version of the Avada favicon here. In Avada, you can add a range of favicons to give your site a professional look on all devices, and when your site is saved as a bookmark. Read on, and watch the video below for a visual overview.

For privacy reasons YouTube needs your permission to be loaded.

Creating Favicons

Creating favicons are best made when creating your logo, using elements and colors from your branding. A favicon needs to have a square aspect ratio, and should be simple enough to display well at a very small size. Typically a favicon is a small version of your logo, with no logotype or other text, but can also just be a letter, or other graphic image.

There are favicon generators online, but these are basic scripts and cannot take any logo and make a great favicon. The best results with such tools are usually Text to Favicon options, where the favicon becomes just one letter.

An alternative to this is to create your own favicon in Photoshop or the like. If using this method, create a square document (I like to use a big size like 1000px) and then resize the favicon to the correct sizes when done designing. See this guide for more information on how to make a great favicon.

Setting Site Favicons

Once your have your favicons, it’s time to upload them. Favicon Options are located in the Global Options at Avada > Options > Logo > Favicons. Avada offers several fields to upload different sizes of favicons. Each one has its own unique size listed in the description.

To add favicons, simply click the ‘Upload’ button next to the appropriate field, then select the favicon file you would like to use. The best format to save your favicons in for uploading is a png file, but you can also use jpgs and svg files.

Just note that any favicons uploaded in WordPress, either from Appearance > Customize > Site Identity or from Settings > General > Site Icon, will override the favicons set in Avada.

How To Customize Avada Prebuilt Websites

Geoff — Wed, 13 Mar 2024 21:45:09 +0000

In this two part video series, we go over how to take an Avada Prebuilt Website, and customize it with your own content.

For privacy reasons YouTube needs your permission to be loaded.

How To Build A Website From Scratch With Avada

Geoff — Wed, 13 Mar 2024 21:41:03 +0000

In this extensive eight part video series, we go over Building a Website From Scratch with Avada. This starts with the Avada Setup Wizard to set typography colors and site inclusions, and contines through full customization. as well as site clean up and optimization. In short, this covers everything you need to know about using the Avada Website Builder to build you own WordPress website.

For privacy reasons YouTube needs your permission to be loaded.