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
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 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 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 Set Up Google reCAPTCHA
Google reCAPTCHA is a system that allows web hosts to distinguish between human and automated access, on areas of your website where you allow user input, such as forms. We have integrated Google reCAPTCHA into Avada, so you can minimize the amount of spam you have to deal with. You can integrate it with Avada Forms, and with Avada 7.4, you can also integrate Google reCAPTCHA into the User Login, User Lost Password, and User Register Elements.
The first step is to set up Google reCAPTCHA in the Global Options. The second is to add the reCAPTCHA Element to your Avada Form. With the User Login, User Lost Password, and User Register Elements, it is integrated automatically, so to use it there, you just need to turn the Global Option on.
Set Up reCAPTCHA Global OptionsTo configure Google reCAPTCHA, head to Avada > Options > Forms > Google reCAPTCHA.
Step 1. Register your Domain in reCAPTCHA. At this point, you will need to decide whether you want to use V2 or V3 of reCAPTCHA, as the Site and Secret Keys are different from version to version. See this document for an explanation of the differences, and this one for a general overview of reCAPTCHA V3. Note: Both, V2 and V3 are actively maintained by Google and represent different modes of reCaptcha, rather than an older and a new version.
Step 2. Fill in the necessary fields in the form. Once you register your website using the form, it will give you a Site key and a Secret key.
Step 3. Under the reCAPTCHA section in Avada > Options > Forms > Google reCAPTCHA, make your version selection and add the the Site key into the reCaptcha Site Key field, and the Secret key into the reCaptcha Secret Key field.
Step 4. Choose your color scheme (V2), or your Security Score, and Badge Position (V3)
Step 5. Determine if you want to enable Google reCAPTCHA for the the User Login, User Lost Password, and User Register Elements.
Step 6. Save your settings when done, and reCAPTCHA will be active on your site.
767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada,Step 2 – Set Up reCAPTCHA On Your Avada FormOnce you have configured Google reCAPTCHA for the domain your form will be on, you simply need to add the reCAPTCHA Element to your form.
Depending on whether you have chosen V2 or V3, the Element options will be slightly different, as seen below. With V2, you can choose the Color Scheme, and with V3, you can choose the badge position.
For V2, the position you place the Element in the form is where it will display. This is typically directly above, or below, the Submit Button. For V3, where you place it in the form wil be reflected if you have the Inline position chosen. With the other position options, the Badge is moved out of the form layout completely.
Configure your options, and save the form.
On the front end of the form, the reCAPTCHA will show according to the version and the options set. Below is a screenshot of a form using V2, with the Light options, and below that a form using v3, with the Inline position set.
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 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 Setup Skype Social Link
The Skype social media option in theme options on the Social Links tab can be setup two different ways:
1. Either the regular Skype ID, for example skypename
2. Or if that wont work for you you can use, skype:name?add, so it would look like this, skype:skypename?add
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 A Contact Page
There are several ways to set up a Contact Page on your Avada Website. One way is to use the Contact Page template, included in Avada, and the other main way is to create a contact page from scratch, and then adding the elements you might want, such as a Contact Form, a Google Map, and contact details.
With the release of Avada 7.1, you can now design and build your own forms with the Avada Form Builder. These forms are not used with the page template method, but in conjunction with building your own contact page, they offer the ulitmate freedom for your contact page.
Read on for an overview of both methods.
OverviewHow To Set Up The Contact Page
Contact Template Global Options
Contact Template Options
Google Map Options
Google Map Styling Options
How To Set Up reCAPTCHA
Troubleshooting
Creating A Contact Page From Scratch,How To Set Up The Contact PageAvada includes a Contact Page template, with a built-in contact form and Google Map integration. We have also included integration with reCAPTCHA that gives users protection against spam, and from Avada 5.8 and up, we offer both V2 and V3 of reCAPTCHA.
See below for a step by step process to set up your Content Page using this method.
Step 1 – Create a new page, and give it any name you wish.
Step 2 – In the Page Attributes box (on the right hand side of the page in Avada Builder, and in Page Options > Settings on the Sidebar in Avada Live), set the Template option to Contact from the dropdown menu. See screenshot.
Step 3 – Insert your content into the page, such as a heading and text. When using the Contact Page Template, the Contact Form will display undeneath any added page content, and the Google map with show at the top of the page. For more freedom with your layout, see the section on Creating a Contact Page from Scratch
Step 4 – Choose whether you wish to use a sidebar or not. Please refer to the Assigning Sidebars doc for instructions on how to use sidebars.
Step 5 – Save the page.
Step 6 – Navigate to Avada > Options > Contact Template, and make sure to set the email address the form should be sent to on the Email Address field.
Step 7 – To show your Google Maps on your Contact page, go to Avada > Options > Contact Template > Google Map, and insert your Google Maps API Key on the Google Maps API Key field. To get your API Key, please read the instructions in our Setting Up Google Maps API Key documentation.
Step 8 – The Contact Template tab at Avada > Options holds various options for you to position the contact form, display a Data Privacy confirmation box. Please check the 「Contact Template Options」 section below to know more about these options.
767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada,Contact Template Global OptionsYou can customize the Contact form and Google Map in Avada > Options > Contact Template using various options. There are three sub-panels in the Contact Template tab: Contact Template, Google Map, and Google Map Styling. Please continue reading below to know more about each option.
IMPORTANT NOTE: The options on the Contact Template tab are only for the contact form that displays when using the 「Contact」 page template.Contact Template OptionsEmail Address – Allows you to enter the email address the form should be sent to. This only works for the form on the contact page template.
Contact Form Comment Area Position – Allows you to set the position of the comment field with respect to the other fields. Choose from Above or Below.
Display Data Privacy Confirmation Box – Allows you to display a checkbox and custom label that has to be checked in order to confirm data privacy terms and that the form can be sent.
Data Privacy Checkbox Label – Allows you to enter the contents that should be displayed as label for the data privacy checkbox. Can contain HTML.
IMPORTANT NOTE: The options on this tab are for the google map that displays on the 「Contact」 page template. The only option that controls the Avada Builder google map element is the Google Maps API Key.Google Map OptionsGoogle Maps API Key – Allows you to insert the Google Maps API Key that is required for the Google Maps to show up. Follow the steps in the Google docs to get the API key. This key applies to both the contact page map and Fusion Builder google map element.
Google API Type – Controls the Google API type that should be used to load your map. Choose between JS API, Embed API, or Static API. The JavaScript API allows for more options and custom styling, but could be charged for by Google depending on map loads, while the Embed and Static API can be used for free regardless of map loads. For more information please see the Google Maps Users Guide.
Address – Allows you to set the address to the location you wish to display. This is for the Embed API Type.
Map Type –Allows you to set the type of google map that displays. This is for the Embed API Type. Choose from Roadmap, or Satellite.
Google Map Address – Allows you to set the address to the location you wish to display. This is for the JS API Type. For single address, ex: 775 New York Ave, Brooklyn, Kings, New York 11203. If the location is off, please try to use long/lat coordinates with latlng=, ex: latlng=12.381068,-1.492711. For multiple addresses, separate addresses by using the | symbol, ex: Address 1|Address 2|Address 3.
Google Map Type – Allows you to set the type of google map that displays. Choose from Roadmap, or Satellite, Hybrid, or Terrain.
Google Map Dimensions – Allows you to set the width and height of the google map. Note: Height does not accept percentage value. Enter values including any valid CSS unit, ex: 100%, 415px.
Google Map Top Margin – Allows you to set the distance to menu/page title. This is only applied to google maps that are not 100% width.
Map Zoom Level – Allows you to set the zoom level of the google map. Higher number is more zoomed in.
Address Pin – Allows you to display the google map address pin.
Address Pin Animation – Allows you to enable or disable address pin animation.
Map Popup On Click – Allows you to display the popup graphic with address info for the pin on the map on click.
Map Zoom With Scrollwheel – Allows you to use the mouse scrollwheel to zoom the google map.
Map Scale – Allows you to display the google map scale.
Map Zoom & Pan Control Icons – Allows you to display the google map zoom control icon and pan control icon.
IMPORTANT NOTE: The options on this tab are only for the google map that displays on the 「Contact」 page template, they do not control the google map element. These options are only available for the JS API type.Google Map StylingSelect the Map Styling – Allows you to set the google map styles. Choose from Default Styling, Theme Styling, or Custom Styling. Default is google style, Theme is our style, or choose Custom to select your own style options.
Map Overlay Color – Allows you to set any overlaying color for the map besides pure black or white. Works best with 「roadmap」 type. Note: This option is only available for Custom Styling setting.
Info Box Styling – Allows you to set the styling of the info box. Choose from Default Infobox or Custom Infobox. Note: This option is only available for Custom Styling setting.
Info Box Content – Allows you to insert custom info box content to replace the default address string. For multiple addresses, separate info box contents by using the | symbol, ex: InfoBox 1|InfoBox 2|InfoBox 3. Note: This option is only available for Custom Styling setting.
Info Box Background Color – Allows you to set the info box background color. Note: This option is only available for Custom Infobox setting.
Info Box Text Color – Allows you to set the info box text color. Note: This option is only available for Custom Infobox setting.
Custom Marker Icon – Allows you to insert full image urls for custom marker icons or input 「theme」 for our custom marker. For multiple addresses, separate icons by using the | symbol or use one for all, ex: Icon 1|Icon 2|Icon 3. Note: This option is only available for Custom Infobox setting.,How To Set Up reCAPTCHAreCAPTCHA is now found under the Forms tab, at Avada > Options > Forms > Google reCAPTCHA. This can be configured for both Avada Forms and the Contact Page Template. If using Contact Form 7, it has its own reCAPTCHA integration.
For full details on setting up Google reCAPTCHA, please see the How To Set Up Google reCAPTCHA document.,TroubleshootingHow to Fix The Contact Form Not Sending EmailsIf you are having issues sending or receiving emails from the built-in contact form, there could be a number of reasons why.
1. Please make sure you have a valid, working email address inserted in the email field in theme options on the contact tab.
2. Always check your junk or spam folder if you are not receiving the emails in your inbox. It』s possible they are being sent there.
3. The email is sent TO the email defined in theme options panel, but it is sent FROM [email protected]. If you wish to change this email address, please see the next troubleshooting section for a plugin that can help.
4. The email address set in the Global Options can be any email address, which generally works fine with most hosting environments. But since mail relay settings are complex and depend on the host to function correctly, sometimes issues arise. If you face any problem here, you might have to define SMTP for an external host using the WP Mail SMTP Plugin. If the email address in theme options is Gmail, use SMTP settings for Gmail.
5. If that still doesn』t work, you should create a valid [email protected] email address with your host.
6. The issue could be caused by mail delivery settings on your webserver. See this Google help doc for more information.
How To Change The 「WordPress@」 Email AddressWhen a user fills out your contact form, by WP default, the email you』ll get will be sent FROM [email protected]. The main reason for this default FROM address is, that a lot of hosters will only relay emails from within the same domain, so FROM addresses like [email protected] or [email protected] likely won』t work.
Most hosters will relay emails from [email protected], even if it does not exist. To be certain though, we recommend creating it, if you want to use this default address. If you want to use a different address from within your domain, WordPress offers two filters to do so. The one is wp_mail_from, which lets you set the FROM email address, and the other one is wp_mail_from_name, which lets you set a name for the address.
For further customization or cross-domain email addresses, we recommend using a plugin like WP Mail SMTP.
What To Do If Google Map Does Not DisplayThere could be a few reasons for this. See the tip below, and check our Google Maps Not Working? document for some other possibilities.
Ensure Google Maps Address Is CorrectUse a correct address, or longitude/latitude, not a Google Map embed code, . It has to be a written address or coordinates. For example, 775 New York Ave, Brooklyn, Kings, New York 11203, or latlng=12.381068,-1.492711.
3rd Party Plugin Conflicts with Google MapsThird party plugins may be conflicting with the map feature. Please disable any plugins that were not included with Avada to see it if fixes the issue. If it does, enable the plugins one by one to find the culprit.,Creating A Contact Page From ScratchAn alternative to using the Contact Page template is to create a Contact Page from scratch. The advantage of this method, is that you have complete freedom with your layout, and can add any Elements that you might want on the page. And with Avada 7.1 and up, you can also use Avada Forms to create your forms, using the full freedom of Avada Builder.
The Elements most likely to be used when creating a Contact Page from scratch are the Avada Form Element and the Google Map Element, as well as the Title Element, the Text Block Element, the Image Element, as well as styling Elements like the Separator Element. As you can see from the example below, this method gives you the ultimate flexibility with layout and design.
Avada likes to offer choice to its users, and a Contact Page is no different. Depending on your needs, either of these methods may work for you. For more details on Avada Forms, and the freedom this tool provides, see the Forms Category documentation.