How do I manage margin between paragraphs?

How do I manage margin between paragraphs?

Astra theme version 1.0.18 introduces a new option in the Typography which offers you control over spacing between paragraphs.

Just navigate to Customizer – Global > Typography > Base Typography where you will find the setting as below:

Just tweak the setting and get the perfect space between the paragraphs as you need.

Further Read – http://blog.fonts.com/2017/01/paragraph-spacing/

LifterLMS Integration in Astra Pro

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.

Full Width / Contained – Container Layout

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.

Full Width Site Layout

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.

Scroll To Top

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

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

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.

Blog Overview

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.

Container Spacing Controls

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.

Single Post

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.

How to Manage Spacing in Headers Using Astra?

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.