In this article we are going to show and explain how elementor works and how you can edit the content on your website using elementor.
A website is simply a collection of web pages grouped together, a web page consists of a logo and menu items on the heeder at the top of a page, content including text, images, and videos at the center of the page and a footer at the bottom of the page. The header and the footer will be the same on all the pages across the website but the content will be different on each page. To edit this pages you will need to go to the back-end of your website. The backend is where you can access all your pages, plugins, themes, and settings.
Back in the day, you needed to go to the backend of your website to access your web pages and edit them from there then check the page from the front end to see if the changes have occurred, this means you had to go back and forth from the backend to the front end to see if the changes have occurred in the way you want them to. This is how WordPress websites worked for years, up until we had page builders like elementor, with this page builders, you can skip the backend page editor and go straight to the frontend where you get a sidebar with different options and you can drag and drop different elements on the page. This means there’s no need of using the difficult backend page editor, you can build your pages fast with elementor, with an experience similar to that of a design tool. Elementor needs to run on a theme where the footer and header can be edited.
Steps to follow when editing using elementor
- Login to the back-end of your website
- Click on the site name at the top left of your dashboard
3. once you have clicked on the site name you will be re-directed to the homepage of your website, navigate to the page you want to edit then click on “edit with elementor”
How each element works
1. Add Section
each page on a website is subdivided into sections, to add a section to a page just click on the + labelled icon
2. Inner Section
Each section can be further subdivided into subsections, to add an inner section to a section just drag and drop the inner section element to the section you want to add, this would, for instance, enable you to have an image on one side and text on the other, or a video on one side and text on the other, this cannot be achieved without inner sections.
3. Add/Edit a heading
Each section on a page should have a title, the heading element is used to add title to a section or a page or an inner section, to edit a title, double click on the title and edit as you would like.
4, Add/Edit an Image
To add an image to a section, drag and drop the image element to a section where you want to add the image then select an image from the media gallery or upload one from your pc, to change an image, double click on the image and an option to change the image will appear on the sidebar
5. Edit/Add text.
To add a text to a section of your web page, drag and drop the text element on the section where you want the text then click inside the text box and compose the text or compose from the sidebar. To edit the text that has already been created double click on it then edit once the text editor has loaded on the sidebar
6.Add a video
To add a video to a section click on the video element then enter the url of the video if it is on YouTube, it is recommended that videos be uploaded on YouTube then showcase them on your site so as to help the videos on your pages load faster
7. Add a button
A button can be a CTA(Call To Action) button that redirects the users to specific pages on the same website or other websites
A divider is simply a line that can be used to separate the headline from the text or can be used to underline a heading, to insert a divider simply drag it and drop it below the heading you want it under.
A spacer can be used to add a gap between two sections or inner sections or adding some gap between the heading and the text, to add the spacer simply drag and drop the spacer element where you want to add the gap
10. Google Maps
Google maps as the word suggests, is an element used to add map to a section of a page, To add google maps simply drag and drop the element to the section you would like to place the maps
11. Icon Box
An icon box is simply the combination of an icon and a text box, elementor provides a variety of icons for the icon box the icon can be customized to any color and position.
once you have made all the changes you need to check if your web page is responsive and views properly on mobile and tablet by clicking this button
13. Preview the website
once you are done editing you can click on this button to preview the website on another tab on your browser
14. Publish the page
once you have finished editing the page you can publish so that the changes you’ve made can go live.