Black Friday Services UI Kit
If your company provides services, it is very important to have them displayed on your website. The ways in which your services can be presented on your website to visitors are endless.
To help Divi Pixel users and speed up the website building process, we have prepared pre-made sections that can be used on your website in no time. With a powerful tool like the Divi Pixel in your arsenal, deciding which module to use to showcase your services can be a headache. But we will help you with that. We have designed 8 beautiful and unique sections that can be imported into your Divi library and used on your website with a few clicks. Let’s take a look!
How to import demo sections
- Extract the downloaded file
- Go to Divi/Divi Library located in your WP Dashboard
- Click Import & Export button
- In Import tab click Choose File and select .json file
- Click Import Divi Builder Layouts
- Add demo section from Divi Library to your page
Flip Box Services
The Divi Pixel Flip Box module allows you to add an icon, title, description and button for the front and back cards. After hovering over the mouse, the user can learn more about a given service. It is an ideal solution for displaying the services offered by your company. In this example, I used a card background and a colored gradient. We can also see a 3D effect when the card rotates.
Accordion Image
Recently, I really liked the Image Accordion. Thanks to the options added in the last Divi Pixel update, this is a really cool module for displaying various things. And it can also be used to showcase your services. In this sample I used this module a bit unconventionally, because I actually turned off the accordion effect, and only used the content animation effect when hovering over the mouse.
Creative use of Flip Box module
Below is another example of the creative use of the Divi Pixel Flip Box module. For this section, I set the row gutter to 1 so the spacing between cards has been removed. On the back card, I added an image and text with a description of the service. The vibrant colors used make this section more suited to the more fancy website, but if you change the colors it can also be used on more official and serious websites too.
Services with the Hover Box module
The Hover Box module is very universal. It allows you to display separate content on the hover of the mouse, so it can be used for almost anything. I used it for the Free Team Members UI Kit, and also decided to make use of it for the services page. This example uses a four-column layout. Each card has an icon and a title, and when you hover the mouse over, you can see the service description and a button that can lead to a single page of the service or any other page on your Divi site.
An underrated Lottie Icon module
The Lottie Icon module is another example that can be used to showcase your services. It is rather rarely used due to the fact that we need to load an animated icon in .json format into it. However, there are companies that offer icon libraries and one of them is the Lottie Files website. We can download animated icons, but importantly, we can also edit the colors of these icons directly on the page. So there is nothing else to do but find a nice kit and implement it on your Divi website using the Divi Pixel Lottie Icon module.
… and Hover Box
In section number 4, I used the Hover Box module with a grow effect. In the example below, I also used this module, but this time I chose the slide effect. The direction of the effect is reversed for the top and bottom cards, which gives a nice user experience.
Display your services using the Carousel module
The carousel section is used very often on modern websites. It allows you to save space on the page by allowing users to swipe between cards. In the example below, I used the powerful Divi Pixel Carousel module. I added the image, title, description, and button to each card. There are also a few lines of custom CSS code that make the card expand on mouseover.
Use Masonry Gallery Hover Effects
This is the last section we’ve prepared, but don’t worry. We have more free layouts and sections for you which we will share shortly. The Masonry Gallery module is very versatile. With the ability to display the title and description of an image from the media library on hover, it can easily be used to create a section for your services.
Win A Free Divi Pixel Lifetime License
Get an amazing 30% discount on our Black Friday Sale. If you still hesitate, see what our customers have to say. During the promotion period, you can also take a part in the competition. There are 10 free Divi Pixel licenses worth €399 each waiting for you. Want to win? Subscribe to our newsletter to find out more.
This is it! We hope you enjoy reading this article and we believe that the new features will make your web design process easier. We will soon introduce the new module, so if you don’t want to miss it, subscribe to our newsletter.
Maciej Ekstedt
Maciej, co-founder of Divi Pixel, is a passionate web designer and marketing expert who thrives on turning creative ideas into effective strategies. His fascination with the intricacies of megalopolises influences his work, where he meticulously crafts detailed solutions for his company.
Enhance your Divi Theme with Custom Settings and New Modules. Start Creating Awesome Websites with the Divi Pixel
We offer a 14 Day Money Back Guarantee, so joining is Risk-Free!
