Creating a WordPress website using Elementor

Elementor Page Builder is a plugin that works like a visual editor for WordPress.

But what does this mean exactly?

Let’s just go with this complete Guide on Elementor for Beginners

As you already know by now and with the technological evolution that we have thanks to the Internet, to have greater visibility, it is necessary to have a website if we plan to create an entrepreneurship project.

If we also add the competition that exists in many sectors, today, having a blog is essential as a content marketing strategy to position your online business.

If you also do it through WordPress, you will have a lot in advance, since this Content Manager provides you with many facilities to create it, and it has a very fast learning curve.

And if you allow us, let us ask you.

Are these some of the reasons that have encouraged you to design your blog?

1. You want to work on something you know and are passionate about, being your boss.
2. You want to be free to do what you want in your day to day: enjoy more time with your family, travel, feel useful adding value and doing something different.
3. You want to increase your income without depending on anyone, creating your products and services to help a community.

If you already know that you are going to create an online business, you know the theme of your digital project, and you have done the homework before launching your digital project, now you will have to design the website to capture all your potential as an entrepreneur there.

So, for now, let us guess!

• You have bought a domain, and you have contracted the hosting where you are going to host your website. If you have not already done so and you have doubts about which service to hire you to have to do research on it and check out the reviews of different service providers.
• You have started testing WordPress and are testing some templates; they all look very cool in their demo versions, but when you start to replicate some of these themes, you realize that you need to touch code to leave the web as it comes in the example.
• This frustrates you, and you start to get overwhelmed; you are saturated, and you do not know which template to finally choose, you realize that you have to know the code to leave it as the demonstration, and the truth is that you do not feel like learning from scratch HTML, CSS etc.
• This is when you start to think where you have gotten, that this is beyond you and you decide to send everything to hell.

Well, let us tell you that you are not alone who stuck in that same situation, and if we are honest, the truth is that it takes time to acquire the necessary knowledge to create your website.

So that you don’t go through this, we want to help you create your blog thanks to Elementor!

Use a Page Layout Designer (here we will see Elementor)

Once you have installed your WordPress and the chosen template with the base structure of your blog, now it’s time to start creating and designing the pages that will form your web project.

You can directly use WordPress’ editor to design the pages too.

Why Elementor is the Page Layout Maker of the Moment?

Elementor is giving the note that for sure, and we will explain why:

• First of all, it is a free plugin that you can easily download and install on any web page that you have created in WordPress. If you decide to bet later on the premium version, it is your decision.
• It has a “drag and drop system” so easy to use that it allows you to design any page of your blog live and direct, without having to hack code. Includes lots of widgets to customize the design of your online project.
• It is a very light layout artist if we compare it with others on the market; And last but not least, it leaves no trace of Shortcodes when we uninstall it, so if in the future we have to change the plugin, it will not leave thousands of codes on your pages that do not count.
• Above it allows you to customize the responsive versions of your project to see how it would look on mobile and tablet?
• And also, it has a series of free templates that you can install on the pages of your blog as a basis, in case you are not very good at the subject of design. From here, you just have to give your personal brand touch to your project.

But this does not end here since it is only the beginning; so take note, because we are going to briefly summarize all the free options that this visual layout artist incorporates.

Oh, and by the way, after all this comes to practice, so don’t miss it. 

How to Use Elementor like a Pro

Step 1: Install the Elementor Page Builder.

To do this, you need to go to the WP repository, so on your desktop go to “Plugins >>> Add New”, and in the search engine that you have at the top right you put “Elementor”.

Once you have located the plugin, you have to click on the “Install” button and then “Activate”.

Step 2: Basic Plugin Settings.

Once you have the layout designer active and before you start designing, you have to make some preliminary adjustments:

1. General:

In this section, you will have to indicate for which type of entries you want to use the Elementor plugin. You can do this on pages and posts, although we recommend that you focus more on static pages.

Also, customize what type of user can use the designer. For this, you will have to click on which level you will allow to use it: editor, author, subscriber, etc.

Also, if you check the boxes next to “disable global colors and fonts”, what you will achieve is that every time you design with Elementor, the colors and fonts that this page will inherit, will be the ones that you established by default in template.

• Style:

In this section, you can customize the default generic fonts that you want to set when you insert text with the layout tool.

Likewise, it allows you to edit the width of the content of the page that you are going to design in px, although by default it is set to 1140 px.

Besides, you can set the space between widgets, as well as extend to fit a specific section (by default, body), and hide if you want, the page title by filling in the “page title selector” box.

Finally, Elementor has recently incorporated the option to open all the images in a light table, which you can enable.

• Integrations (only for Elementor PRO) and Advanced:

In the first block, the Elementor plugin allows you to do many integrations with external providers such as Mailchimp, Converki and ActiveCampaign. You can even set up a reCAPTCHA to protect your WordPress from spam. This option is only enabled for the premium version of the layout designer.

In the last section of Advanced, you can customize the printing method of the CSS code (better to leave the one that is set by default) and modify the editor loading method when you have conflict problems with the server.

• Profile Manager:

This option allows you to assign access to the Elementor editor according to the user role defined in WordPress. This is very good to limit that certain users cannot access the page layout.

You just have to click on the button “Without access to the editor” to restrict access to whoever you want: editor, author, and subscriber.

Step 3: Knowing the Elementor Free Widgets:

Ø  Basic Elements:

These are the main and most common widgets of the Elementor editor that you will be able to drag live and direct to start designing your pages.

• Columns: With this button, you will be able to add columns within a section or even within a column.
• Header: This Widget is very important since it will allow you to set titles for your blocks. A very powerful tool to highlight important texts, to which you can add H1, H2, H3 tags.
• Image: Dragging this element will allow you to insert an image within a section or a column.
• Text Editor: Primary Widget to add texts to your designs. It is very easy to use since you will see that it is practically the same as the WordPress editor itself, so you will have no trouble learning to use it.
• Video: Block to insert videos to your page. You can add them from YouTube and Vimeo.
• Button: Element that allows you to add buttons with links and custom designs.
• Separator: Widget as a line that serves as a separator to give space in sections and the different elements that make up your page.
• Spacer: Blank block that we can include between two elements to add spaces.
• Google Maps: Google’s own Widget to indicate the location of your business.
• Icon: Element that allows you to add a Font Awesome icon. You can customize it to your liking and even add a link to it.

Ø  General Elements:

These widgets will allow us to add specific functionalities to our page.

• Image box: Widget that allows you to add a block plus an image, which incorporates a title for the header and a paragraph of text to personalize to your liking.
• Icon box: Element similar to the image box, only here you add an icon, with the main heading and a paragraph.
• Image gallery: With this function, you can insert image galleries in a section.
• Image Carousel: Who doesn’t know sliders? Image transitions that pass images as a certain time elapses.
• Icon List: Ideal Widget to add feature lists.
• Counter: With this element, you can include counters to announce discounts, offers or upcoming releases.
• Progress bar: Widget to show your skills or knowledge you may have about a subject.
• Recommendation: Block to insert testimonials in your blog of clients or users of your project.
• Tabs: Blocks as tabs to show different texts.
• Accordion: This element is similar to the tab, except that the content is shown as an accordion, as its name indicates.
• Toggle Widget the same as the accordion, but the only difference is that the dropdown is through an arrow.
• Social icons: Insert the buttons of the social networks of your blog with this element.
• Alert: Widget to highlight the relevant information. You can add a button for your users to discard this content that you show them.
• SoundCloud: Add sounds to your blog thanks to this element. If you have a podcast, what better tool than this one?
• Shortcode: Insert “shortcodes” easily with this Widget.
• HTML: Block to add HTML code to your page.
• Menu Anchor: Element that allows users of your blog to be automatically redirected to a specific section when they click on the area that you establish.
• Sidebar: Block that allows you to add a sidebar wherever you want.

Conclusion

Well for now, you are equipped with a lot of information about Elementor and if it develops your interest then obviously you are going to dig more about it. As we have already mentioned above, the key to have a grip on Elementor is to practice it. Search for best tutorials and have a hands on experience. Featured image source