In this video, we discuss how to edit the Astra theme to look like the demo sites. The step-by-step documentation is included below.  If I don’t mention a specific setting, I left it on the default.

If you need the color codes & fonts, make sure you downloaded the PDF with your purchase. The downloads should also be included in your receipt email.

Customizing your theme:

  1. Download the free version of Astra here or purchase the Pro version here.
  2. Go to your WordPress Dashboard and choose the themes under the appearance tab.
  3. Click “add new” and add the Astra theme from the folder you saved it in.
  4. Choose “customize” from the theme options.

Edits by Tab:

Global tab

  1. Typography-
    Base Typography- choose the font Montserrat, size 18, then weight normal 400.
    Headings- Font Lora, Weight 400. Make sure you change each font family to Lora.
  2. Colors- Text, Theme color & Headings are usually the darkest color. Links are a bright color and link hover is a medium color. Make sure you change the background color to #FFFFFF White so you don’t have a background color that’s different than the white.
  3. Container- 1200 wide.
  4. Buttons- Change the color and don’t forget to choose a hover color. Update the button text to Montserrat, size 14, weight 400, text transform uppercase.

HEADER

  1. Site Identity-
    Add your logo.
    Add the transparent version of your logo or icon in the site icon area. 
    Choose 150 for the logo width if you like your logo to the side. If you like your logo centered, try 200.
    Add your site title and tagline.
  2. Primary Header-
    Choose your header layout.
    Choose your mobile header layout.
  3. Primary Menu- Choose the search function. If you’re using WooCommerce you can choose the cart after you download the plugin.

BLOG

  1. Blog Archive- We’re using a customized page, so this can be left alone.
  2. Single Post- Choose the things you’d like to show on each post. This is completely a personal choice, so there’s no wrong way to do it.

Sidebar

  1. Customize this section by choosing where you want the sidebar to show up.

Footer

  1. You shouldn’t have to do anything here. If you want to add footer widgets, choose footer widgets and click the picture that shows the layout.

Menus

  1. Choose view locations to set the main menu and the footer menu. You can only choose them if you have already set them up.

Widgets

  1. After you choose your posts page, edit the sidebar widgets in the WordPress dashboard. Go to Appearance then Widgets. You can then drag and drop the sidebar and footer widgets in the proper sections. (See the demo sidebar widgets below.)
  2. Download Simple Social Icons for the social buttons in the demo sidebar.

Homepage Settings

  1. Choose static homepage. If you haven’t uploaded the home template yet, you can add a page and drop the template on the that page when you’re ready.
  2. Add a page for posts named posts so you can use “blog” as the blog archive template page.

Sidebar Details

  1. Image
  2. Text with Title
  3. Simple Social Icons- make sure you choose your colors and add links. 
  4.  Categories with Title
  5. Search
  6. Image with Title
  7. Recent Posts with Title
  8. Image with Title

Congrats! You did it!