• Skip to main content
  • Skip to header right navigation
  • Skip to after header navigation
  • Skip to site footer

WP Engine hosting includes Genesis and 35 of the StudioPress themes!

Philip Gledhill

WordPress | Genesis Framework | StudioPress

  • Search
  • Home
  • Genesis Newbie
  • Setup Wizard
  • Genesis Geek
  • Resources
  • Blog
  • Content
  • Beaver Builder
  • CSS
  • WooCommerce
  • WP Tutorial
  • Contact
  • Specific Themes
  • Find it
You are here: Home / Genesis framework / Customization / Elementor Tutorial: a Quick Start Guide

Elementor Tutorial: a Quick Start Guide

This Elementor tutorial is in two formats. Watch the video or scroll down for the text and images.

In this Elementor Tutorial we’ll build a page like this…

Elementor Tutorial a Homepage Example
Elementor Tutorial a Homepage Example

This Elementor tutorial is for WordPress. So I’m assuming you already have a WordPress website, you will also need…

  • Elementor (free version)
  • Fullwidth Page Templates ( free plugin)

Make a new WordPress page

After installing and activating both plugins

  • Go to Dashboard > Pages > Add New
  • Type a title for your new Elementor page
  • In the Page Attributes section find the Template drop down and choose the FW Fullwidth template type.

Save your draft or publish the page.

Make sure the template type is still: FW Fullwidth
It has a habit of jumping back to the default template, so double check.
Add a new page to WordPress
Add a new page to WordPress
In page attributes set the template to FW Fullwidth
In page attributes set the template to FW Fullwidth

Now…

  • Click the big blue Edit With Elementor button.
  • Click the grey Add Template button.
  • Hover over all of the templates looking for the green button that indicates free templates.
  • When you find one you like, carefully click the thumbnail image, not the green insert button.
  • You now see a larger view of your chosen template.
  • If you like this, click the green insert button.
  • If you want to try a different template, click the Back to Library link. (Top right and top left of dialogue box.)
The big blue Edit With Elementor button
The big blue Edit With Elementor button

 

Elementor Add Template button
Elementor Add Template button

 

Click the Elementor Template thumbnail image NOT the insert button
Click the Elementor Template thumbnail image NOT the insert button

Be careful to click the thumbnail image, NOT the insert button. You then see a larger preview of the template. If you like the template click the Insert button.

The Elementor Template preview page
The Elementor Template preview page

 

Click the Green Save button in the Elementor sidebar
Click the Green Save button in the Elementor sidebar

 

Whenever you want to go back to the WordPress Dashboard click the tiny x
Whenever you want to go back to the WordPress Dashboard click the tiny x

Don’t insert an Elementor template until you’ve carefully made up your mind

Take care not to click the green insert button until you’ve made up your mind. Because all images from that template will be added to your media library. If you test several layouts before choosing the one you want to use you can end up with a lot of extra and unused images in your media library, so be careful!

After you click the insert button it takes Elementor a few seconds to build that page design on the page you’re editing.

Click the green save button in the bottom left corner of the screen, under the Elementor tools sidebar.

You now have an exact copy of the Elementor template you chose. But you need to change the text and you’ll also probably want to change some of the images. We’ll do that in the next step of our Elementor tutorial.

To change the Elementor text highlight it first then type your own
To change the Elementor text highlight it first then type your own

Adding your own text, images and icons

To change any text element just highlight that piece of text by TRIPLE clicking or dragging to select it.

Then type your replacement text.

Changing images
Changing images can be confusing at first because there are three commonly used types of images, images in your content, icons in your content and background images.

So you need to know how to edit…

  • Elementor image widgets
  • Elementor icon widgets
  • Elementor Layout Section background images

The easiest way to find the settings for the image or icon you want to change is to carefully click the element in question. Be as accurate as you can, click right on top of the element you want to select.

Then look in the right hand Elementor sidebar.

The red bar at the top of the Elementor sidebar will tell you what you’re editing, it will say for instance, Edit Image or Edit Icon.

Directly below the red bar you’ll see three tabs.

When you select an Elementor element or widget you’ll see: content, style and advanced.

When you select an Elementor page section or a whole page row or a column inside a row you’ll see: layout, style and advanced.

Changing an image in Elementor…

  • Click to select the image.
  • The image will display in the left hand sidebar.
  • Click the image and the media library opens.
  • Select a different image, preferably of the same size.
  • Click the blue insert media button.

Your new image now appears in your web page. Our Elementor tutorial is really starting to take shape.

Replacing an image in Elementor
Replacing an image in Elementor

Changing an icon in Elementor…

  • Find the icon on the page and click to select it.
  • In the left hand column look at the red top bar and make sure it says Edit Icon.
  • Make sure the first tab is selected, it’s the content tab.
  • From the icon drop down list, select a different icon.
  • Experiment with the other settings, view, link and alignment.
  • Click the style tab to change the icon’s size and colour if necessary.
Replace an icon in an Elementor template
Replace an icon in an Elementor template

Changing the background images and colours in our Elementor tutorial.
Some Elementor page templates are made from several rows one above the other.

For instance the top row of a template may have a large headline on top of an image background.

Scroll down the page and the next row may have dark text on a white background.

Scroll down further and you may find, for instance, that the next row has a blue background colour. But there are three white content boxes on top of the blue row. These white content boxes could contain images and text.

To change these row and column background images and colours you need to find and click one of two very specific buttons.

  • Edit Section button
  • Edit Column button

But, be careful. These are very small buttons.

The section button
The section button is a square with a line that goes horizontally from side to side across the middle.

Edit an Elementor Section
Edit an Elementor Section

The column button
The column button is a square with a line that goes vertically from top to bottom of the icon.

To change a background colour or image in Elementor follow these steps…

  • Click the section or column button.
  • Look in the left hand side of the Elementor screen.
  • The red top bar will say Edit Section or Edit Column, depending on whether you’re editing a section, which is a whole row. Or you’re editing a column inside a row.
  • Just under the red bar that says Edit Section or Edit Column, click the Style tab. The Style tab is the second of the three tabs.

If the section or column has a background image, the image will be visible in the sidebar. Click the image to replace it.

If the section or column has a background colour, the colour swatch will be visible in the sidebar. Click the colour swatch to pick a new background colour.

If, when you click the style tab, all of the dialogue boxes are collapsed or closed…

  • Click the Background tab to expand it.
  • In the Background Type section click the paintbrush icon.
  • Then click the image or colour swatch to replace with an image or colour your own choice.

Replacing a background image in Elementor

Replace a background image in Elementor
Replace a background image in Elementor

 

Replace a background color in Eelmentor

Replace a background color in Elementor
Replace a background color in Elementor

When you’ve worked your way through the whole template and changed the text, links images and colours, your new page (based on this Elementor tutorial :-) is ready to be seen by the public.

And don’t forget, if your new page does contain any links, in buttons for instance. Make sure you edit those links and that they work as you need them to work before you show your new page to the world.

Adding a link to an Elementor button. First select the button in your layout, then type in the url.

Add a link to an Elementor button
Add a link to an Elementor button

Make sure you click the green save button in the bottom left Elementor sidebar.
Then click the little X to close Elementor and go back to the dashboard.

Click the green SAVE button then click the tiny X to go back to the dashboard.

Whenever you want to go back to the WordPress Dashboard click the tiny x
Whenever you want to go back to the WordPress Dashboard click the tiny x

That’s it, you’ve completed this Elementor tutorial.
You now have a great looking new web page that you could use as the front page of your WordPress website.

If you do want to set this new page as the homepage, go to…

  • Dashboard > Settings > Reading: Your homepage displays a static page (choose the page you just made.)
Category: CustomizationTag: Advanced tips and third party plugins

About Philip Gledhill

Philip helps small and medium service businesses build and maintain clean, minimalist, professional looking websites. He loves clear, concise, customer focused content, and websites that are easy to navigate. His motto is focus on your customer and keep it simple.

Previous Post: « Optimizing images for the web using Pixlr
Next Post: Setup the Testimonials Section in Hello Pro Theme »

Sidebar

StudioPress and Genesis Tutorials
  • StudioPress and Genesis Tutorials
StudioPress themes Free with this hosting.

My StudioPress and Genesis Tutorials

  • StudioPress Sites Review
  • Genesis Responsive Slider Tutorial
  • Genesis Featured Post Widget Tutorial
  • StudioPress Core Skills
  • Simple Hooks Tutorial
  • Genesis Simple Edits Tutorial
  • Genesis Dambuster plugin basic settings
  • Beaver Builder Tutorial – The Basics
  • Elementor Tutorial: a Quick Start Guide
  • Changing the color scheme of Altitude, Magazine Parallax Pro themes
  • Basic StudioPress Theme Customization (Old Post)
  • Genesis Framework Widget Areas Tutorial
  • Genesis Grid Loop Tutorial
  • Simple URLs (plugin) Tutorial
  • Simple Sidebars Tutorial
  • Simple Social Icons Plugin
  • Customizing the WordPress Query
  • Category and Tag Archive Listing Pages
  • Adding an author box below posts
  • Choosing the right StudioPress theme (a review)
  • Genesis eNews Extended and Mailchimp
  • StudioPress Pricing Table
  • StudioPress Flexible Layouts
  • Genesis CSS learn how to tweak and customize your site
  • Icons used in StudioPress themes
  • Images in homepage text widgets
  • Using Genesis Column Classes To Build Layout Grids
  • Sticky Header or Menu in Genesis
  • Plugins used in StudioPress themes
  • Genesis Simple FAQ plugin
  • Strong Testimonials Plugin – The Basics
  • Cornerstone Content: a simple how to guide
  • Genesis Portfolio Pro
  • Setup Generate Pro theme
  • Setup Hello Pro
  • Set up Altitude Pro theme
  • Setup – Executive Pro Theme
  • Parallax Pro Theme Review
  • Setup Parallax Pro Theme
  • Changing Google Fonts in a Genesis child theme (Parallax Pro)
  • Setup Daily Dish Pro theme
  • Setup Metro Pro theme
  • Foodie Pro Overview
  • Smart Passive Income Pro Theme: set up guide
  • Academy Pro theme Setup Guide
  • Authority Pro Theme: setup guide
Install the Genesis Framework
  • Are you ready to take your first steps? Watch as I install WordPress and Genesis.

Rainmaker Platform – a Review

  • Discover if you need the Rainmaker Platform
FoodieProTutorials
Build your own Genesis child themes with Dynamik Website Builder

Genesis Design Palette Pro

  • Customize your theme with Genesis Design Palette Pro

DIY Webdesign with Dynamik Website Builder AND Genesis Extender plugin

  • Genesis Child Theme Tutorial with Dynamik Website Builder
  • StudioPress theme customisation with the Genesis Extender plugin
  • Dynamik Fixed Background Image

StudioPress Accelerator

  • StudioPress Accelerator, the budget-friendly way to get a seriously fast website.

Are you getting stuck setting up a StudioPress site?Please let me know if you get stuck.

Disclosure: I receive compensation from some of the companies whose products I review.

How my affiliate links work…

  • I only get paid if someone buys a product. Not because someone clicks a link.
  • You pay the same price using my links or the StudioPress site.
  • If I earn some commission I can spend some more time making more tutorials.
  • P.S. Thanks to all those folks who have bought through my links.
  • It's much appreciated :-)

Philip Gledhill web design

Philip Gledhill is a Bradford web designer and WordPress assistant.

Genesis Extender

Customise your Genesis child theme the easy way.

The Genesis Extender Plugin

Get The Genesis Framework

WordPress Hosting

WordPress Hosting, Which Deal is Best For You?

Genesis – StudioPress resources

There are many good websites where you can find information about the Genesis Framework.

I use the sites listed below on a weekly or even daily basis to find answers, solutions and basic information.

I hope you find them as useful as I have.

Bill Erickson
WordPress Consultant

  • Tutorials
  • Code

Designs by Nick the Geek
Genesis based WordPress development and tutorials for everyone

  • Genesis Explained a good introduction to the code that makes Genesis work

Greg Rickaby
Front-End Developer @WebDevStudios

  • Code Snippets

Christopher Cochran
web/tech/design/music

  • The Visual Hook Guide

Carrie Dils

Genesis Developer and Web Designer

  • Genesis Tutorials and Information

Carrie Dils course on Lynda.com

  • There are two Genesis courses on Lynda.com. Up and Running with Genesis and Customizing Themes. Both are well worth a look. And if you're new to Lynda.com you can usually get a 7 day free trial.

Sridhar Katakam

  • Loads of WordPress and Genesis tutorials. Well worth a look.

Genesis For Beginners

  • pdf book

StudioPress.tv

  • Some basic videos from StudioPress

Brian Gardner

  • Code snippets and info from the man behind StudioPress

Sure Fire Web Services Inc
Web Design Tips, WordPress Development Help,and Genesis Framework Tutorials

  • Useful Genesis links page

WP Smith

  • Genesis code snippets

Looking for a StudioPress theme or hosting?

Check out the two links below…

Get Genesis Framework & StudioPress Themes free.

When you sign up for a WP Engine plan, you receive the Genesis Framework and 36 StudioPress Themes free. That’s over $2,000 in value.

Free themes with hosting
Get Premium WordPress Themes

Buy a StudioPress theme outright and use it on all of your sites. There are three ways to get all of the StudioPress themes AND save.

Choose Your Theme

Web Hosting

If you’re in the market for premium web hosting from a team you trust why not checkout WP Engine. It’s designed to be Fast, Secure & Worry Free!

Site Map

Site Map: if you can’t see what you’re looking for read through my sitemap, it may well be there :-)

  • Search
  • Home
  • Genesis Newbie
  • Setup Wizard
  • Genesis Geek
  • Resources
  • Blog

This website is independently owned by an affiliate marketer of StudioPress. It is not sponsored by StudioPress, WP Engine, Copyblogger Media LLC, WordPress, or Automattic Inc. WordPress, Genesis, StudioPress and WP Engine, are registered trademarks of their respective owners.

Copyright © 2021 Philip Gledhill · Privacy policy and disclosure

© Copyright Philip Gledhill

Return to top