A tagline that runs a small photo in between two words. A stat line where the number is an icon that draws itself. A row of words where hovering one swaps it for a Lottie animation. The Premium Textual Showcase widget builds that kind of composition: a single line, or a wrapped block, made of items that can each be text, an icon, an image, pasted SVG code or a Lottie file, laid out inline and styled one by one.
Everything lives in one Items list. Each item has an Element tab for what shows by default and a Hover Element tab for what replaces it under the cursor, then a set of options every item shares: a link, a highlight or hover effect, a scroll fill, and the box around the item. Below the list sit the settings for the whole row, and the Style tab holds the defaults that every item inherits. This article walks the panel in that order. The demo page shows the results side by side.
Requirements:
- Premium Addons for Elementor installed and activated. Textual Showcase is part of the free plugin, so no PRO license is needed for the widget itself.
- Premium Addons PRO for these options:
- the SVG Code item type
- Highlight Effects other than Strikethrough and Underline
- Effects on icon, image, Lottie and SVG items other than Pulse and Rotate
- Clipped Background on text items
- Liquid Glass Effect presets 03 to 06
- Fill on Scroll (Premium Addons PRO 2.9.66 or later, with Premium Addons 4.11.105 or later)
- Hover as the animation trigger
- The widget enabled in the Premium Addons dashboard, otherwise it will not appear in the Elementor editor. Check this article to know how to do that. The Draw Icon option also needs the SVG Draw toggle turned on for this widget, in the same place.
- Premium Addons works only with Elementor Page Builder plugin, so you will need that installed and activated as well.
Textual Showcase Widget Settings
Items
The Items list is the whole widget. Add Item appends a row, the copy and cross buttons on each row duplicate and delete it, and dragging a row reorders the showcase. A row is named after what it holds: the text for text items, the icon itself for icon items, a thumbnail for images, and the words SVG Code or Lottie for the other two. Open a row and the first control is Type. Everything under it changes with the type you pick, so the item types are covered one at a time below.
Text items
- Type: Text. The other choices are Icon, Image, Lottie and SVG Code, and SVG Code needs PRO.
- Text: the words. Dynamic tags work here, so the text can come from a custom field.
- HTML Tag: H1 through H6, div, span or p. Span by default, which is the right pick when the item sits inside a sentence.
The Element Style group under it styles this one item. Leave a control empty and the item follows the Style tab instead.
- Text Alignment: Left, Center or Right, per device.
- Text Color: the colour of this item’s text.
- Typography: font, size, weight, transform, style, decoration, line height, letter spacing and word spacing.
- Text Shadow: colour, blur and offsets.
- Opacity: from 0 to 1.
- Stroke: outlines the letters. Turning it on adds Stroke Color and Stroke Fill Width, the thickness of the outline in pixels, 1 by default, per device. The outline sits on top of the fill, so set Text Color to transparent for hollow letters. Stroke goes away while Clipped Background is on.
- Z-Index: the stacking order of the text inside its item.
- Hide on Hover: hides this element while the cursor is over the item. Pair it with a Hover Element to swap one thing for another instead of stacking them.
Icon items
- Choose Icon: a Font Awesome icon, or an SVG uploaded to your media library.
- Draw Icon: draws the icon stroke by stroke instead of showing it at once. It works on Font Awesome icons and pasted SVG Code, not on uploaded SVG files, and it needs SVG Draw enabled for this widget in the Premium Addons dashboard. With that toggle off the switch is greyed out and a notice in the panel links you to the setting.
Path Thickness and Stroke Color are there whenever the icon can be drawn. The rest of the drawing controls appear once Draw Icon is on:
- Path Thickness: the stroke width while drawing, 0 to 50.
- Speed: 5 by default, from 1 to 100. A larger number means a longer animation, so higher is slower.
- Stroke Color: the colour of the line being drawn.
- After Draw Fill Color: the colour the icon settles into when the drawing finishes.
- Loop: repeats the drawing. On by default.
- Reverse: draws it backwards.
- Start Point (%): where along the path the drawing begins, with Reverse off. With Reverse on the control becomes End Point (%).
- Yoyo Effect: draws forward then back instead of restarting. It needs Loop on.
Element Style for an icon: Size (50px by default, in px, em or %, per device), Color, Opacity, Z-Index and Hide on Hover.
Image items
- Choose Image: from the media library, or a dynamic tag.
- Image Resolution: which registered size WordPress serves. Full by default, and Custom lets you type a width and height.
- Image Fit: how the picture fills its box once Width and Height are set: Default, Cover, Fill or Contain.
- Width: 100px by default, in px, em, %, vw or a custom unit, per device.
- Height: empty by default, so the image keeps its proportions. In px, em or %, per device.
Images also get Opacity, Z-Index and Hide on Hover.
Lottie items
- Animation JSON URL: the address of the Lottie file, usually a LottieFiles link. Dynamic tags work.
- Loop: on by default.
- Reverse: plays it backwards.
- Width: and Height, the same two sliders image items have, followed by Opacity, Z-Index and Hide on Hover.
SVG Code items
This type needs Premium Addons PRO. Paste the markup into SVG Code and the item renders it inline, which is what lets the drawing options work on it. The drawing controls are the same as for icons, with one addition: Draw All Paths Together, which draws every path at the same time rather than one after another. Size, Color, Opacity, Z-Index and Hide on Hover follow.
Hover Element
The second tab on every row. Its Type is None by default; pick any of the five types and that element is placed on top of the default one and shown while the cursor is over the item. The controls mostly mirror the Element tab for the type you choose, with a few gaps: Width offers px, em and % only and Height px and em only, there is no Hide on Hover, and highlight effects and Fill on Scroll never run on the hover text. Draw Icon is there for hover icons and SVG code, and a hover drawing plays every time the item is hovered. Three controls behave differently on this tab:
- Opacity: the opacity of the hover element while it is showing.
- Z-Index: the stacking order of the whole item among its neighbours. It applies at all times, not only on hover.
- Transition (sec): how long the swap takes, from 0 to 50 seconds in steps of 0.1. It applies to both elements of the item, not only the hover one.
To swap rather than stack, turn on Hide on Hover on the Element tab, so the default element is hidden while the hover one shows.
Additional Options
These sit under the tabs and apply to the item whichever tab is open.
- Link: makes the whole item a link. Link Type chooses between a URL you type and an Existing Page picked from your posts and pages.
- Highlight Effects: for text items, a decoration drawn over or around the words. Strikethrough and Underline are free; the rest need PRO:
- Minimal Mask, a coloured band that slides across the words when the item enters the viewport
- Circle, Curly, Hand-drawn Underline, Outline, Double Underline, Underline Zigzag, Diagonal and X, each a hand-drawn shape
- Color: the colour of the highlight line or the mask. It and Line Thickness are always there on a text item, whichever effect is chosen.
- Direction: with Minimal Mask, which way the band moves: To Right, To Left, To Top or To Bottom. To Right by default.
- Line Thickness: how heavy the line is, in pixels.
- Effects: for icon, image, Lottie and SVG items, a hover motion. Pulse and Rotate are free; Buzz, Grow, 3D Rotate, Drop Shadow and Wobble Vertical need PRO.
- Animation Speed: how long the highlight or hover effect takes, in seconds. It appears once an effect other than None or Minimal Mask is chosen.
- Fill on Scroll: for text items, fills the words one after another as the visitor scrolls, from the item’s Text Color to an After Fill Color. Every item with the switch on joins one run in list order, so the first such item fills completely before the next starts, and scrolling back up empties them in reverse. The run begins once the widget is in view near the bottom of the screen and follows the scroll with a slight lag. Only the default element fills, and the switch stays hidden while the item has Clipped Background, Stroke or Minimal Mask, since those paint the same letters. This is a PRO option: it needs Premium Addons PRO 2.9.66 with Premium Addons 4.11.105. Without PRO the item shows a notice and nothing after it renders; an older PRO build shows the words but never fills them, so update both plugins. Upgrade to PRO »
- After Fill Color: the colour the words end up in. Leave it empty and the fill uses the Accent colour from your Elementor global colours. Each item picks its own.
💡 Tip: Fill on Scroll shares one Fill on Scroll Speed across the widget, under the Items list. Two items with different speeds are two Textual Showcase widgets.
Item Container Style
The box each item sits in.
- Item Width: a fixed width in px, vw or a custom unit, per device. Empty means the item is as wide as its content.
- Rotate (deg): turns the whole item, from -180 to 180. It hides when the Effects option is Rotate, 3D Rotate or Drop Shadow, since those move the item themselves.
- Clipped Background: for items whose default or hover element is text, paints the container background onto the letters instead of behind them. It needs PRO, it takes Stroke, Liquid Glass Effect and Fill on Scroll out of the panel while it is on, and it works on text whose HTML Tag is span, the default.
- Background Type: a classic colour or image, or a gradient.
- Liquid Glass Effect: frosted-glass presets. Preset 01 and 02 are free, 03 to 06 need PRO. The item needs a semi-transparent background colour for the effect to show.
- Border Type: with width and colour once a type is chosen.
- Border Radius: in px, % or em.
- Margin: and Padding, per side and per device, in px or em.
Layout and animation
Under the Items list, these settings belong to the widget as a whole.
- Fill on Scroll Speed: how far the visitor scrolls before every item with Fill on Scroll enabled has filled, in screen heights. 0.5 by default, from 0.1 to 3; a higher value makes the fill slower. It and the lock switch under it come from Premium Addons PRO, so they show once PRO is active.
- Lock Scroll Until Fill Ends: pins the container the widget sits in once it reaches the middle of the screen and holds it there until every filling item has finished, then lets the page scroll on. A container taller than the screen is held from its top instead. The hold lasts the Fill on Scroll Speed. The switch is always in the panel, and a notice under it says what the pin covers once it is on. One lock per container: a second Fill on Scroll widget in the same container fills without pinning.
- Horizontal Spacing: the gap between items on a line, in px or em, per device.
- Vertical Spacing: the gap between lines when the items wrap.
- Alignment: Start, Center or End, per device.
- Entrance Animation: one of Elementor’s entrance animations, played by the items one after another when the widget scrolls into view. Picking one adds Animation Duration, Slow, Normal or Fast, and Animation Delay in Between (s), the pause between one item starting and the next.
- Trigger Animation on: Viewport plays the highlight and hover effects when the widget scrolls into view; Hover, a PRO option, waits for the cursor. Grow and Minimal Mask always trigger on viewport, whatever this is set to.
Styling the Textual Showcase Widget
The Style tab sets the defaults. Anything set on an item in the Content tab wins over these.
Item Content
- Text Color: and Typography and Text Shadow, for every text element in the widget, on both tabs of every item.
- CSS Filters: blur, brightness, contrast, saturation and hue for the items that hold no text on either tab, so icons, images, Lottie files and SVG code. Hover CSS Filters is the same set applied while the cursor is over the item.
- Transition (sec): how long those items take to move between the two filter states, from 0 to 3 seconds.
Item Container
The box around every item at once, with one extra that the per-item group does not have: Box Shadow, Background Type, Border Type, Border Radius, Margin and Padding.
Conclusion
The widget rewards building it in the order the panel shows: add the items and pick their types, set what each one turns into on hover, then decide the effects and the box around each. The Style tab is for whatever should be true of every item, and the per-item controls are for the exceptions. If the row starts to feel like two ideas, split it: two widgets side by side keep their own spacing, alignment and scroll speed.
Come & Join the Community
Feel free to join our Facebook group and subscribe to our YouTube channel to keep up with our newest features, improvements, and helpful video tutorials.
