Headings that stand out, such as outlined, curved or scrolling text, make key messages hard to miss.
The Advanced Typography block in Nexter Blocks Pro adds these text effects in the block editor, without custom CSS.
Before You Start
- Edition: Pro — Advanced Typography needs Nexter Blocks Pro.
- Block to enable: Advanced Typography, switched on under Nexter > Blocks in your WordPress dashboard.
Learn via Video Tutorial
Steps
- Go to Nexter > Blocks, search for Advanced Typography and turn it on.
- Add the Advanced Typography block to your page and click Design from Scratch.
- In the Advanced Typography panel, choose Normal for one text or Multiple for several parts with different effects, then type your text in Content.
- Clear the Link field unless the text should be clickable. It starts with #.
- Open an effect panel, such as Circular Text or Marquee, and turn it on.
- Style the text on the Style tab, then save and check the live page.
Layout Settings
| Panel | Settings | What it does |
|---|---|---|
| Advanced Typography | Select Option, Content, Link, Alignment | Normal applies effects to the whole text; Multiple gives each text part its own effects |
| Text Direction | Vertical Text, Vertical Letters, Vertical Direction | Vertical text, upright stacked letters and right-to-left direction (Normal only) |
| Circular Text | Circular Text, Custom Radius, Reverse Direction | Wraps the text around a circle |
| Background Blend Mode | Blend Mode, Variations | Blends the text with what is behind it (19 blend modes) |
| Knockout Text | Knockout Text, Background | Fills the letters with an image, colour or gradient |
| On Hover Image Reveal | Hover Image Reveal, Upload Image, Select Style | Shows an image when the text is hovered (6 styles) |
| Marquee | Marquee, Type, Direction, Behavior, Loop, Scroll Amount, Animation Duration, Marquee Text Width | Scrolling text |
Style Settings
| Panel | Settings |
|---|---|
| Advanced Typography | Typography, Padding and, for Normal and Hover, Text Color, Gradient Color, Text Shadow, CSS Filters, Transform, Transform Origin |
| Stroke/Fill | Stroke/Fill, Stroke Width, Gradient Stroke, Stroke Color and Fill Color for Normal and Hover (Normal only) |
| Advanced Underline | Select Underline: None, Classic (line type, style, colour) or Overlay (7 styles, offset, height, background) (Normal only) |
With Multiple, each text item has its own Extra Options (the same effects plus Continuous Animation) and Typography Style settings. The Advanced tab holds the options shared by all Nexter Blocks.
How It Behaves
- All effects render on the live page; the circular text and image reveal effects are drawn by a script after the page loads.
- Each text is also given an aria-label with the same words for screen readers.
- Text Direction, Circular Text, Stroke/Fill and Advanced Underline panels are available for Normal text. Multiple puts the effects inside each text item.
Limitations
- Pro only. If Nexter Blocks Pro is deactivated, the text from this block disappears from your pages.
- The Link field starts with #, so text is a link to the same page until you clear it.
- The Overlay underline shows a red line by default. Set a Background colour for it.
Troubleshooting
I cannot find the Advanced Typography block
Check that Nexter Blocks Pro is active, then turn the block on under Nexter > Blocks.
My text became a link
Clear the Link field in the Advanced Typography panel.
