Images are a great way to bring life to your page. Who wants to read a book without images? Well, we can say the same about websites. Without images to help visualize things, visitors may get lost or bored of the page and leave to go somewhere else.
Images should be strategically placed on your site to help guide the visitor through your page (just like we use headline elements and other design featuers). You want your visitor and potential lead/client to follow the page and then click on any call to actions you have throughout the page.
OptimizePress makes it easy for you to add images, and not only that, but the images you add to the page can also be used to trigger overlays, and can also be linked to other pages or other sites as you need.
To learn more about the possibilities, please watch the video below:
Here are the steps to use the ”
Image” element of OP3:
1) Open the page through the OP3 page builder.
2) Use the (
+) to view the elements list, or simply open the sidebar if you are not within another element already.
3) Look for the ”
Image” element from the elements list.
4) Select the ”
Image” element and drag to the section of the page where you would want it to be added.
You can choose from the (
3) available options to set an image:
- Upload Files – upload an image saved from your drive to your site.
- Media Library – choose from the images uploaded to your site’s media files folder.
- Unsplash – use the special integration with the Unsplash Stock Photo Library option.
To use the “Unsplash” integration on an Image element, check out this article
here.
Style Your Image
You can also style your image and add effects to it. When you click on the image after adding it to your page, you can re-size, add borders and shadows, and even add overlay colors and effects.
Adding an image overlay color
Click on the color pallet, and select the options for your image overlay color. It is best to match the color styling of the rest of the page, and a great way to make images stand out as wel
Give your image some nice effects
Clicking the image icon in the element toolbar for the images element, you will see “Image Effects” – just click on that and you’ll see several settings there so you can adjust your image without using an image editing software. You can adjust the brightness, opacity, blur, contrast, grayscale, sepia, invert, as well as saturation. These are options that can help give you that professional look you are going after:
Add some borders and shadows
You’ll be surprised how adding some border radius and some shadows can really make an image stand out. Just click on the borders icon to find these options:
Quick Border Radius Tip: If you click on each corner of the border radius (orange arrows in the image above) you can change each corner’s radius to give an interesting look to the image (like I did above – notice the top left/right corners). Adding the shadow effect also made the image stand out a bit more as well.
You can also add links, and trigger overlay elements with your images.
Click the link icon to get to the link settings.
1) You can link a URL by selecting “LInk URL” from the Action dropdown
2) If you choose the “Show Popup Overlay” you’ll want to be sure you already created the overlay, or go and do that before continuing (you can click the buttons in the settings there to create them). Once created, you can select that overlay under “Pop Overlay Trigger
3) You can also choose to link within the page. Choose “Jump to Element” from the dropdown, and then remove any link URL you have.
Then click the “Select Target” and scroll down your page and click on the element you want to jump to.
Turn on the smooth scroll option to gave that slow “jump” effect where it scrolls fast to the element you linked to.
AS you can see there are a lot of options we thought about when creating the image element.
NOTE about image sizes:
If your image looks grainy or blurry, you’ll want to make sure you selected the full size version of the image. The default behavior of WordPress when you upload files will be to offer the file in various file sizes depending on settings in your WordPress Theme, or WordPress default behavior.
If you previously selected a smaller size for an image somewhere else on your site, and you then add an image with OptimizePress, WordPress will remember your setting and automatically select the smaller size option. You’ll then want to make sure you change this to the proper size, or full size image depending on what you need for where you are adding the image.
We use the default media library options built into WordPress in order to ensure ongoing compatibility and ease of use, so these options are not coming directly from OptimizePress which is why it works this way.
You may select the image size you want after you select the image you want to add, as you can see in the following screenshot:
