Create your own website using WordPress Elementor

Since its launch in 2016,Elementor has created a big revolution in the wordpress community. still now lots of people don’t know there's a lot of features in elementor for free and here you are to know all about WordPress elementor to build your own website.

elementor

On olden days it wasn't easy to create a new website. You have to make a lot of changes for a little change on your website.

Before getting started with elementor you have to know a few things about wordpress ,domain and hosting. After such, without further ado let's get into Elementor

What is Elementor ?

Elementor is a wordpress plugin by which you can build your own amazing web pages and even you can build your whole website without programming knowledge.It is an amazing drag and drop editor, which is available for free.

Uses of Elementor plugin

  • With this amazing drag and drop editor you can build a website as easily as possible.
  • Without moving between editor and preview mode, you can create your website in live.
  • Elementor is the only page builder providing a lot of designs.
  • It consists of many useful widgets, template library, mobile editing tools, revision history. These are all the features which are available in the free edition.

Install wordpress Elementor

There are two versions of wordpress elementor. They are

  • 1. Free version
  • 2. Pro version

In the free version you can have some basic features and the basic elements to create a complete website In the pro version you can have all the advanced features and all elements.

Install free version of elementor:

To install the free version of elementor ,

  • get into wordpress dashboard
  • In the dashboard, go to plugin> add new
  • Then, in the search bar, type elementor
  • Install the elementor plugin appeared
  • Then click activate,after elementor has been installed

Install Pro version of elementor:

To install the Pro version of elementor,

  • At first you need to purchase the pro version of elementor by visiting Elementor.com
  • After purchasing the plugin, go to the plugin in the wordpress dashboard
  • Then click on add new and search, elementor in the search bar
  • Before you get your pro version, you need to have installed your free version
  • Then, you can install the pro version. The pro version is just an extension of free version
  • After uploading the pro version, you will need to enter the licence. To enter the licence number, go to the elementor plugin in the wordpress dashboard and click the licence button and enter the license number which is available in your purchased account.
  • Now, you can notice a few new menu items in the WordPress admin navigation.

Create Your Website Pages

We made the technical setup as done, now it's time to create your website and work on it. Before we get started you have to know a few things about Elementor templates.

Elementor templates

There are more than 200 amazing free templates and pro templates. These templates are created by professional web designers. It will be very useful in building web pages.

To create new pages, go to pages on the wordpress dashboard and click on add new.At now we are going to build the basic three website pages, they are

  • 1. home page
  • 2. About page

At first, we are going build a home page

1. Home page:

home-page

The home page is the most important element of a website. After visiting your website it is the first thing which is visible to the visitors. It may affect the perception of the visitors about your entire business.

To create the home page,

  • Go to page, in the wordpress dashboard
  • Click add new
  • Give a name for the page like home, front page, home page
  • Click on edit with elementor button
  • Then, click the gear icon on the left bottom corner and set the page layout as elementor full width
  • Import the template for your home page, To import
  • click the folder icon on the canvas area
  • Then, click the page tab and search template you want, by typing about your business type in the search box
  • After you have find your home page template, click the insert button
  • The template will be opened in the elementor editor.
  • Replace the default content with your own content
  • You can edit the content by clicking on each widget and edit it in the left panel
  • On clicking on the widget,the editor will come to editing mode.
  • After you have completed editing, you can publish the page.
  • To publish, click the publish button on the left panel
  • And To preview the page, click the eye icot
  • After publishing the home page , go to reading in the settings and set the home page as static page
  • Select le home page from the drop down menu and click the save changes button

2. About page:

about-us-page

The about page is the most important page in the website. This page helps you connect with visitors to know more about you and your brand. It helps to make your brand stronger.

You can create your about page the same as the home page, by importing the template or you can create it customly. To create the about page customly, these are the steps to follow

  • Go to page in the wordpress dashboard and click add new
  • give the title, permalink, slug, category, focus keyphrase and metadata.
  • Click the “edit with elementor” and set the layout as “elementor full width“
  • Click the plus icon to add new section and select your structure
  • Drag and drop the elements from the side panel into the section and add the you want to add to know about your industry to the visitors
  • Make your about page more interesting by adding the image of you and the history of the company in a separate section.

Customize your website using elementor:

With WordPress elementor Customize your website in all the ways you want and get familiar with elementor. Here are the ways you can customize your website pages. To edit pages

  • go to pages in the wordpress dashboard
  • select the pages you want to edit, by clicking the edit with elementor

1. Customize text on pages

  • To replace or change text in your page,
  • Select the section you want to customize by clicking on it , the editor will be opened in the left side panel.
  • There you can replace or change your text in the content menu.

2. Change colors and topography of Text

  • To change the color or topography of the text
  • Select the section you want to change, by clicking on it
  • The editor will be opened on the left side panel
  • Under the style menu , you can change the color of the text
  • In the topography section, you can choose the text family, weight and all others

3. Customize the sections

  • customize the sections by hovering over the section you want to customize, the blue border will appear around the section
  • At the top there is the plus sign, which is used to add a new section and select your structure. The edit section which is at the center , by clicking on it and editing the section and its on the left side panel and the delete section which is at the right side, by this you can delete the whole section. By clicking even its inner section gets deleted.
  • You can insert the widgets and edit it by clicking the pencil icon on the right top corner and edit it in the left side panel

4. Page layout customizations

After working with all the styles, now it's time to work with your layouts

To add more columns in the section of your pages and make it more beautiful

  • By Right clicking on the section you want, you can duplicate ,add ,delete, copy and paste the column
  • Add the inner section by Dragging and drop the inner section from the side panel under the elements menu to which to the section you want to place
  • To add more columns in the section, right click on one of the column and click duplicate
  • By clicking the duplicate the new column will be added
  • To edit the inner section , hover over the section and the blue border will appear
  • At the top click the edit inner section and edit it in the left side panel
  • In the edit inner section, under the layout menu you can set the column size handset the structure of the columns
  • There in the style menu, you can set the background color, background image, video, topography and border of the inner section
  • In the advanced menu, you can set the margin, padding , motion effects. you can make the inner section more responsive to mobile, tablet and desktop by setting up in the responsive section
  • Customize each column by clicking the handle in the left top corner and edit it in the left side panel.

5. Customize Images

After customizing the sections and columns , let's get into the images. Add the image to the sections and columns by dragging the image widget from the left side panel . To add your own images

  • Click the image widget which you have placed on the section
  • On the left side panel click choose image
  • Under the media library menu, click the image you want and insert it by clicking the insert button
  • If no image found in the media library,
  • click the select file or you can drag and drop the image file from your device Under the upload files menu
  • After uploading the image, customize the image with css filters , add opacity under the style menu on the left edit panel
  • Under the advanced menu, you can add margin, padding, background mask and customize the css code, if you are using the pro version of wordpress elementor

6. Social media links

Add social media links to your pages and make your website visitors know about it To add social media links and icons,

  • Go to the widgets in the left side panel and search social icon
  • Drag and drop the social icon widget and place it in where you want
  • Click the icon and control the icon size, color , padding and add the link under the content menu in the left side panel

Add header and footer

The key elements of the website are the header and footer. It's useful to Add links of important pages in the header and footer that you want every visitors to go

After all customization works in the body section, now it's time to add the header and the footer

1. Add header

elementor-header-template

To add header

  • Click the folder icon
  • Under the block menu, type header in the category search bar
  • Select the header and click the insert button to edit in the elementor editor
  • By this way set the header for all the page

2. Add footer

elementor-footer-template

To add footer

  • Click the folder icon in the canvas area
  • Under the block menu, type footer in the category search bar
  • Select the footer and click the insert button to edit in the elementor editor
  • By this way set the footer for all the page

To create a custom header and footer that you can learn from the advanced session.

Create Blog posts

There are more advantages to publishing blog posts on websites. Post makes your website user-friendly and you can provide new content for your readers using the posts and convert them into your clients. you can provide the daily updates of your business news using the blog posts.

By using questions and answers in the blog post you can make the visitors know more about the business or products and it will be shown as a result for those who search such questions.

Using the blog post you can share insights, stories, and thoughts of your business on the website. blog posts help in boosting up your brand awareness, conversion. It helps in increasing your website traffic. By using the WordPress elementor you can create the blog post easily.

To create blog posts

  • Go to post in the wordpress dashboard
  • Click the ad new button
  • Create the post as you created the pages by inserting the template

Conclusion

Websites play a vital role in business ,create your website and make use of it.

“Websites promote you 24/7: No employee will do that “

-Paul Cookson

Elementor is the amazing page builder, which is free to use. we have seen how You can build your entire website with this wordpress elementor for free. There are more advanced features which are available in the pro version of wordpress elementor. To know more about creating a website customly and to learn more about the elementor and the features available in the pro version of elementor ,visit Advanced wordpress elementor.

Cookies help us deliver our services. By using our services, you agree to our use of cookies.