Note:

Below are the new options introduced before Astra theme version 3.0.0 and where you can find them

The button field of Astra theme’s version 2.3.0 introduces two new options for Button which are – Open in a New Tab, and possible to add a nofollow, follow, and other using the rel attribute.

Note: You can refer to the following article to understand the working of rel attribute for any button module.

Typography options for Header Button

Astra theme version 2.5.0 brought Typography options for Header Button.

With new typography options, you can choose the Font family and set the Font Size and Weight, add Text Transform or set the Line Height and Letter Spacing.

See the initial announcement post for this feature.

Quick Steps on How to Add Transparent Header on Your Website
Step 1: Find the Transparent Header Options under the customizer [ Appearance > Customize > Header > Transparent Header ] to edit Transparent Header Options.
Step 2: Under the Transparent Header section you can Enable it on complete website, set a different logo, and add a Border Bottom color.

How Transparent Header Works?

Transparent Header allows you to easily create beautiful and attractive headers. Enabling this option will set your primary header background to transparent and pull the page content to the top. It will merge the primary header and the page’s content. That means your top part of the page content will be set as a background to the transparent header.

For example, if the page contains an image as a top section, it will be pulled up and set as a background image for the transparent header.

Layout settings for Transparent Header

After updating the Astra theme to version 1.6.0 and above, Transparent Header settings will be available in the customizer. From the WordPress dashboard navigate to Appearance > Customize > Header > Transparent Header. Below are the available options.

Enable on Complete Website

Tick the checkbox for this option if you wish to display a transparent header on the entire website. When you enable this option, it offers the following exclusion rules. That means you can choose some pages and posts, where the transparent header can be disabled.

• Disable on 404, Search & Archives?: This setting is generally not recommended on special pages such as archive, search, 404, etc. If you would like to disable the transparent header on these pages, tick the checkbox.
• Disable on Blog Index page?: From Homepage Settings, if you have set Your homepage displays > Your latest posts then the front page becomes a Blog Index page. If you would like to disable the transparent header on it, tick the checkbox.
  
• Disable on Pages?: If you wish to disable the transparent header on all pages, tick the checkbox.
• Disable on Posts?: If you wish to disable the transparent header on all posts, tick the checkbox.

Note: Transparent Header can be set from Page Meta settings as well. Just Edit the page/post, in the right sidebar, you will find the Astra Settings section. This allows you to enable/disable transparent header for particular page/post. Note that the page meta setting has high priority than a customizer setting.

Enable On

Choose a device to display a transparent header. Options are –

• Desktop
• Mobile
• Desktop + Mobile

Styling

• Different Logo for Transparent Header?: When you enable transparent header, by default it displays the site logo set under Layout > Header > Site Identity. If you wish to set a different logo that site logo on the transparent header, tick the checkbox and set a logo.
• Bottom Border Size and Color: Set a bottom border for a transparent header.

Colors & Background for Transparent Header

Settings are available in the customizer under Header > Transparent Header. Set different colors for a transparent header with the following options –

• Background – Background Color of the Transparent Header
• Site Title – Site Title Color
• Menu – Background Color, Link / Text Color, Link Active / Hover Color
• Submenu – Background Color , Link / Text Color ,Link Active / Hover Color
• Content – Text Color, Link Color, Link Hover Color

Note:

1. Typography for Transparent Header will be inherited from Global > Typography > Base Typography.
2. Transparent Header can be enabled or disabled for a particular page from Page Meta settings.

Following are the settings for Astra theme below version 3.0.0.

From WordPress Dashboard a setting can be found under Appearance > Customize > Header > Primary Menu > Last Item in Menu.

Choosing Button from Last Item in Menu dropdown will offer the following options –

1. Button Text – Add a text
2. Button Link – Give a link for the button
3. Button Style – With this option button can be displayed differently for different headers like primary header, transparent header, sticky header (option with Astra Pro). Below is the detailed description –

Button Style

1. Theme Button: Set a button style same as a theme button style. Choose a Theme Button option and click on the Customize Button Style link. The link will take you to the default button style options.

If you wish to set a similar style for all button on the site and different style just for the header button choose Theme Button option and click on the Customize Button Style link.

The Customize Button Style will redirect you here –

2. Header Button: This allows you to style the header button differently than a theme default button. It will offer the following options under the Header Button section –

• Colors – Set the Text Color, Background Color and also on Hover.
• Border – Set the Border width, Color, Hover Color, and Border Radius.
• Padding – Set the overall Padding for the Header Button.

Note: Header button styles cannot be set unless the option Header Button is chosen for the Button Style.

Colors & Background options for Footer Bar

You can set colors for Footer Bar under Appearance > Customize > Footer > Footer Bar.

With Colors & Background module available with Astra Pro, you get an option for Background Image for Footer Bar.
Activate Colors & Background module from Astra Pro settings and you can find the option under Appearance > Customize > Footer > Footer Bar.

Note: Please adjust the opacity of background color, as it will appear on the background image. If you don’t want any overlay for background image kindly set background color opacity to zero

Typography for Footer Bar

Typography options set under Appearance > Customize > Typography > Base Typography will be applied to the footer bar by default.

Additional dedicated options for Footer will be available with Typography module available with Astra Pro.

Activate the Typography module from Astra Pro settings and you can find these options under Appearance > Customize > Footer > Footer Bar.

We provide more styling options in dedicated modules of the Astra Pro Addon plugin. Learn more about the Footer Widgets module of Astra Pro Addon.

Activate the addon from Appearance > Astra Options > Colors & Background. After activating the module, you can find the settings under Appearance > Customize > Header > Transparent Header

Below are the available options-

1. Background Overlay Color

You can set an overlay background color for a transparent header.

2. Site Title Color, Site Title Hover Color

If you have enabled site title and site description from site identity tab, you can set its color on a transparent header. A color set will be applied to site title as well as to description.

3. Menu Background Color, Menu Link / Text Color, Menu Link Active / Hover Color

You can set colors for the primary menu with a transparent header.

Transparent Header with Header Sections Addon

If you have activated Header Sections module from Astra Pro Settings and using Above/ Below Header sections then background overlay color set for the transparent header will be applied to above/below header section.
While content color will be applied from Above/ Below Header Color settings.

Transparent Header with Sticky Header

Sticky Header will inherit all color settings from a header and primary menu. Transparent Header color will not affect sticky header.

To solve this:

Option 1: Use SVG Image Format (Recommended)

SVG stands for Scalable Vector Graphics. As the name suggests, it’s a scalable image format that does not have any pixels. So for any important images such as a logo that you would like to appear clear, sharp, and crisp, use SVG format. You can use plugins like SVG Support, which allows sanitized SVG uploads.

If you’ve uploaded your logo in SVG format, you do NOT need to use the Retina Logo option explained below.

Option 2: Retina Logo

If you do not have the image in SVG format, be sure to upload the retina logo for your website so it will look sharp and crisp. The retina logo should be proportionally larger at least 2 times. Read more here.

You can enhance the design of the Body, Header, Content, Sidebar, and  Footer of your website with this option. In addition to the previous background color option now you can see the background image option as well.

Where can I find the option?

From your WordPress dashboard navigate to Appearance > Customize and under various areas, you will find settings to upload background images

Where can I add a background image to Astra theme?

With Astra theme, you get an option to add a  background image to following areas-

• Body (?)
• Footer Widgets (?)
• Footer Bar (?)

Background image for Astra Pro Modules

In addition to Body, Footer Widgets, Footer Bar section, you get an option for following modules of Astra Pro –

• Primary Header (?)
• Above Header (?)
• Below Header (?)
• Content (?)
• Sidebar (?)
  Note: Background option might be visible only if you have Colors & Background module enabled from Astra Pro.

Options for Background Image

Background image option allows you to choose an image from media library or you can upload a new file. After uploading the image, click on More Settings option. Now you can set following  CSS properties for the image –

• Repeat
• Background Image Position
• Background Size
• Background Attachment

You can adjust the background color overlay with color picker. A nice transparent layer of color above image will enhance the background image design.

 Important Notes:

1. After adding a background image, make sure to adjust the opacity of background color with color picker.
2. Background applied to the body will not be visible for Full Width/ Stretched – Container Layout as in this layout width of the container is stretched to the fullest.

Once you select the 4 widget layout for the footer, you can set the widgets for each area under Appearance > Customize > Widgets > Footer Widget Area 1/2/3/4.
You can choose WordPress default widgets or can add a third-party plugin to add widgets in the list.

Colors & Background for Footer Widget Area

You can set colors for Widget Title, Text, Border and Links in the footer under Appearance > Customize > Footer > Footer Widgets

Note: The above colors will be applied to default WordPress widgets only. If you are using a third-party plugin to add widgets, you would need to manage colors from the plugin itself.

Typography for Footer Widget Area

Typography options set under Appearance > Customize > Global > Typography > Base Typography will be applied to the footer widget area by default.

We provide more styling options in dedicated modules of the Astra Pro Addon plugin. Learn more about the Footer Widgets module of Astra Pro Addon.

Footer Bar Layout

Astra provides two layouts for the footer bar.

• Footer bar layout one – It will stack the two sections of the footer bar
• Footer bar layout two – It will display the two sections inline

Section 1 and Section 2

As per the layout choose you can display the footer content as Stacked or Inline as mentioned above and Astra offers two different sections for the footer bar. You can choose options for each section from the dropdown.

Footer Menu

You can display the menu in the footer with this option. Once you activate this option for a section, it will show the menu set as a Footer Menu at Appearance > Customize > Menus.

If you need to create a new menu for your Footer you can do this under Appearance > Customize > Menus > Create New Menu and assign it to Footer Menu

Text (Custom Text/HTML)

You can add custom text or HTML code to the footer with this option.

Read more about Custom Text Helper Strings from here.

Widget

You can also add a widgets to footer sections using this option:

After setting widget for the footer section you can add widget to it under Appearance > Customize > Widgets > Footer Bar Section 1/ Footer Bar Section 2

Footer Bar Width

This allows you to set footer content width either to full width or to content width. You can choose options from the dropdown. Footer bar background will be set to full width by default just the content width will change.

• Full Width – It will stretch the footer content to both ends according to your screen size.
• Content Width – It will set content of the footer to container width set under Appearance > Customize > Layout > Site Layout > Container Width.

Footer Bar Top Border

You can set a top border width for the footer bar and its color with these options.

Related documents –

• Colors/Background and Typography options for Footer Bar

We provide more styling options in dedicated modules of the Astra Pro Addon plugin. Learn more about the Footer Widgets module of Astra Pro Addon.

Astra offers separate Footer Widgets area and Footer Bar area (Copyright area).

Settings can be found under Appearance > Customize > Footer.

Read more about Footer Widgets area and Footer Bar area from following links –

• Footer Widget Area
• Footer Bar Area