Learn The Best WordPress Page Builder Elementor Pro Easily

0
454
Learn The Best WordPress Page Builder Elementor Pro Easily
Learn The Best WordPress Page Builder Elementor Pro Easily

WordPress bring new page builder Guttenburg, it comes with WordPress by default. But it is not popular as current page builders like as Visual Composer, King Composer, Divi Builder, Fusion Builder, Elementor Pro etc.

I’ve worked with above all page builders and recently I’m fond of Elementor Pro, although the plugin created almost 3 years ago. It has many excellent features and functionalities which will help you develop a website as you want and will give you flexibility than other page builders.

Before starting the tutorial you should have basic WordPress theme and plugin development knowledge, page builder experience, familiar with WordPress coding style etc.

I’ll use very easy 7 steps to present Elementor.

Step 1: Install WordPress
Step 2: Install Elementor Pro from the WordPress plugin store and activate it
Step 3: Create a plugin for Elementor Pro and activate it
Step 4: Create a page from the /wp-admin and click ‘Edit with Elementor’
Step 5: Create controls and apply it
Step 6: Advanced work with Elementor Pro
Step 7: Final notes

Now I’ll discuss on those step. It’ll very easy. Hope that you will enjoy 🙂 Let’s start.

Step 1: Install WordPress

Actually no need to discuss the step, every WordPress lover should know the step. But I’ve listed because it’s the essential step to practice Elementor Pro.

Step 2: Install Elementor Pro from the WordPress plugin store and activate it

Install the Elementor Page Builder as another plugin and activate it. No hassle. When I’m writing the post the plugin version is: 2.5.11 with latest WP version: 5.1.1

Step 3: Create a plugin for Elementor Pro and activate it

The step as usual like as a way to create a simple WordPress plugin. But you can go Elementor Developer Guide. By default, Elementor has many widgets template. But we will create a widget like as we want or like as a PSD section.

So we need to Creating a New Widget. Create a folder in your plugin directory name ‘spoilcoconut‘, into the plugin create an ‘index.php‘ file. Paste the code into the ‘index.php’.

It’s a simple code for creating an Elementor widget. Here notice is I’ve written const MINIMUM_PHP_VERSION = ‘5.6’;

Create another folder into the ‘spoilcoconut’ name will be ‘widgets’ /spoilcoconut/widgets. Into the ‘widgets’ folder create a PHP filespoilcoconut_widgets.php‘. In the file paste the below code-

Now again open the ‘index.php’ and assign the widget like as-

Step 4: Create a page from the /wp-admin and click ‘Edit with Elementor’

If have any questions or confusions, don’t forget to keep a comment below. Now your plugin is ready for use. Go to the /wp-admin area and activate the plugin. Go to create a new page and click on the button ‘Edit with Elementor’.

new-page

The Elementor page builder will open. Scroll down the widget gallery and in the bottom line, you will see our newly created widget. Drag the widget into the page section.

new-widget

The widget function will activate and write your title. Update the editor page and visit the page, it’ll display in the page area.

Basically, it was the process of creating a widget with Elementor.

Step 5: Create controls and apply it

Now we’ll add more functionalities and see the usage of Elementor controls. Easily you can copy the code example from Elementor controls page see how to it works. I’m going to make a simple blog thumbnail with Elementor.

Again open the ‘spoilcoconut_widgets.php’ and replace the code into the file-

Refresh backend and you will see your desired fields. It’ll display like as-

blog-layout

Step 6: Advanced work with Elementor Pro

Now we’ll create a slider with Elementor by using the repeater control. Here I’m not explaining every code. If have questions you can leave a comment. If you understand the above code example, you should also understand the part. In the final step, I’ll say 3 main points to create a widget quickly.

So for creating a slider, we will use Slick Slider. In the slider have many options like as- loop, fade effects, auto-play, sliding speed etc. We will apply those options with the Elementor. At first, integrate CSS and JS files for the plugin in the ‘index.php’-

Then create another PHP file into the ‘widgets’ folder my_slider.php. Integrate the PHP file into ‘index.php’ file-

The article going to long, so I’m pasting the my_slider.php in PasteBin.Com

Now refresh backend, you’ll see all options for the slider. See here- Slider Content and Slider Settings

You can add CSS and style as you want with the slider classes.

Step 7: Final notes

In the meantime, you have gathered lots of experience Elementor and complete practice on all controls. What is the easiest way to make a widget in Elementor?

Step 1: Create a widget and assign the widget name in ‘index.php’
Step 2: Add control into the widget
Step 3: Integrate the control in the render() function

Done 🙂 now use the widget where you want.

The Tutorial is written on the free version of Elementor. In the next tutorial, I’ll discuss on Elementor Pro. Stay tuned 🙂

LEAVE A REPLY

Please enter your comment!
Please enter your name here