Step 1: Create a Page Called “Dev”
From your WordPress Dashboard, go to Pages > Add New.
Title the page Dev (this will be your practice area).
On the right-hand panel under Page Attributes or Template, select Elementor Canvas (optional but helpful for full control).
Click Publish (twice to confirm).
Once published, click the big blue Edit with Elementor button.
Step 2: Get Familiar with the Elementor Interface
Once inside Elementor, here’s what you’ll see:
Left Panel: This is where you drag and drop widgets, and customize settings for each element.
Canvas Area (right side): This is your live preview where you build your page in real time.
Structure (right click, bottom option): Opens a tree view of all your elements (helpful as your design grows).
Responsive Mode: Use the monitor/tablet/phone icons to preview your design on different devices.
Step 3: Add Your First Container
Elementor now uses Containers instead of traditional Sections & Columns (though they still work). Containers are more flexible and powerful for designing responsive layouts.
Click the “+” icon to add a new Container.
Choose a layout type. Start with one column, or select a two-column row layout.
Once inserted, click the Container handle (blue border or six dots in the top center) to edit it.
Step 4: Container Layout Options
Click the Container > Layout tab (under the “Layout” section in the left panel). Here’s what you’ll find:
Direction (Layout Orientation):
-
Row (Horizontal): Widgets line up side-by-side.
-
Column (Vertical): Widgets stack on top of each other.
Try switching between them to see how the layout changes!
Content Alignment:
-
Justify Content: Controls horizontal alignment (left, center, right, space-between, etc.)
-
Align Items: Controls vertical alignment inside the container (top, center, bottom, stretch)
Example: Use “Center” for both if you want all your content centered in the middle of the screen.
Gap Between Elements:
This controls the space between widgets inside the container (horizontal or vertical based on the layout direction).
You can increase/decrease spacing with a simple slider.
Step 5: Add Some Widgets to Your Container
Drag a Heading, Text, and Button into your container.
Try rearranging the layout direction (row vs column).
Adjust content alignment to center everything or spread it out.
Use Gap Between to give breathing room between elements.
Step 6: Use the Advanced Tab (Margins, Padding, Effects)
Click the Advanced tab on any widget or section to control spacing and extra features:
Margin: Adds space outside the element
Padding: Adds space inside the element
Try unlinking the values (click the chain icon) so you can add custom spacing to just the top, bottom, or sides.
Also in the Advanced tab:
Motion Effects: Add entrance animations like fade in, slide in, etc.
Background (for sections): Set background colors, gradients, or images for a whole section.
Border & Radius: Add outlines and shape styling.
Responsive: Hide/show certain elements depending on device size.
Practice:
Add 30px padding to your button.
Add 100px top margin to your heading.
Add a background color to the section itself (click the section handle and go to Style > Background).
Step 7: Save Your Work
Click the arrow next to the Publish button and choose Save as Draft (or hit Publish if you’re ready).
Your Dev page will now be a sandbox you can revisit any time to test new ideas and designs.
Homework & Action Items
- Spend 15–20 minutes experimenting with each widget.
- Try creating a layout with a heading, subheading, button, and image—all with consistent styling.
- In the next lesson, we’ll start building out your Brand Kit, so make sure to have your logo and colors hand (and if you don’t, you can update those later).