How to Include Sticky Item Images to Your Divi Item Page Design Template

How to Include Sticky Item Images to Your Divi Item Page Design Template

When it concerns purchasing items online, terrific item images are vital to closing the sale. That’s why most item pages have those item images at the top of the page so it is the very first thing purchasers see. As the user scrolls down the page to see more info about the item (descriptions, evaluations, and so on), the primary item image is no longer in sight. One method to keep those item images in view is to include a sticky item image that remains in deem a possible purchaser searches your item information.

In this tutorial, we are going to reveal you how to include sticky item images to your Divi item page design template. To do this, we can enhance Divi’s WooCommerce item image module to stick and reveal at the top of the page simply as the initial item image scroll out of view.

Let’s start!

Preview

Here is a glance at the style we’ll integrate in this tutorial.


< source src=" https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/spi-vid1.webm" type =" video/webm" >< source src=" https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/spi-vid1.mp4 ">< source src =" https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/spi-vid2.webm" type=" video/webm ">< source src=" https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/spi-vid2.mp4" > Download the Design totally free To lay your hands on the styles from this tutorial, you will initially require to download it utilizing the button listed below.

If you’re currently on the list, just enter your e-mail address listed below and

click download. You will not be” resubscribed”

or get additional e-mails.< div class =" et_bloom_locked_container et_bloom_optin_1" data-page_id=" 139390" data-optin_id=" optin_1" data-list_id =" mailchimp_c886a2fc0a" data-current_optin_id=" optin_1" > Download the Files< div class=" et_bloom_inline_form et_bloom_optin et_bloom_make_form_visible et_bloom_optin_1" >< div class=" et_bloom_form_container with_edge carrot_edge et_bloom_border_solid et_bloom_rounded et_bloom_form_text_light et_bloom_form_bottom et_bloom_inline_1_field" >< div class= "et_bloom_form_content et_bloom_1_field et_bloom_bottom_inline" > You have actually effectively subscribed.

blog post template for Divi's Copywriter Layout Pack

Please examine your e-mail address to validate your membership and get access to complimentary weekly Divi

design loads! How to Publish The Design template Go to Divi Style Contractor To submit the design template,

blog post template for Divi's Copywriter Layout Pack

browse to the Divi Style Home builder in the backend of your WordPress site.< img loading= "lazy "class= "with-border aligncenter wp-image-126950 size-full "src=" https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-include-sticky-item-images-to-your-divi-item-page-design-template-2.jpg" alt =" article design template for Divi's Copywriterblog post template for Divi's Copywriter Layout Pack

Design Load “width=” 880 “height =” 731″ srcset=” https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-include-sticky-item-images-to-your-divi-item-page-design-template-2.jpg 880w, https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-include-sticky-item-images-to-your-divi-item-page-design-template-17.jpg 300w, https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-include-sticky-item-images-to-your-divi-item-page-design-template-18.jpg 768w, https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-include-sticky-item-images-to-your-divi-item-page-design-template-19.jpg 610w” sizes=” (max-width: 880px) 100vw, 880px” > Upload Site Design Template In the leading right corner, you’ll see an icon with 2 arrows. Click the icon.< img loading =" lazy" class=" with-border aligncenter wp-image-126951 size-full" src=" https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-include-sticky-item-images-to-your-divi-item-page-design-template-3.jpg" alt=" article design template for Divi's Copywriter Design Load" width=" 880" height=" 720" srcset =" https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-include-sticky-item-images-to-your-divi-item-page-design-template-3.jpg 880w, https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-include-sticky-item-images-to-your-divi-item-page-design-template-20.jpg 300w, https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-include-sticky-item-images-to-your-divi-item-page-design-template-21.jpg 768w, https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-include-sticky-item-images-to-your-divi-item-page-design-template-22.jpg 610w" sizes="( max-width: 880px) 100vw, 880px" > Browse to the import tab, publish the JSON file which you had the ability to download in this post, and click’ Import Divi Style Contractor Templates’.< img loading=" lazy" class=" with-border aligncenter wp-image-126952 size-full" src=" https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-include-sticky-item-images-to-your-divi-item-page-design-template-4.jpg" alt =" post design template for Divi's Copywriter Design Load" width=" 880" height=" 553" srcset=" https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-include-sticky-item-images-to-your-divi-item-page-design-template-4.jpg 880w, https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-include-sticky-item-images-to-your-divi-item-page-design-template-23.jpg 300w, https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-include-sticky-item-images-to-your-divi-item-page-design-template-24.jpg 768w, https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-include-sticky-item-images-to-your-divi-item-page-design-template-25.jpg 610w" sizes="( max-width: 880px) 100vw, 880px" > Conserve Divi Style Contractor Modifications You’ll see a brand-new design template with a brand-new body location that has actually been designated to All Posts as soon as you have actually published the file. Conserve the Divi Style Contractor alters as quickly as you desire the design template to be triggered.< img loading=" lazy" class= "with-border aligncenter size-full wp-image-128349" src=" https://www.elegantthemes.com/blog/wp-content/uploads/2020/05/save-changes.jpg "alt=" divi Copywriter post design template" width =" 880 "height=" 661" srcset=" https://www.elegantthemes.com/blog/wp-content/uploads/2020/05/save-changes.jpg 880w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/05/save-changes-300x225.jpg 300w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/05/save-changes-768x577.jpg 768w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/05/save-changes-610x458.jpg 610w" sizes =" (max-width: 880px) 100vw, 880px" > Let’s get to the tutorial so we can discover to develop this thing from scratch, shall we? How to Include Sticky Item Images to Your Divi Item Page Design Template Submitting the Style Home Builder Load 5 Item Page Design Template To begin, we are going to get a jumpstart on the style by include among our premade item page design templates. To import the design template the Style Home builder, you will require to do the following

  1. : Browse to the Divi Style Contractor
  2. Click the mobility icon on top right of the page.
  3. Select the Import tab in the Mobility popup.
  4. Download and Import the Divi Divi Style Home Builder 5 Item Design Template Submit. When you download the pack here, unzip the file and you will discover the “divi-theme-builder-pack-5-product-page-template. json” file you will require to import.
  5. Click the Import Button
  6. When the design template has actually been imported, click the edit icon on the design template’s custom-made body location to modify the design template design.

divi sticky product images template

< img loading =" lazy" class=" with-border aligncenter size-full wp-image-139588" src=" https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-include-sticky-item-images-to-your-divi-item-page-design-template-5.jpg" alt= "divi sticky item images design template" width=" 880 "height=" 564" srcset= "https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-include-sticky-item-images-to-your-divi-item-page-design-template-5.jpg 880w, https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-include-sticky-item-images-to-your-divi-item-page-design-template-26.jpg 300w, https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-include-sticky-item-images-to-your-divi-item-page-design-template-27.jpg 768w, https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-include-sticky-item-images-to-your-divi-item-page-design-template-28.jpg 610w" sizes ="( max-width: 880px) 100vw, 880px" > Include a New Row We desire the item image to reveal once the

user has actually scrolled past the leading area which currently consists of the item image

divi sticky product images template

( no requirement to reveal it there). We are going to include it to a brand-new area under the leading area of

  • the layout. Proceed and include a brand-new routine area under the leading area.divi sticky product images template

    < img loading=" lazy" class=" with-border aligncenter size-full wp-image-139573"

  • src=” https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-include-sticky-item-images-to-your-divi-item-page-design-template-6.jpg” alt =”

divi sticky item images design template “width= “880” height=” 495″ srcset= “https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-include-sticky-item-images-to-your-divi-item-page-design-template-6.jpg 880w, https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-include-sticky-item-images-to-your-divi-item-page-design-template-29.jpg 300w, https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-include-sticky-item-images-to-your-divi-item-page-design-template-30.jpg 768w, https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-include-sticky-item-images-to-your-divi-item-page-design-template-31.jpg 610w “sizes=”( max-width: 880px )100vw, 880px” >

divi sticky product images template

Open the settings

of the brand-new area and upgrade the cushioning:

divi sticky product images template

Cushioning: 0px leading, 0px bottom The go to the innovative tab and upgrade the z index: Z Index: 13 When scrolling, this is so the image( the kid component of this area) will remain above the other sections/elements on the page.< img loading=" lazy" class=" with-border aligncenter size-full wp-image-139575" src=" https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-include-sticky-item-images-to-your-divi-item-page-design-template-8.jpg" alt=" divi sticky item images design template" width=" 880" height=" 667" srcset=" https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-include-sticky-item-images-to-your-divi-item-page-design-template-8.jpg 880w, https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-include-sticky-item-images-to-your-divi-item-page-design-template-35.jpg 300w, https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-include-sticky-item-images-to-your-divi-item-page-design-template-36.jpg 768w, https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-include-sticky-item-images-to-your-divi-item-page-design-template-37.jpg 610w" sizes="( max-width: 880px) 100vw, 880px" > Include the Row Next, include a one-column row in the area. < img loading=" lazy" class=" with-border aligncenter size-full wp-image-139578" src=" https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-include-sticky-item-images-to-your-divi-item-page-design-template-9.jpg" alt=" divi sticky item images design template" width=" 880" height=" 388" srcset=" https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-include-sticky-item-images-to-your-divi-item-page-design-template-9.jpg 880w, https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-include-sticky-item-images-to-your-divi-item-page-design-template-38.jpg 300w, https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-include-sticky-item-images-to-your-divi-item-page-design-template-39.jpg 768w, https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-include-sticky-item-images-to-your-divi-item-page-design-template-40.jpg 610w" sizes="( max-width: 880px) 100vw, 880px" > Open the row settings and change the row positioning and cushioning: Row Positioning: Padding: 0px leading, 0px bottom< img

loading=” lazy” class=” with-border aligncenter size-full wp-image-139586 “src=” https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/divi-sticky-product-images-template_2.jpg” alt=” divi sticky item images design template” width= “880 “height =” 708″ srcset= “https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/divi-sticky-product-images-template_2.jpg 880w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/divi-sticky-product-images-template_2-300×241.jpg 300w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/divi-sticky-product-images-template_2-768×618.jpg 768w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/divi-sticky-product-images-template_2-610×491.jpg 610w” sizes= “( max-width: 880px) 100vw, 880px” > Include Item Image Now we are prepared to include

divi sticky product images template

the item image that will

ultimately stay with the top of the page on scroll. To include the item image, copy the existing item

  • image module in the leading area, and
  • paste it into our brand-new row.< img loading

    =” lazy “class= “with-border aligncenter size-full wp-image-139579″ src =” https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-include-sticky-item-images-to-your-divi-item-page-design-template-10.jpg” alt= “divi sticky item images design template” width=” 980 “height=” 1067″ srcset =” https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-include-sticky-item-images-to-your-divi-item-page-design-template-10.jpg 980w, https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-include-sticky-item-images-to-your-divi-item-page-design-template-41.jpg 276w, https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-include-sticky-item-images-to-your-divi-item-page-design-template-42.jpg 941w, https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-include-sticky-item-images-to-your-divi-item-page-design-template-43.jpg 768w, https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-include-sticky-item-images-to-your-divi-item-page-design-template-44.jpg 610w” sizes =”( max-width: 980px)

    divi sticky product images template

    100vw, 980px “> Woo Images Settings Open the settings for the brand-new charm images module and

    divi sticky product images template

    change the material as follows:

    • Program Gallery Images: OFF Program Sale Badge: OFF (KEEP IN MIND: you can keep the gallery images if you
    • desire. Simply beware not to use up excessive area considering that this image

    divi sticky product images template

    module will be hovering over other components on the page

    • .)< img loading =" lazy" class=" with-border aligncenter size-full wp-image-139576" src=" https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-include-sticky-item-images-to-your-divi-item-page-design-template-11.jpg" alt=" divi sticky item images design template" width=" 880" height=" 626" srcset=" https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-include-sticky-item-images-to-your-divi-item-page-design-template-11.jpg 880w, https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-include-sticky-item-images-to-your-divi-item-page-design-template-45.jpg 300w, https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-include-sticky-item-images-to-your-divi-item-page-design-template-46.jpg 768w, https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-include-sticky-item-images-to-your-divi-item-page-design-template-47.jpg 610w" sizes="( max-width: 880px) 100vw, 880px" > Under the style tab, upgrade the Force Fullwidth alternative to” YES”. < img loading=" lazy" class=" with-border aligncenter size-full wp-image-139580" src=" https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-include-sticky-item-images-to-your-divi-item-page-design-template-12.jpg" alt=" divi sticky item images design template" width=" 880" height=" 629" srcset=" https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-include-sticky-item-images-to-your-divi-item-page-design-template-12.jpg 880w, https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-include-sticky-item-images-to-your-divi-item-page-design-template-48.jpg 300w, https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-include-sticky-item-images-to-your-divi-item-page-design-template-49.jpg 768w, https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-include-sticky-item-images-to-your-divi-item-page-design-template-50.jpg 610w" sizes="( max-width: 880px) 100vw, 880px" > Then upgrade the following: Max Width: 300px( desktop), 200px( phone) Module Positioning: < img loading=" lazy" class=" with-border aligncenter size-full wp-image-139581" src=" https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-include-sticky-item-images-to-your-divi-item-page-design-template-13.jpg" alt=" divi sticky item images design template" width=" 880" height=" 665" srcset=" https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-include-sticky-item-images-to-your-divi-item-page-design-template-13.jpg 880w, https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-include-sticky-item-images-to-your-divi-item-page-design-template-51.jpg 300w, https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-include-sticky-item-images-to-your-divi-item-page-design-template-52.jpg 768w, https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-include-sticky-item-images-to-your-divi-item-page-design-template-53.jpg 610w" sizes="( max-width: 880px) 100vw, 880px" > The change the cushioning: Cushioning: 10px top, 10px< img loading=" lazy" class=" with-border aligncenter size-full wp-image-139583" src=" https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/divi-sticky-product-images-template_6.jpg" alt=" divi sticky item images design template" width= "880" height=" 536 "srcset =" https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/divi-sticky-product-images-template_6.jpg 880w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/divi-sticky-product-images-template_6-300x183.jpg 300w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/divi-sticky-product-images-template_6-768x468.jpg 768w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/divi-sticky-product-images-template_6-610x372.jpg 610w" sizes=" (max-width: 880px) 100vw, 880px" > Under the innovative tab, upgrade the

    following: Z Index: 1 Sticky Position: Adhere To Leading This will trigger the image to stay with the top of the page once the user scrolls past that image.divi sticky product images template

    < img loading=" lazy" class =" with-border aligncenter size-full wp-image-139582 "src =" https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-include-sticky-item-images-to-your-divi-item-page-design-template-14.jpg" alt =" divi sticky item images design template" width =" 880" height= "844" srcset =" https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-include-sticky-item-images-to-your-divi-item-page-design-template-14.jpg 880w, https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-include-sticky-item-images-to-your-divi-item-page-design-template-54.jpg 300w, https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-include-sticky-item-images-to-your-divi-item-page-design-template-55.jpg 768w, https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-include-sticky-item-images-to-your-divi-item-page-design-template-56.jpg 610w" sizes ="( max-width: 880px) 100vw, 880px" > Once the sticky position remains in location, return to the style tab and utilize the sticky choice to upgrade the opacity filter so that it

    • conceals the image up until it ends up being sticky. You can release the sticky design choice by hovering over

    divi sticky product images template

    the setting and clicking the thumbnail icon. Opacity: 0 %( desktop), 100 %( sticky)< img loading=" lazy" class =" with-border aligncenter size-full wp-image-139584" src=" https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-include-sticky-item-images-to-your-divi-item-page-design-template-15.jpg "alt=" divi sticky item images design template "width =" 880" height=" 812" srcset= "https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-include-sticky-item-images-to-your-divi-item-page-design-template-15.jpg 880w, https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-include-sticky-item-images-to-your-divi-item-page-design-template-57.jpg 300w, https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-include-sticky-item-images-to-your-divi-item-page-design-template-58.jpg 768w, https://websitedesign-usa.com/wp-content/uploads/2020/11/how-to-include-sticky-item-images-to-your-divi-item-page-design-template-59.jpg 610w "sizes ="( max-width: 880px )100vw, 880px "> Get Rid Of the Spacing of the Area, Row, and Column Now, we have some undesirable spacing that the brand-new item image is utilizing within the circulation of our design. To get rid of that spacing, all we require to do is offer the column a custom-made height worth that is

    either” 0″ or something truly low. The item image will still show/overflow although it has a column with no real height. Open the column settings and include the following Custom-made CSS to the Main Aspect:

    height: 15px;
    

    divi sticky product images template

    That’s it! We’re all done.


    Result Take a look at the result by taking a look at

    a live post on your website. Last Ideas Including a sticky item image to your item page design template in Divi is a simple and fast method to keep your items in view as visitors explore your item. And, you can likewise select to stick that Contribute to Cart button beside it too utilizing the exact same method. Anyhow, ideally, this will assist you with your next job.

    I eagerly anticipate speaking with you in the remarks.

    Cheers!

Leave a Reply

Your email address will not be published. Required fields are marked *