5 Elementor Pro Features You Can Simulate with Free Plugins

Preface

Are you looking to enhance your website without breaking the bank? Elementor is a fantastic page builder, but some of its most powerful features are locked behind the Pro version. The good news is that you can often simulate these features using free plugins! This post will guide you through five Elementor Pro features you can recreate using free alternatives, helping you create a stunning and functional website without spending a dime. Let’s dive in!

1. Theme Builder: Header and Footer Templates

The Theme Builder in Elementor Pro allows you to create custom headers and footers, which is crucial for branding and navigation. While the free version of Elementor doesn’t have this feature, several plugins offer similar functionalities.

The Solution: Elementor Header & Footer Builder

The Elementor Header & Footer Builder plugin is a popular choice for creating custom headers and footers. It integrates seamlessly with Elementor and allows you to design these elements using the familiar Elementor interface.

How to Use It:

1. Install and Activate the Plugin: Go to your WordPress dashboard, navigate to Plugins > Add New, search for ‘Elementor Header & Footer Builder,’ install, and activate it.

2. Create a New Header or Footer: Go to Appearance > Elementor Header Footer Builder > Add New. Give your template a name, select ‘Header’ or ‘Footer’ as the type, and choose where you want it displayed (e.g., entire website).

3. Design with Elementor: Click ‘Edit with Elementor’ and design your header or footer just like you would design a regular page. You can add your logo, navigation menu, social media icons, and more.

   <div class='header'>
     <img src='your-logo.png' alt='Your Logo'>
     <nav>
   <a href='#'>Home</a>
   <a href='#'>About</a>
   <a href='#'>Services</a>
   <a href='#'>Contact</a>
     </nav>
   </div>
   

4. Publish Your Template: Once you’re happy with your design, publish the template. It will automatically replace your theme’s default header or footer.

   Hint: Don’t forget to check out our post on how to create a sticky navigation for Astra starter templates with the free version of Astra or how to make a free website with wordpress.

   ## 2. Dynamic Content: Advanced Custom Fields (ACF)

Elementor Pro’s dynamic content feature lets you pull data from custom fields, allowing you to create dynamic websites. A classic example is listing real estate properties.

The Solution: Advanced Custom Fields (ACF) Plugin

The Advanced Custom Fields (ACF) plugin is a powerful tool for creating custom fields in WordPress. When combined with Elementor, it allows you to display dynamic content on your pages.

How to Use It:

1. Install and Activate ACF: Install and activate the Advanced Custom Fields plugin from the WordPress plugin directory.

2. Create Custom Fields: Go to Custom Fields > Add New. Create the fields you need, such as ‘Property Price,’ ‘Location,’ ‘Bedrooms,’ etc. Define the field types (text, number, image, etc.).

   <?php
   if( have_rows('property_details') ):
   while ( have_rows('property_details') ) : the_row();
       $price = get_sub_field('price');
       $location = get_sub_field('location');
       $bedrooms = get_sub_field('bedrooms');
       echo '<p>Price: ' . esc_html($price) . '</p>';
       echo '<p>Location: ' . esc_html($location) . '</p>';
       echo '<p>Bedrooms: ' . esc_html($bedrooms) . '</p>';
   endwhile;
   else :
   echo '<p>No property details found.</p>';
   endif;
   ?>
   

3. Assign Fields to a Post Type: Choose where these fields should appear (e.g., a ‘Properties’ custom post type).

4. Populate the Fields: When creating or editing a property, you’ll see the ACF fields. Fill them with the relevant data.

5. Display Data with Elementor: Use Elementor’s Text Editor widget (or any other widget) and insert the dynamic ACF fields. You might need a plugin like ‘Dynamic Content for Elementor’ or ‘Anything Elementor’ to help display ACF data seamlessly.

Hint: You can use custom post types for your data and custom fields to populate the unique content!

3. Forms: Contact Forms and More

Elementor Pro includes a robust form builder, essential for contact pages, lead generation, and user feedback.

The Solution: WPForms or Contact Form 7

WPForms and Contact Form 7 are two of the most popular free form plugins for WordPress. They are easy to use and offer a wide range of features.

How to Use Them:

1. Install and Activate: Install and activate either WPForms or Contact Form 7.
2. Create a Form:

• WPForms: Go to WPForms > Add New. Use the drag-and-drop builder to create your form. Add fields like name, email, message, etc.
• Contact Form 7: Go to Contact > Add New. Create your form using HTML-like tags. The default form usually includes name, email, subject, and message fields.

  <label> Your Name (required)
      <br />
      <[text* your-name] />
  </label>

<label> Your Email (required)
<br />
<[email* your-email] />
</label>

<label> Subject
<br />
<[text your-subject] />
</label>

<label> Your Message
<br />
<[textarea your-message] />
</label>

<[submit “Send”] />

3. Embed the Form in Elementor:

• WPForms: Use the WPForms widget in Elementor. Drag it onto your page and select the form you created.
• Contact Form 7: Use the Text Editor widget in Elementor. Copy the shortcode from Contact Form 7 and paste it into the Text Editor.

4. Global Widgets: Reusable Content Blocks

Elementor Pro’s Global Widgets allow you to create reusable content blocks that you can update in one place and have changes reflected everywhere they’re used. While there isn’t a direct free equivalent, you can achieve similar results with templates.

The Solution: Elementor Templates

While not exactly the same, Elementor templates can be used to create reusable sections.

How to Use Them:

1. Create a Section: Design the section you want to reuse using Elementor.
2. Save as a Template: Right-click on the section and select ‘Save as Template’. Give your template a name.
3. Insert the Template: When you want to use the section again, click the ‘Add Template’ icon in Elementor and insert your saved template.
4. Updating the Template: To update the section, edit the template ( Templates > Saved Templates), make your changes, and save. However, remember that this won’t automatically update existing instances of the template on your pages. You’ll need to manually replace them with the updated template.

   Info: Elementor Templates allows you to save entire pages or sections that can then be reused across your site. This function is very useful.

5. Custom CSS: Advanced Styling Options

Elementor Pro allows you to add custom CSS directly to widgets and sections, giving you greater control over the design. While the free version doesn’t offer this option natively, there are ways to add custom CSS.

The Solution: Simple Custom CSS or Theme Customizer

1. Simple Custom CSS Plugin:

• Install and activate a plugin like ‘Simple Custom CSS’.
• Use the plugin to add CSS that targets specific Elementor elements using their CSS classes.

2. Theme Customizer:

• Go to Appearance > Customize > Additional CSS.
• Add your custom CSS here. This CSS will apply globally to your site.

  .elementor-widget-heading {
    color: #007bff; /* Example: Change heading color */
  }

.elementor-button {
background-color: #28a745; /* Example: Change button background color */
border-radius: 5px;
}

Info: Always be careful when adding custom CSS. Make sure your CSS rules are specific enough to avoid unintended side effects on other elements.

Conclusion

While Elementor Pro offers a range of powerful features, you can simulate many of them using free plugins. By using plugins like Elementor Header & Footer Builder, Advanced Custom Fields, WPForms, Elementor Templates, and Simple Custom CSS, you can create a professional and dynamic website without upgrading to the Pro version. So go ahead, experiment with these free alternatives, and start building the website of your dreams today!

Info: Make sure you also check our other posts such as 10 Expert Tips and Tricks for Mastering Elementor Page Builder or a inspirational showcase of beautiful websites built with Elementor.