Animated Service Boxes Widget: Settings Overview

Updated on June 24, 2024 by Editorial Team
Table Of Content

With the Animated Service Boxes widget from The Plus Addons for Elementor, you can add different types of animated content sections like image accordion, service box, portfolio section, info banner and more.

Check the Live Widget Demo

Required Setup

Learn via Video Tutorial:

How to Activate the Animated Service Boxes Widget?

Go to 

  • The Plus Settings Plus widgets 
  • Search the widget name and turn on the toggle then click Save.

Animated service boxes activate animated service boxes widget: settings overview from the plus addons for elementor

Key Features

How to Use the Animated Service Boxes in Elementor?

Add the Animated Service Boxes widget to a page.

Animated Service Boxes 

From the Main Style dropdown, you can select the service box type. Here you’ll find eight options – 

  • Image Accordion – With this option, you can create an image accordion.
  • Sliding Box – With this option, you can create a sliding box effect.
  • Article Box – With this option, you can create an article box.
  • Info Banner – With this option, you can create an info banner.
  • Hover Section – With this option, you can change the background image on hover.
  • Fancy Box – With this option, you can add a fancy box to show content.
  • Service Elements – With this option, you can add an animated service box.
  • Portfolio – With this option, you can add unique portfolio sections.

You’ll see different options based on your selection, let’s select Fancy Box here.

Animated service boxes content animated service boxes widget: settings overview from the plus addons for elementor

From the Style dropdown, you can select a style.

Then from the Image Resolution dropdown, you can select the image size.

By enabling the Button toggle you can add a button to the service box.

When enabled you can select a button style from the Button Style dropdown.

Then in the Animated Service Boxes section, you have to add the content for the service box. By default, you’ll find three items, open one item.

In the Title field, you can add the service box title.

From the Select Icon dropdown, you can select the image type for the service box. Here you’ll find four options – 

  • None – This will not add any image to the service box.
  • Icon – With this option, you can add an icon to the service box.
  • Image – With this option, you can add an image to the service box.
  • Lottie – With this option, you can add a Lottie file to the service box

In the Sub Title field, you can add a subtitle to the service box.

You can add a description to the service box in the Description field.

From the Featured Image section, you can add a background image to the service box.

In the Button Text field, you can add the button text of the service box. 

Then in the Button Link field, you can add a link to the button.

Note: Make sure the Button toggle is enabled to make the Button Text and Button Link fields work.

Following this process you can edit the other service box items.

You can click on the +Add Item button to add more service box items.

Layout

From here, you can add custom CSS Transform to the service box for normal and hover states.

Animated service boxes layout animated service boxes widget: settings overview from the plus addons for elementor

Columns Manage

From here, you can manage the number of service boxes in a row for desktop, tablet and mobile separately.

Animated service boxes columns manage animated service boxes widget: settings overview from the plus addons for elementor

From the Columns Gap/Space Between section, you can manage the gap between the items.

How to Style the Animated Service Boxes Widget?

To style the Animated Service Boxes, you’ll find all the options in the Style tab.

Note: You’ll find different styling options for different types of service boxes.

Title – From here, you can manage the service box title typography, color, text shadow and other styles. You can also change the title HTML tag as well from here.

Animated service boxes style animated service boxes widget: settings overview from the plus addons for elementor

Sub Title – From here, you can manage the service box sub title typography, color and HTML tag.

Description – From here, you can manage the service box description text style.

Icon – You’ll see this option only when the Image/Icon toggle is enabled from the Content tab. From here, you can manage the service box icon style.

Lottie – From here, you can manage the Lottie file style.

Listing – You’ll see this tab when the Services Elements is selected. From here, you can style the service box listing typography, color and margin.

Button – You’ll see this option only when the Button toggle is enabled from the Content tab. From here, you can manage the service box button style.

Content Background – From here, you can manage the service box content area padding, border radius and hover overlay background.

Outer Content – You’ll see this tab when the Article Box is selected. From here, you can style the service box border, box shadow etc.

Content Background Back – You’ll see this tab when the Info Banner is selected. From here, you can manage the back of the content background overlay color and background.

On Scroll View Animation –  This is our global extension available for all our widget, this adds scrolling animation as the widget comes in viewport. You can learn more about this from here.

Learn more about On Scroll View Animation

Advanced options remain common for all our widget, you can explore all it options from here.

View Advanced Tab Tutorial

OR
Get Free 25+ Secrets to Make Elementor Website Faster [Guaranteed Results]



    Subscribe to our YouTube Channel for Elementor Tutorials
    New Video Every Week!
    Automatically Convert Figma Designs to 100% Editable Elementor Website
    X