標籤： how-to

How To Customize The Read More Symbol on Excerpts

The default symbol for excerpts shows as […]. If you wish to change this, with Avada 6.1.1, we have added a new Theme Option for you to easily control this. The options can be found in the Theme Options > Extra > Misecellaneous tab, as seen below.

The Display Excerpt Read More Symbol option, when turned on, displays the read more symbol – […] – on excerpts throughout the site.

Under this, the Excerpt Read More Symbol option can be used to customize your preferred symbol. This field can take HTML, and if left empty, will use the default value of […].

There is also a related option under this, called Make Excerpt Symbol Link to Single Post Page. Turn this on to have the read more symbol on excerpts link to the single post page.

How To Have A Menu Border On Hover Without Movement Using The Menu Element

When creating a menu using the Menu Element, you can set a border on hover, as I have done in the image below. But if you just set it on hover, you will see the menu move slightly, as the border is activated. To eliminate this movement when you hover, there』s a simple trick.
If you start by adding a border size and color on the Hover state of the menu, as found on the bottom of the Main tab, under the Main Menu Item Styling, you will see the menu moves slightly on hover, as the border is activated. In the image below, I have added a 5px border to the bottom of the menu.
The key to eliminate that movement is to also set the Regular state with the same size border, and then set the color to transparent. That way the border is also on the Regular state, but it』s just invisible. But with this method, any movement is fully eliminated.

How To Ensure A Full Screen Slider Revolution Slider Is Completely Full Screen

Revolution Slider offers a full range of sliders, including a very nice full screen slider. A Full screen slider will always take up 100% width and 100% height of the viewable area. There are two different situations that will require two different settings. To make a full screen slider for each situation, please see below.
IMPORTANT NOTE 1 : If you are logged into your WP admin and the top Admin bar is showing, the full screen Revolution slider will not be aligned properly to the height of your screen. This is normal expected behaviour. The full screen slider will only align properly to the height of your screen when you are logged out of your admin.IMPORTANT NOTE 2 : If you see extra white space above or below your full screen slider, it will be the page padding. You can remove this globally in the Avada > Theme Options > Styling tab, or individually per page in the Page tab of the Fusion Page Options. The two relevant options are 「Page Content Top Padding」 and 「Page Content Bottom Padding」. Set them to 0px.Full Screen Revolution Slider With Normal Header Above SliderIf you』re using a traditional opaque header above the slider, it』s important that you place .fusion-header-wrapper in the slider general options. The field you need to place the header wrapper class is called the 『by container』 field,  and can be found in the Layout > Decrease Container Height section of the Module General Options, as seen below. Doing this will allow the slider to take up the full width/height of the screen while still showing the header.
Full Screen Revolution Slider With Transparent Header or Header Below SliderIf you』re using a transparent header or a header below the slider, you do not need to put anything in the Offset Containers field. Please leave that field blank.,Slider Creation ProcessThe creation of Slider Revolution Sliders is a very large topic that is largely outside the scope of Avada support. Please see our Slider Revolution document for an overview of the topic, or for more detailed information and support, visit the ThemePunch Support Center, and check out their YouTube channel for a range of videos on Slider Revolution 6.

How To Hide Full Width Background Images On Mobile

If you wish to hide full_width shortcode background images on mobile devices, please use this custom CSS. Copy and paste it into the CSS field in Theme Options.
Copy to Clipboard@media only screen and ( max-width: 640px ) {
.fullwidth-box {
background-image: none !important;
}
} 1@media only screen and ( max-width: 640px ) {2  .fullwidth-box { 3    background-image: none !important;4 }5}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 arise.

How to Change Side Navigation Text Color By Itself

All menu text is controlled via theme options for consistency. If you want to only change a side nav, you can use the CSS below. Copy and paste that into the Custom CSS field in Theme Options.
Copy to Clipboard.side-nav li a { color: #FFFFFF !important; }
.side-nav li a:hover { color: blue !important; } 1.side-nav li a {  color: #FFFFFF !important; }2.side-nav li a:hover { color: blue !important; }

How To Change Testimonial Speed, Fonts, Background

You can change Testimonials speed, font color and background color by going to Avada > Theme Options > Fusion Builder Elements > Testimonials Element. Read the description and enter your desired value.
You can change the Testimonial font size with the following custom CSS:
Copy to Clipboard.review blockquote q {
font-size: 18px !important;
} 1.review blockquote q {2font-size: 18px !important;3}For more details on using custom CSS in Avada, please see our guide here.

How To Fix Missing Font Awesome Icons Or Custom Fonts

There are a few scenarios when Font Awesome icons or Custom Fonts might not show up. Read below to see the most common causes of this issue.
Fonts Hosted On Different DomainAll browsers require fonts to be hosted on the same domain (and a sub-domain is considered a separate domain name). If your Font Awesome Icons or custom fonts are not showing up in a certain browser (mainly Firefox or IE), then you have two solutions for the issue.
1. Host the font on the same domain as the domain where the website is accessed.
2. Create or edit the .htaccess file in the root folder on the same domain where the fonts are hosted, and add the following code into it:
Copy to Clipboard# Apache config

Header set Access-Control-Allow-Origin "*"
 1# Apache config23 Header set Access-Control-Allow-Origin "*"4Detailed Steps:To create or edit your .htaccess file, you need to log in to your server via FTP or through your cPanel File Manager, and find the root folder of your WordPress installation (you can see the 『wp-admin』, 『wp-content』 etc folders there). If there is already a .htaccess file there, you can right click and edit it directly on the server if you are using File Manager. If you are using FTP, you will need to download it, edit it and then upload it. (In Filezilla, there is a right click 『edit』 and this effectively does the same thing.)
If you don』t have a .htaccess file (on File Manager, make sure you have 『Show Hidden Files (dotfiles)』 selected in the Settings Menu), then you will need to create one, add the code above, and upload it. You can do this in any text editor. For a more step by step tutorial, read this!,Font Awesome Subsets Not SelectedAnother scenario when the Font Awesome icons do not show, is when no Font Awesome font subset is selected in the Theme Features section of the Theme Options (Avada > Theme Options > Advanced > Theme Features > Font Awesome). Ensure at least one subset is selected.,After Site MigrationIn some cases, when users migrate sites, the Font Awesome files can still show a path to the old site, and this causes the font to now show. Resetting the Fusion Caches easily fixes this (Avada > Theme Options > Performance > Reset Fusion Caches).

How To Change The Order of Sidenav Menu Items

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.By default, the menu items on a side navigation template page will be ordered alphabetically. If you would like to change this order, you can do so in the page attributes box of the individual pages. Look for the 「order」 field and enter a numerical order for all your pages. 0 will make the page the first item under the parent item, 1 will make a page the second, 2 will make a page the third item and so on.

How To Add Content To Content-Based Elements

There are several elements in Avada that allow you to add further content inside them, through the WordPress editor. For example, there is the Toggle Element, the Modal Element, the Tabs Element, and the Content Boxes Element, to name a few. If you wish to add further Fusion Builder content inside these elements, we have a few tips here on the best way to achieve this. Read on…
Now, not every element that has the WordPress editor in it, and therefore the Fusion Builder Shortcode Generator, is designed to have extra shortcode content. For example, the Title Element has an editor, but you can』t add a Gallery into a Title. So, common sense is required here.
But anytime you have access to the Fusion Builder Shortcode Generator, you can theoretically at least, add further Fusion Builder elements inside the parent element. There are a few golden rules with this process.
If you are just adding a single element, then you can use the Fusion Builder Shortcode Generator, configure the element and insert the shortcode directly into the containing element. But if you want a more complex layout involving columns, there is one important thing to remember.
IMPORTANT NOTE: Elements are already inside a column by default, so any further shortcode content inside an element needs to be inside nested columns.The Easy SolutionBut there is a very easy way to do this. Simply create a new page, and using your preferred interface of the Fusion Builder, create your desired layout using nested columns. When you are finished, you simply need to copy the nested columns element itself (using the right click feature) to copy the shortcodes into memory.
Then you can return to your original page and paste your shortcode content into the editor of the containing element. This way, you will be inserting the nested column shortcodes that are needed, as well as the elements inside them, but not the container and column they are in.
The resultant shortcode pasted into the editor in the element then generates the desired layout, without needing to edit any code.

How To Change The Size of Portfolio Thumbnails

Each portfolio layout has a set size for the thumbnail images in column view. This is done to ensure the columns line up and are a consistent size. If you wish to change the default size, it can be done but requires a few edits. See the below example for the Portfolio 4 column layout, you can follow the same steps for the other columns, just make sure you are changing the right code for the column you want to change.
1. In includes/class-avada-init.php find the code below and change the size to your liking.
Copy to Clipboardadd_image_size('portfolio-four', 220, 161, true); 1add_image_size('portfolio-four', 220, 161, true);2. Then you need to change some CSS to match the width and height you used above. Copy and paste this CSS into the CSS tab in theme options.
Copy to Clipboard.portfolio-four .portfolio-item .image {width:220px !important; height: 161px !important; }xxxxxxxxxx1 1.portfolio-four .portfolio-item .image {width:220px !important; height: 161px !important; }3. Please also make sure to change the containers to the right size:
Copy to Clipboard.portfolio-four .portfolio-item {
height: auto !important;
width: auto !important;
}xxxxxxxxxx4 1.portfolio-four .portfolio-item {2    height: auto !important;3    width: auto !important;4}4. When you are finished, you need to use the Regenerate Thumbnails plugin.
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 arise. Thank you.