WordPress Text Effects Guide: Implementing Text Colors, Shadows and Animations to Easily Enhance Page Aesthetics

Adding text effects to a WordPress page or post not only improves the aesthetics of the page but also enhances the user experience by attracting the user's attention. With simple CSS or some advanced techniques, we can add different visual effects to text without using plugins. In this article, we will explain in detail how to add various styling effects to text in WordPress.

The role of the text effect and how to realize it

Text effects can be color changes, shadows, animations, etc., and can be achieved in the following ways:

1. CSS: Embed custom CSS directly in a page or post.
2. Editor Features: If you use the WordPress block editor (Gutenberg) or the Classic Editor to add specific HTML and CSS.
3. Custom CSS for themes: Applied globally in WordPress themes.

Next, we practice these methods with examples.

Common text effects and how to realize them

1. Change of text color

Set hover color change effect for text to increase interactivity.

Sample code:

This is a sample text. 

Corresponds to CSS:

.color-effect {
  color: #333.
  transition: color 0.3s ease;
}

.color-effect:hover {
  color: #007bff; /* turns blue when mouse hovers */
}

Demo: Using the Block Editor (Gutenberg)

1. Create a new post or edit an existing post::
   • In the WordPress backend, select Articles > Add New Article or edit an existing page.

2. Adding HTML Blocks::
   • In the editor, click + button, select HTML blocksThe
   • Paste the following code into the HTML block:

<p class="color-effect">This is a sample text.</p>

3. Adding custom CSS::
   • switch to Appearance > Customization > Extra CSSThe
   • Paste the following CSS code into the Extra CSS panel:

.color-effect {
  color: #333;
  transition: color 0.3s ease;
}

.color-effect:hover {
  color: #007bff; /* turns blue on mouse hover */
}

2. Adding text shadows

Text shading adds dimension to text.

Sample code:

This is text with a shadow. 

Corresponds to CSS:

.shadow-effect {
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0, 0.3);
}

Effect: The text will show a soft shadow and look more prominent.

3. Adding underline animation

The underline dynamically expands from left to right as the user hovers.

Sample code:

Hover to see underline animation

Corresponds to CSS:

.underline-effect {
  display: inline-block;
  position: relative;
  text-decoration: none;
  color: #007bff.
}

.underline-effect::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  background-color: #007bff;
  left: 0;
  bottom: -2px;
  transition: width 0.3s ease;
}

.underline-effect:hover::after {
  width: 100%; /* underline expand on hover */
}

4. Realization of typewriter animation effects

The animation effect that simulates the word-by-word appearance of text is very appealing to the user's attention.

Sample code:

  
This is the typewriter animation effect. 

Corresponds to CSS:

.typewriter p {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid #333;
  font-family: monospace.
  font-size: 1.5em;
  animation: typing 4s steps(40, end), blink 0.5s step-end infinite;
}

@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%.
  }
}

@keyframes blink {
  From, to {
    border-color: transparent;
  }
  50% {
    border-color: black;
  }
}

5. Text rotation effect

It is possible to have headings or important text rotated for display.

Sample code:

Rotate text effect

Corresponds to CSS:

.rotate-effect {
  display: inline-block;
  animation: rotate 2s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

Third, how to apply the effect to WordPress pages or posts

Method 1: Adding via Block Editor (Gutenberg)

1. Open the WordPress backend and edit your page or post.
2. Add an "HTML block".
3. Copy the sample code (HTML and CSS) into an HTML block and save it.

Method 2: Through the theme's "Extra CSS" feature

1. In the WordPress backend, go to Appearance > Customization > Extra CSSThe
2. Paste the sample CSS into the text box.
3. Save and apply.

Method 3: Modify directly in the theme file

1. Open the theme of the style.css Documentation.
2. Paste the CSS effect code in the right place.
3. Save and refresh the page.

Precautions for using the effect

1. Reduced page load: Try to avoid using too many dynamic effects that may affect the loading speed.
2. responsive design: Ensure that text effects are displayed properly on different screen devices.
3. Compatibility Test: Check for consistency in different browsers (Chrome and Firefox are recommended).

summarize

With this article, you can easily master how to add multiple visual effects to text on WordPress pages or posts, such as colors, shadows, dynamic underlining, typewriter animation, and more. These effects not only enhance the aesthetics of the page, but also enhance the user's interactive experience. These effects can be achieved quickly, whether through CSS, the block editor, or the theme's custom settings.