Tired of the same old, generic team section on your Divi website? Elevate your design with a captivating avatar stack.
In this guide, we will show you how to create a stunning avatar stack in Divi that will not only showcase your content but also leave a lasting impression on your visitors.
Let’s get started.
First, let’s look at what we’re building. In the following section, we will recreate one of our demo avatar stack designs. The result will look exactly like this: |
Step 1: Install and Activate DiviFlash Plugin
First, purchase the DiviFlash plugin from their websites. (It includes 50+ other modules besides the Stack module). Then navigate to your WordPress Dashboard and follow the instructions below,
- Navigate to Plugins > Add New Plugin.
- Click Upload Plugin and choose Choose File.
- Select the DiviFlash Plugin ZIP file and click Install Now.
- After successful installation, click “Activate” to activate the DiviFlash plugins.
The Stack Module may not be enabled by default, so you might need to enable it manually. To do this,
- Navigate to WordPress Dashboard > DiviFlash > Modules tab,
- Search for the “Stack” module, and enable it. Or, simply click on Enable All.
Step 2: Insert the Stack Module
After completing the plugin installation, the next step is to add our Stack module. But before that, we’ll need to create a new page since we’re building this from scratch. You can also design the Carousel section on an existing page.
Simply follow the steps,
- Go to your WordPress dashboard.
- Navigate to “Pages” and click “Add New Page.”
- Give your page a title and click “Use Divi Builder.”
- Select “Build From Scratch” from the three options. It will take us to the Divi visual builder.
- Add a two-column row. A modal with the available module will appear now.
- Search for the “Stack” module and click on it to insert it.
Note: To fulfill the design requirement, we first added a heading and button using the heading and button module in the left column, then added a relevant image in the right side column using the image module, and finally adjusted the row sizing (1400px) with a section background.
However, we’ll skip these steps to stay focused on the stack design process. Let’s move on to designing the stack.
Step 3: Add Stack Item
As soon as we insert the module a settings panel will appear. By default, you will get five added items. According to our design, we will delete those and add four items: images, one icon, and one rating item.
Simply follow the steps,
- Click on the Add New Item Item to add a stack item.
Add Image Avatar
- First, from the Content option, set the Content Type to Image.
- Next, scroll down to the Image option and add the image.
- Next, scroll down to the Tooltip Content and add the avatar name which will appear on hover.
- Next, click the back button in the top left corner to return to the main settings panel to add another new item.
- Now, add three more image items following the same process. Only the image and the tooltip content will change. You can also duplicate items and then edit them according to the design.
Add Icon
- Click on the grey plus icon, from the Content option, set the Content Type to Icon.
- Next, scroll down to the Icon option and add the icon.
- Next, click the back button in the top left corner to return to the main settings panel to add another new item.
Add Text
- Again, click on the grey plus icon, from the Content option, and set the Content Type to Text.
- Next, scroll down to add Title Text, Sub-Title Text, and finally set the text position to Center.
- Now, navigate to the Design Tab > Sizing and change the width value to 310px,
- Next, navigate to the Design Tab > Spacing and change the left margin value to 15px,
- Next, click the back button in the top left corner to return to the main settings panel to add another new item.
So far, we have added our stack items. This is how the section will look.
This is just the basic structure of the stack with just the items. Now, we will enhance the stack with various design options to match our chosen style.
Step 4: Apply Spacing
Open up the Stack Setting option and make the following changes,
- Stack spacing: -15px
- Stack spacing on hover: 3px
Step 5: Enable Tooltip
Scroll down to the tooltip setting option and enable the tooltip to make the avatar name visible. Then make the following changes,
- Tooltip: ON
- Arrow: ON
- Placement: Top
- Animation: Fade
- Trigger: Hover
- Hover on tooltip: ON
- Follow cursor: ON
Step 6: Customize and Style the Stack Group
So far we just give a shape to our avatar stack. Now we will design it to meet the demo design.
- First, navigate to the Design Tab > Icon and make the following changes,
Color: #000000
Background color: #f6ff00
Rounded corner: 100% each
Border width: 0px
Border color: #ffffff
Icon container width: 64px
Icon container height: 64px
- Next, navigate to the Design Tab > Image and make the following changes,
Rounded corner: 100% each
Border style: All side
Border width: 2px
Border color: #ffffff
Image container width: 64px
Image container height: 64px
- Next, navigate to the Design Tab > Text > Title and make the following changes,
Heading level: H4
Font: DM Sans
Text alignment: Left
Text color: #ffffff
Line height: 150%
- Next, navigate to the Design Tab > Text > Sub-Title and make the following changes,
Heading level: H6
Font: DM Sans
Text color: #ffffff
Text size: 16px
Line height: 150%
- Next, navigate to the Design Tab > Text Container and make the following changes,
Background color: rgba(255,255,255,0)
Rounded corner: 0px
Border width: 0px
Border color: #ffffff
Icon container width: 64px
Icon container height: 64px
- Next, navigate to the Design Tab > Spacing and make the following changes,
Left text margin: 0px
Bottom margin: 50px
Top padding: 0px
Bottom padding: 0px
Preview the Stack Group
Now that our Stack section is ready to publish.
Conclusion
With a well-designed avatar stack, you can enhance your website’s visual appeal, improve user engagement, and effectively showcase important information. The possibilities are endless!
We hope this tutorial has provided you with the knowledge and tools you need to create a stunning avatar stack in Divi. For further inspiration, feel free to explore our demo page, where you’ll find a variety of modern and trendy stack layouts to spark your creativity.
If you face any issues, please leave a comment below. Our dedicated support team is always here to help you out.
0 Comments