Building Your First Website with WordPress and Elementor: Installing and Activating Elementor

Section 6: Installing and Activating Elementor (5 minutes)

Installing Elementor Plugin

“With our ‘Hello Elementor’ theme in place, it’s time to harness the power of Elementor to design our website. Elementor is a user-friendly, drag-and-drop page builder that allows you to create stunning web pages without writing a single line of code.

Step 1: Navigate to the Plugins Section

• From your WordPress Dashboard, go to ‘Plugins’ > ‘Add New’.

Step 2: Search for ‘Elementor’

• In the ‘Search plugins…’ field on the right, type ‘Elementor’.
• The ‘Elementor Website Builder’ plugin should appear at the top of the search results.
• Recognize it by the Elementor logo and its high number of active installations.

Step 3: Install Elementor (Free Version)

• Click on the ‘Install Now’ button next to the Elementor plugin.
• WordPress will download and install the plugin, which may take a few moments.

Step 4: Upload and Install Elementor Pro Plugin

• Note: Elementor Pro is a premium plugin that extends the functionality of the free version. Since it’s a paid plugin, it cannot be installed directly from the WordPress Plugin Directory. Instead, you’ll need to upload it manually.
• Download Elementor Pro:
  • Log in to your Elementor account on the Elementor website.
  • Navigate to the ‘Downloads’ section of your account.
  • Download the Elementor Pro plugin file (a .zip file) to your computer.
• Upload Elementor Pro to WordPress:
  • Back in your WordPress Dashboard, go to ‘Plugins’ > ‘Add New’.
  • Click on the ‘Upload Plugin’ button at the top.
  • Click ‘Choose File’, locate the Elementor Pro .zip file on your computer, and select it.
  • Click ‘Install Now’.
  • WordPress will upload and install the Elementor Pro plugin.

Activating Elementor

Step 1: Activate Both Plugins

• Activate Elementor (Free Version):
  • After installing, the ‘Install Now’ button changes to ‘Activate’.
  • Click ‘Activate’ to activate the Elementor plugin.
  • Alternatively, you can go to ‘Plugins’ > ‘Installed Plugins’, find ‘Elementor’, and click ‘Activate’ if it’s not already active.
• Activate Elementor Pro:
  • After installing Elementor Pro, click the ‘Activate Plugin’ link that appears.
  • If you missed this step, navigate to ‘Plugins’ > ‘Installed Plugins’, find ‘Elementor Pro’, and click ‘Activate’.

Important Note:

• Both the free and Pro versions of Elementor need to be installed and active for Elementor Pro to function correctly. The Pro version extends the capabilities of the free version; it doesn’t replace it.

Step 2: License Elementor Pro

• To unlock all the Pro features, you’ll need to activate your Elementor Pro license.
• Activate License:
  • In your WordPress Dashboard, go to ‘Elementor’ > ‘License’.
  • Click on the ‘Connect & Activate’ button.
  • You will be redirected to the Elementor website and prompted to log in to your Elementor account if you’re not already logged in.
  • After logging in, click ‘Activate’.
  • You will see a confirmation message indicating that your license is active.
  • You will be redirected back to your WordPress Dashboard.
• Verify Activation:
  • In ‘Elementor’ > ‘License’, you should see a message stating that your license is ‘Active’.

Elementor Free vs. Pro

“Now that we have both versions installed and activated, let’s briefly discuss the differences between Elementor Free and Elementor Pro.

Elementor Free Version:

• Features:
  • Access to the core drag-and-drop page builder.
  • Over 30 basic widgets, including Text, Image, Video, Button, and Heading.
  • Responsive design capabilities for mobile, tablet, and desktop views.
  • Basic templates and blocks to get you started.
• Limitations:
  • Limited number of widgets and design capabilities.
  • No access to advanced features like forms, sliders, and custom CSS.
  • Cannot edit theme elements like headers and footers.

Elementor Pro Version:

• Additional Features:
  • Pro Widgets:
    • Over 50 advanced widgets, including Forms, Slides, Posts, Portfolio, Pricing Tables, and more.
  • Theme Builder:
    • Design custom headers, footers, single posts, archive pages, and other theme elements using the same intuitive interface.
  • WooCommerce Builder:
    • Create custom product pages and shop layouts if you’re running an online store.
  • Forms and Integrations:
    • Use the Form widget to build contact forms, lead capture forms, and more.
    • Integrate with marketing tools like Mailchimp, HubSpot, and ConvertKit.
  • Global Widgets:
    • Save widgets and sections to reuse across your site, ensuring consistency and saving time.
  • Popup Builder:
    • Create custom popups for promotions, email subscriptions, or announcements.
  • Custom CSS:
    • Add custom CSS directly within the Elementor interface for advanced styling.
  • Premium Templates and Blocks:
    • Access a vast library of professionally designed templates and blocks to accelerate your design process.
• Why Choose Elementor Pro?
  • Enhanced Design Capabilities:
    • Unlock a wide array of widgets and features that allow for more complex and interactive designs.
  • Time Efficiency:
    • Pre-built templates and global widgets speed up the development process.
  • All-in-One Solution:
    • Reduce the need for additional plugins, simplifying site management and potentially improving performance.
  • Support and Updates:
    • Get premium support from the Elementor team and regular updates with new features.

Engagement Opportunity

“Consider how the additional features in Elementor Pro align with your website goals.

• For Our ‘Applegate Pumpkins’ Site:
  • We’ll use the Form widget to create a contact form, allowing visitors to reach out for event information or inquiries.
  • The Theme Builder enables us to craft a unique header and footer that reflect the autumnal theme and community spirit.
  • Advanced Widgets like Slides and Galleries help us showcase images from the pumpkin patches and events in an engaging way.
  • The Popup Builder can be used to announce special events or promotions, enhancing visitor engagement.
• Reflect on Your Own Needs:
  • Do you need to collect visitor information through forms?
  • Are you looking to create a unique layout for your blog posts or product pages?
  • Would interactive elements like sliders or animated headlines enhance your site?

Personal Insights

“From my experience, upgrading to Elementor Pro significantly elevates the website-building process.

• Design Freedom:
  • The extensive range of widgets and design options allows for limitless creativity.
  • Being able to customize every part of your site ensures it aligns perfectly with your vision.
• Simplified Workflow:
  • With all essential tools in one place, managing your site becomes more straightforward.
  • Reducing reliance on multiple plugins minimizes compatibility issues and maintenance.

Visual Demonstration

“Let me walk you through the installation and activation process:

1. Install Elementor (Free Version):
   • Navigate to ‘Plugins’ > ‘Add New’.
   • Search for ‘Elementor’.
   • Click ‘Install Now’, then ‘Activate’.
2. Install Elementor Pro:
   • Go to ‘Plugins’ > ‘Add New’.
   • Click ‘Upload Plugin’.
   • Select the Elementor Pro .zip file you downloaded.
   • Click ‘Install Now’, then ‘Activate’.
3. Activate Your License:
   • Navigate to ‘Elementor’ > ‘License’.
   • Click ‘Connect & Activate’.
   • Log in to your Elementor account if prompted.
   • Click ‘Activate’ to confirm.
4. Verify Activation:
   • Ensure the license status shows as ‘Active’.

Important Reminders

• Both Plugins Must Be Active:
  • Remember, both the free and Pro versions of Elementor need to be installed and activated for the Pro features to work.
• Keep Plugins Updated:
  • Regularly update both plugins to the latest versions to receive new features and security improvements.

Transition to Next Section

“Fantastic! With Elementor Pro installed and activated, we now have a powerful toolset at our disposal.

In the next section, we’ll start building our homepage using Elementor. We’ll explore its intuitive interface, utilize its widgets, and create a visually appealing layout that captures the essence of Applegate Pumpkins.

Let’s begin the creative process and watch our website come to life!”