how-to 歸檔 - 第 3 頁共 8 頁

How To Use Conditional Element Rendering in Avada

Back in Avada 7.3, we added a new feature called Conditional Element Rendering. Currently, this feature is found in the Column and the Container Elements. In this document, we will look at how it works, and some of the ways in which it can be used. Read on to find out more about this exciting new feature, and watch the video below for a visual overview.,What Is Conditional Element Rendering?Conditional Element Rendering is a form of conditional logic that can determine whether an Element (in this case, the Column or the Container Element, but is also applies for all content within that Column or Container) should be rendered on the page or not. An example of this would be a Column that only displays if a user is logged in, or a Container on a Cart page that does not render if the Cart is empty. There can also be multiple conditions applied for complex situations. There is a significant difference between not rendering an Element and simply hiding it on the page with the Element Visibility option.,Where Is It Found?Conditional Element Rendering is currently found in the Column and the Container Elements, under the Extras tab. Because these Elements hold all content on the page however, this allows for almost all imaginable usage scenarios.
767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada,How To Use Conditional Element RenderingThere will be an enormously wide variety of situations were this feature could be used. The best we can offer here is a breakdown of the possible values, and a scenario to give you the idea.
As you can see in the screenshot below, when you click on the + Add New Logic Button, you are presented with a Field option, a Relational Operator selector (Equals =, and Does Not Equal !=), and a Value field. Below this is an AND/OR option which you can to combine further Logic Terms.
In the table below, you can see all the available Fields, and their possible values. As you can imagine, there are a huge number of possible scenarios, where this much requested feature could be used to control the page contents.

Field
Value

Cart Status
In

Empty

Device Type
Desktop

Mobile & Tablet

Event Status
Started

Ended

Get Variable
This field has both a Get and a Value option

Sale Status
Started

Ended

User Agent

User Role
Administrator

Editor

Author

Contributor

Subscriber

Customer

Shop Manager

Keymaster

Moderator

Participant

Spectator

Blocked

User State
Logged in

Logged Out

Custom Field

ACF Field,Example Of Conditional Element RenderingA good example of how to use Conditional Element Rendering is when building a custom Cart Page for WooCommerce. When a Cart is empty, for example, you would not want all the usual Cart Elements to display, and so by using Conditional Element rendering on the various Columns and Containers on the page, we could achieve that scenario easily. See the Avada WooCommerce Builder – Cart page for specific details of how to achieve this. Another example can be found in the video at the top of the page.
There are many more scenarios where this feature would be useful, including rendering content based on whether a user is logged in, or what their role is, whether an Event or Sale has started or finished, and whether the content is being viewed on a mobile or tablet, or even on a specific browser, just to name a few examples. This much requested feature brings an incredible level of flexibility to your page content, and is just another example of the innovation we continually bring to the table for Avada users!

How To Use The Container/Column Filter Options

With the introduction of Avada 6.1, we introduced Filter Options in Containers, Columns and Nested Columns. These filters are similar to the ones found in Photoshop or other editing programs. There are eight filters in all, Hue, Saturation, Brightness, Contrast, Invert, Sepia, Opacity and Blur, and there are options to apply these on both the normal and the hover state of the container or column.
You can apply any or all of the filters concurrently, with complete separation between normal and hover state, and the filters applied on a column work independently, but also in conjunction with filters applied on the parent container (though usually, you』d probably be only applying them to one of them). Filters affect not only the containers and columns, but also the content in them (and the controls for that column or container in the live builder).,View The Theme Feature Page!,Overview
Where To Find Them

The Filters

Examples,Where To Find ThemThe filter options are found under the Extras tab, in Containers, Columns, and Nested Columns. There are eight in all, and they can be applied on both the normal and the hover state of the container or columm. Let』s go through them one at a time to see what they do.
767,631 Businesses Trust Avada
Get Avada767,631 Businesses Trust Avada
Get Avada767,631 Businesses Trust Avada
Get Avada,The Filters
Hue – The Hue Blend Mode preserves the luminosity (brightness) and saturation (the intensity of the color) of the base pixels while adopting the hue (the color itself) of the blend pixels. Hue can be used to change hues in an image while maintaining the tones and saturation of the original. The slider travels the full 360 degrees of the color wheel.

Saturation – The Saturation Blend Mode preserves the luminosity and hue of the base layer while adopting the saturation of the blend layer. The slider is set to 100 by default, and can go down to 0 to fully desaturate an image, and up to 200 to fully saturate the image.

Brightness – The Brightness (luminosity) Blend Mode preserves the hue and saturation of the base layer while adopting the luminosity of the blend layer. The slider is set to 100 by default, and can go down to 0 to fully reduce the luminosity an image, and up to 200 to fully increase the luminosity of an image.

Contrast – The Contrast Blend Mode increases or decreases the contrast in the image, by lightening or darkeing the lightest pixels and lightening or darkeing the darkest pixels. The slider is set to 100 by default, and can go down to 0 to fully reduce the contrast of an image, and up to 200 to fully increase the contrast of an image.

Invert – The Invert Blend Mode inverts all of the colors in the image, making each color its exact opposite color, for example, replacing greens and browns with magentas and blues. The slider is set to 0 by default, and can go up to 100 to fully invert the colors in the image.

Sepia – The Sepia Blend Mode effectively reduces an image to greyscale (black & white) and adds a mid brown color filter over the image, originally designed back in the mid 1800s to warm black and white images. The slider is set to 0 by default, and can go up to 100 to fully desaturate and apply a sepia tone to the image.

Opacity – The Opacity Blend Mode gradually increases transparency into the image. The slider is set to 100 by default, which is fully opaque, and can go down to 0 to make the image fully transparent.

Blur – The Blur Blend Mode adds a Gaussian blur to the image as the slider is increased. The slider is set to 0 by default, and can up to 50 to fully blur the image.,ExamplesHue Blend Mode – set to 180 degrees on hoverSaturation Blend Mode – set to 0 saturation on hoverBrightness Blend Mode – set to 25 on hoverContrast Blend Mode – set to 150 on hoverInvert Blend Mode – set to 100 on hoverSepia Blend Mode – set to 100 on hoverOpacity Blend Mode – set to 0 on hoverBlur Blend Mode – set to 10 on hover

How To Use Flex Grow On Separators

A new feature, enabled by the addition of Flexbox to Avada, is the use of Flex Grow on Separator Elements. Let』s have a look at what this new option does.
The option is found in the Separator Element, at the top of the design tab. It』s a new Flex option that allows the separator to grow to fill the available space. It』s best explained with an example.
Let』s say we have three Columns in a row, with the parent Container』s Column Alignment option set to Stretch. This allows the Columns to Stretch to the full Height of the Container. Now let』s imagine that each Column has a Title, a Checklist Element, a 20px Separator, and a Button at the bottom. Depending on the number of Checklist items though, the columns would be the same heights, but the buttons would not be aligned at the bottom. It would look something like this.
In the back end builder, the columns would look like this.
You could go to the Column > Content Alignment Option, and see if you could get a better alignment using one of the Space options there, such as Space Around, Space Between, or Space Evenly. But a simpler solution exists, right inside the Separator Element. And that, of course, is Flex Grow.
The option is very simple. By default, it』s set to 0, and so is disabled. But in our situation here, we only need to go into the Separator Element in each Column and change the Flex Grow option to 1. This essentially tells the Separator to grow into the available space. As Flex Grow is implemented in other Elements, other possibilities will arise, using numbers higher than 1. But currently, you don』t need to set it higher than 1, and the Separator will expand into the available space.
This would make our Columns look like this, now with the Buttons aligned along the bottom. That』s Flex Grow!
Read More About The NEw Flex Options In Containers And Columns

How To Use The Element Animation Options

Element Animation Options control how the Element loads on the page. It can be found under the Extras Tab, which is currently available on 18 Design Elements, and 8 of the 9 Layout Section Elements. Animations can also be found in 2 Child Elements as well. Currently, the following Elements have these options:,Design Elements
Alert Element

Audio Element

Breadcrumbs Element

Button Element

Column Element

Content Box Child Element

Flip Box Child Element

Icon Element

Image Element
Image Before & After ElementMenu Element
Nested Column Element

Portfolio Element

Privacy Element

How To Order Categories For Portfolio & FAQ

If you need to reorder categories in your portfolio or FAQ, you can use the Category Order and Taxonomy Terms Order plugin.
If you are having problems with child category ordering, you can also try this alternate plugin, Simple Taxonomy Ordering.
IMPORTANT NOTE: These plugins are both third-party plugins, and therefore are not supported by ThemeFusion.

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 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.

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 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 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.