How to Turn Your Divi Testimonial Module Sticky | Elegant Themes Blog

One of the interesting things about building layouts with Divi is the many ways we can approach a design. Modules that include content are a great example. We can use their content options, or we can use them along with other modules to create some unique designs. For example, combinations of modules allow us to create sticky elements. In this article, we’ll see how to turn your Divi testimonial module sticky while letting the testimonial content scroll as normal.

Here’s a look at what we’ll make. The mobile version of this design will not be sticky, so I’m only showing the desktop version for the preview.

My Divi Testimonial Sticky Module Example

For my example, I’m using the landing page from the free Electrical Services Layout Pack that’s available within Divi. This page already has a testimonial section near the bottom of the layout, but it has a completely different design. I’ll replace the testimonials in that section and reflect the styling of the new design. I’ll keep the title, but I’ll recreate it to show the settings.

For this tutorial, I’ll build the testimonial using two modules. I’ll use the testimonial module to display the image, name, job title, and company. For the testimonial content, I’ll use a text module. The text module will scroll as normal. The testimonial module will remain in place as the user scrolls until they’ve reached the end of the testimonial. Then, the testimonial module will scroll with the text module.

Create the Sticky Testimonial Section Title

First, create a new section and add a single-column row. This row will hold the title, which will be centered.

Title Text Module

Next, add a text module for the title.

Next, open the text module’s settings. Change the text to Heading 3 and add the title in the body content editor.

Next, go to the design tab. Set the Text Alignment to Centered.

Select H3 for the Heading Text. Choose Chakra Petch for the Font. Set the Weight to Bold and the Color to black.

Finally, choose the tablet icon for the text size and set the Desktop Size to 50px, the Tablet Size to 28px, and the Phone Size to 20px. Close the module’s settings.

Add a Row for the First Testimonial

Next, add a 2/3, 1/3 row under the title. This row will hold the first testimonial.

Row Settings

Open the design tab and enable Equalize Column Heights.

Column Settings

Open the settings for the first column with the row’s settings.

Scroll down to Border Styles and select the Top Border Style. Change the Width to 2px and the Color to #ffd600. Close the row settings. This will add a yellow line above the testimonial like the original testimonial we replaced.

Testimonial Text Module

Next, we’ll add the text module for the testimonial content. Add a text module to the left column, under the yellow line.

Enter the content of your testimonial into the content editor.

Next, go to the design tab. Choose Chakra Petch for the Font. Set the Weight to Bold and the Color to Black. For the Text Size, choose 30px for the Desktop and 14px for Tablet. The Phone setting will follow the Tablet automatically, so we won’t need to change it. Set the Text Line Height to 2em. This creates a giant print testimonial that will draw attention.

Scroll down to Text Alignment and choose Centered. Close the text module’s settings.

Testimonial Module Settings

Next, add a Testimonial module to the right column. This will be sticky and display the person’s name, company name, job title, and image.

Content Settings

Open the module’s settings and add the testimonial content. Leave the Body content empty. We’ve used the text module for that.

Scroll down to Background and set it to white.

Next, select the Pin icon. This is the sticky version of the background which will allow the background to change color when the module becomes sticky. Choose black for the Background Color.

Quote Icon

Next, go to the design tab. Choose #ffd600 for the Quote Icon Color.

Scroll down to Text Alignment and choose the Centered option. This centers the author’s name, job title, and company name text.

Author Text

Under Author Text, choose Chakra Petch for the Font and set the Weight to Bold and Centered for the Alignment. Choose black for the regular Color. Select the Pin icon and set the sticky Color to #ffd600. Set the Desktop Size to 20px and the Tablet Size to 14px.

Position Text

Next, scroll to Position Text. Choose Exo for the Font. Select black for the regular Text Color. Click on the Pin icon and set the pinned Color to white.

Company Text

Scroll down to Company Text. Choose Exo for the Font. Select black for the regular Text Color. Click on the Pin icon and set the pinned Color to white.

Box Shadow

Scroll to Box Shadow and select the first option.

Scroll Effects

Lastly, go to the advanced tab and scroll down to Scroll Effects. Select Desktop and choose Stick to Top for the Sticky Position. Set the Sticky Top Offset to 50px. Set the Bottom Sticky Element to Column. This tells the module how and where to stick.

Select the Tablet icon for the Sticky Position and choose Do Not Stick. This keeps the module from sticking for tablet and phone devices. Close the module’s settings.

Now, when you scroll, the testimonial module sticks to the top of the screen and changes color.

Once the module lines up with the bottom of the column, it scrolls with the column.

Duplicate the First Testimonial Row

Next, we’ll create the second row by copying the first row and making changes. Hover over the row and click the duplicate icon.

Finally, open the text and testimonial modules one at a time and replace the previous content with the new testimonial content. Once you’ve made the changes, close the modules and save your page. Add more testimonials by repeating the duplication process. You now have an interesting sticky testimonial section with two testimonials that stand out and look great.

That’s our look at how to turn your Divi testimonial module sticky. Divi’s settings can make any element sticky. When using modules together, such as text modules for content and testimonial modules for the supporting information, you can create some interesting designs. The testimonials we’ve created here are only one example of how to use Divi’s modules and sticky settings together.

We want to hear from you. Do you use the Divi testimonial module sticky options? Let us know about your experience in the comments.

This content was originally published here.