Astra 文档

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.

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.

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

Single post with Blog 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.

You can design a Single Post page using Blog Pro module available with Astra Pro. Please refer document, to begin with, Blog Pro module.

Astra theme provides basic options to style the single blog page. Refer a document here. While Blog Pro addon available with Astra Pro Addon adds premium features to this options.

Options available with Blog Pro addon are listed below –

Single Post Structure

It allows you to choose whether to display or hide post featured image, title, and meta. Just click on the 『eye』 icon to enable or disable the option.

Author Info

It displays Author information in the single blog post.

Auto Load Previous Posts

It will load the previous blog post below the current one on the same post page. Auto Load Previous Posts cannot be previewed in the Customizer. You would need to save changes, then it will appear on the front end.

Remove Featured Image Padding

It will remove padding around the featured image on the single post page. This option will work only with Boxed and Content Box container layout.

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.

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.

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

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.

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.

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.