Text Emphasis

TEXT EMPHASIS

Draw attention to the words that matter with animated circles, underlines, and highlights.

Choose one effect or mix and match all three. Each effect is added directly to your existing Showit text and animates when it scrolls into view.


WHAT YOU'LL NEED

One or more Showit text boxes

The Text Emphasis code

One Class Selector for each text box you want to emphasize


HOW TO INSTALL


01 — CHOOSE YOUR TEXT

Add or select a normal Showit text box containing the word or phrase you want to emphasize.

You do not need to place the emphasized wording in its own text box.

For example, your text box could say:

Circle what matters.

And the effect can be applied to only:

Circle


02 — ADD THE CLASS SELECTOR

Select the text box in Showit.

Go to:

Advanced → Class Selectors

Add the Class Selector for the effect you want to use.

FOR A CIRCLE:

draw-circle

FOR AN UNDERLINE:

draw-underline

FOR A HIGHLIGHT:

draw-highlight

Do not include the period before the class name.


03 — ADD THE CODE

Open:

Page → Advanced Settings → Page Loaded Javascript

Paste in the entire Text Emphasis code.


04 — TELL THE CODE WHAT TO EMPHASIZE

At the top of the code, find:

circleText: [
  "Circle"
],

underlineText: [
  "Underline"
],

highlightText: [
  "Highlight"
],

Replace the text between the quotation marks with the exact word or phrase you want the effect to emphasize.

For example:

circleText: [
  "what matters"
],

The wording must match the text in your Showit text box.


05 — USING MORE THAN ONE

You can use each effect multiple times on the same page.

Add the same Class Selector to each Showit text box where you want that effect.

Then list the words or phrases in the code in the same order the text boxes appear on the page.

For example:

circleText: [
  "Hello",
  "your story",
  "Let's begin"
],

The first draw-circle text box will emphasize "Hello."

The second will emphasize "your story."

The third will emphasize "Let's begin."

You can use circles, underlines, and highlights in any combination.

You do not need to use all three.


06 — CHOOSE YOUR COLORS

At the top of the code, find:

circleColor: "#D85C5C",

underlineColor: "#6F86A6",

highlightColor: "#F4C86A",

Replace the hex codes with colors that fit your website.

Each effect can have its own color.


07 — CUSTOMIZE THE EFFECTS

The customization section also lets you change:

circleDuration — Drawing speed of the circle

underlineDuration — Drawing speed of the underline

highlightDuration — Drawing speed of the highlight

circleThickness — Thickness of the circle

underlineThickness — Thickness of the underline

highlightHeight — Height of the marker-style highlight

Higher duration numbers create slower animations.


08 — CHOOSE WHETHER THE EFFECT REPLAYS

Find:

playOnce: true

Leave this set to:

true

if you want each effect to animate only the first time it scrolls into view.

Change it to:

false

if you want the effect to reset after leaving the screen and animate again when the visitor scrolls back to it.

Everything below:

NO EDITING NEEDED BELOW THIS LINE

can be left alone.


09 — PREVIEW + TEST

Open Preview and scroll to each text box.

The circle, underline, or highlight should draw when that text enters the screen.

Check both desktop and mobile before publishing.


DESIGN TIP

You don't have to emphasize an entire text box.

Use the code to circle, underline, or highlight a single word or phrase inside a larger heading or sentence.

A little emphasis goes a long way. 🙂


QUICK INFO

DIFFICULTY — Easy

REQUIRES — Showit Text + Page Loaded Javascript

CLASS SELECTORS — draw-circle / draw-underline / draw-highlight

EFFECTS — Circle / Underline / Highlight

MULTIPLE EFFECTS PER PAGE — Yes

WORD OR PHRASE TARGETING — Yes

COLORS — Customizable

ANIMATION SPEED — Customizable

REPLAY OPTION — Yes

MOBILE FRIENDLY — Yes

CODING KNOWLEDGE — Not required