Text-On-A-Path - Divi-Modules...Divi Theme: Version 3.1 (or higher) Extra Theme: Version 2.1 (or...

Text-On-A-PathVersion 1.0.0

About 01Requirements 02Installation 03Software License 04

Divi-Modules –Text-On-A-Path 05

Content Tab 06Text 07Path – Arc 08Path – Quadratic 09Path – Cubic 10Path – Wave 11Path – Ellipse 12Scale 13Guides 14

Design Tab 15Fill 16Path 17

Advanced Tab 18Custom CSS 19

Examples 20Text Path & Guides 21Path Types 22Text Alignment & Position 23Text Baseline Shift & Invert 24Text Paths 25Dash Pattern & Path Caps 26

01 • Image Box

AboutThis document provides an overview of available settings for the Divi-Modules – Text-On-A-Path module.

It discusses only those settings which are unique to this module and does not provide any information on settings which are common to most Divi modules.

For more information on common Divi module settings, please consult Elegant Themes online documentation.

Further more, this document provides only limited information on installing and activating the module. It assumes the reader is already familiar with these concepts and has some prior experience with both WordPress and the Divi Builder.

02 • Image Box

RequirementsWordPress: Version 4.5 (or higher)PHP: Version 5.6 (or higher)MySQL: Version 5.0 (or higher)

Important: Requires the Divi Theme, Extra Theme, or Divi Builder Plugin to be installed and activated.

Divi-Modules plugins are created and tested using the latest Divi Theme and Builder versions. Backwards compatibility is not guaranteed, however, plugins should function normally with at least the following versions:

Divi Theme: Version 3.1 (or higher)Extra Theme: Version 2.1 (or higher)Divi Builder: Version 2.1 (or higher)

03 • Image Box

InstallationAfter completing your Divi-Modules purchase, you will receive a confirmation email providing you with your Download Link and Software License Key. This information can also be found in your Divi-Modules Account Purchases and Downloads pages.

After downloading your Divi-Modules purchase, upload it to your website’s WordPress Dashboard and click Activate. More detailed instructions on Installing WordPress Plugins can be found online.

If your Divi-Modules product was purchased from the Elegant Themes Divi Marketplace, your product license is with Elegant Themes, not Divi-Modules. For all product licensing, updates and support, see your Divi Marketplace Customer Dashboard.

04 • Image Box

Software LicenseIn order to receive periodic updates, you will need to activate your Software License. To do this, navigate to the Divi-Modules menu item in your WordPress Dashboard. Go to the My Modules submenu, enter your Software License Key, and click Activate.

To manage your Software License, please login to your Divi-Modules Account Purchases page.

If your Divi-Modules product was purchased from the Elegant Themes Divi Marketplace, your product license is with Elegant Themes, not Divi-Modules. For all product licensing, updates and support, see your Divi Marketplace Customer Dashboard.

05 • Text-On-A-Path

Divi-Modules –Text-On-A-PathDivi-Modules – Text-On-A-Path does exactly what it says on the tin – puts your text on a path. Use it to make eye-catching headings, CTAs and tag lines. Choose from Arc, Quadratic, and Cubic paths, as well as Wave and Ellipse and create deliciously curvy text right within the Divi Builder.

Text-On-A-Path settings are organised into three tabs:

ContentDesignAdvanced

The following pages explain the settings found in these tabs which make this module unique.

06 • Image Box

Content TabThe Content Tab includes the following sections:

TextPathScaleGuidesLinkBackgroundAdmin Label

Those shown in blue contain settings which are unique to this module. Those in grey contain settings which are common to most Divi modules and are not discussed here.

For information on common Divi module settings, please consult Elegant Themes online documentation.

07 • Image Box

Text

TextHere you can enter Text for the Path.

Text AlignmentHere you can choose the Alignment of the Text.

Text AnchorHere you can set the position the Text Anchor along the Path.

Text BaselineHere you can set the Baseline position for the Text. Positive values will position the Text above the Path. Negative values will position the Text below the Path.

Text InvertHere you can choose to Invert the Path direction. When On is selected, Text will be positioned on the opposite edge of the Path.

Text LigaturesSome modern browsers automatically apply ligatures to your text. This can sometimes create undesirable results. Here you can choose whether or not to enable font ligatures.

> See page 23 and 24 for examples

08 • Image Box

Path – Arc

Path TypeHere you can select the Type of Path to be drawn.

Arc WidthHere you can set the Width of the Arc.

Arc HeightHere you can set the Height of the Arc.

> See page 22 for examples

09 • Image Box

Path – Quadratic

Path TypeHere you can select the Type of Path to be drawn.

Path X1 / Y1Here you can set the horizontal and vertical position of the Path’s first control point.

Path X2 / Y2Here you can set the horizontal and vertical position of the Path’s second control point.

> See page 22 for examples

10 • Image Box

Path – Cubic

Path TypeHere you can select the Type of Path to be drawn.

Path X1 / Y1Here you can set the horizontal and vertical position of the Path’s first control point.

Path X2 / Y2Here you can set the horizontal and vertical position of the Path’s second control point.

Path X3 / Y3Here you can set the horizontal and vertical position of the Path’s third control point.

> See page 22 for examples

11 • Image Box

Path – Wave

Path TypeHere you can select the Type of Path to be drawn.

Wave WidthHere you can set the Width of the Waves.

Wave HeightHere you can set the Height of the Waves.

Number of WavesHere you can set the Number of Waves to be drawn.

> See page 22 for examples

12 • Image Box

Path – Ellipse

Path TypeHere you can select the Type of Path to be drawn.

Ellipse WidthHere you can set the Width of the Ellipse.

Ellipse HeightHere you can set the Height of the Ellipse.

> See page 22 for examples

13 • Image Box

Scale

ScaleHere you can choose the Scale of the Path on the page. When Fixed is selected, the Path will remain a constant Scale at all page widths. When Flexible is selected, the Path will Scale to fill all available space.

AlignmentHere you can set the horizontal Alignment of the Path on the page.

Max WidthHere you can set a Maximum Width for the Path on the page. Use % units to keep the Path at a constant proportion to the page width. Use px units to set a maximum static width for the Path, below which it will scale along with the page width.

14 • Image Box

Guides

Show GuidesHere you can choose to display Guides for the Path. Set this to On to make it easier to design your path.

Note: Guides are always hidden on the front-end.

Guides ColorHere you can set a custom Color for the Guides.

> See page 21 for example

15 • Image Box

Design TabThe Design Tab includes the following sections:

TextFillPathSizingSpacingBorderBox ShadowFiltersTransformAnimation

Those shown in blue contain settings which are unique to this module. Those in grey contain settings which are common to most Divi modules and are not discussed here.

For information on common Divi module settings, please consult Elegant Themes online documentation.

16 • Image Box

FillThe Fill setting only becomes available when Ellipse is selected under the Path Type setting.

FillHere you can set a custom Fill color for the Ellipse.

17 • Image Box

PathText paths can be stroked with solid or dashed lines which can have squared or rounded ends.

Path StyleHere you can choose whether to display the Path.

Dash PatternHere you can enter a Dash Pattern for the Path.

Path CapsHere you can set the appearance of the Path Caps.

Path Color / WidthHere you can set a Color and Width for the Path.

Path Start / EndHere you can set the Start and End positions of the Path.

Path ScalingHere you can choose whether the Path Width will scale with the Path or remain at a constant width.

> See page 25 and 26 for examples

18 • Image Box

Advanced TabThe Advanced Tab includes the following sections:

CSS ID & ClassesCustom CSSVisibilityTransitionsPositionScroll Effects

Those shown in blue contain settings which are unique to this module. Those in grey contain settings which are common to most Divi modules and are not discussed here.

For information on common Divi module settings, please consult Elegant Themes online documentation.

19 • Image Box

Custom CSSHere you can add custom CSS.

TextHere you can add Custom CSS for the Text.

PathHere you can add Custom CSS for the Text Path.

20 • Image Box

ExamplesPlease note, the purpose of these examples is to illustrate the various settings of this module. The choice of fonts, colors, and other design elements in the examples is intentionally minimal so as not to distract from the effect of the settings themselves.

You are, of course, free to use any combination of fonts, colors, backgrounds, borders, filters and effects that the Divi Builder makes available.

21 • Image Box

Text Path & GuidesText paths are fully editable in the Divi Builder. Guides can be toggled On and Off in the back-end and are hidden on the front-end.

Back-end view

Front-end view

22 • Image Box

Path TypesThere are five path types to choose from: Arc, Quadratic, Cubic, Wave, and Ellipse. Arc

Quadratic

Cubic

Wave

Ellipse

23 • Image Box

Text Alignment & PositionText can be freely aligned and positioned anywhere along the path by a combination of the Text Alignment and Anchor Alignment settings.

Please note, Text aligns itself to the Text Anchor, not the Path itself. The Text Anchor is indicated by the small vertical line.

Alignment: Left Anchor: 50%

Alignment: Left Anchor: 0%

Alignment: Right Anchor: 50%

Alignment: Right Anchor: 100%

24 • Image Box

Text Baseline Shift & InvertText can be positioned vertically the using Text Baseline setting and flipped using the Text Invert setting.

Baseline Shift

Inverted

25 • Image Box

Text PathsText paths can be stroked with solid or dashed lines which can have squared or rounded ends. Baseline shift can be used to position text above, below or over the path.

> See next page for more

Dashed (Squared)

Dashed (Rounded)Dashed (Rounded)

Solid (Rounded)

Solid (Rounded)Solid (Squared)

26 • Image Box

Dash Pattern & Path CapsText paths can be stroked with solid or dashed lines which can have squared or rounded ends.

Dash PatternDashes are specified using the Dash Pattern setting.

For example: A Dash Pattern of ‘10 5’ will create a Path with the pattern 10px dash | 5px gap. A value of ‘10 5 10 20’ will create a Path with the pattern 10px dash | 5px gap | 10px dash | 20 dash gap.

You can enter as many consecutive values as you like, and values can be separated by a space or comma.

Path CapsPath Caps are specified using the Path Caps setting.

When set to Butt, the ends of the Path will exactly match the Path Start and Path End positions.

When set to Round, the ends of the Path will have a rounded appearance which extends beyond the Path Start and Path End positions.

When set to Square, the ends of the Path will have a square appearance which extends beyond the Path Start and Path End positions.

Caps: Butt

Pattern: 10 20 Caps: Butt

Pattern: 20 5 5 5 Caps: Butt

Pattern: 10 20 Caps: Round

Pattern: 0 10 Caps: Round

Pattern: 20 20 0 20 Caps: Round

Pattern: 10 20 Caps: Square

Pattern: 0 10 Caps: Square

Pattern: 10 20 Caps: Square

Caps: Round

Caps: Square

Copyright © 2020 · Divi-ModulesDivi is a registered trademark of Elegant Themes, Inc.This product is not affiliated with or endorsed by Elegant Themes.