In the previous tutorial, we focused on introducing you on editing a page. To recap, to edit a page, click the “Pages” element on the Dashboard and hover over a Page you’d like to edit from the list and select the option that says “Edit With Elementor”. An interface for you to edit the website easily, should open. We also focused on changing text. By now, you should grasp that the left side panel is where most of your changes will be done and the right side of the panel will show you the changes in real time.
So let’s move onto changing Photos, Buttons and adding some links.
After choosing our image, it would look something like the following:
Congratulations, you would’ve changed a photo. Now not everytime you might find photos with the same dimensions. For example, our Bullseye, Horn and Webpage images on the screen all had the same dimensions. We were lucky that they all aligned exactly. What happens if one image is bigger than the other? Well, it’s quite simply and we’ll focus on that next.
So to easily adjust the size of a image we will once more click on the item we want to edit. In this case we will click on the Rocketship. As usual, the regular panel on the left side will open but we’ll be undertaking an extra step to change the size.
Once you’ve clicked the style tab you should see new options appear such as Width, Max Width, Opacity and so much more. To change the size of the image, we will be focusing on the “Width” which is highlighted and labelled 2. You’ll notice the width is at a specific number. In this case the width is 100. It will differ for you but you would want to slide the slider. When you slide the slider, you will notice in the main screen the object get larger or smaller. To reduce the image size, we’ll slide it until we have arrived at a satisfactory result.
Now that you’ve become a lot more familar with the interface, let’s change a button. The button works similar. You’ll notice when you learn one concept it applies to everything else. Let’s quickly change the text and design of a button.
Now that we changed the text, we want to change the colour of the button to a Red. So the first thing we’d do is realise, that is this changing the style of the button. So at the top, where we see “Content, Style and Advanced”- we will select the “Style” tab. Once selected you would see the “Background Colour” option that you can change. It will look something like this.
Seems like we’re all good to go. The text has been changed as well as the colour. We’ll now select the “Update” button to publish the changes.
Note: The left panel has a lot of other features we are not focusing on in these tutorials. if you would like to know how to change Icon Spacing, and so forth- you can find this in the advanced section. However, it is easy as moving the slider back and forth. If you would like to change the link of the button, you can just paste the new link the area you see “Link”. More on this in the advanced tutorials.
One last thing we will highlight in this tutorial is the Font Type, Font Size etc. This is where you can change the design of the text, size and so forth. So notice in the same highlighted section there’s an option that says “Typography”. Let’s select that.
Here you can change the size of text, the weight, you can transform it to different designs and more. Think of it like Microsoft Word or typing a document. This tutorial will end here. We learnt how to change a photo, resize a photo, utilize the “Style” tab and of course adjust other areas like colours and typography. This gives you a large array of control over your new website.