Keeping Images In View with EverWeb 4.5’s NEW Image Focus Area Feature!

It may seem a small feature, but it’s a significant new feature addition to EverWeb‘s new 4.5 release. Help keep your visitors focused on what’s important in your images in your site with Image Focus Area. This is a feature that you’ll want to be using for your whenever you use Hero images in your pages. It’s also great to use on images that you want to keep the most important part in focus as your visitor adjusts the width of the browser, or switches between mobile, tablet, or desktop devices.

Prerequisites
The requirements to use this feature are simple: You’ll need to use EverWeb 4.5, or higher, for macOS or Windows.

Choosing Your Image
The first thing to do is to select the image that you want to use Image Focus Area (IFA) on. Typically it’s going to be a larger image rather than a smaller one. Our recommendation is to use IFA on images that scale as you change the browser width. If you have smaller images that don’t scale, you probably won’t notice any change in focus when you change browser width.

Typically images that are full width across the page, or those that are your ‘Hero’ images, are good to go here. Also, larger images on the page are also likely good to go as well. For example, the first image on the Home page of EverWeb’s ‘Advisor’ Theme Template is a good one to apply image focus on.

Setting an Image Focus Area
Now that you’ve chosen an image, you can apply a focus to the part of it that’s important to you.

1. First select the image.
2. Next, click on the Shape Options tab.
3. To use image focus, you’ll need to set the image scaling type to ‘Scale to Fill’ in the field below ‘Image Fill’.
4. Scale To Fill is the only option that uses Image Focus Area. If this is not how you want your image presented, stay with your original scaling option.
5. Once you have set Scale to Fill, the ‘Adjust Focus Area…’ button will become available further down in the Fill section.
6. Click on the Adjust Focus Area… button. You will now see the image at its original size. This may mean that you only see part of your image in the window. Use the mouse, or trackpad, to scroll the image up, down, left or right, until you have the area that you want to focus on in view. Don’t worry if not all of the area is in view, you can adjust this later.
7. Click inside the image and draw a rectangle to cover the area of the image that you want to be the focus. You can scroll the image at the same time using the mouse so that the rectangle covers the whole area you want it to.
8. Use the grab handles at the Image Focus rectangle’s corners to adjust its height and width as desired.
9. If you click outside the rectangle, this will create a new Image Focus rectangle, deleting the previous one in the process. if you don’t want to use image focus any more on the image, click on the ‘Clear Selection’ button in the bottom right hand corner of the window.
10. If you click inside the image focus rectangle, you can drag it around the image.
11. When finished setting up the image focus rectangle, click on the ‘Apply’ button.

Viewing the Image in Focus
You will be returned to the Editor Window. The image should have adjusted to focus on the area that you selected. You will also see a semi-transparent rectangle on top of the image covering the area you made in the Image Focus editor. If it does not appear to have done so, try reducing of expanding the width of the EverWeb app to see if the image changes. You can also use Preview in EverWeb’s Toolbar to view your page in a browser window. Again, alter the width of the image to see if it changes the focus or not.

Troubleshooting
If you are still finding that the image is not focused where you want it as you change your browser width, or the width of the EverWeb app, then try the following:

1. Increase the size of the image. It could be that the image is too small on the page to make the image focusing noticeable
2. Check the size of the Image Focus Area. Click again on the ‘Adjust Focus Area…’ button and make the focus area larger. It’s possible that the image focus area you created is too small.
3. Start over. You could try removing the focus all together and reapplying the focus to another part of the image. We usually find that extending the image focus rectangle to take up more of the width or height o the image works better,

EverWeb’s new Image Focus Area feature is a great way to keep the important part of your image in view when it’s viewed on different devices. And super simple to use too!