All About EverWeb’s Scrollable TextBoxes!

When you create your website’s pages in EverWeb, one of your design goals should be to retain an uncluttered look on those pages, with as much white space as possible. If you find that your page is heavy on text, for example, you have a few options to hand:

1. You can edit the text so that it’s less wordy
2. You can convert the text into a summary, or summary bullet points using AI tools and replace your original text
3. You can put the text in to a blog post instead of in a regular page, then hyperlink to the blog post from the original page
4. Or you could use Scrollable TextBoxes.

In this post, we’re going to explore the last option: Scrollable TextBoxes

Prerequisites
To be able to use Scrollable TextBoxes in your site you’ll need to be using EverWeb version 4.3 or later. If you’re running a version of EverWeb prior to this, you can upgrade by hitting the EverWeb-> Check for Updates… menu option on a Mac, or on the Help-> Check for Updates… menu option in the Windows version.

Before you start out, be sure that this is the right option for you. Scrollable TextBoxes are great for when you have text overflow situations on your page, but you probably are not going to put 1,000 words of blog post type text in one. So decide if this is the correct solution before proceeding!

If a Scrollable TextBox is a good solution for you and you’re using EverWeb 4.3 or higher, then you can go ahead and create Scrollable Textboxes in either your Center Aligned (fixed width) or Responsive page layout. We’re going to look at how to create this type of TextBox for both page styles…

Scrollable TextBox In Center Aligned (Fixed Width) Pages
First let’s look at adding a Scrollable TextBox to a fixed width page i.e. EverWeb’s Centered Layout. If you’re not sure as to the page layout your page is using, go to the Page Layout section of the Page Settings tab in the Inspector Window, where the page layout type is displayed to the right of the words ‘Page Layout’.

First add a TextBox to your page using the TextBox button in the Toolbar, if you don’t already have a TextBox on the page that you want to use as a Scrollable TextBox. After adding the TextBox to the page, double click inside the TextBox object to highlight the text. You can now either overtype the default text with own text manually, or you can copy and paste text from an external source. If you already have text in an existing TextBox, you’ll be skipping this step!

As you type, the TextBox expands, if necessary, to accommodate the text. For the moment this is OK, just add. the text that you need until you’re finished.

As you probably know already, the point of a Scrollable TextBox is that there’s text inside the TextBox than it displays. You’ll need to resize the TextBox so that some of its text can’t be seen. EverWeb won’t usually allow you to do this, as the TextBox will always resize itself automatically, which is what you would usually want to happen.

To resize the TextBox so that some of the text inside it is hidden, first check that the TextBox is selected, then click on the Text Inspector button in the Inspector Window. At the bottom of the Text Inspector’s settings is a section called Export Options. In this section is an called, unsurprisingly, Scrollable Text! When you check the box, you’ll now be able to resize the TextBox without it automatically adjusting as you do so. You should see some of your text disappear as you shrink the TextBox down.

When you’re happy with the size of the TextBox, move it to the place on your page where you want it to be used. You won’t be able to see the TextBox scrolling the text in the Editor Window though. You’ll need to Preview or publish the page to see it working.

Probably Previewing is best before publishing. When doing this, put the mouse over the TextBox then use its scrolling ability to scroll the text.One thing you’ll notice is that it’s not easy to identify the TextBox as scrollable unless you know that it is. You might want to bring attention to this in the page e.g. ‘The Scrollable Box to the Right has more info…’ You might also want to make your Scrollable TextBoxes Callout items by setting their background color to one that’s different to the page’s color. Alternatively use a Stroke option to highlight the Scrollable Textbox on the page.

Scrollable TextBoxes in Responsive Pages
We’ve already been through the basics Scrollable TextBox in the section above. It’s basically the same in Responsive pages as it is in fixed width pages. There are, however, a couple of tips that will help you when using Scrollable TextBoxes in Responsive pages.

1. Scrollable TextBoxes as Full Width Objects: If you’re using a Scrollable TextBox as a full width object, you’ll be able to resize its height with its grab handles. These are located in the center top and bottom of the TextBox.
2. If the TextBox is full width but too wide, the Max Width and Margins Settings in the Metrics Inspector will be of help here.
3. If you’re using a Scrollable TextBox in a Responsive Row widget or Container, you’ll want it to be a fixed width. If the TextBox Full Width option is checked then uncheck it to make the object fixed width. You can now set the width of the TextBox, For best results in this case, you would probably e.g. a width of about 320 pixels is usually good for displaying on most devices.

   As always, test your Scrollable TextBox design before you publish to the Internet, and remember to make your Scrollable Textboxes a Call Out feature so that your visitors know how to work with the feature!