The widget is made full width, responsive by checking the "Full Width" box in the Metrics inspector and setting the maximum width. It can also be used on non responsive pages if required.
The maximum width setting for a site that is intended for viewing on mobile phones only should be set to 736px.
There is an optional h1 heading, a text block and an optional footer to create a fully responsive page when used on its own or beneath a full width, fixed height item such as the Hero Banner widget.
There is a checkbox to show the heading and it can be adjusted for font size and text align.
Both the heading and the text content can use a web safe font or a non websafe or Google hosted font with a web safe fallback.
The text content has controls for adjusting the font size and line height. Text is entered as HTML so line breaks are created using <br>.
Special characters are also created using HTML such as & for an ampersand and © for the © symbol. See the Info section for more about text.
The paragraph headings in this example are created using a <span> tag in much the same way as the EverWeb app does in text content …
Text links can be created as described in the Info section and the controls in the widget settings are for link color, background and opacity, text decoration top/bottom and left/right padding and border radius.
Adding padding to text hyperlinks is absolutely essential on mobile websites to increase the target area for fingertips rather than a cursor!
Links should be at least 28px in height and 32px wide for fingertips or 40px for thumbs.
The optional footer is fixed height with one line for the copyright info. As mentioned previously, the © symbol is created using ©
The font color, size and background color can be adjusted. There is a checkbox for adding a script to auto update the copyright year and another for adding a smooth scroll to the top chevron.