Before we can set a new image, we need to prepare it to ensure it will fit the page properly. Firstly, upload the image to your media library and click on it to open the attachment details view. At the bottom, click the “Edit Image” button to load up the image editor. We now need to crop the image to the correct size; we can tell you the specific size for your website as this can vary. Drag anywhere on the image to create a selection, then type the size specified into the selection box on the right-hand side to scale it properly. Then click and drag the centre of the selection to encompass the part of the image you’d like to display. Once you are happy, click the crop button in the top left then click save. You can now exit the attachment details view and head to the page you’d like to update.
From the front end of any page, you can click the “Enable Visual Builder” option in the menu bar at the top to launch the builder. The page will refresh, and you should begin to see parts of the site begin to highlight as you move your mouse around the page.
To change the main image, we typically need to open the settings for the blue section which is usually right at the top surrounding our header image. Click the settings cog to open up the Section Settings and click to expand the Background section, this is where the image is usually configured.
Just like with an image module, you can now click anywhere on the image to load up the media library and select the image you have just cropped. Click upload in the bottom right to select the image.
When you are happy with your changes, press the tick on any open settings windows then use the “Exit Visual Builder” button at the top of the page. This will save and publish your changes and exit the editor.