Phase Two : Design & Editing
← Back to Phase One

Time to design your pages, logo & menu!

Your website is already alive, but right now it's basically an empty flat β€” four walls, no furniture. Let's fix that, one simple step at a time.

What's inside 🎨

Tap any card to jump straight there.
🧭 Stop 1

The Elementor screen

Elementor has three main parts. Spot them once, and honestly, the rest is just practice.

🧰 Left panel

Your pencil box, basically. It holds every widget, plus settings for whatever you've clicked on.

πŸ–₯️ Middle canvas

Your live page. What you see here is almost exactly what a visitor scrolling on their phone will see.

⬇️ Bottom bar

Undo, a screen-size preview, and the big Publish button all sit here.

🧠 The big idea

A page is made of sections. Each section has columns. Each column holds widgets. Think of your school building: sections are the floors, columns are the classrooms on each floor, and widgets are the desks and blackboard sitting inside.

🧩 Stop 2

Widgets, made simple

A widget is just one piece of content β€” a heading, a photo, a button. That's genuinely it. Every fancy website you've ever seen is just widgets, arranged nicely.

πŸ”€
Heading
Big bold text for titles.
The nameboard outside a shop.
πŸ“
Text Editor
A block of regular paragraph text.
A page from your notes.
πŸ–ΌοΈ
Image
Puts one picture on your page.
A framed photo hung on the wall.
πŸ”˜
Button
A clickable shape that takes visitors somewhere.
Like the "Order Now" button on Swiggy β€” one tap, and something happens.
🎬
Video
Adds a YouTube or Vimeo video to your page.
A YouTube video embedded right there, no new tab needed.
➑️
Icon
A small symbol, like an arrow or a heart.
A tiny signboard pointing the way.
🍽️
Icon Box
An icon, heading, and text all together β€” great for showing off features.
One item on a Swiggy restaurant menu β€” icon, name, description together.
πŸ›οΈ
Image Box
A picture, heading, and text together β€” perfect for products.
A product card on Amazon or Flipkart.
πŸ“·
Basic Gallery
Shows lots of photos together in a grid.
Scrolling your phone gallery after a college trip.
πŸ—‚οΈ
Tabs
Click a label to switch between sections of content.
The subject dividers in your ring binder.
πŸͺ—
Accordion
Click a question to open its answer below. Great for FAQs.
Tapping an FAQ open on the IRCTC app.
πŸ’¬
Testimonial
A nice quote from someone, with their name and photo.
A five-star Google review, screenshotted and framed.
πŸ”—
Social Icons
Small clickable icons linking to your social media.
That row of app icons for Instagram, WhatsApp, and LinkedIn on your phone's home screen.
πŸ“
Google Maps
Adds an interactive map β€” great for showing your location.
Sharing your live location on WhatsApp, but permanently pinned on your site.
βž–
Spacer & Divider
Spacer adds empty space. Divider draws a thin line.
The margin, and the ruled line, in a school notebook.
πŸ“Š
Progress Bar / Counter
Shows a skill as a filling bar, or counts up to a number, like "500+ clients."
A cricket scoreboard ticking up, or a video buffering bar filling in.
πŸ’‘
Don't stress about memorizing this list! Just hover over any widget in the panel, and its name pops right up. You'll know all of these by heart within a week of actually using them.
πŸ—οΈ Stop 3

Building a page from scratch

Enough theory β€” let's actually put these pieces together and build one real page, start to finish.

1

Create the page

Go to Pages β†’ Add New. Give it a name, like "About Us."

2

Edit with Elementor

Click the "Edit with Elementor" button at the top of the page.

3

Add your first section

Click the grey "+" on the blank page, and pick how many columns you want.

4

Drag in a widget

Grab "Heading" from the left panel, drop it in, and type your title.

5

Style it

With your widget selected, use the Style tab to change its colour, size, and spacing.

6

Keep adding sections

Add a new section for each part of your page β€” an intro, a gallery, a closing message.

7

Check every screen size

Use the little screen icons at the bottom to check desktop, tablet, and mobile views.

🚦 Stop 4

Publishing your page

A page you've built stays your own private draft, invisible to everyone, until you tell WordPress it's ready to go public.

1

Preview first

Click the eye icon to see your page like a real visitor would.

2

Click Publish

The green button in the bottom-left corner. Already published? It just says "Update."

3

Visit your live page

Click "View Page" to see your real, public website.

πŸ”
Relax, nothing is ever final! Come back anytime, click "Edit with Elementor," fix whatever's bugging you, and hit "Update." Even the big brands tweak their sites every day.
πŸ–‡οΈ Stop 7

Building a header & footer

The header and footer show up on every single page automatically β€” build them once, like decorating the entrance and the last shelf of a shop, and you're done everywhere.

Header
1

Open the Header Builder

In the Customizer, Astra has a special "Header Builder" section.

2

Add your pieces

Drag your logo, menu, and a button into place.

3

Style it

Change the colour, height, and decide if it should stay "sticky" while scrolling.

Footer
1

Open the Footer Builder

Right next to the header builder, in the same Customizer.

2

Add your content

A copyright line, social icons, or a short address all work great.

3

Split into columns

Spread things out across two or three columns so it doesn't feel crowded.

4

Publish

Click "Publish" once it looks right.

🌟
Looking ahead: Elementor Pro has an even fancier header/footer builder. But honestly, Astra's built-in tool is more than enough to make your site look sharp for now.