This article will explain how you can edit a header or hero image and how to adjust its position. Make sure to follow all steps in this article, especially chapter 2.

Most likely, an image – a so called Hero Image – is set as the ‘header’ of your page. An example of such an image (the first, full-width picture):

1. Adjust Position / How it is Cropped

It is possible to change the way your image is displayed within this ‘frame’. If you, for example, do not wish the small chair on the left bottom of the picture displayed above to be visible, you can change this in the following manner.

  1. Right click on the specific (hero) image > ‘Edit section’
  2. Move to the left menu and go to ‘Style’ > ‘Background’
  3. Click on Background so the dropdown menu opens.
  4. If you look at ‘Position’, this is mostly set at default or ‘center center’. If you wish to manually adjust it, you select ‘Custom’. Now two extra fields appear: X Position and Y Position.
  5. You can drag the ‘button’ on these two lines until the frame shows the exact part of the picture you wish to display.


Alert

You have now only changed the outlining of the picture on desktop. In order to make sure no errors occur regarding responsiveness, on tablet and mobile, you have to change the position for the two other device-types as well.


2. Prevent Errors

If you have only changed the position of the image in the manner described above, your picture might not display in the correct manner on mobile. To check this, please follow the next steps.

  1. Behind a lot of elements in the left menu in Elementor, you will see these little icons: 

    These respresent ‘desktop’ and means you are changing settings for the desktop version of your website. If you wish these changes to also apply to the other type of devices, you will have to manually do so.

  2. Click on the desktop-icon behind ‘Position’ to change the position for the other devices. A small menu appear with two other icons: one for tablet and one for mobile.
  3. Select the last icon (the smallest) which is for ‘mobile’.
  4. On the right side you will now see the way your website is being displayed on mobiles: 
    Obviously it is now not being displayed in the right manner. To change this, navigate to ‘Position’ again in the menu on the left side.
  5. Choose ‘Default’ or ‘center center’ and double check your image is now shown in the right way in the example on your screen.
  6. Now click on the mobile-icon behind ‘Position’ again, and choose for the Tablet-icon.
  7. Now follow the same steps for tablet, to make sure the image is shown in the right way.
  8. Press Update on the bottom of the page to save your changes.