Home Website TutorialsWordPress Building a News Website with Astra Theme

Building a News Website with Astra Theme

by Thạch Phạm
Published: Last Updated on

After learning through PART 1: REGISTRATION OF DOMAIN/HOSTING – OVERVIEW OF WORDPRESS. Next, let’s start building your first website with Astra Theme.

Astra is a free WordPress theme developed in 2017 by Brainstorm Force. Astra brings the perfect theme for building blogs, landing pages, e-learning websites with the advantage of being compatible with many other plugins. Some of the advantages of Astra Theme are:

  • Fast loading speed
  • Compatible with Elementor and many more plugins
  • Simple customization suitable for blogging needs
  • The pre-built website templates are incredibly diverse…


Performed Part 1 and Part 2

I. Install Themes, Plugins and Astra Theme components

1. Install Astra Theme

Currently, AZDIGI is giving away a full set of Astra Themes, you can see the demo themes here. In this article, I will guide you on Astra Theme. This Astra theme will require and install 2 files, including:

To install the Astra theme, first, login to the admin page => go to Appearance => Theme. Here, you will see all the themes you have installed on your site. To add another theme, click Add New.

CleanShot 2022 04 04 at 18.53.48

Next, click Upload Theme => Select the downloaded Theme file to your computer => Install Now.

CleanShot 2022 04 04 at 18.58.11

After the installation is complete, select Appearance => Theme then select Astra Child and activate this theme.

CleanShot 2022 04 04 at 19.00.30

2. Install the required Theme Plugin

Astra will ask to install the following 2 plugin themes to install addons and themes: You can click on the attached link to download it directly.

  1. Astra addon plugin (click to download)
  2. Astra premium sites (click to download)
CleanShot 2022 04 04 at 19.12.21

After the installation is complete, click Activate to activate these 2 plugins.

CleanShot 2022 04 04 at 19.18.54

3. Activate the Astra license

With just the above steps, you can deploy your website with Astra. However, the free interface store will limit many useful interfaces and features. However, the free interface store will limit many useful interfaces and features. you can send a support request to the Technical Team to activate the license.

4. Choose Theme and import demo

To find and select a template, select Appearance => Starter Templates, you will see many Page Builders and I will select Elementor as the Builder.

CleanShot 2022 04 04 at 19.24.02

Once selected, you will see all the Page Builder Elementor templates. To use, please click on that template.

CleanShot 2022 04 04 at 20.13.06

Once you have access to the template, you can view the Page Templates section and select the display template you want to use, or if you want to preview it, select Preview Site. Then select Import Complete Site to import the template data.

CleanShot 2022 04 04 at 20.14.19

In the template, there will be imported components, including:

  • Import Customizer Settings
  • Import Widgets
  • Install Required Plugins
  • Import Content

Then you click Import to start the process.

CleanShot 2022 04 04 at 20.17.01

Importing data can take 5-10 minutes, you should not close your browser and the window you are importing until it is complete.

CleanShot 2022 04 04 at 20.19.43

If you get the message Imported Successfully!, the import was successful. You can now access the web to check.

CleanShot 2022 04 04 at 20.21.55
CleanShot 2022 04 04 at 20.22.58

II. Set up theme options and customizer in Astra

1. Astra Options

In the Astra Options section, you will find some special features of the theme:

Links to Customizer Settings:

  • Header Builder
  • Footer Builder
  • Layout Options
  • Blog Layouts
CleanShot 2022 04 06 at 21.02.05

Available Astra Pro Modules:

This page will install some of the available modules and is only for the PRO version.

CleanShot 2022 04 06 at 21.04.12

Extend Astra with free plugins!

This section will serve to install some free Plugins to use.

anh 2

2. Customizer in Astra

This is an important part because it will help you fix the entire template and information of this Astra theme template. To Customize, you access

Appearance => Customize.

anh 3

The Customize section will include the following items: And I will go into each part.

CleanShot 2022 04 06 at 21.19.03

1. Global

CleanShot 2022 04 06 at 21.27.00
  • Typography: Change font style, font size
  • Colors: Allows you to change the color of the website
  • Container: Allows you to modify the layout of Page and Post
  • Buttons: Allows you to modify the buttons in your website to different formats.

2. Header Builder

The Header Builder feature helps you edit the Header section. There are 2 parts, GENERAL and DESIGN, which help you to edit almost the entire upper part of the web.

  • Site Title & Logo
  • Search
  • Off-Canvas Menu
  • Button
  • Primary Menu

To use, you just need to click on the above features and the customize interface will appear .

CleanShot 2022 04 06 at 21.30.10

3. Breadcrumb

Breadcrumbs are a set of links that help users locate their current position in the site structure. In Breadcrumb, there are 3 main parts:

  • Header Position
  • Separator
  • Alignment
CleanShot 2022 04 06 at 21.57.11

4. Blog

In this function, you can edit and change the blog and specifically the format of a post. When modified, all your posts will be applied according to the structure you customized.

  • Blog/Archive
    • Content Width
    • Post Structure
    • Post Content
  • Single Post
    • Content Width
    • Structure
    • Title
    • Total Number of Related Posts
    • Grid Column Layout
    • Posts Query
    • Posts Structure
    • Meta

5. Sidebar


The sidebar is where users can add arbitrary content: new posts, calendars, searches, etc. Sidebar is used very flexibly, you can use the sidebar in the header, footer, page vertical bar…

In this Astra theme, there are not many available Sidebars. However, you can add using Elementor.

CleanShot 2022 04 06 at 22.10.21

6. Footer Builder

Similar to the Header Builder built on top of the website. Footer Builder builds the bottom, footer of the website.

CleanShot 2022 04 06 at 22.12.02

In the footer of the website, there are many areas with pre-made Widgets. You can edit these Widgets directly or add new Widgets to build a more beautiful footer.

To edit, hover your mouse over the Widgets and select General or Design.

CleanShot 2022 04 06 at 22.12.32

7. Performance

Performance is the developer’s built-in automatic performance optimization feature. In the Astra theme, the developer only has 2 main features available:

  • Load Google Fonts Locally
  • Preload Local Fonts
CleanShot 2022 04 06 at 22.14.31

8. Site Identity

The Site Identity section links to the Header Builder quite a bit. Because here, you can customize Site Title & Logo Settings and Site Icon aka Favicon.

CleanShot 2022 04 06 at 22.18.13

9. Menu

In addition to customizing the menu in Appearance => Menus, you can also customize the menu directly here. To add a new menu, click Add Items.

anh 4

10. Widgets

Widget WordPress (referred to as Widget) is a system of WordPress tools that allows you to add new content, shape the list of posts. Thereby displaying the latest posts on the bars for visitors to search and track the posts easily.

CleanShot 2022 04 06 at 22.21.36

Astra theme has built-in 10 Widgets with different positions and you can add multiple blocks in each Widget.

For each block, you can use it as a post editor.

CleanShot 2022 04 06 at 22.23.33

11. Homepage Settings

Homepage Settings – you will rarely use this section because you already use the Elementor to build. The important part here is choosing what your homepage will show. And the default in Homepage Settings will take the Page name is Home for display.

CleanShot 2022 04 06 at 22.24.15

12. Additional CSS

Additional CSS Most website builders often work with this part. Instead of having to edit the CSS code directly in the theme, which will affect the theme and cause unexpected errors, you can edit the CSS in this section.

CleanShot 2022 04 06 at 22.26.46

III. Elementor Tool

Overview and interface editing operations in Elementor. To edit the interface with the Elementor tool, do the following:

First, you need to determine the interface to fix and the page that belongs to that interface. For example, I will edit the homepage interface, there are 2 ways for you to enter and edit the homepage interface.

  • Method 1: Go to Pages => All Page=> Select the page to edit => click Edit with Elementor
CleanShot 2022 04 06 at 20.29.50
  • Method 2: Access the homepage of the website, On Toolbar , select Edit with Elementor
CleanShot 2022 04 06 at 20.31.43

After accessing, you will see the following functions:

  • BASIC: Basic functions
  • PRO: Advanced functions
  • SITE
CleanShot 2022 04 06 at 20.36.12

Like other page builders, Elementor’s dashboard is a collection of elements and tools for page creation. Elementor’s working interface is stable and intuitive. In particular, they do not take up much space on the editing screen, which is very useful if your computer screen is not large.

Elementor will work based on 4 page layout structure elements as follows:

  • Section: This is a working area on the page, each page will have many sections
  • Inner Section: Each section will be able to add multiple inner sections (but not required)
  • Columns: Columns are in a section or inner section, each section or inner section will have many columns
  • Element: In each column, there are many elements, each element can be an image, text, icon, video, etc.

When using Elementor, all operations you use are drag/drop. For example, if you want to add Maps to your homepage, find Google Maps in the menu bar, then hold down your mouse and drag it to the location you want to display and drop it.

CleanShot 2022 04 06 at 20.50.18

After dragging/dropping, you will see the interface with Section appears. In these sections, there will be 3 parts for you to manipulate:

  • Add Section: Add another Section
  • Edit Section: Edit the current Section
  • Delete Section: Delete the current Section
CleanShot 2022 04 06 at 20.51.58

In these sections, there will be 3 items:

  • Content: Used to edit the content of that section
  • Style: Used to edit the interface, color, font
  • Advanced: Advanced customization, allows custom CSS
CleanShot 2022 04 06 at 20.55.34

In addition, the corner below has some other features, such as:

  1. Cài đặt: general post options like title, background style, layout, etc.
  2. Nagivator: layered post manager, you can manage element position by drag and drop here.
  3. History: your edits and layouts will be saved, you can undo any mistakes.
  4. Responsive mode: previews of posts across devices, including computers, tablets, and mobile devices.
  5. You can edit the post appearance to suit each device separately without affecting other devices.
  6. Preview icon: Preview the post before publishing.
  7. Publish: publish a post (post, page).
CleanShot 2022 04 06 at 20.57.39

After updating the changes, you can revisit the website to check.

CleanShot 2022 04 07 at 09.59.23@2x

III. Summary

Hopefully, through this article, you will confidently deploy a beautiful website for your company or your own. Wish you success!

If you need assistance, you can contact support in the ways below:

5/5 - (1 vote)

Tham gia nhóm hỗ trợ Server - Hosting

Tham gia nhóm Hỗ trợ Server - Hosting & WordPress để cùng nhau hỏi đáp và hỗ trợ các vấn đề về WordPress, tối ưu máy chủ/server.

Tham gia ngay

Bài viết cùng chuyên mục

AZDIGI – Không chỉ là đơn vị hàng đầu trong lĩnh vực Web Hosting và Máy chủ, chúng tôi mong muốn mang lại những kiến thức bổ ích nhất và luôn cập nhật thường xuyên cho cộng đồng người đam mê thiết kế website, công nghệ,…

Vui lòng không sao chép nội dung nếu chưa xin phép. Designed and Developed by PenciDesign