EverWeb Widgets

ThemeKit M1 Text Wrap

The first heading and paragraph in the ThemeKit M1 Text Wrap widget are optional.
To have the same image used on desktop browsers displayed on a mobile phone the image width should be no more than 600px which is about half the width required for a content width image viewed on a desktop computer.

ThemeKit M1 Text Wrap widget

Wrap Text

One option is to use a container with two columns so that on wider screens and browsers the image sits side by side with the text content and them spans both columns on screen widths below the break point with the text above or below it.
Another option is to use an image with a maximum width setting and floated to the left so that the text content wraps around it on wider browser/device screen widths.
Below the break point the image is set to have 100% width and the wrap text appears below it.
The text section below is optional and can be hidden on mobile phones …

Extra Text
The ThemeKit M1 Text Wrap widget has a main heading and an option to add a paragraph before the image and wrap text.
The wrap section also has a heading and sub headings can be added using a styled span which has controls for font size and color.
In this example the image file width and its maximum width setting is 400px. This allows the image to occupy about half the width when viewed on an iPad in portrait mode.
The image also has a percentage width control if a responsive width image is required, In this case the maximum width setting can be set to the container width and the slider control used to set the percdentage width.
On devices with a screen width less than the breakpoint the image width is 100%.
Image Margin
The image has controls to adjust the top, right and bottom margins separately to obtain the best result for wrap once the font size and line height have been set in conjunction with the line height control.
The image has controls to add a border to give it better definition.
Link
An optional CTA (call to action) style link can be added at the bottom and it can be aligned left,center or right.
The link can be configured to open an internal or external page and has a new window option.

M1 Widgets

Text

ThemeKit Mobile First Text Widget

When using Mobile Firdt techniques quite often the amount of text can be reduced - especially for mobile phone users. The ThemeKit Mobile First Text widget has two text entry fields - one for essentail text and the other for supporting text that is not required on the mobile version.
The ThemeKit Mobile First Text widget should be used to replace the EverWeb default text box which is not really suitable for responsive page designs.
The text is contained in an HTML5 <article> element and has an optional heading, text, span styles and optional links.
Links
Text links are not user friendly for mobile device users and are less likely to be clicked than separate CTA(Call To Action) style links.
The module has the option for up to three links. These can be configured to open internal or external pages and have anew windwo option.
The links can be "Apple" style with a trailing double chevron or block links with a contrasting background and a border radius control.
Spans
Spans can be inserted for emphasis or as sub headings and there are controls for setting their font size, style and color.

Extra Text
Checking a box opens up a second text area which can be used for non essential text and extra details that may not be absolutely required.
The text is inserted between the first text block and any links that have been inserted.
Break Point
There is a checkbox for hding the text on mobile devices and a breakpoint control for excluding this text from a choice of tablet landscape, tablet portrait, phone landscape and phones in portrait mode.
Demo
If viewing this pagein a desktop browser, reduce the browser width to see the extra text disappear on phones in landscape and portrait mode.

Widgets

Footer Bar

It is really important to show contact info up front and highly visible - especially for mobile dece users.
The ThemeKit M1 Footer Bar widget works in a similar way to a show/hide navigation. It appears at the bottom of the browser/device window on page load disappears on scroll down and reappears on scroll up or when the page is scrolled to the bottom.
The bar provides a very convenient way for mobile device users to get in touch, return to the to of the page or go back to the home page.
Layout
The bar has a three column grid layout with a maximum width setting. Each column is occupied by an SVG icon. These have controls for icon color and hover color.
Column [1] has an internal link which - in this case - links to hte home page.
Column [2] is a smooth scroll to the top function with a control for adjusting the scroll time. It is placed in the center within easy reach of both the visitors thumbs when using a touch device.
Column [3] has the spam protected email function. The email finction should always be on every page of a website and be clearly visible.
Note that the ThemeKit Info Footer widget has a control for adding bottom padding when used with an item like the Footer Bar widget.