Animated Service Boxes

< All Topics

Service Boxes as you know are used to add your business services to your website. This lets your visitor know the different types of services you offer. With our Animated Service Box widget, you can add a creative touch and make your services look even more awesome. We have provided various animation styles to choose that will wow your visitors.

Pro tip
Why not create your own animated service boxes using this widget. Showcase your services on your website with ease. Make sure to make proper use of the animations provided to increase engagement.

How to use the Animated Service Boxes widget of The Plus Addons For Elementor

The Animated Service Boxes widget comes with a plethora of animated styles to choose from. Let’s understand how to use this widget in the tutorial below. 

Table Of Contents

General Steps

Search for the Animated Service Boxes Widget from the Elementor screen in the left and then drag and drop it into the content building area.

After dropping the element, you will see three tabs i.e. Content, Style, and Advanced related to this widget. First, click on the Content tab.

1. Content

Animated Service Boxes

Change Image size in Animated service boxes widget.

Main Style

Select the animation style for your service box. We have provided different types of animation styles to choose from. They are Image Accordion, Sliding Boxes, Article Box, Info Banner, Hover Section, Fancy Box, Service Element, and Portfolio. Based on the animation style you choose above, you will see the following options for each to configure.

Image Accordion

An accordion created by images and titles, and changes on hover.

Sliding Boxes

Sliding boxes style contains the boxes and title side by side and on box hover title is displayed.

Article Box

Article box designs refers to normal blog listing type with image on top and title below layout.

Info Banner

Info banner displays image on title hover.

Hover Section

Hover section’s content is changed on title hover. Titles are pre-listed there and content is changed in background accordingly.

Fancy Box

Popup will be opened on title click.

Service Elements

Service elements style contains a drop menu on title over.

Portfolio

Same as Hover Section but different in UI.

Style

Select a preferred style of the main animation effect you chose above.

Active Slide

Specify the number of Active Slides you want to display.

Image Size

Specify the Image size of the Box.

Button

Slide right to display a Button. 

Button Style

Select the Button Style you want to display. 

Animated Service Boxes

Add content to your service boxes. Add more service boxes by clicking on add item. 

Title

Add title for your service.

Select Icon

Choose Icon option here. Select from FontAwesome library or upload your own using icon upload option.

Sub Title & Description

Add extra text like sub title and description texts into related input blocks.

Featured Image

A main image which is going to change on hover.

Button Text & Link

A CTA button to add with the content.

Button Text & Link

A CTA button to add with the content.

Layout

Text Alignment

Set the alignment of your service box title here.

Offset

Specify the Offset here from top, center, or bottom. 

Height

Use the slider to set the height of the service boxes.

Columns Manage

Desktop Column

Select the column size you want to display on Desktop.

Tablet Column

Select the column size you want to display on Tablet.

Mobile Column

Select the column size you want to display on Mobile.

Columns Gap/Space Between

Specify the space between the Columns.

Change text Alignment in Animated service boxes widget.

2. Style

The Style tab is used for customizing the appearance of all the Animated Service Boxes widget components. Let’s understand each of these customization options. 

Title Style

Typography

Assign size, weight, spacing and much more to fonts.

Color

A color picker to assign suitable color to the title.

Sub Title Style

Typography

Assign size, weight, spacing and much more to fonts.

Color

A color picker to assign suitable color to the subtitle.

Description Style

Typography

Assign size, weight, spacing and much more to fonts.

Color

A color picker to assign suitable color to the description text.

Listing Style

Margin Bottom

Manage spacing from the bottom.

Typography

Assign size, weight, spacing and much more to fonts.

Text Color

A color picker to assign suitable color to the listing text.

Content Background Style

Padding

Put-in some inner space to the background.

Background

Apply suitable background like color/ gradient to an element.

On Scroll View Animation

On Scroll View Animation

On Scroll View Animation Options are used to set beautiful animations to your sections. They are a common option for almost all the widgets. So, we have written a detailed tutorial explaining how to use these options.

View On Scroll View Animation Tutorial

3. Advanced

Advanced Tab Options are common across all the widgets. So, we have written a detailed tutorial explaining how to use these options.

View The Advanced Tab Tutorial

Do you want to rate this article?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Please submit the reason for your vote so that we can improve the article.
Need help?