Mac SEO Blog

Adding text in to a Responsive page design in EverWeb can be done in a number of different ways and also raises some interesting questions along the way. In this post, we’re going to look at some common scenarios and questions that we get on the forums and through our support team about text in a responsive page…

Adding Text to a Responsive Page

You can add text to a responsive page in a number of different ways:

1. Adding a TextBox to the page
2. Adding a TextBox within a Responsive Row widget
3. Adding text within the Styled Text Editor of the FlexBox, Text Section or PayPal widget
4. Adding text in to a widget that uses the Styled Text Editor inside a Responsive Row widget
5. Adding text in to the Blog Post Editor

Some of the most common questions regarding the use of text are:

1. How can I get my text to wrap?
2. How can I get text to wrap with other objects?
3. How can you change text size as you resize the browser window or when using vastly different device sizes?

TextBoxes and Text Wrap

Let’s start by looking at the simplest example: Adding a TextBox to a responsive page. When you add a TextBox, it will, by default, be created as a full width object, taking up the width of the page. Now, you could add a few paragraphs of text in to the TextBox so that you can see the effect of resizing the page on the TextBox. You can resize the page by grabbing a side or corner of the EverWeb app and making it larger or smaller. You will see the text in the TextBox wrap according to the width of the page. If you want, go to the Metrics Inspector tab and add a Left and Right Margin to the TextBox so that it will look better on the page when previewed or published. You can also force a limit to the width of the page by using the ‘Maximum Width’ field. This is useful when you do not want the text in the TextBox to be too spread out across the page. Usually you can leave this value at 0 and use the Left and Right Margin values, but it is worth experimenting with Maximum Width values of e.g. 600, 800 or 1000 to see the effect on the text in the TextBox.

TextBoxes, Responsive Rows and Text Wrap

The above example is the simplest scenario, so let’s now move on to what happens if you add a TextBox in to a Responsive Row widget. Start by adding a Responsive Row widget to the page from the Widgets tab, then click on the TextBox button in the Toolbar to add a TextBox in to the Responsive Row widget. Again, enter a few paragraphs of text in to the TextBox.

In this scenario, the TextBox is treated as a fixed width object within the Responsive Row widget. You can see this by going to the Metrics Inspector where you will see that the ‘Full Width’ checkbox is unchecked. You can also change the height and width of the TextBox as well. Try changing the width if the TextBox to 800, then resize the EverWeb app by grabbing one side, or corner, of the app and making it larger or smaller. You should see that the Full Width TextBox created in the first example wraps, but the TextBox in the Responsive Row does not wrap.

The reason that this happens is that the TextBox in the Responsive Row is a fixed width, so is ‘static’. We can, however change this if we want the text to wrap. Start by making sure the TextBox in the Responsive Row is selected. Next, go to the Metrics Inspector and check the ‘Full Width’ checkbox. The text will now take up the full width of the page. Set a Left and Right margin for the TextBox. Once you have done this, put a value in the ‘Maximum Width’ field e.g. 800. You will see the text reformat when you take these actions. Now resize the page again and this time, you will see the text wrap within the Responsive Row.

This is great way in which you can combine wrapping text with other objects in a Responsive Row widget.

The Styled Text Editor and Text Wrap

EverWeb’s Styled Text Editor appears in three of its built in widgets: The FlexBox, Text Section and PayPal widgets. The first two widgets can be used as full width objects or as fixed width objects within a Responsive Row widget. The PayPal Widget, though, always has to be placed as a fixed width object within a Responsive Row widget.

When using the FlexBox and Text Section widgets, you can customize how text wraps as you have maximum width fields available in both widgets. For the FlexBox widget you have even more control as each embedded object can have a maximum width value as well. For the PayPal Widget, you do not have these options so text will be fixed width only, so will not wrap.

So far we have looked at how to get text wrap in the most simple way with a single TextBox and how to integrate text wrapping in to text that you use within a Responsive Row widget.

In Part Two of this post, we will look at how you can create scaleable text in your web pages and how to integrate other objects such as images in to text.

If you have any questions about this post, please let us know in the Comments Section!