Author 诗语

Scroll To Top

This is a premium feature available with Astra Pro Addon plugin. To use these Pro features, you need to have the Astra theme along with the Astra Pro Addon installed on your website.

As the name suggests, this addon helps add a scroll to top action on longer pages. This takes away the pain of scrolling right to the top when you』ve reached the end of the page.

Quick Steps on How to Add Scroll to Top Button Using the Scroll To Top ModuleStep 1: Make sure you have the Astra Pro Addon plugin installed and activated. How to Install Astra Pro Addon plugin?Step 2: Activate the Scroll To Top module from the Astra Options under the WordPress Dashboard > Appearance > Astra OptionsStep 3: Visit customizer [ Appearance > Customize > Global > Scroll To Top ] to edit module settings

When enabled, a simple click on the icon will take you right to the top! It allows the visitor to easily scroll back to the top of the page. The button appears only when the user scrolls down. It is useful for one-page websites as well as long content-based websites.

After activating the module, you can find the settings under Appearance > Customize > Global >Scroll To TopIn the settings, you will find the following options –

Display On

You can choose scroll to top link to be visible on desktop and/or mobile.

Position

You can choose scroll to top link to align on the right or the left side of the page.

Icon Settings

You can set the following icon properties.

1. Icon Size – Allows you to set the size of the icon font.2. Icon Background Radius – Apply rounded borders for the icon background with this.3. Icon Color – Allows you to set the icon font color4. Icon Background Color – Allows you to set the background color of the icon.5. Icon Hover Color – Allows you to set icon font color on hover.6. Icon Hover Background Color – Allows you to set the icon background color on hover.

Apart from the above settings, you can change the icon for the scroll to top link. Please refer this document – How to Update the 「Scroll To Top」 Icon

Page Headers Overview

This is a premium feature available with Astra Pro Addon plugin. To use these Pro features, you need to have the Astra theme along with the Astra Pro Addon installed on your website.

You can design attractive Page Title/ Page Header area with breadcrumbs, background color/image. You can also design site header to suit your page header design on the particular page.

Quick Steps on How to Design Attractive Page Headers Using the Page Headers ModuleStep 1: Make sure you have the Astra Pro Addon plugin installed and activated. How to Install Astra Pro Addon plugin?Step 2: Activate the module from the Astra Options under the WordPress Dashboard > Appearance > Astra OptionsStep 3: Visit Page Headers section [ Appearance > Astra Options > Page Headers ] to design page headers

After activating a module click on Settings option to get started.

Now you can see Page Header option under the Appearance tab, below Astra Options.

Add a new page header & give an appropriate name to it.Choose options for Page Header, Site Header set the Display Rules and you are done!

Page HeaderSite HeaderDisplay Rules

Page Header

Layout

It will arrange the page title and breadcrumbs (if enabled) on one another, in the middle of the page.

It will appear on the front end as –

Inline

It will display the page title and breadcrumbs (if enabled) in the right and the left side.

It will appear on the front end as-

Display Breadcrumb

Breadcrumbs show the current location of the user on the website. It is often used as a secondary navigation that allows users to go up and down in the hierarchy of links.

You need to enable this option if you want to display breadcrumbs.

It will appear on the front end as –

Title and Breadcrumb Colors

You can set colors for title and breadcrumb text with this options.

It will appear on the front end as-

Background Size

You can define a height for the page header with this option. It enhances the page header design.

Custom Size

You can define Top and Bottom Padding for the page header. Custom Size can be given any positive number with or without units as 「5px」 or 「5px」. Default unit is in 「%」

It will appear on the front end as-

Full Size

It will display page header as a full screen.

It will appear on the front end as –

Background

You can set color or image as a background for page header.

Color

You can choose a color from color picker for page header background.

Image

You can set a background image for page header with this option.

You get following advanced options with this-Override this image with the featured image on individual posts & pages.If you want to override the above background image with the featured image that you have set for a particular post or page, enable the option.

Overlay Background ColorIf you enable this option, background color (if set any) will be applied as an overlay for the background image.

It will appear on the front end as –

ParallaxIn the parallax effect, the background image is moved at a different speed than the foreground content while scrolling.Enable this option if you want parallax effect for the background image.

If you want to remove Page Title from page header, you would need to use custom code (filter).

Site Header

If you wish to customize the current site header along with the page header, you can use this option.When you customize your site header with this option, all settings under Site Header tab will override the customizer settings for current site header.

Merge Page Header with Site Header

This option will merge the page header with the current site header. It will set a current header as transparent and pull the page header to the top. Enabling this option will display the advanced customization options list.

It will appear on the front end as –

Site Identity

This allows you to choose a logo for your header different than your site logo. Leave this empty if you want to use the same logo as your site logo. You can add normal as well as retina logo and can set easily set a logo width.

Customize Site Header

When you merge the page header with site header, background set for page header will be applied automatically to the site header.You can set Background Overlay Color, Border Bottom Size, and Color for your site header with this option.

It will appear on the front end as –

Primary Menu

If you want to override the current menu colors for the site header, use these options.You can set Background Color, Link / Text Color and Link Active / Hover Color with this.

Submenu Color Options [NEW]

From Astra Pro v2.5.0, we are introducing separate options for Link Active Color, and Submenu Color options as shown below. Similarly, these options will be seen for the Above Header, and Below Header Link and Submenu color options too.

Custom Primary Menu

If you want to display a different menu that your Primary Menu, you can select it from the drop-down. All menu available on site will appear in the drop-down.

Custom Menu Item

It allows you to add a custom menu item at the end of the selected menu from the above option. You can select a custom menu item from the drop-down.

Note:

This option wouldn』t be available if you』re using Header Footer Builder (available with Astra theme versions 3.0.0 and above).

Customizer Setting

Choose this if you want to display Custom Menu Item set for Primary Header in the customizer.

Search

It will add a search icon for a search box at the end of the selected menu. When you click on the icon search box will appear.

It will appear on front end as-

Text / HTML

It will allow you to insert text and HTML element code. You can insert a call to action button, contact number, email address etc.

Widget

You can add a widget to the header with this option.

After selecting the widget option as a custom menu item, you will able to set a widget from Appearance > Customize > Widgets > Header

Choose any WordPress default widget or you can use any third-party plugin to add a widget to the list.

Take custom menu item outsideThis option allows you to separate your custom menu item from the selected menu. It will show your custom menu item separately on responsive devices-

Note: If you have activated Header Section Addon and using Above and/or Below Header section, then you get an option to customize them.

Display Rules

Display On

You can choose your page header to display on specific pages, posts on your site. Choose a location from the list. You can Add Display rule and/or Exclusion rule.

User Roles

You can decide a user role for which page header should be visible.

We have designed a demo using Page Headers Addon. It will show how you can creatively use Page Headers Addon.https://websitedemos.net/blog-03/category/fashion/

Full Width / Contained – Container Layout

As explained in the Container Overview article, typically a website can have two containers viz: Primary Container and Secondary Container.

Primary Container is where the main content appears, whereas Secondary Container consists of the sidebar and various different widgets in the sidebar.

「Full Width / Contained」 layout combines the primary and secondary containers and displays in a single container in a clean format. That means content and a sidebar will display side by side in a single container. This container will display in a container width, leaving a space around the container.

You can find the setting under Appearance > Customize > Global > Container

Full Width / Contained layout is great for websites that need a clean design without any boxes. We set this layout as default in our integrations with some plugins such as WooCommerce, LifterLMS, etc.

Full Width / Contained is also the recommended layout for page builders like Visual Composer; where page builder requires themes to control the width of the container.

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

Blog Overview

The blog is a necessary part of the website. It helps in publishing updates, sharing personal or professional information, showcasing work.

Astra helps you to design blog pages in an easier way.

You can find the setting under Appearance > Customize > Blog

Under the blog, you will find the settings for:

Blog / ArchiveSingle Post

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

Footer Spacing Controls

This is a premium feature available with Astra Pro Addon plugin. To use these Pro features, you need to have the Astra theme along with the Astra Pro Addon installed on your website.

You can manage the spacing using the Spacing module available with Astra Pro. Please refer document, to begin with, Spacing module.

Make sure you have activated the module from Appearance > Astra Options > Spacing.

It provides a spacing option for Footer Widgets as well as Footer Bar.

Footer Widgets

The spacing option for the footer widget will be available when you activate the Footer Widgets addon from Appearance > Astra Options > Footer Widgets.

To access these settings navigate to Appearance > Footer > Footer Widgets. Footer Widgets Padding will add padding for the footer from all sides.

Note: To add widgets to your Footer, navigate to Appearance > Widgets and add the needed widgets to the Footer Widget Areas.

Footer Bar

It will add padding to the main footer (copyright area) from all sides.

How to Set the Full-width/Stretched Container Layout in Astra?

As explained in the Container Overview article, typically a website can have two containers viz: Primary Container and Secondary Container.

Primary Container is where the main content appears, whereas Secondary Container consists of the sidebar and various different widgets in the sidebar.

「Full Width / Stretched」 layout merges the primary and secondary containers and displays in a single container. And the width of the container is stretched to the fullest. Due to the stretched width of the container, the content runs edge to edge to the width of the browser.

You can find the setting under Appearance > Customize > Global > Container

No background color is applied in 「Full Width / Stretched」 layouts since the primary container occupies the entire browser.

These layouts work best with the page builders like Beaver Builder, Elementor etc where you can set container width with page builder.

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

Single Post

Single post the page where the individual blog topics are described in minute details. The author can cover every necessary detail in the single posts.

Apart from the featured image, you can add images and videos in the post through the media. You can also add/embed the related or reference links to the topics.

You can find the setting under Appearance > Customize > Blog > Single Post

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

Full Width Site Layout

This is a premium feature available with Astra Pro Addon plugin. To use these Pro features, you need to have the Astra theme along with the Astra Pro Addon installed on your website.

Please refer the following document, to begin with, Site Layout.

A website generally has the main wrapper followed by the container.

The main wrapper consists of header, content, sidebar, and footer — the entire website;And the container is the child wrapper that includes a content & sidebar.

When you select the Full-Width Site Layout, the main wrapper of the website goes edge to edge of the browser. Whereas the content is managed by the container width.

You can find the setting to manage Full-Width Site Layouts under Appearance > Customize > Global > Container > Site Layout.

WooCommerce Mini Cart Shortcode

This is a premium feature available with Astra Pro Addon plugin. To use these Pro features, you need to have the Astra theme along with the Astra Pro Addon installed on your website.

Please refer document, to begin with, WooCommerce module.

The WooCommerce addon in the Astra Pro provides a shortcode [astra_woo_mini_cart] to display the mini cart icon anywhere you want. This can be used on page builders/sidebar widgets etc.

[astra_woo_mini_cart] had an attribute `direction` for the direction this should open the mini cart on hover.

Options:[astra_woo_mini_cart][astra_woo_mini_cart direction="top left"][astra_woo_mini_cart direction="bottom right"][astra_woo_mini_cart direction="top right"]

The design of the cart in the menu can be fully customized using the options in WordPress customizer.

Related Documents –

Ultimate Guide on WooCommerce Shortcodes

Container Spacing Controls

This is a premium feature available with Astra Pro Addon plugin. To use these Pro features, you need to have the Astra theme along with the Astra Pro Addon installed on your website.

You can manage the spacing using the Spacing module available with Astra Pro. Please refer document, to begin with, the Spacing module.

Make sure you have activated the module from Appearance > Astra Options > Spacing.

A container is where the main content and information appears. You can manage inside spacing as well as outside spacing around the container. Know more about the container here.

You can find settings under Appearance > Customize > Global > Container.

Below are the spacing options for different container layouts –

Boxed Layout

In the Boxed Layout, Space Outside Container values will be applied as a margin to the container.Top space value will allow you to manage space between the header and container』s top edge. While bottom space value will allow you to manage space between footer and container bottom edge.

Space Inside Container will be applied as padding to the container. It will allow you to manage space between page/post content and the container edges.

Note: If you have enabled the sidebar, you can manage to space for it from Appearance > Customize > Sidebar.

Content Boxed Layout

In Content Boxed Layout, Space Outside Container values will be applied as a margin to the container.Top space value will allow you to manage space between the header and container』s top edge. While bottom space value will allow you to manage space between footer and container bottom edge.

Space Inside Container will be applied as padding to the container. It will allow you to manage space between page/post content and the container edges.

Note: If you have enabled the sidebar, you can find the spacing options for it at Appearance > Customize > Sidebar.

Full Width / Contained Layout

In Full Width / Contained Layout, Space Outside Container values will be applied as the top and the bottom margin to the container, but not on the sides.

In this layout, the Space Inside Container will not be applied as content will be stretched to the container』s edges.

Note: If you have enabled the sidebar, you can find the spacing options for it at Appearance > Customize > Sidebar.

Full Width / Stretched Layout

In Full Width / Stretched Layout, both Space Outside Container and Space Inside Container will not show any changes, as the container along with the content will be stretched the edge to edge to the width of the browser.