Sliding Box

The Sliding Box widget allows you to create interactive content blocks with images, icons, headings, and buttons, along with customizable hover effects and styles.

View Element Demo Page

Content Tab

General

Select Style	Choose the visual style of the sliding box.
Sliding Box Item	Use the “Add Item” button to add more sliding box to the list.
Image	Upload or select the desired image from the WordPress media library.
Image Heading	Enter the image heading for the sliding box item (Not applicable in style 3).
Number	Enter the number for the sliding box item (Not applicable in style 3).
Icon	You can choose from a variety of icons from icon libraries or upload SVG icon (Not applicable in style 3).
Heading	Enter the heading for the sliding box item.
Subheading	Enter the subheading for the sliding box item (Applicable in style 3 only).
Content	Enter the content for the sliding box item.
Time Icon	You can choose from a variety of icons from icon libraries or upload SVG icon.
Time	Enter the time for the sliding box item.
Text – Button	Input the text for your button, like “Read more”.
Link – Button	Set the target URL for the button. Optionally use dynamic tags for complex interactions.

Content Settings

Image Resolution	Select the size for the images, such as original or any thumbnail version.
Image Heading Title HTML Tag	Select the appropriate HTML tag for the image heading title, such as h2, h3, div, span, etc.
Heading Title HTML Tag	Select the appropriate HTML tag for the heading title, such as h2, h3, div, span, etc.

Button

Style	Choose the visual style of the button.
Size	Select the preset button sizes.
Width	Adjust the width for the button.
Icon	You can choose from a variety of icons from icon libraries or upload SVG icon.
Icon Position	Select the icon position on the button.
Icon Shape Style	Select the icon shape style of the button.
Icon Shape Size	Set the icon shape size of the button.
Icon Spacing	Set the icon spacing of the button.
Icon Size	Set the icon size of the button.
Box Shadow	Add a box shadow effect to the button.
Expand Width	Set the expand width of the button.
Button ID	Create a unique ID for CSS customization and identification purposes.
Hover Effect	Choose an animation effect for when the cursor hovers over the button, like “Grow”, “Shrink”, “Pulse”, etc.

Style Tab

General

Alignment	Set the alignment of the content in the widget as left, center, or right.
Background Type	Choose between classic or gradient background types for the sliding box item.
Background Color	Choose a background color for the sliding box item.
Box Shadow	Set the box shadow effect for the sliding box item.
Height	Set the height for the sliding box item.
Border Radius	Define the border-radius for the sliding box item.
Padding	Set the padding inside the sliding box item.

Image Heading

Vertical Align	Set the vertical alignment of the image heading in the widget as top, middle, or bottom.
Typography	Adjust the font settings for the image heading.
Color	Select the color for the image heading.
Spacing	Set the space between for the image heading and number.
Background Type	Choose between classic or gradient background types for the image heading.
Width	Adjust the width for the image heading.

Content

Typography	Adjust the font settings for the content.
Color	Select the color for the content.
Spacing	Set the space between for the content and button.

Icon

View	Select the icon view style – default, stacked, or framed.
Shape	Select the icon shape style – circle, or square.
Icon Size	Set the size of the icon.
Shape Size	Set the shape size of the icon.
Spacing	Set the space between for the icon and heading.
Icon Color	Select the color for the icon in both “Normal” and “Hover” states.
Background Color	Choose a background color for the icon in both “Normal” and “Hover” states.
Border Radius	Define the border-radius for the icon.

Heading

Typography	Adjust the font settings for the heading.
Color	Select the color for the heading.
Spacing	Set the space between for the heading and content.

Subheading

Typography	Adjust the font settings for the subheading.
Color	Select the color for the subheading.
Spacing	Set the space between for the subheading and heading.

Number

Typography	Adjust the font settings for the number.
Color	Select the color for the number.

Time

Typography	Adjust the font settings for the time.
Color	Select the color for the time.
Color – Icon	Select the color for the icon.
Size – Icon	Set the size of the icon.
Border Color – Separator	Select the border color for the separator.
Separator Height – Separator	Set the height for the separator.

Button

Display	Choose the button display style for dropdown.
Typography	Adjust the font settings for the button text.
Text Shadow	Add a text shadow effect to the button text.
Text Color	Select a color for the button’s text in both “Normal” and “Hover” states.
Icon Color	Select a color for the button icon in both “Normal” and “Hover” states.
Border Color	Select a border color for the button in both “Normal” and “Hover” states.
Background Type	Select the button’s background type in both “Normal” and “Hover” states.
Shape Background Type	Select the button’s shape background type in both “Normal” and “Hover” states.
Box Shadow	Adding a box shadow effect for the button in both “Normal” and “Hover” states.
Border Thickness	Define the border thickness for the button.
Border Type	Select a border type (solid, dashed, dotted, etc.) for the button.
Border Width	Define the border width for the button.
Border Radius	Set the radius for the button’s corners to control how rounded they are.
Padding	Adjust the padding inside the button’s content.
Margin	Adjust the margin outside the button’s content.

Overlay

Background Type	Choose between classic or gradient background types for the overlay.
Opacity	Set the opacity settings for the overlay.