Animated Service Boxes

Animated Service Boxes

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 block, you can add a creative touch and make your services look even more awesome. We have provided various animation styles to choose from that will wow your visitors.

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

Configuration for Animated Service Boxes

In the Animated Service Boxes block, you can create a custom service box type layout using many different styling options.

How to use the Animated Service Boxes Block of The Plus Addons For Gutenberg

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

Table Of Contents

Setting Up

Gutenberg gives multiple ways to add Animated Service Box into the content building area or we say playground. Check for the “+” icon in the top toolbar or click the “+” icon in the content area or start typing Animated Service Box after “/” sign, eg.“/Animated Service Box”, in the content area. Gutenberg also provides drag & drop after opening the list of blocks panel.

After placing the block you’ll see three tabs on the right editing panel containing “Layout”, “Style” and “Advanced”. Go and start with the Layout tab.

1. Layout

Animated Service Boxes

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 is 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 refer 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 the title hover. Titles are pre-listed there and content is changed in the background accordingly.

Fancy Box

Popup will be opened on title click.

Service Elements

Service elements style contains a drop menu on the title over.

Portfolio

Same as Hover Section but different in UI.

Style

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

Image Preload

By enabling this option, you can see the image as a pre-loader.

Hover Orientation

Select the hover orientation from the top – bottom – left or right here. 

Orientation

Select the box orientation between horizontal and vertical layouts.

Active Slide

Specify the number of Active Slides you want to display.

Active Slide Width (1-15)

Set active slide width here.

Upload Image

Upload the image from here.

Image Size

Specify the Image size of the Box.

Display Button

Slide right to display a Button. 

Button Style

Select the Button Style you want to display. 

Button Icon Type

You can select an icon or not here.

Select Icon

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

Icon Position

Set icon position before the content or after the content here.

Icon/Image

By enabling this option, you can see the icon/image here.

Animated Service Boxes

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

Title

Add a title for your service.

Icon Type

You can select an icon, image, or not here.

Select Icon

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

Upload Image

Upload the image from here.

Image Size

Specify the Image size of the Box.

Sub Title & Description

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

Featured Image

The main image is going to change on hover.

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 the 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.

2. Style

The Style tab is used for customizing the appearance of all the Advanced Button block components. All these styling options include customizing the fonts, colors, background, margins and padding which are common across all the blocks. So, we have created a single detailed article explaining these Styling Options.

View The Style Tab Article

Title Style

Typography

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

Color

A color picker to assign a suitable color to the title.

Featured Image Style

Margin

Put-in some outer space to an element.

Padding

Put in some inner space to an element.

Image Size

Set image size from here.

Box Border

Draw a border around the element and give width and color to it.

Border Radius

Set the radius curve of the element’s corner.

Box Shadow

Give Box/Text/Drop shadow effect and color to an element.

Sub Title Style

Typography

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

Color

A color picker to assign a suitable color to the subtitle.

Description Style

Typography

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

Color

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

Listing Style

Margin Bottom

Manage spacing from the bottom.

Typography

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

Text Color

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

Button Style

Typography

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

Color

A color picker to assign a suitable color to the button text.

Above Space

An input to set spacing between button top and content.

Bottom Space

Set spacing between button text and box.

Icon Spacing

Set spacing between button text and icon.

Icon Size

Set icon size from here.

Padding

Put in some inner space to the background.

Box Border

Draw a border around the element and give width and color to it.

Border Radius

Set the radius curve of the element’s corner.

Background

Apply suitable background like color/ gradient to an element.

Box Shadow

Give Box/Text/Drop shadow effect and color to an element.

Content Background Style

Padding

Put in some inner space to the background.

Margin

Put-in some outer space to an element.

Background Overlay

Apply suitable overlay background like color/ gradient to an element.

Background

Apply suitable background like color/ gradient to an element.

Border Radius

Set the radius curve of the element’s corner.

Outer Content Style

Box Border

Draw a border around the element and give width and color to it.

Border Radius

Set the radius curve of the element’s corner.

Box Shadow

Give Box/Text/Drop shadow effect and color to an element.

Content Background Back Style

Overlay Color

A color picker to assign a suitable overlay color to the content background.

Background

Apply suitable background like color/ gradient to an element.

3. Advanced

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

View The Advanced Tab Tutorial

Was this article helpful?
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.