Introducing Elementor Textual Showcase widget by Premium Addons plugin. Your ultimate solution for effortlessly elevating WordPress website design using Elementor page builder. With this widget, you can showcase your content in customizable way.

This documentation will guide you step by step on how to make the most of the Textual Showcase widget, where you can use text, icons, images, SVG code, or even Lottie animations to bring your content to life and transform your website’s visual appeal.

Don’t miss the chance to check out the widget in action on our demo page and explore its possibilities today!

Requirements:

• You will need Premium Addons free plugin installed and activated on your website.
• Premium Addons Pro is required for:
  • SVG Code Item Type
  • On Hover Trigger Animation
  • Highlight Effect (All Pro except Outline, Underline, & Minimal Mask)
  • Clipped Background
  • All Effects except the first three
• Make sure that this widget is enabled so you can find it in the Elementor editor.
• Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated.

Content

Please note that On Hover Trigger Animation option requires Premium Addons PRO installed and activated on your website.

• Text: Add and edit textual content.
  • Add Item: Allows the user to add new text elements to the showcase.
• Horizontal Spacing: Adjust the horizontal space between elements.
• Vertical Spacing: Adjust the vertical space between elements.
• Alignment: Align the text to left, center, or right.
• Trigger Animation: Choose an animation that activates either when Textual Showcase elements appear in the viewport or upon mouse hover.

Icon

• Choose Icon: Select between “None”, “Upload SVG” or Font Awesome Icon.
• Draw Icon: Enable drawing the icon, with a note about using Font Awesome/SVG icons.
• Path Thickness: Set the thickness of the icon’s path.
• Stroke Color: Set the color of the icon’s stroke.
• Element Style:
  • Color: Set the icon’s color.
  • Size: Set the size of the icon.

Text

• Text: An input field where users can enter the text they want to display.
• Element Style:
  • Text Alignment: Options to align the text left, center, or right.
  • Text Color: A tool to select the color of the text.
  • Typography: Settings to change font, size, weight, etc.
  • Text Shadow: Options to add and customize a shadow effect on the text.
  • Opacity: A slider to adjust the transparency of the text.
  • Stroke: A toggle to apply or remove a stroke effect from the text.

Image

• Choose Image: Choose from media library or to upload the image.
• Image Resolution: Select the resolution of the image.
• Image Fit: Select how the image should fit within its container.
• Element Style:
  • Width: Set the width of the image. By default, it is set to 100 pixels.
  • Height: Set the height of the image, which appears to be blank, indicating it may be automatically determined or not yet set.

Lottie Animations

• Animation JSON URL: Input the URL linking to the JSON file that contains the Lottie animation data.
• Loop: Toggle switch that allows users to set the animation to loop continuously.
• Reverse: Toggle switch that allows users to set the animation to play in reverse.

SVG Code

Please note that SVG Code Item Type option requires Premium Addons PRO installed and activated on your website.

• SVG Code: A text field where users can enter SVG code directly.
• Draw Icon: Toggle indicating whether users can draw their own Font Awesome/SVG icons within the interface.
• Path Thickness: A slider that allows users to set the thickness of the icon’s path when drawing an icon.
• Stroke Color: A color picker to set the stroke color of the SVG, which is likely to be enabled when the “Draw Icon” feature is active.

Item Content

The list below shows the common options that don’t change when you change the item type.

• Element – Hover Element: Switch between the default and hover state settings.
• Type: Select the type of element.
• Element Style:
  • Opacity: Set the icon’s opacity.
  • Z-Index: Set the stack order of the element.
• Hide on Hover: Toggle to make the item disappear when the mouse hovers over it.

Additional Settings

Please note that Highlight Effects option requires Premium Addons PRO installed and activated on your website.

• Link: Enable to have the element as hyperlink.
• Link Type: Select the type of link between Link or Existing Page.
• URL: Add URL here for the hyperlink.
• Highlight Effects: Select text highlight effects. (All Pro except Outline, Underline, & Minimal Mask)
• Color: A color picker tool, likely used to select the color for text highlights or link text.
• Line Thickness: A slider to adjust the thickness of the underline or highlight line, which will likely become active when a highlight effect is chosen.

Item Container Style

Please note that Clipped Background option requires Premium Addons PRO installed and activated on your website.

• Item Width: Setting the width of the container in pixels.
• Rotate (deg): Slider to rotate the container.
• Clipped Background: Enable to make the background image or color does not extend beyond the border of the container.
• Background Type: Set the background type to be a solid color background or an image, with the image option currently selected.
• Color: Choose the color of the background when the solid color option is selected.
• Image: Select background image.
• Image Resolution: A dropdown menu to choose the resolution of the background image.

• Position: Set the position of the background image or color within the container.
• Attachment: Set whether the background is fixed or scrolls with the page.
• Repeat: Set how background images are repeated within the container.
• Display Size: Set the size of the background image in relation to the container.
• Border Type: Choose the style of the container’s border.
• Border Radius: Set the radius of the container’s corners to create rounded edges.
• Padding: Set the space inside the border of the container, affecting the top, right, bottom, and left padding independently.
• Margin: Set the space outside the border of the container, affecting the top, right, bottom, and left margins independently.

Hover Element

Please note that Effects option requires Premium Addons PRO installed and activated on your website.

• Type: Select the type of element from text, icons, images, SVG code, or even Lottie animations
• Element Style:
  • Opacity: A field to set the opacity of the element.
  • Z-Index: A field to set the stack order of the element.
  • Transition (sec): A field to set the duration of the transition effect in seconds.
• Additional Options:
  • Link: A toggle to add a hyperlink to the element.
  • Effects: A dropdown to select visual effects for the element. (All PRO Effects except the first three)
• Item Container Style:
  • Item Width: A field to set the width of the container.
  • Rotate (deg): A slider to rotate the container.
• Background Type: Select background types, like solid or gradient.
• Border Type: Select the style of the border.
• Border Radius: Set the curvature of the container’s corners.
• Padding: Set the padding inside the container.
• Margin: Set the margin outside the container.

Style

Item Content

• Text Color: Select the color of the text, currently showing a red color.
• Typography: Adjust the font, size, weight, and other font-related properties.
• Text Shadow: Add and customize a shadow effect behind the text.

Item Container

• Box Shadow: A tool to add and customize a shadow around the container.
• Background Type: Icons likely representing options to choose a solid color, gradient, or image for the background.
• Border Type: A dropdown menu to select the style of the border, with “Default” currently selected.
• Border Radius: A field to input a value (in pixels) to round the corners of the container.
• Padding: Input fields to set the space inside the border of the container, for top, right, bottom, and left padding.
• Margin: Input fields to set the space outside the border of the container, for top, right, bottom, and left margins.

Conclusion

Summing up, Elementor Textual Showcase widget is a versatile tool for web designers, offering a suite of options to fine tune text appearance, container design, and overall layout. With its easy-to-use interface, users can customize typography, apply dynamic animations, and adjust margins and padding for optimal spacing, ensuring content is visually striking and user-friendly. Integrated features like hover effects, Lottie animations, and various background styles enable the creation of engaging and responsive web elements that enhance any website’s aesthetic and interactivity.