Lesson 2: Page Builder, Themes & Helpful Plugins

Quick Recap

In the previous lesson we explored WordPress’ default editor, Gutenberg. While it is great for site speed and is becoming more popular, you may have noticed that it’s not the most intuitive and can be finicky to work with.  I only recommend you to use Gutenberg editor for occasional, simple blog posts, and Terms & Conditions and Privacy Policy pages. You want to continue to practice with Gutenberg for a little bit on each site build you do. 

For the rest of the site, we are going to take the path of least resistance and work with the widely used and much more stable builder, Elementor.

With more than 5 Million professional users, Elementor is the top-rated feature-packed page builder which is leading 7% of all WordPress websites. Elementor offers a free version that is very capable and a paid Pro version that offers a lot more functionality, global settings and automations which can help streamline your workflow.

 

Dive Into Elementor

First, please remove all previous practice pages, media files and plugins from your site to start from a clean slate. To do this all at once for a completely fresh WP install, sign into your Site Ground dashboard and delete and reinstall WordPress under your Manage WordPress settings.

Now follow along the videos below. Try to use your own content(i.e logo, images, etc) to make the site feel as realistic and professional as possible. Apply the what you learned from Jess about design, sourcing stock imagery, and lipsum! The goal is to turn this site into your first WP portfolio piece!

Before Proceeding…

Take some time to reflect on what you’ve learned above. Did you experience any challenges? Were you able to create a homepage that feels complete and looks great when you view it on mobile?

This is a great time to shoot me a Slack DM to discuss any questions you have!

Please proceed only if you’re confident with the homepage, header and footer that you’ve created. 

Elementor Add-Ons

Elementor addons are plugins developed specifically for the Elementor to increase Elementor’s functionality and enrich the user’s experience. Free and paid versions are available. Add-ons make our lives easier.

Review, Install & Play

Watch the following Add-on videos. Install and activate them on your site. Create pages to play around with them and explore! Think of how you could use them to bring your ideas to life, then try to make it happen!

Play Video
Play Video
Play Video
Play Video

Exercise Practice: Continue Building Out Your Site

The following tasks should take you between 4 – 8 hours to complete. Focus on clean and simple design.

  •  Create 2-5  complete pages. Page suggestions: About, Services, Contact, Hiring/Careers, Blog, and FAQs. View other sites if you need inspiration for the various content blocks.
  • Create 2-4 simple blog posts – half with Elementor, half with Gutenberg. 
  • Display your posts with a widget on one of your Pages
  • Create a Privacy Policy and Terms & Conditions page with Gutenberg. You can copy the content from any.
  • Update your header and footer to include your new pages in your menus.
  • Review your site on your phone and make any adjustments necessary so that it looks great on all devices.

Complete Lesson 2

3

Please share your experience, what you've learned and your progress with your WP site before moving to Lesson 3!

1 / 7

What was the most challenging part of this Lesson?

2 / 7

What was the most surprising thing you learned in this lesson?

3 / 7

Did you find yourself taking a deeper dive into any of the topics from this Lesson? I.e, youtube more information regarding Elementor, it's available add-ons, or woocommerce.

4 / 7

Were you able to complete all the exercise tasks and set up your Woocommerce store?

5 / 7

Would you be proud to put this site in your portfolio in its current condition or with a lil more work?

6 / 7

Please submit your site URL for review and feedback!

7 / 7

Any thing else you'd like to share?

Your score is

The average score is 50%

0%