Mac SEO Blog

As we start the new year, for many of us it is a time to look towards new challenges or to update and refresh things in our lives. When it comes to your website, the holiday period can also be a time to inspire you to update your own site for the new year. If you have not kept up with the updates to EverWeb in 2024, check out our EverWeb’s 11th Anniversary post and also our post on the recently released EverWeb version 4.3!

One of the new features in EverWeb may be something that you would want to add to your own site – scrollable Textboxes! This is a great new feature that can help you save space on your page, giving your page a cleaner appearance rather than been cluttered with text.

Before You Begin…

You can add Scrollable TextBoxes to either fixed width or responsive pages in your site. The only other requirement is that you are using EverWeb 4.3, or higher, for macOS or Microsoft Windows.

Creating a Scrollable TextBox For A Fixed Width Page

First let’s look at adding a TextBox to a fixed width page, typically this will use the Centered Layout page layout type. You can find out what type of Page Layout you are currently using in the Page Layout section of the Page Settings tab in the Inspector Window.

Add a TextBox to your page using the TextBox button in the Toolbar. Next, either type in the text that you want in to the TextBox, or copy and paste the text you want in from another source.

To make the Textbox scrollable, you will need to size the TextBox so that some of the text within it is no longer visible. By default, when you add text to a TextBox it will always resize itself so that all text is displayed. Usually this is what we would want, but in this case we do not want this as we want to hide some of the text so our visitor has to scroll the TextBox.

To achieve this, first make sure that the TextBox is selected. You can see if it is already selected if there are grab handles displayed around its edges. If not, simply click once inside the TextBox.

With the TextBox selected, go to the Inspector Window and click on the Text Inspector icon. At the bottom of the Text inspector, you will see the Export Options section. In this section check the option for Scrollable Text.

After setting the Scrollable Text option, go back to the TextBox and take one of the grab handles and resize the Textbox so that some of its text is no longer visible. That is all you have to do! Once you have resized the TextBox, you can try out the scaling by previewing the page. When using Preview, place the mouse cursor over the TextBox and use the mouse to do the scrolling action.

Adding a Scrollable TextBox to a Responsive Page

The basics of creating a scrollable TextBox are the same for both fixed width and responsive page layouts, but with a responsive page layout there are a couple of things that you may need to bear in mind.

If you add a Textbox to your page as a full width object, you can resize the height of the TextBox using the grab handle at the top center or bottom center of the TextBox. If you want to reduce the width of the TextBox, go to the Metrics Inspector and use the Maximum Width and Margin settings to constrain the TextBox width.

Alternatively, you may have placed the TextBox within a Responsive Row widget. In this case, you may want the TextBox to be of a fixed width. In this case, you will have to make sure that the Full Width option is not checked. This will allow you to use the Width field instead so that you can fix the width of the TextBox within the Responsive Row. For best results in this case, you would probably fix the width of the TextBox to about 320 pixels so that the TextBox will be able to display on any mobile device.

Test out your Scrollable TextBox page using Preview. If you are using Fixed Width TextBoxes within a Responsive Row widget, you might want to use EverWeb’s new Preview QR Code Mobile feature to make sure that the fixed width, scrollable TextBox looks correct on a mobile device.

Scrollable TextBoxes are super easy to create and their versatility can help you save space on your site’s pages and make it easier for visitors to scroll text on mobile devices.