Footer Widgets Module with Astra Pro

Footer Widgets Module with 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.

Note:

We have recently released the Header Footer builder in Astra version 3.0.0, due to which you will find some new changes. Please refer to the following article for the same.

It allows you to add 7 different footer widget layouts to the footer.

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

After activating the module, you can find the settings under Appearance > Customize > Footer > Footer Widgets

Footer Widgets Layout

You can choose any layout out of 7 available layouts. After selecting one of the layouts you would be able to add widgets from Appearance > Customize > Widgets

After selecting a layout you can set the widgets for each area under Appearance > Customize > Widgets > Footer Widget Area.Choose any WordPress default widget or you can use any third-party plugin to add a widget to the list.

Footer Widgets Padding

You can add padding for footer from all sides.

Footer Widgets Width

Full Width

It will set a footer to full width no matter what your container width is.

Content width

It will set a footer to container width set under Appearance > Customize > Global > Container > Container Width

Footer Widgets Colors and Background

With the Footer Widgets module, you would get Background Image option along with default color options.

Footer Widgets Typography

With Footer Widgets module, you can set typography for Widget Title and Content under Appearance > Customize > Footer > Footer Widgets > Widget Title Font/Content Font

Backup Your Website in Less than 10 Minutes!

Backup Your Website in Less than 10 Minutes!

Backups have an essential role in making sure that you never lose your website. Before major updates, customizations, or lodging a support ticket — we highly recommend you backup your website. So in case if something goes wrong, you will be able to restore it quickly.

Though most web hosting services offer backups, these are often out of your control (most often done periodically).

It』s important to be able to create a backup when you need it. This is especially true if you』re not using a staging environment (which we also recommend) to do WordPress, theme, or plugin updates or to test new features on your website – making a backup before any of these actions is highly recommended.

Below is a quick video walkthrough that explains how to backup & restore your WordPress website with UpdraftPlus. There is a free and paid version of the plugin. For this document, we will be using a free version.

Add Updraft Plus To Your Website

We』ll start by installing and activating the UpdraftPlus plugin:

Step 1 – Log in to your website and navigate to Dashboard > Plugins > Add New;

Step 2 – Search for 「updraft plus」 in the search bar on the top right side of the screen;

Step 3 – Install and activate the plugin.

Set Up The Plugin

Navigate to the Dashboard > Settings > UpdraftPlus Backups to set it up and start creating your first backup.

Let』s set up the plugin:

Step 1 – Click on the Settings tab;

Step 2 – Decide if you wish to schedule your backups for automatic updates or do you want to do it manually. You can also set how many previous backups you wish to retain. This is available for both 「File Backup Schedule」 and a 「Database Backup Schedule」;

Step 3 – Now you need to choose your remote storage option. This means that your backup will be exported to the remote location you choose (e.g. Dropbox, Google Drive, etc.). You are free to choose any available option;

Note: Though e-mail is an available option, we don』t recommend using this option as backups can become quite large.

Step 4 – Scroll down to the bottom of the page and click 「Save Changes」.

Depending on the remote storage option you choose, you might need to do an additional authorization step. If this is the case, you will get a notification with the authorization link on Step 4. The authorization is needed to confirm that the plugin has the right to access and save files to your remote storage.

Authorize the Remote Storage

If you chose the remote storage option that requires authorization, follow the instructions mentioned here to finish the setup.

In this example, we used a free Dropbox account that comes with 2 GB of free storage (at the moment of writing). Another free alternative is Google Drive which comes with 15 GB of storage.

Step 1 – Log in to your Dropbox account. If you don』t have one, you can easily create it;

Step 2 – Click on the link in the notification popup (mentioned previously). This will start the authorization process;

Step 3 – Click on the 「Allow」 button. This will authorize Updraft Plus to use your Dropbox account;

Step 4 – You will see the final setup screen with the 「Complete Setup」 button. Click it to finish the setup process and return to your website.

Below is a quick video walkthrough that explains how to backup & restore your WordPress website with UpdraftPlus.

Backup Your Website

Now that your Updraft Plus plugin is set, you can make your first backup. Follow these simple steps:

Step 1 – Navigate to Dashboard > Settings > UpdraftPlus Backups and click on the 「Backup/Restore」 tab;

Step 2 – Click on the 「Backup Now」 button to start the backup process. This will open a backup settings popup.

Step 3 – With the free version, you have the option to decide which files you wish to include in your backup (you can find these options when you click on the 3-dots menu) and whether you want your database to be included too. Also, you can send the backup file to the remote storage or save it locally on your server. We recommend that you keep all options checked:

Step 4 – Click on the 「Back Up Now」 button to create your backup.

Restore Your Website

If it happens that you need to restore your website from a backup (e.g. there were some issues with your website after updates), please follow the steps:

Step 1 – Navigate to Dashboard > Settings > UpdraftPlus Backups and click on the 「Backup/Restore」 tab;

Step 2 – Scroll down to the 「Existing Backups」 section. Here, you will see all backups you previously made.

Step 3 – To restore your website just click on the 「Restore」 button on the backup you wish to restore from.

Step 4 – On the next screen, select if you wish to restore just some of the files (e.g. Plugins, Database, etc.) or your whole website. Click 「Next」 on the following screens to finish the restore process.

Step 5 – When you initiate the restore process on your website, the Updraft will save a copy of your existing files and folders before restoring the website from a backup. You can review these files, and if you are satisfied with the restore, remove these by clicking on the 「Delete Old Directories」 button at the UpdarftPlus Backups:

How To Create a Header With a Centrally Positioned Logo With Astra?

How To Create a Header With a Centrally Positioned Logo With Astra?

The Astra Theme comes with the visual drag-n-drop Header Footer Builder. The Header Footer Builder brings a lot of freedom when designing your headers and footers. One of the interesting designs that can be achieved with Header Builder is creating a header with a centrally positioned logo. And you only need a couple of minutes to do this.

Following the easy steps in this article, you can expect the end result like the one in the screenshot below – a header that displays your logo in the middle with your menu items distributed on the left and the right side.

How To Do This?

To achieve this header design with the Astra theme, you will need to use Header Builder and three elements:

Site Identity & Logo

Primary Menu

Secondary Menu

No matter if you started building your website from scratch or imported one of our Starter Templates, the default header setup you will most likely see in the Header Builder consists of the 「Site Identity & Logo」 element on one side, coupled with the 「Primary Menu」 element on another:

To start building your header with a centralized logo, let』s first create your menus.

Creating Primary and Secondary Menu

Navigate to Appearance > Customize > Menus (you can also access menu setup via Dashboard). Follow these steps to start building your menus (you will need to build two):

Step 1 – Click on the 「Create New Menu」 button to create a menu:

Step 2 – Name your menu. You can name the menu as you wish. In order to track things easier, we named this first menu 「Left Menu」 as we will add this one on the left side of the Logo in the header

Step 3 – Select menu items you wish to add to the menu. If you need to create any new items, you can simply click on the 「Add Items」 button.

Step 4 – Scroll down to the 「Menu Locations」 section and mark this menu as 「Primary Menu」:

Step 5 – Return to the Appearance > Customize > Menus and repeat steps 1 to 3 to create your second menu. We named this menu 「Right Menu」 but you can name it as it suits you:

Step 6 – Scroll down to the 「Menu Locations」 section and mark this menu as 「Secondary Menu」:

Build Your Header

Now that you』ve created your menus, navigate to Appearance > Customize > Header Builder and follow these steps to create your header:

Step 1 – Add your 「Site Identity & Logo」 element to the middle section of the Primary Header, and add your Logo. The primary header is the middle header in your visual header builder:

Step 2 – Finally, to create your header with a centrally positioned logo as previously shown, add your Primary and Secondary Menu elements. Click to the left section of the Primary Header and add the Primary Menu element. Click on the right and add the Secondary Menu too. Click 「Publish」 to save your header.

Note:There is no difference if you add a Primary or Secondary Menu element to the left or right side. This will just reflect on the position of your menu items in the header.

Alternatively, you can position menus closer to the sides of your website by moving (drag-n-drop) Primary and Secondary Menu elements:

Step 3 – This step is optional and it will depend on your Logo design and other Site Identity options (if you activated Site Title or Tagline). You can add margins to your Site Identity & Logo element to make your logo equally distanced from both menus. Using percentage (%) as a size unit will make sure this distance looks good on all screens.

Browser Support by Astra

Browser Support by Astra

Here is a list of browsers that works seamlessly with Astra.

Last 1 Android versionsLast 1 Chrome Android versionsLast 2 Chrome versionsLast 2 Firefox versionsLast 2 Safari versionsLast 2 iOS versionsLast 2 Edge versionsLast 2 Opera versions

We provide browser support similar to that of WordPress Core.

How to use RGBA color picker?

How to use RGBA color picker?

There are several color formats you can use with the Astra Theme. Though you might be most familiar with HEX codes (e.g. #FFFFFF for white color), you might have noticed that your color picker offers also RGBA format (Red, Green, Blue, Alpha). We have added an RGBA color picker for most of the Customizer settings, to help you add transparency easily.

You can use the RGBA color picker on any color setting that supports it with just a few clicks:

Step 1 – Navigate to the desired setting that you wish to edit, and click on it to open the color picker;

Step 2 – Click on the icon for circling between the available color formats and set it to RGBA;

Step 3 – Once your format is set to RGBA, you can add your color by adding the color values or by dragging the picket on the color scale:

Note:

The selected color doesn』t change when you change the color format. When you change the color format, the color will be automatically shown in the selected format. For example, if you set the white color in HEX format it will be shown as #FFFFFF. If you switch to RGBA the white color will be shown as rgba(255, 255, 255, 1)

Step 4 – You can add transparency to your color by either sliding the transparency bar or by modifying the Alpha (a) value between 0 and 1:

Note:

Sliding the transparency bar will automatically switch your color format to RGBA.

Keep in mind that setting the Alpha value to 0 will make it completely transparent and not visible, while setting the value to 1 will remove the transparency.

Feel free to check the video below to see this feature in action:

Manage Your Site Identity With Astra』s Header Builder

Manage Your Site Identity With Astra』s Header Builder

Your Logo and other Site Identity options are directly related to the presentation of your brand. As they are part of your header, these are visible on all pages and posts thus they help users always be aware of the website and brand they are interacting with.

The Astra Theme comes with a drag & drop Header Footer Builder. With Header Builder, you can manage your site identity using the Site Identity & Logo element. This document will show you how to easily set your Logo and other Site Identity elements. These include:

Logo

Retina Logo

Logo for mobile devices

Site Title

Site Tagline

Site Icon (Favicon)

You can find the Header Builder by navigating to Appearance > Customize > Header Builder. To access the element settings just click on the element in the elements list on the left, or in the visual header builder under the preview.

Logo

You can add your Logo under the General tab. To add or change your logo, you can follow these steps:

Step 1 – Click on the Logo area and upload a file or select a logo from your Media Library. You can add logos as JPG, PNG, and SVG.

Step 2 – Though this step is optional, enabling a Different Logo For Retina Devices will ensure your logos look great on devices with retina screens. It』s advisable to upload at least two times larger so your logos won』t be blurred on high-definition screens. You can find out more about the retina logo in this article. If you decide not to use this option, your website will show your primary logo (from Step 1) on retina screens too.

Step 3 – Once your logo is added, you can choose the Logo Width. This will set the size of your logo, as the height will be automatically calculated based on the width. You can also set different logo widths for desktop, tablet, and mobile by clicking the responsive editing icon to switch between these screens.

Step 4 – If your design requires a different logo on mobile devices, you can switch to mobile editing and enable Different Logo For Mobile Devices to add a different logo only for mobile devices. Keep in mind that the mobile logo you set will be used for both tablets and mobile phones. You can find more about creating a mobile header in this article.

Step 5 – You can switch to the Design tab of the element and set Logo margins.

Note:If you enable the Transparent header, you will have a Different Logo for Transparent Logo option, enabling setting a different Logo, Retina Logo, and Logo Width applied only to the Transparent header. This option is available at Appearance > Customize > Header Builder > Transparent Header > General tab.

Site Title and Tagline

Site Title is a name you set for the website, while the Tagline is the short one-line description.

Step 1 – You can make these visible beneath your logo by enabling their respective options within the General tab of the Site Identity & Logo element. You can enable these separately for desktop, tablet, and mobile.

Step 2 – Usually, site title and tagline are added when creating a new website at Dashboard > Settings > General. If you want to modify these, you can do it directly in the element settings without leaving your Customizer.

Step 3 – Also, if you would like to position your site title and tagline on the right side of your Logo, you just need to enable the Inline Logo & Site Title option.

Step 4 – If you switch to the Design tab of the element, you will find the options for changing the Color and Font Size of the Site Title and Tagline.

Note:If you enable the Transparent header, you will have separate options for setting different Title Color used only for the Transparent header. This option is available at Appearance > Customize > Header Builder > Transparent Header > Design tab.

Site Icon (Favicon)

This is a small image icon that can be seen in the tab of a web browser, bookmark bars, and WordPress mobile apps. You can set it with the site icon option. The recommended size for a favicon is 512 pixels. Learn more about Site Icon here.

Premium Starter Templates – Install and Activate License

Premium Starter Templates – Install and Activate License

In the Starter Templates library, templates with PREMIUM tags are accessible only to those who own the Essential Bundle or Growth Bundle.

Once you purchase Essential Bundle or Growth Bundle, follow the steps below to install the plugin and activate its license. Activating the license will allow you to import starter templates with the 『Premium』 tag.

Step 1 – Login to your store account.Step 2 – Visit Account > Downloads. Step 3 – Choose to download Premium Starter Templates plugin.

Step 4 – From your WordPress dashboard, navigate to Plugins > Add New > Upload Plugin and upload zip from the above step.

Once you activate the plugin you will have to activate the license key.

Step 1 – Visit store account and go to Account > Licenses and copy the license key.

Step 2- Navigate to WordPress dashboard > Plugins > Installed Plugins > Premium Starter Templates and click on Activate License. A popup window will appear where you need to enter the license key.

Note: The Premium Starter Templates is a different plugin than the Starter Templates plugin that is available for free on WordPress.org.

Once you are set with the plugin start importing your favorite template.

Related Docs –

How to Import Complete Site with Starter Templates?How to Import Single Page Starter Templates?

What Is a Child Theme and How To Install It for Astra?

What Is a Child Theme and How To Install It for Astra?

What Does Child Theme Mean?

A child theme is the exact replica of the parent theme that en-queues all functionalities and styles from the parent theme. The main use of the child theme is to allow customization in the theme files. Any changes you make on the theme files directly will be erased when you update the theme.

That is why we recommend using a child theme when you need to override any theme templates or add code for custom functionality. When you use the child theme, any theme customizations you make there will not be affected by the theme updates.

How To Install Astra Child Theme?

With Astra, you will get a ready-to-use child theme, so there is no need to create it yourself. To download and install your Child Theme, all you need to do is visit Child Theme Generator follow these steps:

Step 1 – Enter the name you wish to give your child the theme;

Step 2 – If you want to add your own branding, click on advanced options and where you can edit the Theme name, version, author, author URL, description, folder name, and screenshot;

Step 3 – Once done, click on Generate. The child theme you just generated gets downloaded on your computer as a .zip file.

Let』s Install Your Astra Child Theme Now:

Step 1 – Now that you have your child』s theme file, log in to your website Dashboard and navigate to Appearance > Themes > Add New;

Step 2 – Click on the 「Upload Theme」 (located on the top of the page), choose the .zip file of your child theme, and click on the 「Install Now」 button;

Step 3 – Activate the Child Theme. Keep in mind that though the Child Theme is the active theme, it can』t work without its parent theme – Astra. Thus, you need to have both themes (Astra theme and your Child theme) installed.

Feel free to copy any necessary Astra theme files in this child theme and customize them as you need, as not all of these will automatically be transferred to the Child Theme (for example, Additional CSS you might have added to your parent theme).

Here is a nice video made by Davinder on Learn @ BasicWP that explains the steps in detail.

Some Pro Tips:

If you would like to learn more about the child themes in general, check this nice article on Smashing Magazine.To load unminified files of the Astra theme, use SCRIPT_DEBUG Constant.

Related Links:

How to add custom code to child theme』s functions.php?How to edit style.css in a child theme?

Toggle Button for Desktop – Header Builder Element

Toggle Button for Desktop – Header Builder Element

The toggle button is an attractive way to display content like menu, button, search, etc. in the header on the desktop view. It is specially designed for desktop screens and it works similar to the mobile hamburger button.

When a user clicks on the toggle button, it brings an off-canvas window on the screen with all content you added inside.

As it needs a small space in the header, this is a great way to display content in the header.

This beneficial Header Builder element is a premium Astra feature and available since Astra Pro version 3.3. Before this version, you were required to use custom code to bring a toggle button on the desktop. But not anymore!

Now you can easily display off-canvas content on desktop and customize it completely with the new Toggle Button element.

Here is a video that explains how to use this element:

If you prefer a written version, let us dive in!

How To Add Toggle Button for Desktop

As this is a premium feature, make sure to have the Astra Pro plugin updated and activated. Follow the below steps:

Step 1: Open Header Builder and click on a section where you wish to add a toggle button. From the element list, choose Toggle Button.

Step 2: Now you can choose content i.e. elements to display inside a window that appears when users click on the toggle button.

You will observe the off-canvas section in the header builder as soon as you add the toggle button.

Click on the off-canvas section and a list of elements will open up.

Choose the required elements from this list and they will be automatically added to the off-canvas section. You can add various elements such as buttons, search, widgets, HTML, social icons, the off-canvas menu, and so on.

To customize these elements simply click on them and all customization options will open up in the customizer.

Note:

To add a menu inside the off-canvas section, use the Off-Canvas Menu element from the list. The primary and Secondary Menu will not work inside the off-canvas section.

By default, the off-canvas menu will display all pages on your website just like the default WordPress menu. You would need to create a dedicated off-canvas menu or assign any existing menu as an off-canvas menu.

If you are not sure how to create and assign off-canvas menu, here are the steps –

Click on the Off-Canvas Menu In the customizer, click on 『Configure Menu from Here』From the 『Off-Canvas Menu』 dropdown, select the required menu. If the required menu is not in the list you can even 『Create New Menu』 and assign it as off-canvas.

Step 3: Once you add all required content inside the off-canvas section, you can design the toggle button as per your choice.

To customize the toggle button, click on the button in the header builder and all design options will promptly open in the customizer.

Once there, you can set the following:

Icons – Choose from three different designsToggle Button Style – Choose from three pre-built styles for button Menu Label – You can add a label for the menu button here.

Click on the Design tab to set the size, color, margin for the toggle button.

Step 4: You can customize the off-canvas window and set the layout and colors for it. To do so, click on the gear icon for Off-Canvas, and the options will open up in the customizer.

Under the General tab you can set the type, and position alignment, while under Design tab you can set the colors and spacing.

Note:

If you switch to tablet or mobile devices in the customizer, you will observe an off-canvas section. Note that the off-canvas section with the toggle button on a desktop, on a tablet device, or on mobile devices works separately. This allows you to design different toggle menus on different devices. Off-canvas from desktop will not be automatically inherited on a tablet or mobile devices and vice-versa.

Font Selection

Font Selection

Typography is probably the most important aspect of a well designed, UX focused website. So Astra offers various typography controls and options for fonts. In this article, let』s see what are the options for fonts in Astra.

System Fonts

Typography options in the customizer.

Astra, out of the box uses System Fonts. As System fonts are installed and available on user』s computers, they don』t rely on third-party services and load fast.

Depending on the user』s device and operating system, the theme loads one of the fonts from the list below. For this, in cutsomizer 「Inherit」 option should be selected.

Apple System, Blink Mac SystemFont, Segoe UI, Roboto, Oxygen Sans, Ubuntu, Cantarell, Helvetica Neue, Sans Serif

Whereas it also offers the option of the System fonts below:

Halvetica, Verdana, Arial, Times, Gorgia, Courier

Google Fonts

Google Fonts is the largest directory of free and open source web fonts. At the time of writing this article, it offers 848 font families; and Astra has all of them built-in.

Before releasing each update of Astra, our build process automatically checks all Google Fonts and lists them in Customizer options. If there is a Google Font that you can』t find in the options, probably the font is very new and it will be included with the next update of the Astra theme.

Typekit Fonts

Typekit is another directory that offers free as well as premium fonts. To use a font from Typekit with Astra theme, we have built a free plugin called 「Custom Typekit Fonts「. Once installed, just enter your unique Kit ID; and it will automatically list all the fonts from your Typekit account to theme customizer options for you to select. No code required!

Custom Font Files

If you have a custom font file that you would like to use for your website, you can use our free 「Custom Fonts」 plugin. After installing it, you can upload your font file from the WordPress backend and see it available in the Customizer options. Again, no code required! You can check our article on how to use the Custom Fonts plugin and follow simple step-by-step instructions.

After all, fonts do matter, right?