Scrolling Text
A band of short phrases that moves with the page scroll, auto scrolls, or both, with symbol or image dividers, outlined text, and an optional colored, tilted band.
Scrolling Text renders a horizontal band of short phrases separated by a divider (a symbol or small images), the classic "marquee" strip for a row of services, values, or taglines. Motion options let it move with the page scroll, auto scroll on its own, or auto scroll that speeds up while the visitor scrolls. You can also color every other item, put the text on a colored band, and tilt the band.
Add it
In WPBakery, click Add Element and pick Scrolling Text from the Highend Shortcodes category. Or use the shortcode. See Shortcode.
Settings
itemsOne item per line, without commas. Keep items short.
colorLeave empty for the theme's default text color.
Moves with the page scrollmotionOptions: Moves with the page scroll, Auto scroll, Auto scroll, faster while scrolling. Browsers that can't move it with the page scroll auto scroll instead.
NormalspeedOptions: Slowest, Slow, Normal, Fast.
To the leftdirectionOptions: To the left, To the right.
OffpauseOnly shown when Motion is Auto scroll or Auto scroll, faster while scrolling.
•separatorA symbol between items, for example •, ✦, ✳, ★ or /. Leave empty for a space.
separator_imagesSmall images between the items, shown one after the other in place of the Divider symbol. They are sized to the text. With more items than images, the images repeat in order. They are decorative, so screen readers skip them.
Circleseparator_shapeOptions: Circle, Rounded square, Pill (wider than tall). Only shown when Divider Images are chosen.
OffspinTurns the divider symbol or images with the page scroll, or continuously when auto scrolling.
separator_colorColors the divider symbol, not the divider images. Only shown when Divider isn't empty.
0.4gapIn em, relative to the font size.
NoneoutlineHollow letters with only their outline drawn. Options: None, All items, Every other item.
1.5outline_widthIn pixels. Only shown when Outline Text isn't None.
outline_behindHides lines some fonts show inside outlined letters. Leave empty to use the Band Color when one is set, or otherwise the section background. Set it when the text sits on an image. Only shown when Outline Text isn't None.
alternate_colorShows every second item in this color, for example dark text with every second item in your accent color. Combine it with Outline Text set to Every other item for outlined items in this color. The pattern carries on smoothly around the loop, also with an odd number of items.
band_colorA strip of color behind the text, like a ribbon. Put the element in a full width row so the band reaches the screen edges.
tiltIn degrees, from -15 to 15, for example -3. Turns the band (or the text, when there's no Band Color). Leave empty to keep it level. Values beyond 15 in either direction are limited to 15. The element makes room above and below for the raised and lowered ends of the band.
A tilted band runs wider than its column so its ends stay out of sight. For the ribbon look, put Scrolling Text in a full width row, for example a row with Row stretch set to Stretch row and content (no paddings), and give it a Band Color.
Typography tab
Yesuse_theme_fontsUses the theme's font instead of the Google font below.
google_fontsPick a Google font. Only shown when Use Theme Font is off.
40font_sizeIn pixels.
font_size_phoneIn pixels. The size scales smoothly from this size on phones to Font Size on desktops. Leave empty to pick it automatically when Fluid Typography is on in Highend Options > Typography.
Defaultfont_weightOptions: Default, 300, 400, 500, 600, 700, 800.
letter_spacingIn em, relative to the font size, for example -0.02 or 0.05.
Defaulttext_transformOptions: Default, None, Uppercase, Lowercase, Capitalize.
Common settings
Scrolling Text also has an Extra class name field. See the Elements overview. It has no Entrance Animation or Entrance Delay fields.
Shortcode
[hb_marquee items="Brand identity,Websites,Digital products,Campaigns" motion="both" speed="fast" separator="✦" outline="alternate"]A tilted band with image dividers and every other item in a second color:
[hb_marquee items="Cut,Color,Style,Care" separator_images="12,34" separator_shape="pill" alternate_color="#c8553d" band_color="#161514" color="#ffffff" tilt="-3"]separator_images takes the IDs of images from your Media Library, separated by commas.
In WPBakery, enter Items one per line; when writing the shortcode by hand you can separate them with commas instead.