Avada 文檔

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 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 Up A Side Navigation Page

IMPORTANT NOTE: The 『Side Navigation』 page template will be deprecated in a future version of Avada. We have replaced it with a better solution, the Avada: Vertical Menu widget. This new widget offers the same features but with greater flexibility. It works with the WP menu system. Please utilize this new method instead of the page template which will eventually be removed.Avada includes a Side Navigation page template that can be used to insert large amounts of content on a single page. You can also setup second level menu items on the Side Navigation page that will collapse by default and expand when the parent level is moused over or clicked, depending on how you set it in Fusion Theme Options. You create Side Navigation pages in sets. Each set always has to have a Parent page that will show at the top. Then you create additional pages and assign them to the parent page. All the pages assigned to the parent page will make one side navigation set.
Creating A Side Navigation PageStep 1 – Navigate to Pages and click Add New.
Step 2 – Input a name for your Page (this will be the Parent page under which you can nest different child pages).
Step 3 – In the Page Attributes box on the right side, select Side Navigation from the Page Template dropdown list and click Save.
Step 4 – To add more pages to the side navigation set, create another new page, select the Parent page created in Step 2 as the 『parent page』, and set the Template to Side Navigation.
Step 5 – Choose to have the side navigation set on the left or right side by selecting Left or Right from the Sidebar Position dropdown field in the Fusion Page Options box.
Step 6 – Menu order is set alphabetically, change it by inserting a new order for each page in the Order field.
Step 7 – Once you are done, be sure to Publish each of the pages.

How To Set Up A One Page Site

Avada gives you the flexibility to create a modern one page site with a scrolling menu. To get an idea of how one page sites work and look, please see our Landing Product demo here. A one page site lets you consolidate all your site』s information into one page that』s split into multiple sections. Please read below for detailed information on how to set it up.
Creating Content For One Page SitesWhen creating content for your One Page site, you』ll need to organize your content into sections and use the 『Name Of Menu Anchor』 option present in the Container Element or the Menu Anchor Element at the beginning of every section. This is so you can reference each section in your menu. Your menu will serve as a way for your viewers to quickly scroll to a section they』d like to view. For example, clicking the About menu item will automatically scroll the page to the About section.
Step 1 – Create a new page or edit an existing one.
Step 2 – Click the 『Use Fusion Builder』 button to access the Fusion Builder, then create your page content and layout as normal.
Step 3 – Once you』re finished laying out the page and creating your content, determine the different sections on your page. For example, the About section, the Contact section, and the like.
Step 4 – Once you』ve decided on the different sections of your page, it』s time to reference each section. If your section is in the beginning of a Container Element, Use the 『Name Of Menu Anchor』 option in the Container Element. If your section is in the middle of a Container, use the Menu Anchor Element.
Step 6 – If you』re using the 『Name Of Menu Anchor』 option, then simply insert the unique Menu Anchor ID for the section. If you』re using the Menu Anchor Element, click the 『Element Settings』 and enter a unique Menu Anchor ID for the section in the 『Name』 field. For example, about.
Step 7 – Click 『Save』 to save your changes, then repeat steps 4-6 and create separate Menu Anchors for all the different sections that you have.
Custom MenuA Custom Menu is important because this is how your viewers jump to different sections of your page. Instead of normal links, your One Page site』s custom menu will have Anchor Links that link and scroll automatically to each section on the page.
How To Create A Custom MenuStep 1 – Navigate to the Appearance > Menus tab on your WordPress admin panel.
Step 2 – Click the 『Create A New Menu』 link. Give it a name, then click the 『Create Menu』 button.
Step 3 – In the left sidebar, expand the 『Custom Links』 tab. If you』re missing content types in the left sidebar that you want to add to the menu, you can open the Screen Options and enable them for your menu.
Step 4 – In the 『URL』 field, enter the Menu Anchor ID you』ve assigned to a section on your page. For example, if this menu item links to your About section, then it would be about. Please note that you have to enter it with a hashtag (#) in order to scroll to the section properly. For example, #about.
Step 5 – Once you』ve added the Anchor Name ID to the 『URL』 field, enter a name for the 『Link Text』 field. This is simply the menu item』s text. For example, About.
Step 6 – When finished filling in those fields, click the 『Add To Menu』 button.
Step 7 – Repeat steps 4-6 and create a menu item for each section you have.
Step 8 – Under the 『Menu Structure』 section, you』ll find all the menu items you』ve just created. You can expand each menu item and edit its settings if you need to.
Step 9 – Don』t forget to assign your new menu. To learn how, see 『Assigning A Custom Menu To A One Page Site』 and 『Assigning A Custom Menu To A Multi-Page Site』 below.
Step 9 – Once you』re done creating your custom menu, click 『Save Menu』.
IMPORTANT NOTE: If you want to create a link that lets the page scroll back up to the top, you can simply use #home, as this anchor is already preset in the theme.Assigning A Custom Menu To A One Page SiteStep 1 – If you』re creating a One Page site, you can assign a custom menu by going to the Appearance > Menus tab.
Step 2 – Select the custom menu you』ve just created from the dropdown, then click 『Select』 to load it.
Step 3 – Once you』ve loaded your custom menu, go to the 『Menu Settings』 section and check the 『Main Navigation』 checkbox. This will assign the custom menu you』ve created as your One Page site』s main menu.
Assigning A Custom Menu To A Multi-Page SiteStep 1 – If you』re creating a page similar to a One Page site on your Multi-Page site, you can assign a custom menu to it by editing the page.
Step 2 – Underneath the editor field, you』ll find the Fusion Page Options box.
Step 3 – Switch to the 『Header』 tab and locate the 『Main Navigation Menu』 option. In the dropdown field, select the custom menu you』ve just created. This will make your custom menu the menu for the Landing Page only.
Step 3 – Once finished, click 『Save Draft』 or 『Publish』.

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.

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 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 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 Set A Custom Permalink For Portfolio Posts

To set a custom permalink structure for portfolio posts, go to the 「portfolio」 tab in theme options and enter your custom slug in the 「Portfolio Slug」 field. Just make sure its not the same name as your portfolio. So if your portfolio page is called 「portfolio」, your slug could be 「portfolio-items」. Once you insert the custom slug, go to 「Settings > Permalinks」 and select the 「Post Name」 and hit 「Save Changes」.
IMPORTANT NOTE: The slug name cannot be the same name as your portfolio or the layout will break.

How To Order Posts

Avada custom ordering options are available for Blog posts, Portfolio posts and FAQ posts and help you decide what order the posts will be displayed on your site. Please see below for more information:

Avada Ordering Options For Blog, Portfolio & FAQ
Reorder Standard & Custom Post Type Posts In WordPress By Published DateUsing Post Types Order Plugin To Manually Re-order The PostsAvada Ordering Options For Blog, Portfolio & FAQHow to set the order of Blog PostsStep 1 – Add a Blog element in the Fusion Builder.
Step 2 – For the 『Order By』 option, choose between Date, Post Title, Post Slug, Author, Number of Comments, Last Modified, or Random to define how your posts should be displayed.
Step 3 – Set the 『Order』 option to Descending or Ascending to define the sorting order of your posts.
Step 4 – Set the other options to your preference.
Step 5 – Save the Blog element and save the page.
Note: The default setting for 『Order By』 is Date and for 『Order』 is Descending.
How to set the order of Portfolio PostsStep 1 – Add a Portfolio element in the Fusion Builder.
Step 2 – For the 『Order By』 option, choose between Date, Post Title, Portfolio Order, Post Slug, Author, Number of Comments, Last Modified, or Random to define how your portfolios should be displayed.
Step 3 – Set the 『Order』 option to Descending or Ascending to define the sorting order of your posts.
Step 4 – Set the other options to your preference.
Step 5 – Save the Portfolio element and save the page.
Note: The default setting for 『Order By』 is Date and for 『Order』 is Descending.
How to set the order of FAQ PostsStep 1 – Add a FAQ element in the Fusion Builder.
Step 2 – For the 『Order By』 option, choose between Date, Post Title, FAQ Order, Post Slug, Author, Number of Comments, Last Modified, or Random to define how your portfolios should be displayed.
Step 3 – Set the 『Order』 option to Descending or Ascending to define the sorting order of your posts.
Step 4 – Set the other options to your preference.
Step 5 – Save the FAQ element and save the page.
Note: The default setting for 『Order By』 is Date and for 『Order』 is Descending.
Reorder Standard & Custom Post Type Posts in WordPress by Published DateBy default, WordPress orders posts and custom posts types by their publish date. These include blog posts, portfolio posts, FAQs, and the like. The Avada theme also reinforces this order with Fusion sliders and Elastic sliders. To learn how to re-order posts and custom post types, please continue reading below.
Posts & Custom Post TypesBelow are the posts and custom post types that you can re-order in WordPress by published date.
Media Posts – Media posts found in the 『Media』 tab.Orders – WooCommerce orders found in the 『WooCommerce』 tab.Coupons – WooCommerce coupons found in the 『WooCommerce』 tab.Fusion Slides – Fusion slides found in the 『Fusion Slider』 tab.Elastic Slides – Elastic slides found in the 『Elastic Slider』 tab.Events – Events Calendar events found in the 『Events』 tab.Venues – Events Calendar venues found in the 『Events』 tab.Organizers – Events Calendar organizers found in the 『Events』 tab.Reorder Posts by DateBecause the posts are ordered by their publish date by default, you can manually manipulate your posts publish dates to get them in the order you』d prefer. The post with the oldest date appears last, and the post with the earliest date appears first.
Step 1 – Navigate to the posts you』d like to re-order. For example, blog posts in the 『Posts』 tab.
Step 2 – Hover over a post, and you』ll see the 『Quick Edit』 link. Click this to bring up the main details of a post, such as title, slug, date, and the like.
Step 3 – In the 『Date』 field, change the date and time accordingly.
Step 4 – Repeat steps 2-3 for all the posts you』d like to re-order.
Using Post Types Order PluginIf you want to manually reorder your posts you can use the Post Types Order plugin. It works for all Avada posts and post types, using a simple drag 『n drop way for you to rearrange the order. Continue reading below to learn how to install and use this plugin.
How to install the Post Types Order pluginStep 1 – Go to the Plugins > Add New tab of your WP admin sidebar.
Step 2 – In the search bar on the upper right side of the screen, search for 『Post Types Order』. It』ll be the first search result and the plugin created by Nsp Code.
Step 3 – Once you』ve found the correct plugin, click the 『Install Now』 button.
Step 4 – Wait for the plugin to finish installing. Once it』s finished, click the 『Activate Plugin』 link and wait for the plugin to finish activating.
Post Types Order Plugin SettingsStep 1 – Go to Settings > Post Types Order tab on your WP admin sidebar to bring up the options for the plugin.
Step 2 – On this page, you can set which interface to enable or disable. For example, you can choose 『Hide』 for the Post option to disable the re-order feature on blog posts.
Step 3 – To re-order posts, hover on the tab of the post you』d like to re-order, then select 『Re-Order』. For example, if you』d like to re-order your Portfolio posts, hover on the 『Portfolio』 tab on your WP admin sidebar and select the 『Re-Order』 option.