Ex 1 - How to use Elementor
Step 1:
When you first load up elementor you’ll be taken to this page where you get the option to “Drag widgets” with a plus button next to it. Once you click on that you’ll be given the option to “Select your structure” where you can choose from a selection of column options
Step 2
Once you click on the candy box menu you’ll be given a wide selection of different widgets to add onto your columns. If you wish to get more specific widgets used for your an issue you want to solve you can download plugins to elementor. For example, the Royal Addons plugin allows me to add navigation menus onto the website free of charge.
Step 3:
You can customise the background of your collumns by using the navigation bar on the left to find the “Style” section where you can change the coloour of it as well as adding photos
Step 4:
Once you’ve highlighted the column If you want to change the width of the it then you can use the slider found in the layout section to alter the size. In this section you can also change the column gap, height etc.
Step 5:
When you want to be able to preview your work you can click on the eye icon on the bottom of your page which will show you what the website looks like from the perspective of someone visiting your page. To the right of that is the publish button where you can make the webpage live and save all your work.
Step 6:
If you wish to make your website responsive for different devices you can click on the small button next to the preview button
Once you’ve changed an element on a different device screen size make sure to change what device you’re using on the edit panel so that each time you change the aspect ratio everything is kept in order.
Once you’ve clicked that a black bar will pop up at the top of your screen. Here you can choose from a desktop, tablet and phone screen size
Step 7:
When writing text or adding images you may want to add space around the border, otherwise known as padding. To do this you can go to advanced on the element you wish to have padding and increase the number here
In the second image you can see the padding makes it easier to read and looks less cluttered on the page
