Text-On-A-Path Version 1.1.1

(1)

Text-On-A-Path

Version 1.1.1

(2)

About 01

Requirements 02

Installation 03

Software License

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

05 Content Tab

06 Text 07

Path – Arc

08 Path – Quadratic

09 Path – Cubic

10 Path – Wave

11 Path – Ellipse

12 Scale 13

Guides 14

Design Tab

15 Fill 16

Path 17

Advanced Tab

18 Custom CSS

19 Examples 20

Text Path & Guides

21 Path Types

22 Text Alignment & Position

23 Text Baseline Shift & Invert

24 Text Paths

25

(3)

01 • Image Box

About

This 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.

(4)

02 • Image Box

Requirements

WordPress: 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)

(5)

03 • Image Box

Installation

After 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

(6)

04 • Image Box

Software License

In 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

(7)

05 • Text-On-A-Path

Divi-Modules –Text-On-A-Path

Divi-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:

Content Design Advanced

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

(8)

06 • Image Box

Content Tab

The Content Tab includes the following sections:

Text Path Scale Guides Link Background Admin 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.

(9)

07 • Image Box

Text

Text

Here you can enter Text for the Path.

Text Alignment

Here you can choose the Alignment of the Text.

Text Anchor

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

Text Baseline

Here 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 Invert

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

Text Ligatures

Some 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.

(10)

08 • Image Box

Path – Arc

Path Type

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

Arc Width

Here you can set the Width of the Arc.

Arc Height

Here you can set the Height of the Arc.

(11)

09 • Image Box

Path – Quadratic

Path Type

Path X1 / Y1

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

Path X2 / Y2

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

(12)

10 • Image Box

Path – Cubic

Path Type

Path X1 / Y1

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

Path X2 / Y2

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

Path X3 / Y3

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

(13)

11 • Image Box

Path – Wave

Path Type

Wave Width

Here you can set the Width of the Waves.

Wave Height

Here you can set the Height of the Waves.

Number of Waves

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

(14)

12 • Image Box

Path – Ellipse

Path Type

Ellipse Width

Here you can set the Width of the Ellipse.

Ellipse Height

Here you can set the Height of the Ellipse.

(15)

13 • Image Box

Scale

Scale

Here 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.

Alignment

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

Max Width

Here 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.

(16)

14 • Image Box

Guides

Show Guides

Here 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 Color

Here you can set a custom Color for the Guides.

(17)

15 • Image Box

Design Tab

The Design Tab includes the following sections:

Text Fill Path Sizing Spacing Border Box Shadow Filters Transform Animation

(18)

16 • Image Box

Fill

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

Fill

(19)

17 • Image Box

Path

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

Path Style

Here you can choose whether to display the Path.

Dash Pattern

Here you can enter a Dash Pattern for the Path.

Path Caps

Here you can set the appearance of the Path Caps.

Path Color / Width

Here you can set a Color and Width for the Path.

Path Start / End

Here you can set the Start and End positions of the Path.

Path Scaling

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

(20)

18 • Image Box

Advanced Tab

The Advanced Tab includes the following sections:

CSS ID & Classes Custom CSS Visibility Transitions Position Scroll Effects

(21)

19 • Image Box

Custom CSS

Here you can add custom CSS.

Text

Here you can add Custom CSS for the Text.

Path

(22)

20 • Image Box

Examples

Please 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.

(23)

21 • Image Box

Text Path & Guides

Text 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

(24)

22 • Image Box

Path Types

There are five path types to choose from: Arc, Quadratic,

Cubic, Wave, and Ellipse. _Arc

Quadratic

Cubic

Wave

(25)

23 • Image Box

Text Alignment & Position

Text 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%

(26)

24 • Image Box

Text Baseline Shift & Invert

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

Baseline Shift

(27)

25 • Image Box

Text Paths

Text 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)

(28)

26 • Image Box

Dash Pattern & Path Caps

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

Dash Pattern

Dashes 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 Caps

Path 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

(29)

Divi is a registered trademark of Elegant Themes, Inc.