入门归档 - 第 28 页共 38 页

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.

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.

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.

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

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.

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.

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.

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.

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/

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.

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.

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.