Headers, Title Bars & Footers – Avada Website Builder https://avada.com For WordPress & WooCommerce Wed, 11 Sep 2024 21:34:08 +0000 en-US hourly 1 https://wordpress.org/?v=6.6.1 Adding A Logo To a Legacy Header https://avada.com/documentation/adding-a-logo-to-a-legacy-header/ Tue, 28 Mar 2023 00:56:01 +0000 https://avada.com/?post_type=documentation&p=892239

If you’re not using Avada Layouts, you can also add your logo into the Global options when using a Legacy Header. You can upload an image file of any size as your website logo in Avada in 3 different areas; the default logo, the sticky header logo and the mobile logo. This gives you the flexibility to adjust your logo depending on where it’s displayed. Avada is also retina ready, so there are additional options to upload a retina 2x logo for high resolution devices. Favicons are only added though the Global options, so see below for details on that.

Available Logo Areas

  • Default Logo Fields – Upload a default logo that will be displayed in all areas (Default/Sticky/Mobile) unless a unique logo is uploaded to the sticky header and/or the mobile header logo option.
  • Sticky Header Logo Fields – Upload a unique logo that will only appear on your sticky header. This is optional.
  • Mobile Header Logo Fields – Upload a unique logo that will only appear on mobile devices. This is optional.

How To Upload A Default Logo

Step 1 – Navigate to Avada > Options > Logo > Default Logo.

Step 2 – Locate the ‘Default Logo’ option and click the ‘Upload’ button to upload your logo image file. View screenshot here.

Step 3 – This step is optional. You can upload a default retina logo using the ‘Retina Default Logo’ option.

Step 4 – Click ‘Save Changes’.

How To Upload A Sticky Header Logo

Step 1 – Navigate to Avada > Options > Logo > Sticky Header Logo.

Step 2 – Locate the ‘Sticky Header Logo’ option and click the ‘Upload’ button to upload your logo image file. View screenshot here.

Step 3 – This step is optional. You can upload a sticky header retina logo using the ‘Retina Sticky Header Logo’ option.

Step 4 – Click ‘Save Changes’.

How To Upload A Mobile Logo

Step 1 – Navigate to Avada > Options > Logo > Mobile Logo.

Step 2 – Locate the ‘Mobile Logo’ option and click the ‘Upload’ button to upload your logo image file. View screenshot here.

Step 3 – This step is optional. You can upload a retina mobile logo using the ‘Retina Mobile Logo’ option.

Step 4 – Click ‘Save Changes’.

Logo Settings

Avada offers various settings to help with the styling and alignment of your logo. These options are located in the Avada > Options > Logo > Logo section and will only affect the default logo that displays in the header on desktop mode.

  • Logo Alignment – Controls the logo alignment. “Center” only works on Header 5 and Side Headers.
  • Logo Margins – Controls the top/right/bottom/left margins for the logo. Enter values including any valid CSS unit, for example: 31px, 31px, 0px, 0px
  • Logo Background Color – You can optionally add a logo background color for header versions v1, v2, v3, v6, v7 and side headers. Note: The logo background is only visible in desktop view and does not apply to the mobile header view.
Global Logo Options

Favicon Options

The Favicon Options are located in the Avada > Options > Logo > Favicons section. A favicon is an icon typically displayed in the address bar of a browser accessing the site or next to the site name in a list of saved bookmarks. Avada offers several fields to upload different types of favicons. Each one has its own unique size listed in the description.

To add favicons, simply click the ‘Upload’ button next to the appropriate field, then select the favicon file you would like to use.

Upload Favicons
]]>
How To Setup Different Menus On A Per Page Basis https://avada.com/documentation/how-to-setup-different-menus-on-a-per-page-basis/ Tue, 07 Feb 2023 23:26:59 +0000 https://avada.com/?post_type=documentation&p=891094

Sometimes more than one menu is needed for a complex site. There are several reasons for this. A likely case is when you want to have a one-page site with a parallax scrolling menu as a landing page, but also a full site at the same time (see Setting Up A One Page Site for further information). Since the one-page site part uses menu anchors for scrolling it will need a different menu than the rest of the site, which will use normal links.

But regardless of why you might need multiple menus, with Avada, it’s very easy to achieve. If there is one menu you want mostly on the site, you could assign that in the usual way. And then for any pages you want a new menu, just create the alternate menu, go to the page, and on the Avada Page Options, select an alternate Menu in the Main Navigation Menu option, as seen below.

Avada Page Options > Header
]]>
Assigning Menus via Global Options https://avada.com/documentation/assigning-menus-via-global-options/ Tue, 07 Feb 2023 23:18:25 +0000 https://avada.com/?post_type=documentation&p=891093

Once you have created a menu, you need to assign it to your site. There are two main ways to do this. Our recommended method is to use the Menu Element in a Header Layout Section (You can also add a Menu anywhere in your page content with the Menu Element). Read more about this method in the How The Menu Element And Menu Work Together document.

Alternatively, If you are not yet using Avada layouts, and instead using the legacy Headers chosen from the Global Options, then you assign the menu to a specific location in the menu itself.

There are 5 areas where you can assign a menu in Avada. These are: Main Navigation, Top Navigation, Mobile Navigation, 404 Useful Pages, and Sticky Header Navigation. Each of these menu locations can have a custom menu assigned to them. Once a menu is created and assigned to the location, it will be used on the front end for those specified areas.

Menu Locations in Avada
  • Main Navigation – This is the Main Menu that shows in the Header area.
  • Top Navigation – This is the top Secondary Menu that can be assigned with headers 2-5.
  • Mobile Navigation – This is the menu that will be used when viewing on mobile devices. If no menu is chosen, then the desktop menu will appear on mobile views.

  • 404 Useful Pages – This is the Menu that will be used in the “Helpful Links” area on the default 404 page and the Search Results Not Found page.

  • Sticky Header Navigation – You can use this optionally if you want to assign a different menu to the Sticky Header. The Main Menu will be used by default

Menu Global Options

When assigning Menus, Avada also offers several global options to help customize the menu. They are located in the Avada > Options > Menu tab. From there, the global options are organized under more specific areas. (e.g. Main Menu, Mobile Menu, Secondary top menu just to name a few). When styling your various menu locations, the settings will be here. For detailed screenshots of the various menu options, see the Menu Section of the Avada Global Options Page.

Global Menu Options
]]>
Parallax Scrolling https://avada.com/documentation/parallax-scrolling/ Tue, 28 Jan 2020 00:20:16 +0000 https://theme-fusion.com/?post_type=documentation&p=691992

Parallax scrolling is when the background of the web page is moving at a different rate compared to the foreground, creating a 3D effect as you scroll.

When using Legacy Option Headers and Footers etc, the Global Options offers a range of options relating to Parallax scrolling for the different sections of the page. There are settings for the header, the footer, and the Page Title Bar. See below for links to each section.

]]>
Page Title Bar Background Parallax Options https://avada.com/documentation/page-title-bar-background-parallax-options/ Tue, 28 Jan 2020 00:14:35 +0000 https://theme-fusion.com/?post_type=documentation&p=692630

Page Title Bar background images can also have a parallax effect applied to them. This causes the Page Title Bar background image to be fixed, and so it doesn’t move as you scroll. An example of this can be seen on the Avada Spa Demo, on any page except the home page.

This option is found under Avada > Options > Page Title Bar > Parallax Background Image, and the option will show when an image is selected as the Page Title Bar background. Set Parallax Background Image to On to use a parallax scrolling effect on the background image. There is also an option for 100% Background Image, to have the header background image display at 100% in width and height according to the window size.

Page Title Bar Parallax Option

If building your Page Title Bars using Avada Layouts, the Parallax option would be applied to the Container holding the image (Container > Background > Image Tab > Background Parallax Option).

]]>
Flyout Menu https://avada.com/documentation/flyout-menu/ Tue, 22 Jan 2019 20:10:12 +0000 https://theme-fusion.com/?post_type=documentation&p=565922

The Avada Flyout menu type is a full screen menu which overlays the main page content, activated by clicking a link/icon in the header area. The Avada Adventure prebuilt website used to use this method, but has been updated to use the Flyout Menu option in the Menu Element instead.

Flyout Menu

The Flyout Menu is only available when using Header 6 in the Top Header position, or with the Mobile (Responsive) Menu. It’s automatic with Header 6, but with the Mobile Menu, you have to select Flyout in the Global Options: Options > Menu > Mobile Menu > Mobile Menu Design Style. Detailed information regarding the various Avada header layouts to choose from is available here.

It’s also possible to create a Flyout Menu using the Off Canvas Builder. Please see the How To Make A Flyout Menu With The Off Canvas Builder video for more details on that.

Flyout Menu Global Options

Flyout Menu options are found in two places. The main one is found at Avada > Options > Menu > Flyout Menu, while relevant Mobile Menu options for the Flyout Menu are found at Avada > Options > Menu > Mobile Menu when Flyout is selected.

Let’s look at the Flyout Menu Global Options.

Flyout Menu Icon Font Size – Controls the font size for the flyout menu icons. Enter value including any valid CSS unit, ex: 20px.

Flyout Menu Icon Padding – This controls the right padding (left on RTL sites) for flyout menu icons.

Flyout Menu Icon Color – This controls the color of the flyout menu icons.

Flyout Menu Icon Hover Color – Controls the hover color of the flyout menu icons.

Flyout Menu Background Color – Here you can control both the color and the opacity of the flyout menu background.

Flyout Menu Direction – Here you can control the direction the flyout menu comes from. Choose from Fade, Left, Right, Bottom, or Top.

Flyout Menu Item Padding – Here you can control the padding between the flyout menu items.

Avada Global Options - Menu - Flyout Menu
]]>
Desktop And Mobile Menu Typography https://avada.com/documentation/desktop-and-mobile-menu-typography/ Mon, 12 Nov 2018 22:25:50 +0000 https://theme-fusion.com/?post_type=documentation&p=438933

Manage your Main Menu Typography with ease with the Avada Global Options. Main Menu Font Size and Main Menu Font Color options are now combined in the Menus Typography section. Continue reading below to learn more about the typography options for the Main Menu.

Note: Watch the video below for the up to date typography methods.

For privacy reasons YouTube needs your permission to be loaded.

Desktop Main Menu Typography Options

Found under Avada > Options > Menu > Main Menu > Main Menu Typography, you will find the following settings to customize the main menu for Desktop / Laptop / Tablet (anytime a mobile menu is not activated).

Font Family – Illustrated as A. Allows you to select a font family to be used. You can choose any font you prefer for the Main Menu, but the Sub Menu Font Family, however, will be the same as the Body Font Family.

Backup Font Family – Illustrated as B. Allows you to select a backup font family to use in case the primary font doesn’t load correctly.

Font Weight & Style – Illustrated as C. Allows you to select a font weight and style to use.

Font Subsets – Illustrated as D. Allows you to select which subset to use.

Font Size – Illustrated as E. Allows you to set the size of the text on display.

Letter Spacing – Illustrated as F. Allows you to set the spacing between letters.

Font Color – Illustrated as G. Allows you to set the color of the text.

Font Hover Color – Illustrated as H. Allows you to set the hover color of the text.

Text Align – Illustrated as I. Allows you to set the alignment of text. Note: This option will only appear if you have selected Top Header 4 or 5, or side headers.

Dropdown Font Color – Illustrated as J. Allows you to set the color of the drop-down text.

Dropdown Font Size – Illustrated as K. Allows you to set the size of the drop-down text.

Side Navigation Font Size – Illustrated as L. Allows you to set the size of the text when you are using the side navigation page template.

Main Menu Typography

Mobile Main Menu Typography Options

Found under Avada > Options > Menu > Mobile Menu > Mobile Menu Typography, you will find the following settings to customize the main menu for phones and anytime a mobile menu is activated (tablets in portrait mode etc).

Font Family – Illustrated as A. Allows you to select a font family to be used.

Backup Font Family – Illustrated as B. Allows you to select a backup font family to use in case the primary font doesn’t load correctly.

Font Weight & Style – Illustrated as C. Allows you to select a font weight and style to use.

Font Subsets – Illustrated as D. Allows you to select which subset to use.

Font Size – Illustrated as E. Allows you to set the size of the text on display.

Line Height – Illustrated as F. Allows you to set the spacing between lines.

Letter Spacing – Illustrated as G. Allows you to set the spacing between letters.

Font Color – Illustrated as H. Allows you to set the color of the text.

Typography Preview – Illustrated as I. This area gives you a preview of the typography based upon your selections.

Mobile Menu Hover Color – Illustrated as J. Controls the hover color of the mobile menu item. Also, used to highlight current mobile menu item.

Mobile Menu Text Align – Illustrated as K. Controls the mobile menu text alignment.

Mobile Menu Typography
]]>
Global Option Header Layouts https://avada.com/documentation/global-option-header-layouts/ Mon, 08 Oct 2018 16:31:19 +0000 https://theme-fusion.com/?post_type=documentation&p=502210

With Avada Layouts, you can build your own fully custom headers in Avada. See Introducing Avada Layouts and How To Build A Custom Header to learn more about this powerful feature. When building a custom header in Layouts, you can either start with a blank template, or alternatively, you can also import any of the pre-designed headers included in Avada Studio, into the Header Layout Section as a starting point, to then customize further for your Custom Header.

But Avada still offers a range of 7 customizable one-click Header Layouts via the Avada Global Options, which you can find at Avada > Options > Header > Header Content. Each Header Layout offers a different look and set of features, so it is important to familiarize yourself with each one.

Following on from the Main Header Setup document, where we look at the Header Options available in the Global Options, in this document we look at examples of each of the 7 header layouts that can be assigned from the Global Options, and how they are configured.

Header Position

The Header Layouts display at the very top of the page by default, but in the Avada Options (Avada > Options > Header > Header Content) there are also options to display the header at the left or the right of the page, as well as above or below any Slider. The main menu height, header padding, and logo margin options will auto-adjust based on your selection for ideal aesthetics. Let’s take a deeper look at each individual Header Layout.

Header 1

Header 1

Header 1 is a simple layout, with the Logo on the left and the menu on the right. The Logo is inserted through the Global Options at Avada > Options > Logo > Default Logo. Note that there is also a field, directly below the default Logo, for a Retina Logo, which should be exactly twice the size of the default Logo. This is so the logo is crisp on Retina-enabled screens. For more information on how Avada controls responsive images, please read this article.

Avada Header Layouts > Default Logo

For the menu items to show in the Header, you must first create a menu in Appearances > Menus, and then allocate the menu to the Main Navigation Display Location. For menu styling, navigate to Avada > Options > Menu > Main Menu for a large variety of styling options, as well as the Avada Menu Options found in the individual menu items in the WordPress Menus.

Header 2

Header 2

Header 2 has the addition of a Header Top Section, which offers a space, both to the left and to the right, for additional content. The options for both the left and the right sections are: Contact Info, Social Links, Navigation or Leave Empty. These options are applied via the Header Content 1 and 2 options in the Avada > Options > Header > Header Content section.

Avada Header Layouts > Header Content

Contact Info is entered directly below the Header Content 3 option. There is a Phone Number For Contact Info field, and an Email Address For Contact Info field.

Avada Header Layouts > Phone & Email

If populated, the email address will be automatically linked with a “mailto:” html tag. Additionally, you can make the Phone Number clickable, by using the “tel” html tag, when entering the number. Example below.

Copy to Clipboard

Header 2 also has a 3px line at the very top of the menu, which gets its color from the Site Color, found in Avada > Options > Colors > Primary Color. By default the Header Top background color is white, but it can be changed to any combination of color and transparency you wish, via the Color Picker found at Avada > Options > Header > Header Top Background Color.

Header 3

Header 3

Header 3 is essentially the same as Header 2, but with a few small differences. The thin 3px line at the top is removed and the Header Top section, by default, takes on the primary theme color. Of course, this can be changed via Avada > Options > Header > Header Styling to any color and transparency you wish.

Header 4

Header 4

Header 4 makes changes to the logo and menu area. The Header Top section is the same as in the previous Header layout, but below that, the middle section contains the Logo to the left and adds a configurable middle right section to the Header layout. This section is configured via Avada > Options > Header > Header Content > Header Content 3. The possible combinations are: Tagline and Search (default), Search, Tagline, Banner, and Leave Empty. If you choose Tagline and Search, or Tagline you will see another field for setting the tagline, and if you choose Banner, a field for the Banner Code will appear. Both of these fields will be visible at the bottom of the Header Content Global Options Section when the corresponding option is selected.

The Menu in Header 4 is situated in a bottom section of the Header layout, and is centered by default. There is, however, an option to position the menu alternatively to the left or to the right. This option is found under Avada > Options > Menu> Main Menu Typography > Main Menu Text Align.

Header Layouts > Header Content 3
Avada Header Layouts > Tagline for Content 3
Avada Header Layouts > Banner Code for Content 3

Header 5

Header 5

Header 5 keeps the three sections of the previous layout, but removes the middle right section, and centers both the Logo and the Menu by default.

The Logo alignment is however configurable by the Avada > Options > Logo > Logo Alignment option, and like Menu Layout 4, the Menu alignment can be configured at Avada > Options > Menu> Main Menu Typography > Main Menu Text Align.

Header 6

Header 6

Header 6 is a fixed responsive layout. It has a centered logo, and a search icon and a mobile menu on the far right. The Search icon can be toggled on or off via the Avada > Options > Menu > Mobile Menu > Display Mobile Menu Search Icon/Field. The Mobile Menu icon triggers a Flyout Menu, which, as noted below, currently only shows parent items. You can configure the Flyout Menu via the Avada > Options > Menu > Flyout Menu options.

Header 7

Header 7

Header 7 is the latest addition to the Header Layouts, and is a very minimalist layout. It has a fixed centered logo, with menu items displayed on either side. There are no other specific options for this Header Layout.

Mobile Header Layouts

As Avada is a responsive theme, ALL Header Layouts transform to a Mobile Header Layout, when the size of the viewport reaches the pixel dimensions specified in the Avada > Options > Responsive > Header Responsive Breakpoint are reached. The default value is 800px.

For more information on Mobile Header Layouts and their settings, please read our article on Mobile Menu Settings.

]]>
How To Set Up A Global Options Footer https://avada.com/documentation/how-to-set-up-a-global-options-footer/ Fri, 20 Jul 2018 15:42:05 +0000 https://theme-fusion.com/?post_type=documentation&p=471357

Footers in Avada can be constructed in two ways – the recommended method of using Avada Layouts to create a completely custom footer with no limitations, or the traditional method, configuring the footer via the Global Options and adding widgets to populate it. For more details, please see How To Create A Footer In Avada. If you do wish to build a footer using the traditional method, it will be helpful for you to familiarize yourself with the Global Footer options, as shown in this document.

Various options are available for customizing the Footer in the Avada Global Options, accessed from the WordPress Dashboard at Avada > Options > Footer. To access these theme options from Avada Live, you can simply mouse over the footer and choose Edit Footer. This will open the Sidebar to the Footer Options section of the Avada Options.

There are three sub-panels in the Footer tab: Footer Content, Footer Background Image, and Footer Styling, as well as a Footer Social Icon Styling sub-panel under Social Media. Please continue reading below to know more about the options in each section.

For privacy reasons YouTube needs your permission to be loaded.

Footer Content

Footer Widgets – Allows you to show or hide the footer widgets. Setting this to ‘Off’ removes the entire footer section from the page,

Number of Footer Columns – Controls the number of columns to be displayed in the footer. Choose from 1 to 6.

Center Footer Widgets Content – Allows you to center the footer widget content.

Footer Special Effects – Allows you to select a special effect for the footer area. Choose between None, Footer Parallax Effect, Parallax Background Image, Sticky Footer, or Sticky Footer and Parallax Background Image.

None – Allows you to disable footer effects.

Footer Parallax Effect – Allows you to enable a fixed footer with parallax scrolling effect.

Parallax Background Image – Allows you to enable a parallax effect on the background image selected in “Background Image For Footer Widget Area” field.

Sticky Footer – Allows you to enable a sticky footer. The entire footer area will always be “below the fold”. On very short pages, it makes sure that the footer sticks at the bottom, just above the fold. IMPORTANT: This will not work properly when using a Left or Right Side Header layout and the side header is larger than the viewport.

Sticky Footer and Parallax Background Image – Allows you to enable a sticky footer with a parallax effect on the background image. The entire footer area will always be “below the fold”.

Copyright Bar – Allows you to show or hide the copyright bar.

Center Copyright Content – Allows you to center the copyright bar content.

Copyright Text – Allows you to enter the text that will be displayed in the copyright bar. Avada Builder Shortcodes and HTML markup can be used.

Avada Global Options - Footer - Footer Content

Footer Background Image

Background Image For Footer Widget Area – Allows you to set an image for the footer widget background. If left empty, the footer background color will be used.

100% Background Image – Allows you to have the footer background image displays at 100% in width and height according to the windows size.

Background Repeat – Controls how the background image repeats. Choose between Repeat All, Repeat Horizontally, Repeat Vertically, or No Repeat.

Background Position – Controls how the background image is positioned.

Avada Global Options - Footer - Footer Background Image

Footer Styling

100% Footer Width – Allows you to have footer area display at 100% width according to the window size. If this is set to Off, it will follow the site width.

Footer Padding – Controls the top/right/bottom/left padding for the footer.

Footer Background Color – Controls the background color of the footer. The Background Color will not show/apply when a Footer Background Image is specified in the Footer Background Image section.

Footer Border Size – Controls the size of the top footer border.

Footer Border Color – Controls the border colors of the footer.

Footer Widgets Area Vertical Divider Line – Allows you to have the footer widget area display vertical divider line between columns.

Footer Widgets Area Vertical Divider Line Size – Controls the size of the vertical divider line between footer widget area columns.

Footer Widgets Area Vertical Divider Line Style – Controls the style of the vertical divider line between footer widget area columns.

Footer Widget Divider Color – Controls the divider color in the footer widgets and also the vertical divider lines between widget areas.

Footer Widgets Area Padding – Controls the right/left padding for the footer widget areas.

Copyright Padding – Controls the top/bottom padding for the copyright area.

Copyright Background Color – Controls the background color of the footer copyright area.

Copyright Border Size – Controls the size of the top copyright border.

Copyright Border Color – Controls the border colors for the footer copyright area.

Footer Headings Typography – Controls the primary and backup font family, font weight and style, font subsets, font size, line height, letter spacing, and font color of the footer headings.

Footer Font Color – Controls the text color of the footer font.

Footer Link Color – Controls the text color of the footer link font.

Footer Link Hover Color – Controls the text hover color of the footer link font.

Copyright Text Color – Controls the text color of the footer copyright area.

Copyright Link Color – Controls the link color of the footer copyright area.

Copyright Link Hover Color – Controls the link hover color of the footer copyright area.

Copyright Font Size – Controls the font size for the copyright text.

Avada Global Options - Footer - Footer Styling

Footer Social Icons Styling

Display Social Icons In The Footer – Turn on to display social icons in the footer copyright bar.

Footer Social Icon Font Size – Controls the font size of the footer social icons. Enter value including CSS unit (px, em, rem), ex: 16px.

Footer Social Icon Tooltip Position – Controls the tooltip position of the footer social icons.

Footer Social Icon Color Type – Custom colors allow you to choose a color for icons and boxes. Brand colors will use the exact brand color of each network for the icons or boxes.

Footer Social Icon Color – Controls the color of the footer social icons. This color will be used for all social icons in the footer.

Footer Social Icons Boxed – Controls if each icon is displayed in a small box.

Footer Social Icons Box Color – Controls the color of the social icon box.

Footer Social Icon Boxed Radius – Controls the box radius. Enter value including any valid CSS unit, ex: 4px.

Footer Social Icon Boxed Padding – Controls the interior padding of the box. Enter value including any valid CSS unit, ex: 8px.

Avada Global Options - Social Media - Footer Social Icons Styling
]]>
Mobile Menu Search https://avada.com/documentation/mobile-menu-search/ Mon, 09 Jul 2018 16:23:22 +0000 https://theme-fusion.com/?post_type=documentation&p=475339

This document explains how to enable a search icon/field for your mobile menu.

Mobile Search icon Example

Enable/Disable The Mobile Menu Search Icon/Field

Step 1 – Navigate to Avada > Options > Menu > Mobile Menu. Options shown on this section will vary depending on your selected header type. Click here to know more about the Mobile Menu settings.

Step 2 – Look for ‘Display Mobile Menu Search Icon/Field’ option and set this to ON.

Enable Mobile Search 2

Choosing A Header Type

Currently, there are 7 header types to choose from in the Avada Global Options.

Step 1 – Navigate to Avada > Options > Header to access the header options.

Step 2 – Expand the Header Content section and select your desired Header type.

]]>