How To Make Recent Posts Thumbnails All The Same Size

How To Make Recent Posts Thumbnails All The Same Size

The Recent Posts Element pulls your blog posts and displays them wherever you place the shortcode.
The Standard layout option uses larger thumbnails, and those thumbnails are scaled down proportionately to be the same width. If your images are of different aspect ratios (horizontal width vs vertical height), then the shortcode thumbnails can be a different height. If you prefer that your thumbnails are all the same height, as you see on our live demos, then you need to do one of the two following things.
Option 1 – Make sure all your images are the same size or aspect ratio. If your image are all 400x300px for example, then the thumbnails will be the same size. If one image is 400×300, and the other one is 800×600, they will still be the same size thumbnails because those aspect ratios are the same. So, ensure your images are the same size, or the same ratio.
Option 2 – The other option is to make sure your images are at least 700 x 441px in size. If your images are that size or larger, then your recent post thumbnails will all be generated at the same height.

How To Set Up A Staging Site

How To Set Up A Staging Site

A Staging site is a clone of a live (production) site. It』s usually not accessible to the public; rather, it is used to test updates and changes before deploying to the live site. Having a staging site is an important process that allows you to experiment with redesigns and updates to your site without affecting the live site.
You may have heard of the terms 『staging service』 and 『staging environment』. Staging services are commonly offered by hosting companies, and essentially, this is just an automated method of creating a staging site and pushing the changes back to the live site.
Finally, you could also use a local install as a staging environment. It is still just a copy of a live site which can be then updated or changed without it affecting the live site. You could then use a plugin to transfer it back to the live domain, or move it back manually. Read on to discover all you need to know about creating a staging site for your Avada website.,The Benefits And Drawbacks Of A Staging SiteBenefits
Provide a safe space in which you can experiment and make changes to your site before making the changes live.

Provide the opportunity to catch errors and bugs without putting your site at risk.

Usually relatively simple to set up.

Can be set up online or locally (depending on your preference).
Drawbacks
It takes longer to update your website (as you need to test changes first).

Web hosts often charge more for a staging site service (although you can always set one up locally).

Staging sites may not be exact replicas of a live website (caching is not usually enabled on a staging site).,Staging ServicesSome hosting companies offer a 1 Click Staging Service. This is typically an automated process, where you click a button to duplicate the site, and click another button once you have worked on the site, to push the changes live. There is a lot of variance in how hosting companies implement this feature, and on some hosts, it』s a manual process usually only available on the higher level hosting plans. Check with your hosting company to see if they offer this feature. It』s not that common yet, but this is a high demand feature that many hosting companies are rolling out.
This is a great service for beginners, as it doesn』t require you to understand how to move sites manually, and is generally a much quicker and easier option. Below are a few links to hosting companies offering staging services in some form or other.

WPEngine

BlueHost (Staging is included in 「Plus」 and 「Choice Plus」 plans)

SiteGround

Kinsta

Cloudways
Staging PluginsStaging sites can also be created through the use of plugins. There are dedicated premium staging plugins, free staging plugins, and migration and transfer plugins that can also easily create a duplicate site. Please read our How to Migrate your Site with Duplicator and How to Migrate your Site with All-In-One WP Migration docs for more information on that process, or see the links below to some of the more popular staging plugins.

WP Stagecoach

WP Staging

Duplicator

All-In-One WP Migration
767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada,Local StagingAs mentioned at the start, you can also easily create a local staging environment. To do this you need some sort of local WordPress installation (see How to Set Up a Local WordPress Installation on Your PC or How to Set Up a Local WordPress Installation on Your Mac for more info on that.) There are many different tools for this, so do your research, and see the links below.
Once you have a local install, you can use a migration / backup plugin like Duplicator or All-In-One WP Migration to transfer your live site to your computer, and then move it back again, once you have made your changes. This is a bit more of a manual process than using a staging service, but this should not cause any issues for an experienced WordPress user.,Links & Resources
How to Set Up a Local WordPress Installation on Your PC – An article on our blog by Tom Ewer.

How to Set Up a Local WordPress Installation on Your Mac – An article on our blog by Tom Ewer.

How to Migrate Your Local WordPress Website to the Web – An article on our blog by Tom Ewer.

How to Migrate your Site with Duplicator

How to Migrate your Site with All-In-One WP Migration

How to Set up Staging on Cheap Shared Hosting

Local by Flywheel

DevKinsta

cPanel Staging

How To Set Different Global Options With Polylang

How To Set Different Global Options With Polylang

Avada allows you to have a multilingual site, and you can now set individual options for each different language you have installed. Each language now has its own Avada Global Options panel, so you can modify it for each language. To change global options for each individual language, follow the steps below.
IMPORTANT NOTE: Please make sure to check your Polylang settings under the Settings > Languages > Settings tab. Make sure it』s set to 『The Language Is Set From The Code In The URL』 option to make sure your Global Options settings work. If you can』t see this option, ensure your permalinks are set to default.How To Change Global Options For Each LanguageStep 1 – Login to your WP-admin and go to the Avada Global Options panel.
Step 2 – While still in the Avada Global Options panel, switch to a different language using the Language Switcher at the top of the WP-admin panel.
Step 3 – Set your desired global options for the language you』ve selected.
IMPORTANT NOTE: By default, make sure you have Avada Global Options set for English language because when you switch languages in wp-admin for the first time, they copy the global options from English language options.How To Change Options For All Languages At OnceStep 1 – In the Language Switcher on the top WP-admin panel, select All Languages from the drop down.
Step 2 – Once you』ve selected All Languages from the drop down, the theme options for all the languages will be replaced by the default language you have set in the Polylang options. Once you make changes to any theme option, these changes will be applied to all languages.
View Other Information About Using Polylang

How to Migrate Your Website With All-In-One WP Migration

How to Migrate Your Website With All-In-One WP Migration

This document will walk you through how to migrate your website from a local install to a live server, or from one server to another, using the All-In-One WP Migration plugin as our example tool. Essentially though, regardless of where you are moving a site from and to, and which method you are using, the process will remain the same. Effectively, we are taking a backup of one site in one place, and restoring that backup in another place. Read on for a step by step walkthrough of migrating you Avada site with All-In-One WP Migration.
Please Note. We are using the free version  of All-In-One WP Migration for this example, which has both site size, and destination, limitations. Please see the ServMask site for their paid extensions, including the popular Multisite Extension.,Overview
Installing The Plugin

Export Your Site

Import Your Site

Useful Links & Resources,Installing The PluginAll-in-One WP Migration is available in the WordPress repository. This means it can be installed and activated directly from WordPress. Navigate to the Plugins > Add Plugin page and search for 『All-In-One WP Migration』. When it shows on the page, you just need to click Install, and then when that is finished, you will need to click Activate. The plugin is now installed, and can be accessed from the WordPress Main Menu.
All-In-One WP Migration Plugin,Export The SiteAll-in-One WP Migration does not have any settings, and takes a very streamlined approach to the task of migrating your site. Any options are included in the export and import workflow. The reason for this, and why this process is quite different to the one outlined in How to Migrate Your Website With Duplicator, is that the All-In-One WP Migration plugin only exports your site』s contents and database, and not WordPress itself. As such, to import the site on the new location, WordPress must be already installed. Let』s see how it all works.
To begin with it, simply click on the All-in-One WP Migration link on the WordPress Dashboard menu. The first thing you see is a very streamlined page, with a large 『Export To』 button at the bottom. It is in fact as simple as clicking on this button to proceed. There are additional options, and there is a Find and Replace function at the top if needed, but most users can simply click Export To, and continue the process.
The available options are exclusion options, and some are purely for troubleshooting purposes. Most users will not need, or want, to exclude any of their site』s content, but it』s worth having a look to see if any of the options apply to your site.
Once you have chosen any options, the next thing to do is to click the 『Export To』 button. A dropdown appears with apparent choices of where to Export your file to. With the free version of All-In-One WP Migration, only the File option is available. All other options are individual extensions that you can purchase. For our example, we are just going to export to a file.
The plugin then prepares the Export file. This may take some time, depending on the size of your site. At the end of the process, you will see a 『Download』 button. The file is also stored in the Backups section found at All-In-One WP Migrations > Backups. Click on the Download button to download the Export file to your local computer. Again, this may take some time, depending on the size of the file and your Internet speed.
Once you have your file, you are ready to move on to the Import Process. This takes place on your new server.
767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada,Import The SiteNow you have your Export file, it』s time to complete the migration of your site. Regardless of whether you are moving the site from a local production site to a new server, or from one host to another, the process is exactly the same.
The starting point for importing the site is a fresh install of WordPress on your destination location. If it』s a brand new site, then all you need to do is organise the hosting and domain name, and install WordPress in your new account. If you are moving a site from one host to another, and you would like to avoid downtime, there are a few extra steps you need to take. There are many ways to do this, depending on your hosting, but basically, you want to be able to log in to your new account and import the site before changing nameservers. My favorite way of doing this is to get the IP address of the new account and use the hosts file on my computer to temporarily map the IP to the domain name, so I can complete the import and only then, when the site has been migrated, change nameservers. This video goes over the process.
OK, so when you have a fresh copy of WordPress installed on your destination location, you then need to install the All-In-One WP migration plugin again. Once you have done that, head over to Import. The dialog you see is as equally simple as the Export one. The only thing to note here is that you might have a low Maximum Upload File Size, as shown in the image below, depending on your hosting. There are good instructions on the Servmask website for how to fix this.
You can see in this second image, that I have increased the file upload size.
IMPORTANT NOTE: All-In-One WP Migration has a built in limit of 512MB for uploading files. To overcome this for larger sites, the Unlimited Extension must be purchased.Once you are ready to upload simply click on the 『Import From』 button and navigate to the file you downloaded earlier.
Once you have chose your file, the plugin gets to work preparing the upload. You will see a flurry of activity about Preparing the upload and checking extensions compatibility etc, and then you will be presented with a  screen that lets you know that by continuing on from this point, files and databases will be overwritten. Click Proceed to import your site, or Close to abort at this point. If you proceed, the import begins. This might take a while, depending on how big your site is, and the speed of your host.
When the upload is complete, you are presented with a  final screen, to let you know that your data has been successfully imported. The final thing to do, as the screen indicates, is to log in to the new site (with the old site』s credentials) and save the Permalinks twice. This completes the process, and your site has now been migrated.,Useful Links & Resources
All-In-One WP Migration Knowledgebase

All-In-One WP Migration User Guide

How to Increase Maximum Upload File Size in WordPress

Migration Instructions

How To Set Up Different Headers / Logos For Mobile (And/Or Sticky)

How To Set Up Different Headers / Logos For Mobile (And/Or Sticky)

The incredible flexibility of the Header Builder means that not only can you design and create fully customized headers for your site, you can have also have special Mobile, or Sticky Headers that behave exactly as you want. Read on to explore a variety of situations with the Header Builder and small screen (mobile) and/or Sticky Layouts.,OverviewHow To Setup A Mobile Header
Logo Options In The Image ElementIcon Only Menu Visible On All DevicesElement Visibility Options,How To Set Up A Mobile HeaderIf you want a Header that just reverts to a Mobile Menu (Hamburger Menu) when the site is viewed on a small screen, then you only need to change one very simple setting. This is found in the Menu Element, in the Mobile tab. It is the Collapse to Mobile Breakpoint option. This is, of course, the breakpoint at which your navigation will collapse to mobile mode. There are five options – Never, Small Screen, Medium Screen, Large Screen, and Custom.
For a typical Mobile only menu, just set the Collapse to Mobile Breakpoint option to Small Screen. If you wish, you can customize the pixel value of that breakpoint in the Global Options, under Avada > Global Options > Responsive > Element Responsive Breakpoints, as you can see in the image below. You also have full control over what icons are used with the Mobile Menu with the Mobile Menu Trigger Expand Icon and Mobile Menu Trigger Collapse Icon options, which you will find on the Mobile tab of the Menu Element.
767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada,Logo Options In The Image ElementIf you want to create a specific Mobile Only Container in your Header Layout, by using the Container Visibility options, there is also a useful option in the Image Element. This allows you to only pull a Mobile Logo into the Element via the Dynamic Source option. To do this, click on the Dynamic Data icon (next to the Element title), select Logo as the Dynamic Content, and then you can choose from Mobile (Normal) or Mobile (Retina). If selecting Retina, you can then also use the Image Max Width Option below to set the logo to half of its full size, thereby creating a Retina Ready Logo.,Icon Only Menu Visible On All DevicesYou might also want to create a Mobile menu that』s visible on all devices. This is also easy to do with the combined forces of the Menu Element and the menu itself.
The first step is to add a Custom Home Link (#) as the top level menu item in your menu, and make all desired submenu pages as children of that top level item, as seen below. In this example, I have also added two more Icon Only menu items below the submenu items, both from the Avada Special Menu Items – a Search icon, and a WooCommerce Cart Icon.
It』s also important to change the top level menu item to Icon Only through the Avada Menu Options. Here, you can set the icon to a Hamburger menu, or whatever you prefer.
Then the Menu Element takes over. Here you select your Menu, and then you can customize it as you wish. You can control the Icon size, the item spacing and styling, the submenu mode, and many other things.
Here you can see an example of this method, using the Avada Food website. In this example, I set the Submenu Mode to Dropdown, and set the Space Between Main Menu and Submenu to be 50px.
This menu then looks the same at all screen sizes, from Desktop, through tablet to mobile.,Element Visibility / Element Sticky Visibility OptionsAnother couple of very helpful tools when designing Mobile and Sticky Header Layouts, are the Element Visibility Options, and the new Element Sticky Visibility Options. The Element Viability Options are found on all Elements and can be used, for example, to hide a Container until the Screen size is Small. In this way, you can easily have individual Containers for various screen sizes.
The new Element Sticky Visibility options are found on Columns and a selected range of other Elements, and can be used to hide Elements in certain states. For example, you can add Elements into a Column, which is then visible only when the Container is in Sticky mode. For more information on these two, very useful helper options, please see the Avada』s Visibility System and the How To Work With Sticky Containers docs.

How To Set Different Global Options With WPML

How To Set Different Global Options With WPML

Avada allows you to have a multi-lingual site, and you can now set individual options for each different language you have installed. Each language has its own Fusion Theme Options panel now so you can modify it for each language. To change theme options for each individual language, follow the steps below.

How To Change Theme Options For Each LanguageStep 1 – Log in to your WP Admin and go into Avada > Global Options panel.
Step 2 – While still in the Global Options panel, switch to a different language using the Language Switcher in the top of the WP Admin panel.
Step 3 – Set your desired theme options for the language you』ve selected.
IMPORTANT NOTE: By default, make sure you have Global Options set for English language because when you switch languages in wp-admin for the first time, they copy the global options from English language options.How To Change Options For All Languages At OnceStep 1 – In the Language Switcher on the top WP Admin panel, select All Languages from the dropdown.
Step 2 – Once you』ve selected All Languages from the dropdown, the global options for all the languages will be replaced by the default language you have set in WPML options. Once you make changes to any theme option, that change will be applied on all WPML languages.
ResourcesMultilingual Management With WPML And AvadaFusion Builder Global ElementsAdding Language SwitchersAvada & WPML, getting started.

How to Migrate Your Website With Duplicator

How to Migrate Your Website With Duplicator

This document will walk you through how to migrate your website from a local install to a live server, or from one server to another, using the Duplicator plugin as our example tool. Essentially though, regardless of where you are moving a site from and to, and which method you are using, the process will remain the same. Effectively, we are taking a backup of a site in one place, and restoring that backup in another place.
Read on for a step by step walkthrough of How To Migrate Your Website With Duplicator.,Overview
Installing The Plugin

Settings

Creating A Package

Install / Migrate

Useful Links & Resources,Installing The PluginDuplicator is available in the WordPress repository. This means it can be installed and activated directly from WordPress. Navigate to the Plugins > Add Plugin page and search for 『Duplicator』. When it shows on the page, you just need to click Install, and then when that is finished, you will need to click Activate. The plugin is now installed, and can be accessed from the WordPress Main Menu.
Duplicator Plugin,SettingsIt』s always a good idea to go through the Settings when having installed a new plugin.
For the Free version of Duplicator, only the General and Packages tab have any relevance. The default settings are going to be ok for almost everyone, but go through them to see what』s possible. Once you have done that, you』re ready for Stage 1, which is 『Creating a Package』. This is essentially taking a backup of your entire site, and this step applies to both scenarios; i.e. moving a local install to a server and moving a site from one server to another.
If you are moving your site from a local production site to a web server, you may encounter the MySQL error below. This could occur if, for example, you are using  WAMP, and Duplicator cannot find the path to its preferred Build Mode, mysqldump. To fix this, you need to enter the path to the mysqldump.exe file in your WAMP installation. See the pictures below for more detail.,Creating A PackageThe first step in the process is to 『Create a Package』. This is the term Duplicator uses for making a full backup of your site. For this reason, Duplicator is also well known as a backup plugin. If you are not familiar with Duplicator, you may want to watch the Quick Overview Video below before continuing.
Creating a Package is a three step process of Setup, Scan & Build. Let』s step through that one at a time.
SetupWhen you first click on Duplicator, you come to the screen below. Simply click on 『Create New』 to being the package creation process.
Next, you come to the screen below. At this point, you can just click Next to continue, but there are options here for you to explore, if you wish. Let』s take a look at those.
The options in the Storage area can only be accessed with the Pro version. These allow you to control where the package is stored, and you can choose from a number of options, including Amazon, Dropbox, Google Drive, OneDrive and FTP/SFTP.
The options in the Archive area are split into two sections. The first section – Files, gives you a range of options to choose and filter the files you will backup. You can make a backup of the database only and you can also exclude certain files from the backup.
The second section – Database, allows you to exclude certain tables from the database backup. Use this with caution, as it might break your site if you exclude the wrong tables.
To understand these sections better, please refer to the Archive sub-section of the Packages >> New – Step 1: Setup section of the Duplicator docs.
Finally, the options in the Installer section are completely optional, and some are only available with the Pro Version. For more info on this section, please refer to the Installer sub-section of the Packages >> New – Step 1: Setup section of the Duplicator docs.
ScanSo, whether we have explored the options or not, the next step is the scanning process, in preparation for the build process. When you are finished with the Setup page, and you click Next, Duplicator immediately begins scanning the site for any potential issues. You will see the scanning window, and then you will get the scan results, both shown below. If the scan results are all good, you can continue to the Build stage. If there are warnings, you can address these and rescan, but many of these warnings will not interfere with the backup at all.
As they say in the Duplicator documentation; 「It is OK to try and build a package even if you have a 『Warn』 status. If you are able to build a package with a 『Warn』 status then you can ignore the warning. However if you have issue during the build or install process you may want to work with your hosting provider to try and address the warning.」
BuildWhen you are satisfied with the Scan results, click the blue 『Build』 button under the Scan results to actually create the package. You will see a Build Screen for a time, while your package is being prepared, and when it is complete, you will see the second screen below. From this screen, you can download the Archive file, and the Installer separately, or together, from the 『One Click Download』 button.
Once you have the package contents, you need to then upload them to the server you wish to migrate the website to. In the local production to web server scenario, it』s likely you have a brand new hosting account, or perhaps just a new folder on an existing server if you already have hosting. If you are moving your website from one server to another, you will be uploading the files to the new server.
The next section will show you how the second part of the migration takes place.
IMPORTANT NOTE: Note that clicking the 『One Click Download』 link will open both the installer and archive download prompts at the same time. On some browsers you may have to disable pop-up warnings on this domain for this to work correctly.767,645 Businesses Trust Avada
Get Avada767,645 Businesses Trust Avada
Get Avada767,645 Businesses Trust Avada
Get Avada,Install / MigrateOnce you have downloaded the two package files, you need to place them in a directory where you would like to install/migrate the WordPress site.
To do this, use FTP or cPanel to upload both the archive.zip and installer.php to your hosting provider. Place the files in a new empty directory under your host』s webroot, where they are accessible from a valid url such as http://your-domain/installer.php or http://your-domain/your-wp-directory/installer.php. On many hosts the root directory will be a something like public_html  -or- www. If you』re not sure what your root directory is, then contact your hosting provider.
IMPORTANT NOTE: Since the archive contains core WordPress files, WordPress shouldn』t be in the directory beforehand. The only files in the directory should be the installer.php and archive before you run the installer.Step 1Once you have the files uploaded to the directory you wish to migrate the site to, you can then navigate to the installer. Simply type the full path into a browser. For example, http(s)://your-domain/installer.php or http(s)://your-domain/your-wp-directory/installer.php
This will bring up the Install / Migrate screen seen below. As you can see, it is a 4 step process. Let』s walk through it.
In the image below, you will see that there are three sections on the page – Archive, Validation, and Options. You should note that Archive and Validation have both got a green Pass mark next to them. Also take note of the link to the extensive Help docs at the top right if you need them. Note, as well, that if it says Unlocked next to the Help link, this is because you haven』t set a password in the initial Create a Package steps. Click the unlocked link for more details, but it』s not a problem if you will be doing the install straight away and not leaving it at this stage for a considerable amount of time.
Finally at the bottom, you must tick the checkbox next to the Terms and notices section, before the Next button will appear in the bottom right.
If you expand the individual sections, you will see the detailed results of the Archive and Validation steps, and under Options, there are some advanced options. 95% of users won』t need these, but if you run into issues, there is extensive documentation in the help menu linked at the top right of the dialog.
Upon clicking Next, the final part of Step 1 takes place, which is the deployment of the files. This will take some time, depending on the size of your package. When this is finished, we move to Step 2.
Step 2Step 2 is all about installing a MySQL database on the target server. Unless you use the Pro version, this is a manual task, but it』s not very difficult. As you can see in the Basic panel, the default Action is Connect and Remove All Data. The remove part won』t be an issue, as we will be connecting to a brand new, empty database.
Before we can click on Test Database, or Next, we have to switch over to our cPanel to create a new database.
Once you have logged in to your cPanel, you need to create a database. What options you have and how it looks will depend on your cPanel version, and indeed, whether you are running cPanel at all. Plesk is another popular hosting administration package, but the concepts will be the same. For this example we are using cPanel.
To create a new database you need to choose either MySQLD Databases, or MySQL Database Wizard. Either will help you quickly create a database for your incoming site.
Either way you do it, there are 3 basic steps (the 4th is just confirmation). See the images below for each step.

Create a new database. Take note of the full name of the database.
Create a new user. Again, take note of the full name of the user, and the password used.
Add the user to the database, assigning full privileges.

Once you have created your database, we can go back to the website and finish Step 2.
Here, you need to enter the details of the database you have just created. Once you enter the details, you can click on Test Database to be sure it』s all connecting, and then click on Next.
One final confirmation screen, and we are on to Step 3!
Step 3Step 3 and 4 are quite fast, as the job is nearly done.
Step 3 is simply to update the new paths to the new website. Review and click next.
Step 4The final step, Step 4, is to log in to the new website and to check everything is good, and then delete the installation files. Click on the Admin Login button as seen below. To log in, you have to use the credentials of the original site you migrated.
The next screen shows that you have successfully migrated your site, and provides a link to delete the installation files. Once you have clicked on the link, the final screen shows you what has been deleted, and includes a link to Which files need to be removed after an install, in case there are any issues with the automatic deletion.
If all the files have been removed, you』re done!  You have successfully migrated your website from either a local production site or another server, using Duplicator.,Useful Links & Resources
Duplicator User Guide

Duplicator FAQ

How To Set Up Google Maps

How To Set Up Google Maps

As of June 2016, Google issued a new update to the Google Maps APIs Standard Plan. In the update, Google no longer supports keyless access (any request that doesn』t include an API Key) and has made all future product updates only available for requests made with an API Key. To read Google』s official statement, please read this article.
How To Generate The API KeyFor your Google Maps to display on your page, you now need to use either the Google Maps JavaScript or Embed API, and for both, you need an API key. To generate a new API key, please click the button below for Google』s 『Get A Key/Authentication』 article. Please read it carefully as there are different methods for Standard API users and Premium Plan users. Please also note that you need to enable billing with a credit card when creating an API Key. Read the information about Google Maps Platform Pricing Plan below.
Google Maps Get Started DocumentationGoogle Maps Platform Pricing PlanGoogle announced new pricing plans for their Google Map service usage valid from June 11th, 2018. Each generated map API key will get $200 free usage per month, so in most cases users will be able to continue using maps without a problem. You can estimate your usage on the Pricing Page.
Users will need to add their billing info to Google Maps, although they won』t be charged unless they exceed the $200 per month allocated per account. Google has sent out an email to users who use the Maps service, notifying them of the impending change. The email also includes their assessment for general usage limits, indicating whether you would need to pay for Maps service in future or not.
Where To Apply The API KeyStep 1 – If you are not running the latest version of the theme, please update. The latest version of Avada is 7.6 (Released on December 15th, 2021)
Step 2 – Go to the Avada > Theme Options > Contact Form > Google Map panel.
Step 3 – Locate the 『Google Maps API Key』 option and enter your generated API key.
Google API TypesIn Avada 5.6.1, we have added Google Maps JS API and Embed API options in Avada > Theme Options > Contact Form > Google Map. Select the Google API type that should be used to load your map. The JavaScript API allows for more options and custom styling, but could be charged for by Google depending on map loads, while the Embed API can be used for free regardless of map loads. For more information please see the Google Maps Users Guide.
TroubleshootingIf you』re Google Maps aren』t displaying correctly or are returning errors despite following the above instructions, then something may have gone wrong during the process. To pinpoint what went wrong more accurately, try checking your browser』s console for errors.
Google Maps Not Working?How To Check Your Console For ErrorsFor you to be able to accurately diagnose why your Google Map isn』t displaying correctly, you may need to check your browser』s console for errors. To learn how, please see Google』s 『Checking Errors In Your Browser』 article below.
Google』s 『Checking Errors In Your Browser』 ArticleHow To Resolve ErrorsOnce you』ve checked your console for errors and determined the specific error message you』re getting, please check Google』s 『Error Messages』 article for their suggested solution. For example, if you』re getting the
Copy to ClipboardInvalidKeyOrNotAuthorizedMapError 1InvalidKeyOrNotAuthorizedMapError error, simply look for it on the table provided and you』ll see what the error means under the 『Message』 column. You can then follow the steps under the 『Description』 column to solve it.
Google』s 『Error Messages』 Article『RefererNotAllowedMapError』 Error MessageIf you』ve checked your console and you』re receiving this error message, then the problem may be with the URL you』ve provided when setting up the API Key. When adding a key, you』ll most likely have to include asterixes so all pages on your domain will work. For example, *.example.com/*. See a visual example here.

How To Set The Display Order And Size Of Columns In Responsive Layouts

How To Set The Display Order And Size Of Columns In Responsive Layouts

With Avada 7.0, a range of new features have been introduced in the Container and Column Elements, designed to make it easier for you to control your design in responsive layouts. One of these features is the Responsive Option Sets, which can be used, among other things, to set the display order and size of columns in tablet and mobile layouts. Read on to discover how to control this incredibly flexible new feature, or watch the video below for a visual overview.
See The Responsive Options Sets DocumentationHow Responsive Option Sets WorkThe new Responsive Option Sets feature makes all this possible. In Avada Live, on the right hand side of the toolbar, you will find the Responsive Icon. This is no longer just a preview option to see how the site looks on different screen sizes, but also a new responsive editing mode. When you select a specific screen size, like Medium or Small, not only does the layout change on the screen, but any Responsive Options that you set while in that view, will only apply for that view.
Any responsive option set while in the Desktop view will carry through to both medium and small layouts, but if you want a specific value, for Tablet for example, you would just click on the Tablet icon and then enter a different value into the relevant option.
You can also change the Layout Size from any of the actual Responsive Option Set options, as seen below.
It』s much the same in the back end interface of the builder, but it just looks a little different. If we look at the Container or Column Element in the back-end interface of Avada Builder, we can see three Responsive icons at the top of the Element. If we select a specific icon along the top, the options included in this feature and that also have a responsive icon, will change their icons to match the one selected at the top. This shows that the values you set in this options will apply only to the selected layout.
See the image below to see how this works. Note how in the image, the Mobile Responsive view has been selected in the Container header, and in the Margin and Padding options of the Container, the Responsive Icons there have changed to a phone, showing that the values entered there will only apply when the page is viewed at Mobile size.
As you can see in the example of the Live Builder below, I have chosen the Small (Mobile) Icon in the toolbar, and in the Padding Option, the icon has changed to the same icon, signifying that the values inserted (in this case 10px padding on the left and right sides of the Container) will only apply when the screen is at Mobile size.
For full details on the Responsive Option Sets feature, follow the link, but for the purpose of this doc, the options we need are in the Column Element.
767,645 Businesses Trust Avada
Get Avada767,645 Businesses Trust Avada
Get Avada767,645 Businesses Trust Avada
Get Avada,Column Width & OrderIn the Column Element, under the Design tab, the first two options are Width and Order. NB. You will only see the Order option when you switch to one of the Responsive Layouts: Medium or Small.
WidthThe width of the column is set initially when you add it into the Builder. So if you are in Desktop view, and change the size of the column in the Width option, the column changes visually in the builder to that size. So, in this way, it』s just the same as changing the column size from the Column Size icon in the Column Element Controls. You can also now set a Custom Width to your Column.
It』s when you change to a Responsive view that things get really interesting, though. Here, we can take an existing column, regardless of its size in Desktop view, and change it to whatever we wish for the Responsive view.
There are already a few Global Options that affect what happens when a desktop layout changes to a tablet or phone layout. In the Responsive Options (Avada > Options > Responsive) you will find the Responsive Design Option itself, which turns Responsive Design on or off for the whole site. But you will also find two options called Element Responsive Breakpoints. This is where you set the default behavior for Columns on responsive layouts. By default, with tablet views, the columns inherit from the Desktop layout, and on Mobile Layouts, they become 1/1 columns.
But now, with Responsive Option Sets, you have complete freedom with what happens to your columns in both Mobile and Tablet view.
This is because you can now apply this new sizing independently to both Tablet and Mobile view. So, in this way, we can have three different widths, all for the same Column! This is much easier than duplicating the content and using Visibility options. See the Example section below, for a real world example of what this would look like.
OrderThe Order option, as stated before, only appears in Responsive views. This option allows us simply to change the order of the selected Column in the selected view. So if we have two 1/2 Columns in desktop, we might decide to change the order of these in Tablet or Mobile view (or both).
To do this, you can simply drag the columns around to display them as you would like for the specific view. Alternatively, you can add a number to a selected Column to specify the order. You can number each Column, or you could, for example just add the number 1 to the Column you want at the top. For two columns, this would be easiest, but if you had three or more, you would control the display order with a numerical value on each Column.
Again, you can set the order for Columns independently in both Tablet and Mobile view, and for Desktop view, the order, of course, is the order you place them in the Builder. This provides and enormous amount of flexibility with Columns in all Responsive views, and combines with the Width option, allows for any conceivable layout on any device.,ExampleLet』s take a real world example to illustrate how this all works. In this example, from the Pet Supplies website, we can see in Large Screen view, that there are three 1/3 Columns with content a little way down the home page.
If we look at this area in Small Screen View, we can see that now two of the Columns have been changed to 1/2 width, and one left to go full width according to the Column Global Options.
In another example a little further down the page, we can two images in each their own 1/2 Column (going full screen), and a row of four x 1/4 Columns, containing Icons and text, directly under this.
If we look at this area in Small Screen View, the images have remained at their 1/2 Columns, instead of reverting to full width, as is the default for Columns in Small Screen View. And the four 1/4 Columns have now become 1/2 Columns.
These are all examples of Column resizing. But what about Column Ordering? This hasn』t been used on this page, but as an example, when we are in Small Screen View, we can simply drag and drop our Columns to rearrange their order, as in the image below, and this would only take effect on Small Screen Views.

How To Offload Google Fonts

How To Offload Google Fonts

Important Note – Avada』s GDPR Privacy Tools are only available for Avada 5.5.2 and newer.When you are using Google fonts that usually mean retrieving the font files from their API, which includes sending the IP addresses of your users (which are considered to be private data) to Google. You might find that circumstance worrisome, but at the same time you don』t want to do without the nice typography options Google fonts offer. Avada to the aid. We have added a new Global Option that easily allows you to decide whether Google fonts should retrieved via the Google fonts API, or if they should be hosted locally on your server.
To offload Google fonts, please go to Avada > Global Options > Privacy and set Google Fonts Mode option to 『Local』.