Are you looking to add a marquee text effect in WordPress? Marquee text, also known as scrolling or ticker text, adds motion to your webpage, grabbing visitors’ attention. This eye-catching effect is great for highlighting important information or announcements.
The Advanced Typography block in Nexter Blocks lets you create a WordPress marquee text effect using CSS transitions or the HTML marquee tag, without any custom code.
Best Used For:
- News and media sites displaying live announcement tickers
- Event pages cycling through sponsor logos or speaker names
- SaaS landing pages showcasing customer logos or live social proof
To check the complete feature overview documentation of the Nexter Blocks Advanced Typography block, click here.
Requirement – This block is part of Nexter Blocks. Make sure it is installed and activated.
To do this, add the Advanced Typography block to the page and follow the steps.
1. In the Advanced Typography tab, select Normal or Multiple from the Select Option section.
Select Normal for this example.
2. Then add the text in the Text field.
3. After that, enable the Marquee toggle from the Marquee tab.
Note: In the Multiple option you will find the Marquee option in each text repeater item.
From the Type section, choose the marquee implementation. Two options are available:
- Default – Uses an HTML marquee tag to create the scrolling effect.
- On Transition – Creates the marquee effect using CSS transitions.
Note: We recommend using the On Transition option as the marquee tag is not very SEO-friendly.
Select Default for this example.
From the Direction dropdown, choose the scrolling direction for the marquee text. Select Left for standard left-to-right motion. You can also set the direction to right, top, or bottom.
From the Behavior section, set the scrolling behavior. Three options are available:
- Scroll – Text moves continuously in the selected direction. Use this for news tickers or logo strips that should loop without stopping.
- Slide – Text slides in from one side and stops. Use this for one-time announcements where the motion should end once the text is visible.
- Alternate – Text moves forward and then reverses direction repeatedly. Use this for short phrases where you want to draw attention without the text leaving the visible area.
In the Loop field, set how many times the animation plays.
Note: You can set the loop to 0 or -1 to set an infinite loop.
From the Scroll Amount field, set the speed of the scrolling animation. Use a lower value for long text strings so visitors have time to read the content, and a higher value for short labels or logo strips.
From the Animation Duration field, set how long the marquee animation takes to complete one cycle. Use this when you need finer control over pacing that is independent of the Scroll Amount setting.
In the Marquee Text Width field, control the horizontal area available for the scrolling animation across different screen sizes. Use this when the marquee sits inside a container that is narrower than the full viewport, so the scrolling area matches the container rather than the page width.
Based on your settings, the marquee text effect appears on the page.
