Share

The Avada Text Path Element is a creative Design Element that allows you to place text along a predefined or custom path. Instead of being limited to straight lines, your text can curve, spiral, or wrap around shapes—perfect for creating eye-catching designs that stand out.

In this guide, we’ll walk through the settings, customization options, and practical examples of using the Text Path Element when designing websites with Avada and WordPress.

Overview

What Is the Avada Text Path Element?

The Text Path Element is a creative typography tool in the Avada Builder. This Element includes 11 Text Paths that enable designers to make text follow unique shapes, such as circles, waves, spirals, stars, or even custom SVG paths.

For privacy reasons YouTube needs your permission to be loaded.

This Element is especially useful for:

  • Wrapping text around images or logos
  • Creating unique call-to-action textual designs
  • Adding artistic visual elements to headers and banners
  • Unique and stylish text-based designs, and more.

Avada Text Path Element Settings

This Element includes the following three settings tabs: General, Design, and Extras. Each offers different levels of customization.

Avada Text Path Element – Avada Text Path Element – Avada Text Path Element –

General Tab Options

  • Path Type – Select the path type (Wave 1/Wave 2/Arc/Arc Bottom/Circle/Oval/Spiral 1/Spiral 2/Star/Heart/Custom).

  • Text – Add the text that should be aligned to the path.
  • Link – Set the URL the text path will link to.
  • Alignment – Select the text alignment (Textflow/Left/Center/Right).

  • Text Direction – Select the text direction (Default/LTR/RTL).

  • Element Visibility – Choose to show or hide the element on small, medium, or large screens. You can choose more than one at a time. Each of the 3 sizes has a custom width setting on the Responsive tab in the Global Options.
  • CSS Class – Add a class to the wrapping HTML element.
  • CSS ID – Add an ID to the wrapping HTML element.

Design Tab Options

  • Path Width – Set the overall width of the path. In pixels (0-2000).
  • Rotate Path – Set the rotation angle of the path. In degrees (0-359).
  • Text Starting Point – Set the starting point of the text on the path. In percentage (0-100).

  • Lock Font Size – Set to yes, to lock the font size to the values set in Typography option. If set to no, the font size will also change with the Path Width (based on the 250px default width), because of the SVG coordinate system. (Yes/No).
  • Typography – Controls the text typography.
  • Font Family
  • Variant
  • Font Size
  • Line Height
  • Letter Spacing
  • Text Transform – (Default/None/Uppercase/Lowercase/Capatalize).

  • Font Color – Controls the color of the text, ex: #000.
  • Text Shadow – Set to “Yes” to enable text shadows (Yes/No).

  • Text Shadow Position – Set the vertical and horizontal position of the text shadow. Positive values put the shadow below and to the right of the text, negative values put it above and to the left of the text. In pixels, ex. 5px (Vertical/Horizontal).
  • Text Shadow Blur Radius – Set the blur radius of the text shadow. In pixels (0-100).

  • Text Shadow Color – Controls the color of the text shadow.
  • Text Stroke – Set to “Yes” to enable text stroke (Yes/No).
  • Text Stroke Size – Set text stroke size. In pixels (0-10).
  • Text Stroke Color – Controls the color of the text stroke.
  • Word Spacing – Set the spacing between the words. Leave empty for normal spacing.
  • Show Path – Set to “Yes” to show the path (Yes/No).
  • Path Stroke Width – Set the width of the path stroke. In pixels (0-25).
  • Path Stroke Color – Controls the color of the path stroke.
  • Path Fill Color – Controls the fill color of the path.
  • Text Animation – Set to “Yes” to enable text animation along the path (Yes/No).

  • Text Animation Along Path Direction – Select the text animation direction along the path (None/News Ticker/Left to Right/Right to Left/Custom).
  • Text Animation Font Size Factor – Set the text animation font-size factor. In em. Leave at 1, if you don’t want to animate the font-size (0.10-4).

  • Text Animation Duration – Set the text animation duration. In seconds (0.1-20).

  • Path Animation – Set to “Yes” to enable path animations (Yes/No).
  • Path Animation Type – Select the text path animation type (Scale/Wiggle/Slide Horizontally/Slide Vertically/Rotate).
  • Path Scale Factor – Set the scale factor of the path animation (0.1-2).
  • Path Animation Duration – Set the path animation duration. In seconds (0.1-20).
  • Padding – Set the element padding (Top/Right/Bottom/Left).
  • Margin – Enter values including any valid CSS unit, ex: 4% (Top/Right/Bottom/Left).

Extras Tab Options

  • Animation Type – Select the type of animation to use on the Element.
  • None
  • Bounce
  • Fade
  • Flash
  • Rubberband
  • Shake
  • Slide
  • Slide Short
  • Zoom
  • Flip Vertically
  • Flip Horizontally
  • Light Speed
  • Reveal With Color

Practical Examples of the Text Path Element

The flexibility and creative power of this Element shine when combined with other Avada features:

Avada Text Path Element — Avada Text Path Element
Avada Text Path Element

  • Circular Text Around Logos or Images – Ideal for branding, the circular path allows text to wrap around icons, profile photos, or logos.

  • Partial Path Designs – Shorter text can follow part of a path, creating unique design breaks.
  • Hover Interactions – Combine text paths with Avada Column hover effects for interactive layouts.
  • Avada Post Card & Feature Box Layouts – Wrap text around featured images for a modern, stylish effect.
  • Creative Shapes – Use heart, star, or spiral paths for campaigns, promotions, or artistic page accents.

Why Use the Avada Text Path Element?

The Avada Text Path Element enables designers to step outside traditional, grid-based layouts by introducing curved, flowing, and even animated typography. Instead of being restricted to straight lines, text can take on dynamic shapes that bring energy and creativity to a design.

This makes it a powerful tool for a wide range of users. Web designers can use it to add personality and flair to their layouts, while marketers can employ it to create promotional content that stands out and captures attention. For creatives, the element offers a new way to tell stories visually, blending typography with design in ways that feel both modern and expressive.

By taking advantage of its customization options and animation settings, the Text Path Element becomes much more than simple text—it transforms into a design feature in its own right.

Summary

This Avada Design Element is an incredibly versatile tool that opens new doors for creative typography. With control over paths, animations, and responsive styling, it can elevate a design from simple to unforgettable.

Whether used for branding, creating banners, or designing interactive layouts, this Element empowers Avada users to design content beyond the norm.

Subscribe To Our Newsletter

Receive all of the latest news and updates fresh from ThemeFusion!

Related Articles

Leave a comment