Back to top
Search

WordPress 04 – Creating and Editing Pages with Elementor

Create a New Page

  • Log in to your WordPress dashboard.
  • Go to “Pages” → “Add New”.
  • Enter a title for your page (e.g., “Home,” “About Us,” “Services,” etc.).

Access Elementor Editor

Click the “Edit with Elementor” button to launch the Elementor editor.

Understanding the Elementor Editor Interface

  • Canvas Area: This is where you design your page. It’s divided into sections and columns.
  • Elements Panel: On the left sidebar, you’ll find the “Widgets” tab. Here, you can drag and drop elements (widgets) onto your page.
  • Settings Panel: The left sidebar also contains settings for the selected element. You can customize content, style, and more here.
  • Preview Button: Use this button to see how your page looks on different devices (desktop, tablet, mobile).
  • Publish Buttons: Save your changes or update the published page with the green checkmark button.
  • Undo/Redo and History: Buttons at the bottom allow you to undo and redo actions, and you can access the revision history.

Adding Sections and Columns

  • Drag and drop a “Section” widget onto the canvas.
  • Inside the section, you can add “Columns” using the “Column” widget.
  • Sections and columns help structure your content.

Adding Elements (Widgets)

  • In the “Widgets” panel, drag and drop elements into your columns.
  • Elements can include text, images, videos, buttons, forms, and more.
  • Customize each element’s content and style in the settings panel.

Editing and Styling Elements

  • Select an element on the canvas to access its settings in the left sidebar.
  • Modify the element’s text, images, links, colors, typography, and more.
  • Some elements might have advanced settings like animations, borders, and spacing.

Global vs. Element Settings

  • Elementor offers both global settings (apply to the entire page) and specific element settings.
  • Global settings include background colors, fonts, and spacing for the whole page.
  • Element settings allow you to customize individual elements.

Templates and Library

  • Access pre-designed templates by clicking the folder icon at the bottom of the elements panel.
  • Browse through various templates and insert them into your page.
  • Customize templates to match your content and branding.

Preview and Responsive Design

  • Use the preview button to see how your page looks on different devices.
  • Ensure your design is responsive and looks great on all screen sizes.

Save and Publish

  • Click the green checkmark to save your changes within Elementor.
  • To publish the page, click the “Update” button in the WordPress editor.

Exit Elementor

After publishing, you can exit Elementor and view your live page by clicking the “Back to Editor” button.

Remember, Elementor empowers you to design beautiful and functional pages without coding. Experiment with different elements, layouts, and styles to create a visually appealing and engaging website.

LEARN WORDPRESS + ELEMENTOR WITH EXNIHILOO

FREE DOWNLOAD

Send download link to:

Share:
d
Follow us