options 歸檔 - 第 3 頁共 5 頁

Introducing Flexbox for Containers and Columns

With Avada 7.0, we have completely re-imagined both the Container and Column elements, basing them on CSS Flexbox. This means that extremely flexible positioning and spacing have now arrived in Avada Builder. At the same time, we have kept our classic setup for Containers and Columns in case you want to keep using it on pre-existing sites.
Read on to discover more about the Flexbox related changes to the main structural elements in Avada, or watch the video below, for a visual overview. For a full overview of all individual options, please see the Container and Column Element docs.,OverviewWhat is Flexbox?
Legacy Support
Container Flexbox Options
Row Alignment

Column Alignment

Column Justification
Column Flexbox Options
Alignment

Content Alignment

Other Flex Related Options

Conclusion,What is Flexbox?You can read more about it here, but basically, Flexbox is a CSS3 layout model, that provides a more efficient way to lay out, align and distribute space among columns inside a container, even when their size is unknown and/or dynamic. The main idea is to give a container the ability to alter its columns』 width/height (and order) to best fill the available space, allowing responsive elements within a container to be automatically arranged, depending upon the screen size.
So in Avada 7.0, you will find new options in both the Container and the Column Elements. The main way this change affects how you can build is in Alignment and Spacing options.
In the Container Element, you will see three new options – Row Alignment, which defines how rows should be aligned vertically within the container (this will only fully work when multiple rows of content are in the container), Column Alignment, which allows you to select how you want columns to align with rows, and Column Justification, which allows you to control how the columns are aligned horizontally in the container.
And in the Column Element, you will find the new Alignment option, which defines how the column should align itself within the container (this overrides what is set on the container) and the Content Alignment option. This defines how the column content should align, and only works with full height columns.
To get a visual idea of what these options can do in practice, we will look at some examples, but first, it』s important to understand when you will see these new flex containers and columns and when you won』t.,Legacy SupportLegacy Support for Updated SitesLegacy Support for the old Container and Columns will be automatically enabled when updating existing sites to Avada 7.0. This will mean, that on an updated site, all existing Containers and Columns will not change and the Flex options will not be enabled for existing Containers. If you create a new Container, however, it will use the new Flex options.
If you want to convert your Legacy Containers to Flex, you can simply disable Legacy support in Global Options > Avada Builder Elements > Container > Legacy Support. If you do this, your existing containers will automatically switch over to the new flex method. If you see problems with this on your old containers, you can turn legacy mode back on and your containers will return to their old state. Note, not all setups can be 100% converted to flex mode and kept identical automatically.
Our recommendation is that after updating you should turn off legacy mode in the options. Unless you have problems with the way the containers display, we would suggest leaving this off and only using the new Flex options. If you have problems on only a couple containers of the website, then we would suggest disabling legacy and then manually updating that area with the new options, but you have the choice to leave it as is.
Legacy Support for New SitesOn a new site, installed on Avada 7.0, Flex Containers will be on by default. If you want to access the old Containers and Columns, you will need to turn Legacy Support on. Although, on a new site, we see absolutely no reason not to just use the new Flex Containers and Columns.
To enable/disable Legacy Support, just go to Global Options > Avada Builder Elements > Container, where you will find the Enable Legacy Support Option at the very bottom.
See the Container & Column Legacy Settings DocContainer Flexbox OptionsThe Container Element has several new options directly related to the Flexbox changes, which allow great flexibility in how you position your content within the container: These are Row Alignment, Column Alignment, and Column Justification.
IMPORTANT NOTE: You will only see these new options if your Container Type is set to Flex. And you will only see the Content Type option if Legacy Support is enabled in the Options. For more information, please see the Legacy Support Section above.,Row AlignmentThe first of the Container Flexbox options is Row Alignment – but this option only be visible when when Full Height or Minimum Height is selected for the Height option. Rows are the space the columns take up in a Container before they break to a new row. This option defines how rows should be aligned vertically within the container, and therefore will only have full effect when there are multiple rows of content in the Container.
Options are Stretch, Top, Center, Bottom, Space Between, Space Around, and Space Evenly. See below for examples of what this can achieve.
IMPORTANT NOTE: This option will only have full effect if multiple rows of content are present in the Container.Examples of Row AlignmentLet』s start with a Container that has two rows of Columns. But before we look at the alignment of the rows, let』s look at the Container height. As mentioned already, the Row Alignment option will not show when Auto is selected for the Height option, because in that case, there is no extra room in the Container for the options to fully work. You can, however, use the Full Height Option, or even the Minimum Height option.
In the example below, I have set the container to Minimum Height, with a specified Minimum Height of 90vh (this equates to 90% of the Viewport height), but as long as there is extra room in the Container, you will see the effect.
Apart from the Container Height, the Container below also has 50px padding at both the top and bottom of it, but with all other settings on default, we can see the two rows as they appear in the Container in the first image below.
Row Alignment – StretchThe default selection with the Row Alignment option is Stretch, which means the Row will stretch to take up all available space. Note how the Columns themselves are not changing in size with this option, as this is the Row that is being affected.
In terms of positioning, with two rows in the Container below, this actually means that the rows are each placed in 50% of the container height, and aligned to the top, with the first row taking up to 50% of the available vertical height, and the second row under that, also aligned to the top of its 50%.
Row Alignment – Flex Start (Top)The next few selections are very simple. With the Flex Start selection, as you can see, both rows of Columns are aligned to the top of the Container.
Row Alignment – CenterWith the Center selection, both rows of Columns are aligned in the center of the Container.
Row Alignment – Flex End (Bottom)With the Flex End selection, both rows of Columns are aligned to the bottom of the Container.
Row Alignment – Space BetweenWith the Space Between selection, both rows of Columns are aligned to the top and the bottom of the Container respectively, maximizing the space between them.
Row Alignment – Space AroundWith the Space Around selection, both rows of Columns are aligned in the middle of their 50% area, with the same amount of space above and below them. This is why the space in the middle is twice as big as the space above and below the rows.
Row Alignment – Space EvenlyWith the Space Evenly selection, the available space in the Container is equally divided between above, between and below the rows of Columns.,Column AlignmentThe next Flexbox option is Column Alignment. The Column Alignment option allows you to select how you want your columns to align within rows.
Options are Top, Center, Bottom, and Full Height. Using the Full Height selection is, for example, how you achieve equal heights of columns. Let』s look at the various options.
Examples of Column AlignmentFor the images below, I started with a Container, with default Flex values, and then added some padding to the top and bottom of the Container.
We then have 3 Columns with content of varying length. If your content has identical length, you won』t see these options take affect, as the Columns are already aligned.
Column Alignment – Flex Start (Top)This is the default selection, and as you can see in the image below, the Columns are all aligned to the top of the Container.
Column Alignment – CenterThe Center selection aligns the Columns with their center point.
Column Alignment – Flex End (Bottom)The Flex End selection aligns the columns by their bottom edge.
Column Alignment – Stretch (Full Height)The Stretch selection makes the Columns all the same height, stretching the shortest Columns to the height of the tallest. Note, however, that there is not necessarily any alignment of the elements inside these Columns. This would depend on the content. For this, there is the Content Alignment option, found in the actual Columns. For more detail on this, head down to the Content Alignment Option.
767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada,Column JustificationThe next Flexbox option is Column Justification. The Column Justification option allows you to select how the columns will be justified horizontally. For this option to have any effect, the Row cannot be full. If the Columns that make up the row add up to the full width (eg. 1/3 + 1/3 + 1/3) then there is no room to justify the content horizontally at all. If, however, you have a single 1/2 size column, or two 1/3 columns in a row, then there is room for horizontal justification.
Options are Flex Start, Center, Flex End, Space Between, Space Around, and Space Evenly. Let』s look at the various options.
Examples of Column JustificationFor the images below, I started with a Container, with two 1/3 Columns, with Column Alignment set to Full Height, and Content Alignment set to Space Between.
Column Justification – Flex StartFlex Start is the default selection, and as you can see in the image below, the Columns are all justified at the Start of the Container.
Column Justification- CenterThe Center selection justifies the Columns horizontally in the center of the Container.
Column Justification – Flex EndThe Flex End selection justifies the Columns horizontally at the end of the Container.
Column Justification – Space BetweenThe Space Between selection places each Column at either end, to maximize the space between.
Column Justification – Space AroundThe Space Around selection places the same amount of space on each side of each Column. Note that visually the spaces aren』t equal, since all the items have equal space on both sides (within the Site Width). The first item will have one unit of space against the container edge, but two units of space between the next item because that next item has its own spacing that also applies.
Column Justification – Space EvenlyThe Space Evenly selection distributes the Columns so that the spacing between any two items (and the space to the edges – in this case the Site Width) is equal.,Column Flexbox OptionsThe Column Element has two new options related to the Flexbox changes, which control the alignment of the individual Columns, and the alignment of the content within them. They are Alignment, and Content Alignment.
AlignmentThis is an individual Column Alignment option. It defines how the column should align itself within the container, and overrides anything that is set on the corresponding container option. The main difference to note here is that the Container > Column Alignment option affects all the Columns inside the Container, while the Column > Alignment option only affects the Column it is set on.
Examples of AlignmentFor these examples, we will continue with our previous example of a Container with 3 Columns, with the Column Alignment option left on the default value of Top.
Alignment – DefaultAs the default value for this option is Default, this means that it inherits from whatever is set on the Container > Column Alignment option. In this case, that was Flex Start (Top).
Alignment – Flex Start (Top)When changing to the Flex Start selection, because the Parent Container option is also set to Flex Start, the selection does not change anything.
Alignment – CenterCenter Alignment aligns the center of the selected column to the middle of the Container.
Alignment – Flex End (Bottom)Flex End Alignment aligns the bottom of the selected column, along the baseline Container (minus any Container padding).
Alignment – Stretch (Full Height)Stretch aligns the column to the height of the Container (again, less any padding).
Content AlignmentThis option allows you to control the alignment of the content within the individual Columns. This option only works for Columns where the Content > Column Alignment option, or the Column > Alignment option has been set to Full Height (this is not the same as Full Height Containers). Options are Top, Center, Bottom, Space Between, Space Around, and Space Evenly.
Examples of Content AlignmentFor this example, let』s start with the same content as we did for the Container > Column Alignment option, with the Full Height selection. See how the Columns are the same height, but there is only alignment with the Titles at the top. Let』s see how this option can adjust the alignment of the content within the individual Columns.
Content Alignment – Flex Start (Top)This is the default selection with this option. The Titles align at the top, but that is all.
Content Alignment – CenterHere, all three Columns have been set to Center. This centers the content within the Columns. Note how, that due to the differing amounts of content in the middle Column, only the two outside Columns』 content aligns.
Content Alignment – Flex End (Bottom)Here, all three Columns have been set to Flex End. This aligns the content along the bottom of the Column, but now the Titles are not aligned.
Content Alignment – Space BetweenHere, all three Columns have been set to Space Between. In this situation, this arguably gives us the best results, as it means that the top and the bottom of the content are aligned, with the space distributed in between.
Content Alignment – Space AroundHere, all three Columns have been set to Space Around. In this situation, the content is almost aligned, but because the middle Column has a differing amount of content, it doesn』t quite align with the other two.
Content Alignment – Space EvenlyHere, all three Columns have been set to Space Evenly. Again, in this situation, the content is almost aligned, but again, because the middle Column has a differing amount of content, it doesn』t quite align with the other two.
Depending on the amount of content you have in your Columns, these options will work quite differently to the examples shown here, and with equal amounts of content, you will have the most options.,Other Flex Related OptionsThere are a few other options in the Flex Containers and Columns that are also enabled by Flexbox. These are the Order option in the Columns Element, and the Responsive Option Set feature found in both. For more information on both of these, please see the How To Set The Display Order And Size Of Columns In Responsive Layouts and the Responsive Option Sets documents.,ConclusionSo as the name suggests, and the examples bear out, Flexbox is all about flexibility of layout. With the introduction of Flexbox into the structural Column and Container Elements, we have now introduced an unprecedented level of flexibility when it comes the the layout and alignment of containers and their child columns.

Configure and Display Social Media Icons

Avada includes a wide range of social media icons that can be used in several locations on your site. All social media icons are CSS based font icons, which ensures that they are high quality, and can be configured using the available options. Continue reading below to learn more about how to set up the social media icons, how to customize different settings, and how to display them on your site.,Overview
Social Media Icons

Header Social Icons

Footer Social Icons

The Social Sharing Box

Social Links Element

Social Sharing Box Element

Social Links Widget

Social Media Icons Styling

Custom Social Media Icons
Social Media IconsIn the Social Media Icons panel, found at Avada > Options > Social Media > Social Media Icons, you will find a repeater field, to which you can add one social network at a time. You can add as many social links as you require. You can also add custom social links and icons here, which you can read more about below.
IMPORTANT NOTE: The social media icons and links that you insert on this tab will be the icons that will be displayed on your header or footer.How To Add Social Media IconsStep 1 – Navigate to Avada > Options > Social Media > Social Media Icons.
Step 2 – In the repeater field dropdown, select the social network that you』d like to add an icon for. For example, Facebook.
Step 3 – Under the 『Link (URL)』 field, enter the URL you』d like the social media icon to link to. For example, http://www.facebook.com/avada.
Step 4 – Once done, click the 『Add』 button to add it to the list.
Step 5 – To add another social media icon, simply repeat Step 2 to 4.
Step 6 – To delete a social media icon, expand the social media icon tab you』d like to delete, then click the 『Delete』 button on the lower right side.
Step 7 – To rearrange the order of the social media icons, simply drag and drop each tab until you achieve your desired order.
Step 8 – Once you』re done adding social media links, don』t forget to click the 『Save Changes』 button.
Header Social IconsOnce you have added Social Media Links, you can display them on your site. On the Header Content tab, found at Avada > Options > Header > Header Content, you can, if you have chosen a header layout that supports it, choose to show Social Links in the Header Content 1 or Header Content 2 field. Full instructions and screenshot below.
IMPORTANT NOTE: For social media icons to appear on your header, you must enable it and have the appropriate social media links set in the Social Media Icons tab.How To Display Social Media Icons On Your HeaderStep 1 – Navigate to Avada > Options > Header > Header Content.
Step 2 – Choose a header layout #2 – #5 (not available for header layouts 1, 6, 7).
Step 3 – Under 『Header Content 1』 or 『Header Content 2』 dropdowns, select the Social Links option to display social links on the header.
Step 4 – Don』t forget to save your changes by clicking the 『Save Changes』 button.
Styling Header Social Media IconsTo style your Header Social Media Icons, see the following steps.
Step 1 – Navigate to Avada > Options > Social Media > Header Social Icons Styling.
Step 2 – On this tab, you will find configuration options such as font size, tooltip position, color, and layout.
Step 3 – When you are done, click the Save Changes button.
Footer Social IconsYou can also display social media icons in your Footer. They draw from the same pool of social media icons set previously, but you can style them independently to the header social media icons. Continue reading below to learn how to display social media icons on your footer and customize them.
IMPORTANT NOTE: For social media icons to appear on your footer, you must enable it and have the appropriate social media links set in the Social Media Icons tab.How To Display Social Media Icons In Your FooterStep 1 – Navigate to Avada > Options > Social Media > Footer Social Icons Styling.
Step 2 – Locate the 『Display Social Icons In The Footer』 option and select On.
Step 3 – Under this tab, there are also several options that you can use to customize the appearance of the footer social media icons.
Step 4 – When finished, don』t forget to click the 『Save Changes』 button.
The Social Sharing BoxThe Social Sharing Box allows your viewers to share any blog or portfolio post using several social media networks. This feature can be enabled or disabled on any blog or portfolio single post page. On this tab, you can customize the social sharing box itself and the social media icons within it. Also in this section, we』ve included a quick guide on how to enable/disable the social sharing box on blog and portfolio posts.
How To Enable Social Sharing Box In All Single Blog Post PagesStep 1 – Navigate to Avada > Options > Blog > Blog Single Post.
Step 2 – Locate the Social Sharing Box option, and select 『On』 to enable the Social Sharing Box.
Step 3 – Don』t forget to save your changes by clicking the 『Save Changes』 button.
How To Enable Social Sharing Box In One Single Blog Post PageStep 1 – Navigate to the blog post you』d like to enable the Social Sharing Box in.
Step 2 – Under Page Options > Post tab, locate the Show Social Share Box option and set it to 『Show』.
Step 3 – Don』t forget to save your changes by clicking the Save Draft or Publish.
How To Enable Social Sharing Box In All Single Portfolio Post PagesStep 1 – Navigate to Avada > Options > Portfolio > Portfolio Single Post.
Step 2 – Locate the Social Sharing Box option, and select 『On』 to enable the Social Sharing Box.
Step 3 – Don』t forget to save your changes by clicking the 『Save Changes』 button.
How To Enable Social Sharing Box In One Single Portfolio Post PageStep 1 – Navigate to the portfolio post you』d like to enable the Social Sharing Box in.
Step 2 – Under Page Options > Portfolio tab, locate the Show Social Share Box option and set it to 『Show』.
Step 3 – Don』t forget to save your changes by clicking the Save Draft or Publish.
How To Style Social Sharing And IconsStep 1 – Navigate to Avada > Options > Social Media > Social Sharing.
Step 2 – Here you will see multiple options for social sharing such as the tagline, background color. You』ll also find options for the Social Sharing Icons such as font size, tooltip position, etc.
Step 3 – Under the Social Sharing Links section, you can select which social links to display on the Social Sharing Box. Simply choose 『On』 for the corresponding social link option that you』d like to show. For example, if you』d like your viewers to be able to share your portfolio or blog post on Facebook, then you will need to set the Facebook option to On.
Step 4 – Don』t forget to save your changes by clicking the 『Save Changes』 button.
How To Add The Social Sharing Element To A Page Or PostIMPORTANT NOTE: For social links to appear on the sharing box element, you must first set them in the Avada > Options > Social Media > Social Sharing panel.Step 1 – Navigate to the page or post where you』d like to add the Social Sharing Element.
Step 2 – Activate the Avada Builder by clicking the 『Use Avada Builder』 button.
Step 3 – Add a new Container to the page, and select your desired column layout.
Step 4 – Click the 『+ Element』 button to bring up the 『Elements』 window. Find the Social Sharing Element, and then click it to add it to the page and bring up its options window.
Step 5 – Customize the Social Sharing Element to your liking.
Step 6 – Once finished, click 『Save』.
Social Links ElementThe Social Links Element can be inserted in any page or post you create. To learn how to add and customize the Social Links Element, please continue reading below.
How To Add The Social Links Element To A Page Or PostStep 1 – Navigate to the page or post you』d like to add the Social Links element.
Step 2 – Activate the Avada Builder by clicking the 『Use Avada Builder』 button on the top of the content editor.
Step 3 – Add a new Container to the page, and select your desired column layout.
Step 4 – Click the 『+ Element』 button to bring up the 『Elements』 window. Find the Social Links element then click it to add it to the page and bring up it』s options window.
Step 5 – Add links to the respective social network fields you』d like to display. For example, if you』d like to display the Facebook social icon, you need to add a Facebook link to the Facebook field provided.
Step 6 – Once finished, click 『Save』.
How To Configure Social Links Elements GloballyIMPORTANT NOTE: On the 『Avada Builder Elements』 panel, the 『Social Icon Elements』 tab controls the global options for both the Social Links element and the Person element.Step 1 – Navigate to the Avada > Options > Avada Builder Elements panel.
Step 2 – On this panel, you』ll find the 『Social Links Elements』 tab. Under this tab, you』ll find several options that allow you to customize the appearance of the Social Links elements globally. Please keep in mind that this tab also controls the global options for the Person element.
Step 3 – Once done, click the 『Save Changes』 button.
Social Links WidgetYou can use the Social Links widget to insert social links to any widget-ready areas of your site; such as the footer, sliding bars, sidebars, mega menu columns, and the like. To learn how to add a Social Links widget to widget areas, please continue reading below.
How To Add A Social Links Widget To Widget AreasStep 1 – Navigate to the Appearance > Widgets tab on your WordPress admin sidebar.
Step 2 – You must first create a widget area. To learn more about this, please refer to our Widgets Section article.
Step 3 – Under the Available Widgets section, locate the 『Avada: Social Links』 widget. Then, drag and drop it to the widget area you』d like to add it to.
Step 4 – Once you add it to a widget area, the widget will automatically expand and display all the available customization options. Using these options, you can customize the widget and add your desired social links to their corresponding social network fields. For example, if you』d like to display a Facebook link, then enter that link under the 『Facebook Link』 field. View screenshot here.
NB. A few options to be aware of here: If you want to ensure your Social Media Links open in a new window, make sure to add 「_blank」 to the Link Target option. Also, you can add your own Social Media links by adding the link in the fields provided, or you can choose to Use Theme Option Links and/or Show Custom Links. See these options here.
Step 5 – Once done, click 『Save』.
Social Media Icons StylingThere are several configurable options that makes it easy to style your social media icon』s appearance. These options are found in the respective areas where social icons can be displayed. To learn how these options affect the social icons, please continue reading below.
IMPORTANT NOTE: The options to configure a particular set of social media icons depends on the area where they』re found. For example, if you』d like to change the social media icons displayed on the header, then you will need to go to the Avada > Options > Social Media > Header Social Icons tab.Social Icon Font SizeUse this option to increase or decrease the size of the social media icon. For example, 18px.
Social Icon Tooltip PositionCan be Top, Right, Bottom, Left or None. Choose the tooltip』s position.
Social Icon Color TypeCan be Custom Colors or Brand Colors. Sets each icon』s color to it』s brand colors or custom colors.
Social Icon BoxedCan be On or Off. Use this option to display the social icons in boxes or just icons.
Social Icon Boxed RadiusIf the 『Social Icon Boxed』 option is set to On, then this option controls the roundness of the box.
Social Icon Boxed PaddingIf the 『Social Icon Boxed』 option is set to On, then this option controls the interior padding of the icon.
Custom Social Media IconsAdding custom social media icons allows you to display social networks that are not included on the list. You can also choose to add custom social media icons for existing social networks if you』d prefer to use your own icons. You can add as many custom social media icons as you』d like. To learn how to add custom social media icons, please continue reading the instructions below.
How To Add Custom Social Media IconsStep 1 – Go to the Avada > Options > Social Media > Social Media Icons panel.
Step 2 – In the repeater field, select 『Custom』 from the dropdown. The 『Custom』 option is the last option in the dropdown.
Step 3 – Once 『Custom』 is selected, the options on the repeater field will change.
Step 4 – Add your custom URL link in the 『Link (URL)』 option.
Step 5 – Add your custom tooltip name in the 『Custom Icon Title』 field.
Step 6 – Upload your custom icon image by clicking the 『Upload』 button, then choose the appropriate image from your computer or media library.
Step 7 – Once you』re finished, don』t forget to click the 『Save Changes』 button.

Global Options Not Saving

If you are experiencing an issue where the Global Options are not saving properly, the following list may help.
Ensure that your theme, WordPress and all plugins are up to date. The current Avada version is 7.6 (Released on December 15th, 2021), the current Avada Builder version is at 3.6, and Avada Core is version is at 5.6
Try a simple page refresh and try again.

Navigate to Avada > System Status, and ensure there are no system environment values listed as insufficient (indicated in red). Otherwise, they need to be adjusted. Especially too low memory limits could be causing issues. For detailed instructions explaining what the PHP configuration limits are and how to adjust them, read our System Status Limits doc.

Check for any possible 3rd party plugin conflicts. Deactivate all your 3rd party plugins and trying to save Global Options again. If that works, activate the plugins again one by one to see which is causing the issue.
Sometimes Global Options are not saved due to a 500 error occurring during the AJAX save call, which can be seen in the browser console. This happens due to low memory, a plugin conflict or due to server setup issues. One of the most common server issues is security rules that prevent AJAX saving. This can be tested by disabling AJAX saving by adding the following constant to your wp-config.php:
Copy to Clipboarddefine( 'FUSION_AJAX_SAVE', false ) 1define( 'FUSION_AJAX_SAVE', false )

When you save the Global Options, and the browser scrolls up to the top of the panel, look for a notice marked in red, reading: 「Invalid security credential. Please reload the page and try again」. In that case, you have have to login newly to your WordPress dashboard and Global Options will save again correctly.

Empty your browser cache and disable any browser add-ons you might have.

Contact your hosting provider and ask them to check any security settings that may be causing the issue. This issue is sometimes caused by a ModSecurity rule being triggered on the server. If you have an error like the one shown below in the console, contact your host and ask them to whitelist the rules that triggered by ModSecurity.
Useful Links & ResourcesQuick Start GuideAvada Required And Bundled PluginsRequirements For AvadaAvada Theme SupportUpdating from an old version of Avada?Important Update InformationHow to Update The ThemeUsing the Patcher Tool to Apply All Theme Fixes

Lightbox

Lightbox is an Avada option that allows you to open beautiful, responsive overlay windows, containing images or videos. Below you』ll find a detailed description on each Avada Global Option available for the Lightbox, as well as the Lightbox Skins, the Lightbox Element, and the other elements that utilize the Lightbox.
Overview
Lightbox Global Options

Lightbox Element

Lightbox Skins

Other Elements With Lightbox Options,Lightbox Global OptionsThe Global Lightbox Options are found in the theme options at Avada > Options > Lightbox. These options affect the way Lightbox works across the site.
Lightbox – Allows you to enable or disable the Lightbox across your site. Choose between Yes or No.
Lightbox For Featured Images On Single Post Pages – Turn on to enable the lightbox on single blog and portfolio posts for the main featured images.
Lightbox Behavior – Allows you to set what the Lightbox will display for portfolio and blog posts. Choose between First Featured Image of Every Post, or Only Featured Image of Individual Post.
Lightbox Skin – Allows you to set a Lightbox skin. Choose between Light, Dark, Mac, Metro Black, Metro White, Parade or Smooth. See below for examples of the various skins.
Thumbnails Position – Allows you to set the position of the thumbnails in the Lightbox. Choose between Right or Bottom.
Animation Speed – Allows you to set the animation speed. Choose between Fast, Slow or Normal.
Arrows – Allows you to enable or disable navigation arrows. Choose from Yes or No.
Gallery Start/Stop Button – Allows you to enable or disable the gallery start/stop button. Choose from Yes or No.
Autoplay The Lightbox Gallery – Allows you to enable or disable the Lightbox gallery』s autoplay feature. Choose from Yes or No.
Slideshow Speed – Allows you to enter a numerical value that sets the slideshow speed if the 『Autoplay The Lightbox Gallery』 option is enabled. For example, 1000 = 1 second.
Background Opacity – Allows you to enter a numerical value that sets the background opacity. For example, 0.00 (transparent) or 1.00 (opaque).
Title – Allows you to enable or disable image titles in the Lightbox. Choose from Yes or No.
Caption – Allows you to enable or disable the image captions in the Lightbox. Choose from Yes or No.
Social Sharing – Allows you to show or hide the social sharing button on the images in the Lightbox. Choose from Yes or No.
Deeplinking – Allows you to enable or disable deep linking image in the Lightbox. Choose from Yes or No.
Show Post Images In Lightbox – Turn on to display post images in the Lightbox that are inside the post content area. Choose from Yes or No.
Slideshow Video Dimensions – Accepts a pixel value that lets you control the width and height of videos inside the Lightbox. For example, 1280px x 720px.
767,639 Businesses Trust Avada
Get Avada767,639 Businesses Trust Avada
Get Avada767,639 Businesses Trust Avada
Get Avada,Lightbox SkinsThe Lightbox comes with a choice of seven skins – Light, Dark, Mac, Metro Black, Metro White, Parade, & Smooth. These are set in the Theme Options at Avada > Options > Lightbox > Lightbox Skin. You can see an example of each style below.
LightDarkMacMetro BlackMetro WhiteParadeSmooth,Lightbox ElementThe Lightbox Element is added through the Avada Builder. You can also add a Lightbox Element to a content area (eg. a Text Block Element), via the Element Generator found in the WordPress Content Editor toolbar. Learn more about Inline Elements here. For full details on the Lightbox Element, please follow the link below.
View the Lightbox Element Documentation!,Other Elements With Lightbox OptionsImage ElementIn the Image Element, you can choose to upload and display an image in a lightbox, different from the image you choose to display inside the Image Frame. To enable that, simply select Yes on the Image Lightbox option. To upload a different display image to display on the lightbox, click the Upload button in the Lightbox Image field and select an image from your Media Library or upload a new one. You can also add images added via the Image Element to a Lightbox Gallery by linking them with the same Gallery ID.
View the Image Element Documentation!,Image Carousel ElementIn the Image Carousel Element, you can choose to display your images in a lightbox. To display images in a lightbox, simply select Yes on the Image Lightbox option.The Image Carousel Element will display your images in the Lightbox at the size they are uploaded. Avada uses an appropriate sized image for the carousel thumbnails. For more information on this, please see the How Avada Controls Responsive Images doc.
View the Image Carousel Element Documentation!,Gallery ElementThe Gallery Element uses the lightbox by default. The Gallery will display your images in the Lightbox at the size they are uploaded. Avada uses an appropriate sized image for the gallery thumbnails. For more information on this, please see the How Avada Controls Responsive Images doc.
View the Gallery Element Documentation!,Post Slider ElementIn the Post Slider Element, you can choose to display images in a lightbox, only if the Post Slider is set to the Attachment layout. To enable that, select Yes on the Lightbox on Click option.
View the Post Slider Element Documentation!,Slider ElementIn the Slider Element, you can choose to display your slider images in a lightbox. To enable that, select Yes to the Lightbox option in each slider item tab.
View the Slider Element Documentation!,Page Options for Portfolio PagesWhen editing portfolio pages, you can add a YouTube or Vimeo video to a Lightbox. Enter the URL of the video in the YouTube/Vimeo Video URL for Lightbox field located in the Avada Page Options > Portfolio section.

Container Background Parallax Options

Container Background Images can also have a parallax effect applied to them. There are a range of options with regard how the image should move. These options can be found in the BG tab of any container element, once a background image has been chosen.
Below is an example of a container with a background image that has a parallax effect applied to it. The direction chosen is left, and the speed is the default .3. As you can see as you scroll, the image moves to the left. On a mobile device the image will not move as Enable Parallax on Mobile has been set to No on this container.,There are three parallax related options. The first is Background Parallax. There are six options here.

No Parallax – This is the default setting on Containers, with no parallax effects.

Fixed (fixed on desktop, non-fixed on mobile) – As the title makes clear, this makes the background image fixed when viewing on a desktop size screen, with the image not being fixed on mobile screens.

Up (moves up on desktop and mobile) – This option makes the image move in an upwards direction as you scroll down the page.

Down (moves down on desktop and mobile) – This option makes the image move in a downwards direction as you scroll down the page.

Left (moves left on desktop and mobile) – This option makes the image move to the left as you scroll down the page.

Right (moves righton desktop and mobile) – This option makes the image move to the right as you scroll down the page.
There is also an option that controls the speed of the image movement – The value should be between 0.1 and 1.0. A lower number means slower scrolling speed. Higher scrolling speeds will enlarge the image more.
Mobile Parallax OptionsFor parallax movement on mobiles, there is the Enable Parallax on Mobile option. This works only for the up/down/left and right options. To disable parallax effects on mobile when using one of these options, set this option to No. As the description explains, parallax effects can cause slowdowns when your site is viewed on mobile devices.

Google Map Options

You can customize Google Map in Avada > Theme Options > Contact Form using various options. There are three sub-panels in the Contact Form tab: Contact Form, Google Map, and Google Map Styling. Please continue reading below to know more about each option from the Google Map and Google Map Styling tabs.
OverviewGoogle MapGoogle Map StylingIMPORTANT 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 MapGoogle 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 Avada 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 but do not offer the vast majority of Avada』s custom styling options. For more information please see the Google Maps Users Guide.
Address – This field will display when using the Embed API. Add the address of the location you wish to display. Leave empty, if you don』t want to display a map on the contact page.
Map Type – This field will display when using the Embed API. Allows you to set the type of Google map that displays. 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, 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.
You Might Be Interested In
How To Set Up Google Maps
Google Maps Not Working?

Masonry Layout Options

What is a Masonry layout? Masonry is a grid layout based on columns, but unlike other fixed grid layouts, the images do not have fixed height rows. This layout choice optimizes the use of space any unnecessary gaps between. It is very flexible in that your images do not have to be exactly of the same sizes for them to align edge to edge.
OverviewSetting The Masonry Options For Your Blog layoutBlog Element Masonry Layout ExampleSetting The Masonry Options For Your Gallery LayoutGallery Element Masonry Layout ExampleSetting The Masonry Options For Your Portfolio LayoutImage Override Settings In Media LibraryIMPORTANT NOTE: Masonry Global Options are located in Avada > Theme Options > Extra > Grid/Masonry. These Masonry global options that apply to the Blog/Portfolio/Gallery Elements and Blog and Portfolio archives. Blog/Portfolio/Gallery Elements also have options that will override the global options.Setting the Masonry option for your Blog layoutStep 1 – Make sure that you have a featured image assigned to your Blog posts.
Step 2 – Add a 『Blog』 element to your page/post using the Fusion Builder.
Step 3 – Set the 『Blog Layout』 option to Masonry.
Step 4 – Choose the number of columns you want using the 『Number of Columns』 option. The Masonry layout does not work with 1 column and looks best around 3-4 columns when there is no text involved. Then, adjust the 『Column Spacing』 option, this will be the amount of spacing between blog posts.
Step 5 – Set the 『Masonry Image Aspect Ratio』 option to decide when an image should become landscape (ratio being width : height) and portrait (ratio being height : width). Note: The value of 「1.0」 represents a special case, which will use the auto calculated ratios like in versions prior to Avada 5.5.
Step 6 – Setting the 『Masonry 2×2 Width』 option decides when a square 1×1 image should become 2×2. This will not apply to images that highly favor landscape or portrait orientation.
Note: There is a 『Masonry Image Layout』 setting for every image in the WP media library that allows you to manually set how an image will appear (1×1, landscape, portrait or 2×2), regardless of the original ratio.
Step 7 – Set the other options of the Blog element to your preference. When done, click Save.
Blog Element Masonry Layout ExampleClick To View The Blog Element Masonry Layout Video Tutorial

Technology and music

Taking it back to the old school

While my guitar gently weeps

The flavor of rock

Setting the Masonry option for your Gallery LayoutStep 1 – Add a 『Gallery』 element to your page/post using the Fusion Builder.
Step 2 – Set the 『Gallery Layout』 option to Masonry.
Step 3 – Click 『Select Images』 on the 『Bulk Image Upload』 option to select and add pictures to the gallery. If there are no images inside the WordPress Media Library, upload your images by clicking 『Upload Files』 tab in the upper left corner of the window. You can select multiple images by using Ctrl / Cmd click. Once the images are selected, click the 『Insert into page』 button. Alternatively, you can add your images one at a time in the Add/Edit Items section, by clicking on the + Image button.
Step 4 – In the Add/Edit section, you can adjust the order of your images by dragging them into the desired order that will be displayed on the front end.
Step 5 – Set the 『Number of Columns』 you want to display. The Masonry layout does not work with 1 column, and looks best around 3-4 columns when there is no text involved. Then, adjust the 『Column Spacing』 option, this will be the amount of spacing between gallery images.
Step 6 – Set the 『Masonry Image Aspect Ratio』 option to decide when an image should become landscape (ratio being width : height) and portrait (ratio being height : width). This value is notated as a quotient – i.e. the aspect ratio divided by itself, so 3:2 = 1.5.
Note: The value of 「1.0」 represents a special case, which will use the auto calculated ratios like in versions prior to Avada 5.5.
Step 7 – Setting the 『Masonry 2×2 Width』 option decides when a square 1×1 image should become 2×2. This will not apply to images that highly favor landscape or portrait orientation.
Note: There is a 「Masonry Image Layout」 setting for every image in the WP media library that allows you to manually set how an image will appear (1×1, landscape, portrait or 2×2), regardless of the original ratio.
Step 8 – Set the other options of the Gallery element to your preference. When done, click Save.
Gallery Element Masonry Layout ExampleView The Gallery Element Video TutorialSetting the Masonry option for your Portfolio layoutStep 1 – Please make sure that you have featured image assigned to your Portfolio posts.
Step 2 – Add a 『Portfolio』 element to your page/post using the Fusion Builder.
Step 3 – Set the 『Layout』 option to Masonry.
Step 4 – For the 『Text Layout』 option, choose from Default, No Text, Boxed, or Unboxed on how the portfolio text content will be displayed.
Step 5 – In the 『Number of Columns』 option, set the number of columns you want to display. The Masonry layout does not work with 1 column and looks best around 3-4 columns when there is no text involved. Then, adjust the 『Column Spacing』 option, this will be the amount of spacing between portfolio items.
Step 6 – Set the 『Masonry Image Aspect Ratio』 option to decide when an image should become landscape (ratio being width : height) and portrait (ratio being height : width). 『Note:』 The value of 「1.0」 represents a special case, which will use the auto calculated ratios like in versions prior to Avada 5.5.
Step 7 – Setting the 『Masonry 2×2 Width』 option decides when a square 1×1 image should become 2×2. This will not apply to images that highly favor landscape or portrait orientation.
Note: There is a 『Masonry Image Layout』 setting for every image in the WP media library that allows you to manually set how an image will appear (1×1, landscape, portrait or 2×2), regardless of the original ratio.
Step 8 – Set the other options of the Portfolio element to your preference. When done, click Save.
View The Portfolio Element Masonry Layout Video TutorialImage Override Settings in Media LibraryNew in Avada 5.5, there is a Masonry Image Layout setting for every image in the WP media library which allows you to manually set how an image will appear (1×1, landscape, portrait, or 2×2), regardless of the image original ratio when uploaded. This option can also be found in featured image popups when setting a feature image. The chosen layout will be used when image is displayed in masonry.

CSS & JS Compilers

IMPORTANT NOTE: As of Avada 5.8, the Dynamic CSS and JS options are now found in the Performance tab.The CSS Compiler was introduced in Avada version 3.8. The CSS Compiler is a great way to optimize the CSS styles which are dynamically generated from the various option settings on your site. This is done by compiling the styles into one file for each page/post, providing a performance boost. The JS compiler is mainly for debugging purposes and should remain enabled on your site. Please continue reading below to learn more about the JS & CSS Compiler.
What Is The CSS Compiler?When the CSS Compiler is disabled, each option which relates to the page / post being loaded is processed by your server and the styles are all compiled into a single stylesheet which is loaded in the page through the tag. Since these styles can change based on your settings, they』re referred to as 「Dynamic CSS」 styles. The processing of each option into a compiled stylesheet happens on each page load which requires more work for the server. The CSS Compiler can be enabled, for increased efficiency.
IMPORTANT NOTE
In Avada 4+ the CSS Compiler option is enabled by default.Explanation of Each Compiler MethodThe CSS Compiler will save the work the server did when compiling the options into a stylesheet so it doesn』t have to be repeated each page load. There are two methods of storing the Dynamic CSS which you can choose from or Disabled. Just select the method of your choice and save the Theme Options.

File – When you enable the File compiling method, your styles will be saved as a .css file for the page/post it relates to. This file will be stored in wp-content/uploads/avada-styles and loaded when the page is loaded again. This saves the server the work of having to process your site』s settings on each page load. This will remove Avada styling from loading in thetag. Note: This file will automatically be regenerated when you update your settings. If you have a caching plugin or server cache on your site, you should clear your cache to ensure your changes are loaded.
Database – The Database method will save the compiled CSS in the database instead of as a file. The styles will be loaded in thetag as inline styles for this method as apposed to a .css file as with the File method. This method can increase your database size considerably if you have a large site. For sites with 20-30 pages, this won』t be a problem. However, if you update your website regularly with new content and posts (for example 10K+ blog and portfolio posts), using the Database method is not recommended.Disabled – When the Compiler is disabled, it will not save the styles in any way. Each setting will be compiled anew into Dynamic CSS and loaded through thetag as inline styling. This is the least efficient method.Page Source Without CSS CompilerPage Source With CSS CompilerThe JS CompilerThe JS compiler (JavaScript Compiler) will be enabled by default. This will combine individual Avada related JS files into a single loadable file. This improves efficiency in page load times. Disabling the JS compiler will load the individual and unminified JS files.
Reset Fusion CachesThis button will allow you to reset all the Avada related compiled styles, compiled JS files and cleans up the database of any saved styling related entries. This normally happens automatically on your site when updating the theme or other actions like saving a page, your theme options, etc. However, you can use this button to manually clear your compiled styles, if you are uploading theme files via FTP or you notice your theme options not applying changes or odd behavior along the lines of your changes not taking effect.
Note: This won』t delete your settings or change your site appearance. It only affects compiled files which are a 「saved」 version of your settings. This won』t change your actual settings or affect them in any way.
Important Note About Server CacheFor unique cases where you are using cloud flare and a cache server, like varnish cache, enter your cache server IP to clear the theme options Dynamic CSS cache. If you do not do this you may not see your changes instantly on refresh. Consult with your server admin to find out your server IP address.
Load Media-Queries Files AsynchronouslyAnother option that can improve performance on mobile and desktop is the Load Media-Queries Files Asynchronously which is available only in Avada version 5.6 or higher. This option can be found in Avada > Theme Options > Advanced > Dynamic CSS & JS. Let』s have some examples below.
Example 1:
Copy to Clipboard 1Example 2:
Copy to Clipboard1 1The browser gets the HTML, and then it starts loading all the assets. When it sees Example 1, it stops, gets the file, and when the file is loaded then it continues parsing the rest of the document. If it finds another stylesheet like Example 1, it stops again, gets that file, and once done then it continues with the rest of the document. That』s what is called a 「render-blocking stylesheet」 and is usually something that should be avoided for performance.
However when the browser sees Example 2, it doesn』t stop. It downloads the file in the background while it loads the rest of the page. If the user』s screen-size is a minimum of 700px, then it applies the styles contained in it.
In Avada 5.6, we split a lot of CSS and created separate stylesheets, 1 for each media-query. The main stylesheet is still render-blocking, but since its size got reduced it can load faster, while all styles that depend on the screen-size are now not render-blocking. They get downloaded all at the same time (so faster), and the browser then applies them.
When you set Load Media-Queries Files Asynchronously option to OFF, all media-queries are compiled inside the main CSS file – just like it works in previous versions. If set to ON, then they are separate files. The main compiled CSS file is smaller in size, and all media-queries are loaded asynchronously.
Read Google Docs Render Blocking CSS

How To Import / Export Avada Page Options

With Avada, as well as being able to import and export your global option sets, you can also import/export your individual Avada Page Option sets. You will see the Import/Export tab in the Page Options tab of each page that you are editing. This allows you to save/export the configured Avada Options for any page and then load/import into any new or existing page/post saving you time and improving your workflow.
IMPORTANT NOTE: The exported Avada Page Options for pages, posts or portfolio posts are interchangeable. You can for example import the Avada Page Options from a page into a Portfolio post and vise versa; Only identical option types will be imported, non-identical option types will simply be ignored during the import process.Save Page Options – Save your current Avada Page Options as a custom set to be reused on any page or post that utilizes Avada Page Options.Manage Page Options – Select a set of saved Avada Page Options, then choose to import or delete them.Export Page Options – Click the export button to export your current set of Avada Page Options as a json file.Import Page Options – Click Import to select a set of Avada Page Options (json file) to be used.IMPORTANT NOTE: Remember to save the page/post before exporting or saving Avada page options.How To Save Avada Page OptionsOnce you are done making changes in the Avada Page Options, please save the page/post first. Then, on the Import/Export tab, enter a name on the text field for Save Page Options, and click the Save Page Options button.
Important Note: Make sure to use unique name for each saved set, this will allow you to distinguish it when loading saved page options via the Manage Options dropdown.How To Manage Avada Page OptionsClick the dropdown that says 「Select A Page Option Set」 and you will find the set of saved Page Options (if you already have). Once you have chosen a saved page option, Import and Delete buttons will show up. Click Import to load the saved page option, and click Delete to remove it.
Important Note: Remember to save the page/post before exporting and after importing.How To Export Avada Page OptionsTo export the current set of Avada Page Options as a .json file, click the Export Page Options button. You can use this file on your other Avada websites (if you have) with at least version 5.3.
Important Note: Please save the page/post before exporting.How To Import Avada Page OptionsTo import a set of Avada Page Options, click Import Page Options button, and select the .json file to be imported, and the new settings will automatically be applied.
Important Note: Remember to save the page/post after importing.

Page Templates

Avada includes five Page Templates that you can choose from. Each Page Template caters to a specific situation. Page Templates are accessed on the right-hand side of the page in Avada Builder, or in the Settings tab of the Avada Page Options in the Sidebar, in Avada Live.
Page Templates
Default – This page template uses the Site Width that you』ve set in the Avada Global Options.

100% Width – This page template allows you to display parts or all of your content in full browser width. This is a very versatile template, however you can not assign sidebars when using this template. See the separate document on this template.

Blank Page – When you use the Blank Page template, the header and footer will be removed.

Contact – The Contact page template is useful to build a quick Contact Page with a Contact Form and an optional Google Map. If you prefer, you can also build a Contact page manually. For more information, please view the How To Build A Contact Page In Avada video.

Side Navigation – This is the Side Navigation page template. This template will be removed in a future version of Avada. Please see this document for more information.
Learn More About The 100% Width Page TemplateHow To Select A Page TemplateStep 1 – Create a new page or edit an existing one.
Step 2 – On the right side of the page, you』ll find the 『Page Attributes』 box. In Avada Live, you will find this by clicking the Toggle Sidebar Icon on the Toolbar, going to the Avada Page Options Tab, and choosing the Settings sub-tab. Here, all the page options that are on the right hand-side of the page in the back end are listed, including the page templates.
Step 3 – Under the 『Template』 option, choose your desired Page Template from the dropdown field. View screenshot here. To learn more about what each page template is for, please refer to the section above.
Step 4 – Once finished, click 『Save Draft』 or 『Publish』.
Missing Page Templates?IMPORTANT NOTE: In Avada 5.0, we removed the Portfolio and FAQ page templates.With the Avada version 5.0 release, we decided to deprecate the Portfolio and FAQ page templates due to redundancy. To create portfolio or FAQ pages, please use our Portfolio Element and our FAQ Element. These Elements provide more in depth options and flexibility when building your page. If you』d like to read more about this change and why we decided to do this, please click the button below.
Learn More About The Deprecated Portfolio & FAQ Page Templates