In this guide, we will show you how to add the “Content Box Sliding Effect widget” to your Elementor website. This dynamic widget adds a stylish content box that smoothly slides into view on hover, allowing you to showcase text, images, and buttons with engaging animation. Perfect for enhancing user interaction, it brings a modern, interactive touch to your site’s design.
Let’s explore the customization options available in the “Content Box Sliding Effect widget” for Elementor below.
Add a Content Box Sliding Effect to Elementor
This widget requires Unlimited Elements Pro version installed and activated on your WordPress website.
Add a Content Box Sliding Effect Widget to an Elementor Page
Elementor Content Box Sliding Effect Widget General Settings
Show Title
Toggle to show or hide the content box title.
Title
Enter the main title text for the content box.
Title Animation On Hover
Select the animation effect for the title on hover.
moveFromLeft
moveFromRight
moveFromBottom
Show Text
Toggle to show or hide the descriptive text in the content box.
Text
Rich text editor to add and format the main body text, including media and links.
Text Animation On Hover
Select the animation effect for the text on hover.
moveFromLeft
moveFromRight
moveFromBottom
Show Button
Toggle to show or hide the call-to-action button.
Link
Enter the URL that the button will link to.
Button Text
Customize the text displayed on the button.
Button Animation On Hover
Select the animation effect for the button on hover.
moveFromLeft
moveFromRight
moveFromBottom
Elementor Content Box Sliding Effect Widget Style Settings
Height
Controls the fixed height of the content box using a slider or pixel value.
Padding
Controls internal spacing between content and box edges; set values individually or link all sides.
Shadow
Adds and customizes a shadow effect around the content box.
Radius
Controls the roundness of box corners; set individually or apply the same value to all corners.
Text Align
Sets horizontal text alignment.
Left
Center
Right
Inherit
Content Vertical Align
Controls the vertical alignment of all content inside the box.
Start
Center
End
Background
Choose a background type.
Classic (solid color or image)
Gradient
Image Resolution
Select the image size.
Full
Large
Medium
Thumbnail
Position
Select image position.
Top Left
Top Center
Top Right
Center Left
Center Center
Center Right
Bottom Left
Bottom Center
Bottom Right
Custom
Attachment
Set image scroll behavior.
Default
Scroll
Fixed
Repeat
Control how the image repeats.
Default
No-repeat
Repeat
Repeat-x
Repeat-y
Display Size
Choose how the image fills the box.
Cover
Contain
Auto
Title Color
Sets the title text color; choose from global colors (globe icon) or custom color (picker icon).
Title Typography
Opens a styling panel to customize the title’s font appearance.
Title Spacing
Adjusts space below the title using a slider or exact value input.
Title Background
Adds a background color behind the title supports global color or custom diagonal line.
Title Padding
Controls internal space around the title text set padding individually (top, right, bottom, left).
Button Align
Sets the horizontal alignment of the button.
Inherit
Left
Center
Right
Button Typography
Styles the button text.
Button Padding
Adds internal space between text and button borders.
Button Radius
Controls roundness of button corners.
Button Background Color
Sets the background color in the default state.
Button Background Color Hover
Sets the background color when hovering.
Button Text Color
Sets the text color in the default state.
Button Text Color Hover
Sets the text color on hover.
Button Spacing
Adds space around the button.
Button Border Type
Sets the border style for the default state.
Default
None
Solid
Double
Dotted
Dashed
Groove
Button Border Hover Type
Sets the border style on hover.
Default
None
Solid
Double
Dotted
Dashed
Groove
Button Style
Controls how the button displays in its container.
Inline
Full Width
Content Box Sliding Effect Widget Design Examples For Elementor
Here are some live use cases for the Content Box Sliding Effect widget.
Content Box Sliding Effect For Fitness Training Website.
Content Box Sliding Effect For IT Services Website.
Thank you for using the Content Box Sliding Effect widget for Elementor! This dynamic tool lets you add stylish content boxes that reveal information with smooth sliding animation on hover, creating an engaging and interactive experience. Perfect for showcasing text, images, and buttons, it helps you present content in a modern, visually appealing way that enhances user engagement. For questions or inspiration, feel free to reach out or explore our demo.