Get a quote

Elementor Website Building Guide

Table of Contents

Getting Started

Getting Started

Setting Up Your WordPress Site

Designing with Elementor

Building Your Pages

Making Your Website Ready for the World

Keeping Your Website Healthy

Adding Content (Text, Images, Buttons)

Now that you understand how layouts are structured with Sections, Columns, and Containers, it’s time to add real content to your page. The most common elements you’ll use are Headings, Text, Images, and Buttons. Let’s walk through how to add and style them.

Step 1: Add a Heading

  1. In the Elementor editor, click the + or add a Container to your page.
  2. From the sidebar, drag the Heading widget into the container/column.
  3. Type directly on the canvas (thanks to inline editing) or use the sidebar to enter your text.
  4. Customise it:
    • Content tab → Change the text and alignment.
    • Style tab → Adjust font, size, colour, and spacing.
    • Advanced tab → Add margins, padding, or CSS classes.

 

👉 Tip: Use headings for page titles and section headings, and regular text for paragraphs. This improves both design and SEO.

Step 2: Add Text

  1. Drag the Text Editor widget from the sidebar.
  2. Type your content directly on the page.
  3. Use the formatting tools (bold, italic, links, bullet points).
  4. Style the text under the Style tab to match your site’s fonts and colours.

👉 Tip: Keep paragraphs short for readability. Use lists and spacing to break up text-heavy sections.

Step 3: Add an Image

  1. Drag the Image widget into your container/column.
  2. Click the placeholder and upload or select an image from the Media Library.
  3. Adjust settings in the Content tab:
    • Choose size (Thumbnail, Medium, Full, Custom).
    • Set alignment (left, centre, right).
    • Add a link if needed (to another page, file, or external URL).
  4. Style the image in the Style tab:
    • Adjust width, height, opacity.
    • Add borders or box shadows.
    • Round corners for softer looks.

👉 Tip: Always add Alt Text when uploading images. It helps with accessibility and SEO.

Step 4: Add a Button

  1. Drag the Button widget to your layout.
  2. Edit the button text in the Content tab (e.g., “Learn More” or “Contact Us”).
  3. Add the link URL where the button should go.
  4. Style it in the Style tab:
    • Set background colour, text colour, and typography.
    • Adjust padding for button size.
    • Add hover effects (e.g., colour change when hovered).

👉 Tip: Use consistent button styles across your site to guide visitors. Consider one primary button style (for actions like “Book Now”) and one secondary style (for less urgent actions).

Step 5: Arrange Your Content

  • Drag and drop widgets to reorder them within a container.
  • Duplicate widgets if you need repeated styles (e.g., multiple buttons).
  • Nest content inside Containers to create layouts like “image left, text right.”

Quick Recap

  • Heading widget → For titles and section headers.
  • Text widget → For paragraphs and body content.
  • Image widget → For visuals that support your message.
  • Button widget → For calls-to-action.

These elements form the core of most web pages.

Next Tutorial

With text, images, and buttons in place, it’s time to learn how to Style Your Content. In the next tutorial, we’ll cover typography, colours, spacing, and how to keep your design consistent using global styles in Elementor.