How to Replicate the Astra Screenshot? – New Screenshot Draft

Astra Theme Screenshot on WordPress.org

When you view the Astra theme on WordPress.org you see a nice screenshot for the theme like above. You can replicate this screenshot easily with few steps. This article explains this process in detail.

Install Required Plugins

Before proceeding with plugins installation, make sure you have Astra theme activated ( Appearance > Themes ).

Go to the Plugins > Add New, search for following free plugins and install them

  1. Gutenberg Blocks – Ultimate Addons for Gutenberg
  2. Astra Widgets

Replicate the Screenshot

To get started, create a new page and set it as a Homepage. To set a page as a Homepage, go to Settings > Reading > A static page > Homepage – select a newly created page from the drop-down.

Now, you can design screenshot in two sections –

  • Header
  • Page content

Design Header

This section contains the logo, navigation menu and Twitter icon at the end of the menu.

Step 1 – From the WordPress dashboard,  navigate to Appearance > Customize > Header > Site Identity
Step 2 – Upload a logo and adjust its width.

Add Navigation Menu

Create a menu and assign it as a Primary Menu. A setting can be found under Menus tab in the customizer.

Add Twitter Icon

This is social share icon that can be added using Astra Widgets plugin.

Step 1 – In the customizer navigate to Header > Primary Menu > Last Item in Menu and select Widget.
Step 2 – Navigate to the main screen in the customizer and go to Widgets > Header > Add Widget > Astra: Social Profiles
Step 3 – Select the Twitter icon and style it

Note: The nice gradient background image you see for the header can be enabled from a transparent header. You can enable it once you are done designing the first section of the page.

Add Page Content

There are two sections on the page. Edit the page with Gutenberg editor and start building these sections.

Design First Row (Build Your Dream!)

Step 1 – Add Advanced Columns block offered by Ultimate Addons for Gutenberg plugin. [Make sure it is activated from Dashboard > Settings > UAG]
Step 2 – Edit the outer column and set background image with bottom shape divider.

Step 3 – In inner left columns add Info Box and put a text with CTA button.
Step 4 – Put an image in the right column.

Design Second Row

Step 1 – Add Advanced Columns block and set columns to 3

Step 2 – In each column add Info Box and set icon, title, and description.

Enable Transparent Header – Under the Document tab, enable the Transparent Header from Astra Settings. See How Transparent Header Works?

Not the solution you are looking for? Check other articles, or open a support ticket.