Last Updated on November 15, 2024 by Gavi
Elementor free vs pro
In this article, I will try my best to show you how to make simple changes to your WordPress website without writing a single line of code using Elementor by WYSIlabs. It is an open-source page builder plugin for WordPress where anyone with little knowledge of HTML and CSS can easily redesign their entire website by simply dragging and dropping widgets on the design screen.
Now you save up to 50% OFF on Elementor Pro plans: GET OFFER
It’s a new way to build websites
This plugin was introduced to me last year but it had limited functionality back then as the team was working hard on developing version 1 which still isn’t quite complete yet.
A couple of weeks ago they introduced Elementor Page Builder v1.0.8 which is stable enough to be used on production websites without the fear of losing data or Admin access if things go wrong. I have been using it on one of my projects for the last week and I am really excited about its potential, so let us get started!
It’s an open-source plugin. I must admit that before writing this article I tested several other page builders like Beaver Builder, Visual Composer (both are premium plugins), and Divi by Elegant themes (Elegant Themes costs more than $100). If you are interested in learning how these plugins work check out my older post titled ‘How To Create A Blog In Under 5 Minutes With WordPress’.
I have been using Visual Composer on my websites but from today onwards I will be working on all of them with Elementor due to its active community and availability of a vast number of free and paid element bundles. Some of these element bundles can also be used in page builders like Divi.
I am going to show you how to make some simple changes to your website using Elementor below: Add a contact form Change logo colors Make a newsletter subscription box Change the color theme You don’t need any coding skills for this, just follow the steps mentioned below. Just in case you still feel that this is too complicated for you, here is my list of freelance web developers who can help you out with anything from $50 to $150.
Elementor free vs pro: Is Elementor Worth It?
Step 1: Install and activate Elementor Go to Plugins > Add New and search for ‘Elementor’ or click this link. After the installation is complete, click on ‘Activate’ at the top of the page. This will take you to the dashboard where you can get started with designing your website.
Step 2: Start editing Open any existing page or post in your WordPress site by clicking on ‘Pages’ or ‘Posts’ from the left-hand menu, then select any post/page that you want to edit. Select Elements > Add New from the sidebar and drag a section element over to an empty area on your template (one where there isn’t a widget). I added one below my header image so that it is at the top of the content.
A popup will show up where you can edit your header image, add text and choose which side of the element it should be on. I used Element or’s section tool to create a full-width navigation bar because my website does not have any sidebar for displaying categories or widgets (only blogger websites do). You may also like this article on how to make an inner page link in WordPress without shortcodes.
Step 3: Adding elements On the left-hand side menu, click on Elements > Add New again and select any element that you want to insert into the section that we created above (in this example I’ve chosen Image Box with title). Rotate it 180 degrees by clicking on ‘Rotate element 180 degrees’ in the top right-hand corner. You can also customize its size, alignment, and other parameters to get it to look exactly how you want it to look.
Step 4: Inserting other elements Now drag a ‘Text Box’ element underneath our Image box element (in this example I am dragging the text box above the image) then click on ‘Add New Text’. Name your new text #email or any name that is relevant to what you are trying to communicate with your audience.
Select Email Address as a type of field, choose Single Line for WYSIWYG editor style and set Width, Height, and Margin values accordingly. Once this is done go back into Design mode by clicking on the ‘Design’ button at the top.
To add a button above the text box, drag an ‘Elementor Button’ element from the left-hand menu and place it above your text by dragging it to where you want it to go. Click on the cog icon beside the word Test in your newly created button and choose Email Signup > Add New Option. Save and Publish changes.
If you would like to delete your section element (in this case Navigation) click on it once, then press the Delete key. You can also reposition elements on your page by clicking and dragging them around until they are in the right place on the page. To change the general layout of pages just go to Appearance > Theme Options, choose which sidebars should be displayed and whether posts should appear below or beside each other on the homepage/single page.
Tip: If you don’t see any ‘Elementor Button’ element under the ‘Add New Element’ heading, click on ‘Refresh’ at the top of your screen after following all of these steps. Done!
Step 5: Creating a newsletter subscription form To create a newsletter subscription form we just need to copy our default text content by clicking on its blue highlighted area then replace that with an email sign-up form using Elementor’s Inline Form element.
You can also customize its width, height, background color, etc to make it look exactly how you want it to look. Go back into Edit mode by clicking on the ‘Design’ button at the top of the screen then click on your Inline Form element to edit it. You can change your form’s background, label text, input styles, etc in this popup.
To put a subscription link below our email sign-up box, drag an Elementor Text Box below the email newsletter subscribe popup, and enter your own text. I have written my web design blog in bold so it stands out more. Once you are done editing your page with Elementor go back into Design mode by clicking on the ‘Design’ button at the top of the screen then click on any element (for example Header Image) and choose Full Screen from its dropdown options.
Now you save up to 50% OFF on Elementor Pro plans: GET OFFER
I wanted to be sure that I would have time to write posts for the community before returning back to blogging. At the same time, I have been thinking about how best to help newcomers start with website development on WordPress without loads of hurdles.
This is because, for every person building something on WordPress, there are 100 people making simple changes like changing its colors, adding a contact form, etc. Unfortunately, these people would give up immediately because there is no easy way of going about it without the help of a developer or knowing some code.
You Might Also Enjoy…