Build Your Website Structure with Astra Theme Astra Theme
Learn how to configure the Header, Footer, Logo, Layout, Typography, and Responsive settings
What is Astra Theme used for?
Think of Astra as the site-wide structure, while Elementor is used to design content within each page.
Website Structure
Control the site-wide Header, Footer, Container, Sidebar, and Layout.
Global Design
Set the primary colors, fonts, headings, and foundational elements so the entire site follows one standard.
Responsive
Adjust the Header, Menu, Logo, and other elements for Desktop and Mobile.
Set Up Astra in This Order
You do not need to adjust every Customizer option. Start with the settings that affect the entire site first.
Set the Logo and Site Icon
Add the primary site logo, Retina logo, and Favicon before creating the Header →
Set Fonts and Primary Colors
Set Typography and the Color Palette before designing pages, so you do not have to repeat color and font changes in each section →
Create the Header
Place the Logo, Primary Menu, Search, and CTA button, then check Tablet and Mobile layouts →
Create the Footer
Organize Widgets, Navigation, Contact, and Copyright into an easy-to-read structure →
Set the Container and Page Layout
Set the Content Width, Full Width, Sidebar, and Page Title to suit the website →
Check Every Device
Check the Logo, Menu, Header Height, Footer, and Layout on every device →
Key Parts of the Astra Customizer
Select a topic to see what each section is used to configure.
Header Builder
Used to build the top section of the website and the primary navigation shown on every page.
Footer Builder
Used to organize information at the bottom of the website, such as Branding, Navigation, and Contact.
Page Layout
Set the content width, Sidebar, and the area available for Elementor to design.
Mobile Experience
Astra has many settings that can be separated for Desktop, Tablet, and Mobile.
Set Global Styles Before Designing Pages
Setting Global Styles first helps every page follow the same standard and reduces design time.
Typography
Set the Body Font, Heading Font, Size, and Line Height.
Global Colors
Set the Primary, Text, Background, and Accent Colors.
Container Width
Set the standard width so the Layout looks consistent.
Button Style
Set the button color, Border Radius, and Typography as one consistent system.
Heading Hierarchy
Define H1–H6 with a clear hierarchy and sizing.
How are Astra and Elementor different?
You can use both together, but their responsibilities should be clearly separated.
Astra
Manages the site-wide structure and elements shared across all pages.
Elementor
Used to design the details and content within each page.
Do not configure Astra only for Desktop
The Header and Footer appear on almost every page. If the Mobile settings are not configured well, the site will be difficult to use.
Check Astra Readiness
Check the items you have completed; the system will calculate Progress automatically.
Complete the site structure before designing pages with Elementor.
Astra Theme FAQ
Astra is Ready — Start Designing with Elementor
Next, learn about Containers, Widgets, Spacing, and Responsive design to build a real website.
Start Learning Elementor →