Preview Divi site examples with full page screenshots

From now on Divi websites listed in the Divi Theme Examples showcase will have full page scrollable screenshots on the internal page so you can preview before clicking through to the live Divi website.

A better user experience when browsing Divi site examples 

Up until this update, I have just been uploading an image which shows the above the fold portion of each website example, but in order to improve UX for Divi Theme Examples users I wanted to have the full page screenshot show on the internal example page.

Cropping the WooCommerce images

Getting the full page screenshot to display on the internal pages is just a case of uploading a full page screenshot as the featured image, but the main Divi examples/shop page images are cropped to a set size and that crop is taken from the center of the image by default in WordPress.

I wanted to upload 1 full page screenshot featured image for each example and have the shop page show the top above the fold section and the inner product page to show the full page screenshot.So, in order to have the full page screenshot on the inner pages and the above the fold screenshot for the shop page I needed to specify the crop position of the WooCommerce catalog image.

There are a few options to do this but i went with a free WordPress plugin to do the job.

Download Image Regenerate & Select Crop

The Image Regenerate & Select Crop plugin

In order to control how the featured images are cropped when uploading to a product in Woocommerce (Divi Theme Examples uses WooCommerce for the examples) I have added a plugin called Image Regenerate & Select Crop.

This plugin allows you to do various tasks with your images but the specific feature I used is to specify that the crop on the shop_catalog image is cropped from the top of the image. The result is that the examples (shop) page image is cropped to show the top above the fold portion of the example website, and the catalog image which is shown on the internal product (example) page shows the full page screenshot. The image below shows the option within the plugin for the shop_catalog image which is set to crop from the top, rather than the center of the image.

divi site examples crop position

Add a scroll bar to the screenshots

Seeing that every Divi example had a different size screenshot, with some being quite long, it made sense to add a scroll bar so the images can be scrolled by the user. To do this I added some custom css into my Divi child theme which sets a maximum height and auto scroll on the WooCommerce product image. The following custom css code was used to achieve this;

/*Set product page image height and scroll*/
.woocommerce div.product div.images{max-height:300px; overflow:auto;}

Do you have any feature requests for Divi Theme Examples?

This latest update to Divi Theme Examples came from a suggestion from a user in the Divi Facebook group, and as always I appreciate any feedback on the site and welcome any suggestions. So, if you have any great suggestions for making Divi Theme Examples a better Divi resource for the community feel free to drop me a line via the contact form or contact me via Facebook. ūüôā¬†

Thanks

Craig

Pin It on Pinterest

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close