Avada 文檔

How To Reset Permalinks For Posts

If you are receiving 404 pages when you try to open a blog or portfolio post, you may need to reset your permalinks. To do this, follow the steps below.
Step 1 – Navigate to Settings > Permalinks in your WordPress Admin.
Step 2 – Check the common settings to see what you have selected, then scroll to the bottom and click 「Save Changes」.
Step 3 – Refresh your page and see if it works. Make sure to clear all forms of cache. That could be plugin cache, browser cache and/or server cache. More info on clearing cache can be found here. If that does not fix it, please see additional information below.
Other Permalink Informational PostsCustom Permalinks Return 404 Errors – Check out this in depth post on 404 errors for permalinksHow To Set A Custom Permalink Link For Portfolio Posts – Check out this post on how to make a custom permalink for portfolio posts

How To Remove The Link From The Rollover Area

By default, as of Avada 5.1, the the full image rollover area in post and portfolio slideshows links to the single post page. If you want to remove that, so that only the rollover link icon links to the single post page, you only have to add a single line of custom CSS to Theme Options > Custom CSS:
Copy to Clipboard.fusion-rollover .fusion-link-wrapper { pointer-events: none; } 1.fusion-rollover .fusion-link-wrapper { pointer-events: none; }Please note this is a customization that is outside of what we can provide for theme support. If you perform the customization, you will need to maintain the changes for future updates and also be able to troubleshoot any issues that may arise.

How To Make The Header Phone Number A Link

Under Avada > Theme Options > Header > Header Content > Phone Number For Contact Info, you can insert a phone number to display in the header. If you would like the number to be a link, you can add the number as per the code below, but you need to use single quotes. Double quotes will not work because the content is then treated like a variable or a parameter. See below for an example of the correct syntax.

Copy to Clipboard+45 40521604 1+45 40521604

How To Work With Sticky Containers

With Avada 7.0, there are many new Sticky options, the main one being that you can now make Containers Sticky. You can make a Container sticky in normal page content, but more often than not, this feature will be used as part of a Custom Header Layout, in conjunction with other complementary Sticky options, now found in Columns and certain other Elements. Read on to go through the various Sticky Options to see what they can do, or watch the video for a visual overview.,OverviewSticky PositionSticky Container Background Color & Minimum HeightSticky Container Offset
Sticky Container Transition Offset
Sticky Container Hide On Scroll
Image Element Sticky Options

Image Sticky Max Width

Menu Element – Sticky Minimum Height
Element Sticky Visibility Option
Conclusion,Sticky PositionYou will find the main Sticky option for Containers on the Extras tab in the Container Element. It』s called the Sticky Position option. If this is set to On, then a range of other Sticky related options appear beneath it.
The first of these is the Responsive Position Sticky, which again, allows you to choose at which screen sizes the container should be sticky. So for example, you might have the Container sticky on large screens, but not on medium or small ones.
You can see an example of this on the Pet Supplies website, where the 「Get $25 OFF」 banner on the Home page (which is in the Custom Page Title Bar Layout section, not in the Header itself) is sticky on large screens, but isn』t on other sizes.,Sticky Container Background Color & Minimum HeightUnder this, there is an option called Sticky Container Background Color, which allows you set a background color for the Container when it is Sticky.
There is also an option called Sticky Container Minimum Height, which controls the minimum height of the container when sticky. This option, however, will only show if the Height of the Container is set to Minimum Height in the General tab.,Sticky Container OffsetThen comes the Sticky Container Offset option. This controls the top offset from the container and top of viewport when sticky. It can pass either a unit of measurement, or a CSS selector.
As an example, let』s look at New Header Layout 6, one of the Prebuilt Headers For Layouts. In this Layout, both Containers are sticky. Without the Sticky Container Offset on the second Container, both Containers would be aligned to the top of the viewport when they became sticky, and would overlap.
So what this option allows you to do is to set a CSS Class in the top Container (for example top-bar) and then use that selector in the Sticky Container Offset field (.top-bar) in the second Container. This way, the second container is also sticky, but its position is offset by the height of the Container above it, so they don』t overlap. Alternatively, you can just use a pixel value in the Sticky Container Offset field.
As you can see in the image below of the second Container, the Sticky Container Minimum Height has been set to 75px (from it』s normal Minimum Height of 110px), and the .top-bar class has been assigned to the Sticky Container Offset field.,Sticky Container Transition OffsetYou can also see at the very bottom of the screenshot above, that there has been 35 pixels of Sticky Container Transition Offset set. This controls the scroll offset before sticky styling transition applies. This will give the user a much smoother experience.
IMPORTANT NOTE: If you are changing the height of the Container as it becomes Sticky, then the transition offset should be at least the difference between the heights.As can be seen in our above example, we are transitioning from a 110px Container height to an 75px Container height, and if we had no transition offset, the Sticky Container would decrease by 35px as the top of it touched the viewport. This would mean the content under the container would suddenly jump up 35px or there would be 35px of empty space.
So, in this case, we want the actual height transition to kick in only after we have scrolled enough past the header for that jump not to occur.,Sticky Container Hide On ScrollThe final Sticky option in the Container Element is Sticky Container Hide on Scroll. This controls the scroll distance before the container stops being sticky, and is hidden while scrolling downwards.
In this way, you could have multiple Sticky Containers as you scrolled down a page, with some staying, and some disappearing again as you scrolled further down. The creative options here are almost endless. Set to 0 to keep the Container always visible as you scroll down. This can be set up to 1000 pixels.,Image Element Sticky OptionsThere are also some Sticky options in other Elements. Let』s start with the Image Element. When using the Image Element there is now an option to pull the Logo dynamically into the Element. You can set this to All, or there are specific options to just pull the Sticky logo (Retina or Normal) from the Global Options.
This could be used, for example, if you wanted to create a unique Sticky Header Container in your Header Layout, that only appeared when the Container was in Sticky Mode, and you wanted to pull a specific Sticky sized logo.,Image Sticky Max WidthThere is also another Sticky option in the Image Element, as you can see at the bottom of the screenshot above, to enable an Image Sticky Max Width. This of course, is the maximum width the image should take up when the Container is sticky. You could leave this empty to use the full width of the image.
767,645 Businesses Trust Avada
Get Avada767,645 Businesses Trust Avada
Get Avada767,645 Businesses Trust Avada
Get Avada,Menu Element – Sticky Minimum HeightAnother Sticky option can be found in the Menu Element. This is the Sticky Minimum Height, found on the Main tab, and it sets the minimum height for main menu links when the Container is sticky. This could also be used in conjunction with the previous Sticky Max Width option in the Image Element to control the height of both logo and Menu in a Sticky Container. You can see the Avada Hosting Website as an example of this.,Element Sticky Visibility OptionIn certain Elements, you can also find another important new Sticky option. This is the Element Sticky Visibility option. This is a dependent option which only appears if the parent Container is set to Sticky. It allows you to determine when the Element will be visible, based on whether the Container it is in, is in Sticky mode or not. You can choose from Normal and Sticky visibility, and by default, they are both selected, meaning the Element is always visible. But if you deselect the Normal option, the Element will ONLY be visible when the parent Container is in Sticky mode.
This can be used in a number of creative ways, particularly with Header Layouts, but generally as well. The Column Element has this option as well, and in the above example with an individual Sticky Container, you would set the Column Element Visibility to only sticky, so the entire Column would only display when the parent Container went into Sticky mode.
An example of this technique can be seen in New Header 5, one of the Prebuilt Headers for Layouts. In this Layout, as you can see below, there are two Containers, with the second one being set to Sticky. The two outside Columns on the second Container have their Element Visibility set to Sticky only, and so in the normal state of the Container, these two Columns, and the Elements inside them, are not visible, but when the Sticky Container activates, the logo and the Woo Menu suddenly appear in the Container.
Currently, this option is only available for the Columns, Nested Columns, Alert, Breadcrumbs, Button, Icon, Image, Menu, Search, Separator, Sharing Box, Social Links, Title, and Text Block Elements.
Normal Container
Container in Sticky Mode,ConclusionThe sticky options in the Container, and other Elements, can be used in many creative ways, both in a Header Layout Section, other Layout Sections, and in the page content itself. Play around with these options to see just how flexible Avada has become.

How To Work With Parent & Child Elements

Some Elements have a Parent and Child structure. These are Elements that can display multiple items, for example, the Checklist, Gallery, and the Slider Elements, to name a few. A full list is shown below.
There are Element Controls for the Parent Element, and separate controls for each Child Element. Read on for more information on this common Element type.
Parent/Child ElementsBelow is a list of all the Elements that can have a Parent/Child structure. To learn more about the available parameters of these specific Elements, follow the links below, or for all our other elements, please see our full Fusion Builder Elements List.,Checklists Element

Content Boxes Element

Counter Boxes Element

Counter Circles Element

Flip Boxes Element

Gallery Element

Image Carousel Element

Slider Element

Tabs Element

Testimonials Element

Toggles Element,Element SettingsWith a Parent/Child Elements, there is always 1 Parent, and as many Children as you wish. You can also edit each child item individually, as well as clone or delete them and easily rearrange their order. Below is a guide on the Parent/Child Element settings and what each button does.
Parent Settings – Illustrated as A. These are the global settings for the Element. Selecting an option here sets it globally for all items. To override it, simply select a different option in the individual item.
Child Element Items – Illustrated as B. This is where all your child element』s items are found. Each will be numbered to better keep track of how many you currently have. You can re-order elements by dragging them and dropping them into place.
Edit Item Icon – Illustrated as C. Allows you to edit the individual child items and adjust their options.
Clone Item Icon – Illustrated as D. Allows you to clone an item. Cloned items will automatically be added to the bottom of the items list.
Delete Item Icon – Illustrated as E. Allows you to delete an item.
Re-order Feature – Illustrated as F. Allows you to drag and drop the item to your desired order to re-arrange them.
Add New Item Button – Illustrated as G. Allows you to add a new item.,Parent/Child Elements In The Fusion Builder Live EditorWith the new Fusion Builder Live Editor, you will see separate Element Controls for the Parent Element and each Child Element added. If you edit the Parent Element, you can access the Child Elements as well, but if you just want to configure an individual Child Element, you can edit it directly.
As you can see in the image below, there are Parent Element Controls in the middle of the content, but hightlighted is one of the Child Element Controls. You can also see a dotted lined which shows which Child Element is selected.

How To Use Youtube Video Parameters

Youtube offers a lot of parameters, that you can use in the video embed code, to have full control over your videos. Below are some links and a list of these parameters. All of the player controls for any YouTube player can be found in this Reference Doc.
Thanks to user jeffhd1ckey for submitting this idea!
Here is a list of the functions:

Parameters

autohide

autoplay

cc_load_policy

color

controls

disablekb

enablejsapi

end

fs

iv_load_policy

list

listType

loop

modestbranding

origin

playlist

rel

start

theme

Deprecated parameters only used in the AS2 Player API

How To Use The Image Element To Add A Logo Into A Header Layout

With the addition of the Header Layout to the Avada Layouts, you can now create custom Headers using the full power of Avada Builder. To assist with the creation of headers, the new Menu Element was added in Avada 7.0. But if you』re looking for a Logo Element, you won』t find one.
Because a logo is essentially just an image, and also because you would typically only use a Logo Element once to add it to a Header Layout, it was decided that the existing Image Element was more than good enough for the job. This document looks at exactly how to use the Image Element to add a logo to a Header Layout. Read on to discover more, or watch the video for a visual overview.

Adding The Logo As An ImageOnce you add the Image Element to your Header Layout, have a look at the very first Element option – Image. As we have established, a logo is essentially just an image, and so you can just add the logo as an image from the Media Library, using the Upload Image button on the first option.
Typically, you add your logo in the size you want it to display. So if you wanted your logo to be 300px wide, you could just resize it to that before uploading, and then add it as an image via the Element. But as seen below, you could also upload a Retina sized logo (eg. 600px) and use the Image Max Width option, directly below the Image option, to set a size half of the retina version (300px), thereby setting a Retina ready logo site wide.
As long as other logos were not set in the global options, this logo would be used for all responsive views, as well as a sticky header, if that was enabled.
Adding The Logo DynamicallyAlternatively, you can add the logo dynamically, which will pull the logo(s) uploaded through the Global Options. This can be advantageous in more complex headers, with the need for various logos and sizes, but there will be a small price to pay on page load. To get started with this method of adding your logo to a header layout, click the data icon next to the Option title, as seen directly below.
This will replace the Upload image button with a Select Dynamic Content dropdown. To see the full options for the Logo data type, click on Logo from the dropdown list.
This brings you to this screen, where you can choose exactly what data you』d like to pull into the Element.
You can choose from Default (Normal), Default (Retina), Sticky (Normal), Sticky (Retina), Mobile (Normal), Mobile (Retina), or All. What to choose here will depend on your Layout, and what you are trying to achieve.
Default (Normal) – This will pull the Default logo added to the Theme Options. It will display at its original size throughout the site, including on sticky headers and on all responsive views.Default (Retina) – This is the same as default, but pulls the Retina version. Using this with a combination of the Max Width option is an easy way to have a Retina Ready logo sitewide.Sticky (Normal) – You』d probably only select this one if you were building multiple header layouts and using Visibility options to show a specific Sticky Logo. In most cases, it would be easier to just set the Data set to All, and upload a Sticky Logo there.
Sticky (Retina) – As above.

Mobile (Normal) – You might use this if you wanted to build a specific mobile header, and having it only show on mobile layouts.

Mobile (Retina) – As above.

All – This is a great option if you have uploaded multiple versions of the logo through the theme options. It will pull the most relevant one in the situation; ie. it will pull the mobile logo when the mobile header is active, and the Sticky logo when a sticky header is active etc. To use All, you don』t have to upload all versions of the logo through the theme options. This will just pull the ones that have been added.
So, as you can see, the Image Element is now a powerful tool to help set your logo throughout the theme when using a custom layout.
If you have just one header layout, the best option is either uploading a logo as an image (either normal or retina version as described above) or adding the image via dynamic content, using the 『All』 dataset, and adding your desired logos in the theme options.
If you have multiple headers in your layout, using visibility options to control when they are shown, then the single data set options will be the ones you want, to show the various versions of the logo when the visibility optioins kick in.

How To Use The Global Color Palette In Avada

Color management is an integral part of designing and maintaining your website design and branding. This is why we constantly improve our color features in Avada to allow you to manage your color settings with ease. The latest innovation, released with 7.6, is a revised Global Color Palette, which can be used to define a palette of colors, which can then be tied to various global, page and element options on your website, allowing for quick updating of the entire site』s color scheme. Continue reading below to learn about the new color options.,Setting The Global Color PaletteThe Color Palette was originally added back in Avada 6.0, but with Avada 7.6, it has had a major overhaul. It』s a completely different beast now, and does a lot more than just set a color palette. For existing sites, this feature might be overlooked, but where it comes into its own is on a new site, or a freshly imported prebuilt site.
When starting a website, this is the place to go to initially set your site colors. You can find the Color Palette in the Global Options, under Color. There is a palette of eight inital colors, which for best results, you should set from lightest to darkest. Generally, you will set your white and bright tones, then your primary and accent colors, and then your greys or dark tones, as illustrated below. If needed, you can also add extra colors to the palette, by clicking on Add New Color.,Setting Global Colors In Global, Page & Element OptionsOnce you have set the colors on your Global Color Palette, you can begin to set them across your site. Anywhere you find a color picker, you will find a globe icon to access the global palette colors. As you can see in the example in the screenshot below, there is a globe icon at the end of the Primary Color option. To connect the primary color to a color from the Global Color Palette, simply click on the globe, and the Global Color Palette will appear, as in screenshot two.
In the final screenshot, the option has been tied to Color 4 on the Global Color Palette. As you can see, the globe icon becomes blue when a global color has been assigned to an option.
So what this does is not just make the Primary Color blue, but ties it to whatever color is selected in that Color 4 spot. So if that color is then updated, the Primary Color would be updated, as well as any option in the website that pulls the Primary Color.
The significance of this feature is easy to underestimate. Once color options across the site are tied to Global Palette colors, it takes only one change to a color in the Global Color Palette for that change to ripple throughout the entire website, allowing you to change the appearance of the site very quickly and efficiently.
Advanced Global Palette Color OptionsWhen setting a Global Palette Color, there are also some advanced options available. These will not be needed by most users however. These options, accessed by the sliders icon at the right of the dialog when adding a global color, offer Hue, Saturation, Luminance and Alpha options. With this, you can manipulate the existing global color, from the starting point of the chosen global color values. To undertsand HSLA color options, visit this site.
View the How To Use The Color Picker Doc here

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

Recent Posts Element

Search Element

Table Element

Tagline Box Element
Text Block Element
Title Element,Layout Section Elements
Author Element

Comments Element

Content Element

Featured Images Slider Element

Meta Element

Pagination Element

Project Details Element

Related Posts Element,767,645 Businesses Trust Avada
Get Avada767,645 Businesses Trust Avada
Get Avada767,645 Businesses Trust Avada
Get Avada,Extras Tab Animation Options
Animation Type – This controls the column』s animation type. This animates the chosen Element as the page loads. Choose between None, Bounce, Fade, Flash, Rubberband, Shake, Slide, or Zoom.

Direction of Animation – This controls the direction of the animation on the chosen Element. Choose between Top, Right, Bottom, Left, or Static.

Speed of Animation – This controls the speed of the animation on the chosen Element. Choose between 0.1 to 5. This is in seconds.

Offset of Animation – With this option, you can configure exactly when the animation will start. Without this, many animations would run before the content was in the viewport. Choose between Default, Top of element hits bottom of viewport, Top of element hits middle of viewport, or Bottom of element enters viewport.
The image below shows the Alert Element Extras Tab, and is set to animate on load. The specific settings for this image are Slide, Right, 0.5, and Top of Element Hits Middle Of Viewport.,Global Animation OptionsThere are also two global options relating to Element Animations, as seen below. These are found in Avada > Options > Avada Builder Elements > Animations, and here you can control the default Animation Offset, and whether animations are enabled on Desktop Only, Desktop & Mobile, or are turned off entirely.