Author 詩語

Fluid 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.

Quick Steps to Enable Fluid Site Layout with AstraStep 1: Make sure you have the Astra Pro Addon plugin installed and activated. How to Install Astra Pro Addon plugin?Step 2: Activate the Site Layout module from the Astra Options under the WordPress Dashboard > Appearance > Astra OptionsStep 3: Visit customizer [ Appearance > Customize > Global > Container > Site Layout ] and select Fluid as Site Layout settings.

Just as the name suggests — when fluid site layout is enabled, the entire website goes edge to edge of the browser, on all screen sizes.

If you have a website where you have a lot of content; for example blog, online magazine, or for any reason, if you need your entire website including header, footer, and main content area to span across the entire browser on all screen sizes, the Fluid Site Layout is for you.

The setting for Fluid Site Layout can be found under Appearance > Customize > Global > Container > Site Layout

Astra has provided an option to manage the padding on left and right.

On responsive devices, this padding is automatically adjusted.

LifterLMS Overview

Astra is fully compatible with LifterLMS plugin. Astra provides styling options for LifterLMS pages. Along with styling, Astra provides some cool and very useful features like Distraction Free Checkout, Distraction Free Learning.

Refer following docs for detailed information:

LifterLMS integration with Astra ThemeLifterLMS module with Astra Pro Plugin

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

How to Manage Spacing in Headers Using Astra?

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.

In this, you get an option to set spacing for the header layout. Enabling Spacing Addon will add options to following header layout –

Primary HeaderPrimary MenuAbove HeaderBelow HeaderSticky Header

Primary Header

Option to set spacing for Primary Header and Primary Menu/Submenu can be found under Appearance > Customize > Layout > Primary Header

Header Space – A primary header is a part where your site identity and primary navigation menu appears. You can set spacing around the content in it.

Primary Menu

Menu Space – Primary Menu is a navigation menu appears inside the primary header. The spacing value set for this will be applied as padding around each menu item. It allows you to adjust space between each menu item.Submenu Space – The spacing value set for Primary Submenu will be applied as padding around each submenu item.

Above Header

When you activate Header Sections Addons from Appearance > Astra > Addons > Header Sections and enable Above Header on the site, you can see this option. You can read more about Header Sections Addon from here.

Setting will be available under Appearance > Customize > Header > Above HeaderAbove Header Space will add padding to the above header section from all sides.

When you select the Menu option for either section in the above header, spacing options for the above header menu and submenu are visible. Padding will be applied for the individual menu item with this.

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

Below Header

When you activate Header Sections Addons from Appearance > Astra > Addons > Header Sections and enable Below Header on site, you can see this option. You can read more about Header Sections Addon from here.

The setting will be available under Appearance > Customize > Header > Below Header

Below Header Space will add padding to below header section from all sides.

When you select Menu option for either section in below header, spacing options for below header menu and submenu are visible. Padding will be applied for the individual menu item with this.

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

Sticky Header

If you have activated Sticky Header Addon from Appearance > Astra > Addons > Sticky Header and using it on your site, you can manage its spacing.

Spacing values set for Site Identity, Primary Header and Primary Menu/Submenu will be applied to Sticky Header by default.

Make a note, when you enable Shrink Effect for Sticky Header, top and bottom spacing for Site Identity, Primary Header, and Primary Menu/Submenu will be removed. While Left and Right spacing will remain as it is.

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

Spacing Addon 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.

Spacing Addon allows you to manage the margin and padding for various elements available with Astra.Default values for the theme will be overwritten by the values entered with Spacing Addon settings.

Quick Steps on How to Set Margins and Padding Using the Spacing Addon 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 customizer [ Appearance > Astra Options > Spacing ] to set margins and padding

After activating the module, spacing settings for each module will appear under particular element settings in Appearance > Customize

Spacing controls overview

The following controls will be included in the spacing option.

Spacing Units

You can select a spacing unit from PX (pixels), EM (Relative to the font-size of the element), % (percentage) as per requirement.

Responsive spacing options

You can set different spacing values for responsive devices. Choose a device and set spacing values accordinglyTop, Right, Bottom, Left SpacingYou get an option to add spacing from all sides to the element.

Connector

The link icon you see next to the above spacing control is a connector. When you click it, it will connect all 4 (Top, Right, Bottom, Left) spacing options, allowing you to apply the same spacing value for all 4 sides at the same time by entering a value in any of the 4 spaces.When you deselect it, you will be able to add different spacing values for each side separately.

The spacing addon will add a spacing control option to the following elements in the customizer.

Site IdentityContainerHeaderBlog / ArchiveSidebarFooter

Global Typography – Astra Theme

Typography plays the most important role in the UX of a website. Therefore, we』ve focused on giving you a number of typography options that will help you customize your fonts using the Astra theme.

Astra provides global typography options where you can make changes at one place and they will reflect globally.

From the WordPress dashboard, you can find settings under Appearance > Customize > Global > Typography

Base Typography

This is default typography that will apply to the entire website. Available options are –

Family – Make your choice of Font Family from Nunito, Times New Roman, Sans Serif, etc. for the content on your websiteVariants – It is necessary to select font variants that you will be using on the website. Read more hereSize – Select the default Font Size of the content on your website, you will also find the option to set the Text Transform i.e [None, Capitalize, Uppercase, Lowercase]Weight – Select the default Font Weight of the content on your websiteLine Height – Setting a value here would add a line-height to the website』s body and contentParagraph Margin Bottom – Set a default Paragraph Margin Bottom for the Body and Content

Font Family

Astra allows you to use System Fonts, Google Fonts, Typekit Fonts as well as Custom Fonts on your site. Refer a document that will explain how you can select a font with Astra.

You can easily include Custom Fonts with Astra without adding a single line of code.

Headings

Headings Typography can be found under the Customizer > Global > Typography > Headings.

You can set common font style and individual font size for all Headings – H1 to H6

Note: If you are using a page builder, you can override the above Typography with page builder』s Typography settings for specific sections.

We provide more specific typography options in the dedicated module of Astra Pro Addon plugin. Learn more about the Typography module of Astra Pro Addon.

How to Manage Spacing on the Blog Page Using Astra?

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.

You will get options to set spacing for posts and pagination on blog/archive pages. You can find settings under Appearance > Customize > Blog > Blog / Archive.

Below are the available options –

Post Pagination Space

It will add padding around the pagination option from all sides.

Post Outside Space

It will add a margin to the individual post from all sides.

Post Inside Space

It will add padding for the individual post from all sides.

Boxed – 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.

When you select the 「Boxed Layout」; the individual containers and widgets appear in boxes.

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

You can change the background color from Customizer > Global > Colors > Base Colors > Base Colors.

Other Notes:

You can apply boxed containers for selected pages or posts from meta settings.

The width of the container depends on the Site Layout settings.

If you have Astra Pro Addon plugin, you can find additional options such as background color through our Colors & Backgrounds module. In case, if you don』t have Astra Pro, you can also add a background image with Custom CSS.

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

LifterLMS Integration in Astra Pro

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.

Also, make sure that you have the LifterLMS plugin installed and activated.

LifterLMS Addon is a premium module available with Astra Pro. If you don』t have Astra Pro, check the article that covers the integration in free Astra theme.

Quick Steps on How to See the Advanced Features Using the LifterLMS 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 LifterLMS module from the Astra Options under the WordPress Dashboard > Appearance > Astra OptionsStep 3: Visit customizer [ Appearance > Customize > LifterLMS ] to edit module settings

Note – Make sure you have LifterLMS plugin activated.

You would need to activate addon from Appearance > Astra Options > LifterLMS

LifterLMS Addon provides various design options to make your LifterLMS pages stunning. It provides some beneficial features like distraction Free Checkout, Distraction Free Learning. Profile pic setting. It helps to set your courses online with minimum customizations.

All new options and features that LifterLMS module in Astra Pro adds can be found in Appearance > Customize > LifterLMS

Let』s explore the features!

General

The General settings in LifterLMS give you the power to manage the generic settings like columns, tab alignment, checkout page options.

You can find it under Appearance > Customize > LifterLMS > General.

Course Columns

This option helps you to display a number of courses in a singular column on the course page.

You have an option to manage the columns in your responsive mode as well. Choose a device with a responsive toggle button.

Membership Columns

You decide to choose various memberships for the courses that you offer through LifterLMS plugin. Astra Pro addon for LifterLMS helps you in managing the display settings for these membership columns.

Like the Course Columns options, you get to choose the column display on responsive devices.

Checkout

Distraction free checkout

When you enable this option, the menu in the header and the 1st footer of the website disappears on the checkout page. The option of Distraction Free Checkout overrides the header and footer settings.

My Account

Display Tabs Vertically

When you enable this option, the tabs appear in a vertical manner on a personal account page.
On this page, all the applied courses, achievements, tags, order history, notifications and rest account details appear.

Course/Lesson

You can manage the Course / Lesson page layout with this.You will find this setting under Appearance > Customise > LifterLMS > Course/Lesson

Student View

Enable Distraction Free Learning

When a student is taking lessons it』s always best suggested to make him read, learn, watch or listen with 100% attention without any diversions. Various elements like the menu header, sidebar, first footer widgets form a kind of distractions. Therefore this option is best suggested to be enabled if the courses are to be learned well.

Enable Featured Image

This option helps you to showcase the featured images set for the course from the meta option

Enable Course Description

It allows you to display a description of the course on the page.

Enable Course Meta

It allows you to display course metadata like Course Categories, Course Tags, Course Tracks.

Enable Instructor Detail

You can manage to show instructor details with this option.

Enable Progress Bar

A progress bar can be managed with this.

Visitor View

Like student view, you can manage following fields for the visitor view-

Enable Featured ImageEnable Course DescriptionEnable Course MetaEnable Instructor DetailEnable Syllabus

Header Option

Header Profile Link

To add User Profile Link to your Header, navigate to Appearance > Customise > LifterLMS > General and click on the 「Enable Header Profile Link」 option.This will show the user』s Profile Picture set for the LifterLMS account.

Theme Color set in Customizer inherited by LifterLMS elements:=> Whatever color you set in the customizer applies by default to all the elements of LifterLMS.=> Such as headings, text color, link color.

Buttons Settings

The colors that you set to the button in the customizer under Appearance > Customise > Global > Buttons is applied to the buttons overall on LifterLMS.

Sidebar 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.

You can find settings under Appearance > Customize > Sidebar.

Below are the available options-

Sidebar Outside Space

This will add space around the widgets in the sidebar.

The top spacing value will add a margin at the top.The bottom spacing value will add a bottom margin for the whole sidebar as well as the bottom margin for individual widget inside the sidebar.Left and Right space will add padding to the left and right side of the whole sidebar.

Sidebar Inside Space

It will add padding to the individual widget from all sides.

Content Boxed – 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.

When you select the 「Content Boxed Layout」; only the primary container appears in the boxed format. And the sidebar or secondary container comes up on a plain background.

Content Boxed Layout is great for the content websites, blogs, and pages where you need to highlight the content area more than the sidebar.

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

Also, you can apply a different container for each individual pages from meta settings.

Other Notes:

You can apply a Content Boxed container for selected pages or posts from meta settings.

The width of the container depends on the Site Layout settings.

If you have Astra Pro Addon plugin, you can find additional options such as background color through our Colors & Backgrounds module. In case, if you don』t have Astra Pro, you can also add a background image with Custom CSS.

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