Editing Photos, Buttons, Typography.

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.

We’ll be changing the Rocket photo to a Bullseye photo. So firstly, we’d click what we want to change and you’d notice that the left side panel opens up the image to be changed. In the second part, we just have to select the rocket in the left panel and they would ask us to choose or upload a image from our device to use in the space.

After choosing our image, it would look something like the following:

Notice the bullseye we would have selected is now there in the area and you can see a preview in the main screen. All we would’ve had to do is now select “Edit”.

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 in this example, we will notice the Rocketship is a bit bigger than the other icons which makes everything else looks unitidy. We will be fixing this. This can occur if icons or images you import have different sizes.

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.

1. Notice at the top there are three tabs: “Content, Style and Advanced”. When clicking the image it would generally bring you on the Content Tab, so that you may edit the content. This time, we want to click the “Style” tab so “Style The Image”

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.

After sliding, we thought everything seems aligned now. You’ll notice we slid the width from 100 to 60. We thought 70 was still to big and 50 was too small. 60 was the best size for us. Remember different images will have different sizes, so you’ll need to slide until you get wha works for you. Now we will select “Update” and everything will be complete.

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.

So we want to change the text of this button to “View Amazing Clients” and change the colour to a red. Let’s begin. First we selected the item we want to edit, which is button. We’ll once more notice that the left panel has the information we need to change. We’ll change what is relevant.

After making the changes, it will look like this. Amazing right? 🙂

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.

Notice, we selected the “Style” tab and also changed the Background Colour. The background colour is appropriately labelled in the highlighted section. Once you click the background colour, a colour picker will open where you can easily choose your colour.

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.

When we selected the “Typography” button this menu popped up.

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.