Create a Sticky Section

With Editor V7, you can create different kinds of sticky sections based on what you need. This article will only focus on the two most commonly used styles of sticky sections: a sticky bar at the top or bottom of your page or a sticky column on one side of your product module.  

#1 Add a sticky bar on your page

Step 1: From the GemPages Dashboard, open your preferred template to edit. You can quickly find the Row element on the left sidebar of the Editor, drag and drop the Row into your preferred position.

Step 2: Nest all the elements you need inside the Row to create a sticky bar as you wish to finalize your design. You can save time by using our pre-designed template instead of designing a sticky section from scratch. Navigate to Library > Sections and search for “Sticky”. You’ll discover a range of sections including the sticky bar and sticky cart.

Step 3: Click on the section that covers the row to reveal the configuration on the left sidebar. Under the Settings tab, turn on the Full-width option. 

Step 4: Go to the Advanced tab, find the “Position” section, and select “Fixed” from the dropdown menu. Raise the Z-index above 0. Depending on your choice, enter values for Top/Bottom/Left/Right in their respective fields. For instance, if you want the bar to stick to the top of your page, input “0” in the Top box.

Don’t forget to Save and Publish and check the result on your live page.

#2 Make your product image sticky

Another way to use the sticky section is by designing a product module with fixed product images on one side and additional product details on the opposite side. 

To achieve this, follow the instructions provided below.

Step 1: From the GemPages Dashboard, open your preferred template to access the Editor.

Step 2: Add a Product Module with a 2-column layout. Complete the design by positioning the Product images & gallery element in the left column, while arranging the remaining child elements on the right column of the Product Module.

Step 3: Click on the Product Images & Gallery element to reveal the configuration on the left sidebar. Go to the Advanced tab, find the “Position” section, and select “Sticky” from the dropdown menu.

Step 4: Hit “Save” and “Publish” and check the result on the live page.