Select the Text Box, go to Inspector > Text > Export Options and tick Scrollable text. Then make the box the height you want. Any text that doesn't fit scrolls inside the box, and the rest of your page stays put. It's real text, so search engines and screen readers read all of it.
For example:
- A holiday let shows its booking terms in a small box under the booking form.
- A school keeps a list of this term's news in a box beside the welcome text.
- A builder fits a long list of customer comments into one corner of the home page.
Make a scrolling text box
- Click TextBox in the toolbar, or select a Text Box you already have, and type or paste your text.
- Go to Inspector > Text and open Export Options.
- Tick Scrollable text.
- Drag the box's bottom handle up to the height you want. The box no longer grows with its text.
- Make it look like a box: in Inspector > Shape Options, give it a light background colour and a thin border (Stroke). In Inspector > Text, under Spacing, set an Inset Margin of about 10 to 15 so the text doesn't touch the edges.
- Click Preview and scroll inside the box with your mouse or trackpad.
You can scroll the text in EverWeb too, with the mouse wheel, to check what's further down.
Let visitors see there's more
Macs, iPhones and iPads hide scroll bars until someone scrolls, so a visitor may not notice the box scrolls. Two simple fixes:
- Set the height so the last visible line is cut in half. People see straight away that the text carries on.
- Put a short line above the box, such as "Scroll down to read the full terms".
Good to know
- With Scrollable text on, Vertical alignment and Export Text as Image are greyed out.
- It works on a Text Box on any page, in a Container, and on a Full width Text Box.
- Links, bold text and lists inside the box work as usual.
- Containers, pictures and widgets can't scroll inside a box. For those, see "Other ways" below.
On phones
The box keeps the height you set, but on a narrow screen the text wraps onto more lines, so there's more to scroll. Visitors swipe inside the box with one finger. A tall box can catch the swipe when a visitor wants to scroll the page, so:
- Keep the box short, about 300 pixels or less, and keep important details (prices, phone number) outside it.
- Check it with Preview > Preview QR Code on your phone.
- If it doesn't work well on a phone, show a full, non-scrolling copy of the text on phones instead: see Hide or show objects on phones, tablets or computers (Show on Device). Remember to update both copies.
With an HTML Snippet
If you want the box to grow to fit the text on phones, paste this into an HTML Snippet widget (Inspector > Widget Settings, HTML Code, then Apply), and tick Adjust height to content. Change the heading and paragraphs to your own words:
<div class="ew-scrollbox">
<h3>Latest news</h3>
<p>Our new opening hours start on 1 March.</p>
<p>Summer workshops are now open for booking.</p>
</div>
<style>
.ew-scrollbox { height: 300px; overflow-y: auto; padding: 12px 16px; border: 1px solid #dddddd; border-radius: 8px; font-size: 16px; line-height: 1.5; }
@media (max-width: 600px) { .ew-scrollbox { height: auto; } }
</style>height: 300px sets the height on computers. On screens narrower than 600 pixels the box shows all its text without scrolling. Text in a snippet doesn't use your Paragraph Styles: change its look in the code. See Add a booking calendar, Instagram feed or other outside code with the HTML Snippet widget.
Other ways
- An FAQ that opens and closes: see Add an FAQ with questions that open and close (accordion).
- Long terms and conditions: put them on their own page and link to it, or open them in a Popup Window: see How do I open a popup window or enlarge a photo when someone clicks?.
- Testimonials that change by themselves: put each one on a slide in a Carousel: see Add a slideshow to your website: Image Slider, Carousel, Slide Show Fill or a gallery.
- A PDF: link to it rather than squeezing it into the page: see How do I link to a PDF so visitors can open or download it?.