Lightbox Text Link
Read about setting up the Lightbox Text widgets set up below and follow the link to see the examples.
Lightbox Text WidgetsEverWeb Widgets
Lightbox Text Link
Lightbox Text Link Widgets
The widgets use a grid layout which allows the relative widths of the image and text block to be adjusted by using the grid column and span properties. On mobile deices, each item spans the width and its vertical position is determined by the row number.
Images
Having the image occupy a portion of the width allows the use of a smaller image file and therefore faster page download. An image with a file width of 600px is about right for most applications.
The image has a box for entering the alt text for the search engines and controls for border width and color.
There is a control for vertical align which has options for start, center and end.
Text
The text section by default is vertically centered and has an h1 heading, a paragraph and a CTA style link. It can use a web safe font or a non websafe or Google hosted font with a web safe fallback.
There is a control for adjusting the vertical spacing of the items and another for vertical align which has options for start, center and end.
Link
The link can be configured to open an internal or external page and in a new window if required. It has controls for font size, color, hover color, background color and border radius.
Container
The container has a maximum width setting and controls for setting the background color and its opacity, padding and adding a border and/or a box shadow. When a box shadow is added, the percentage width can be reduced to accommodate it.
There is a control for setting the grid gap when the item is viewed on a mobile phone. This adjusts the vertical spacing between the image and the tet block.
Wrapper
The overall wrapper has controls for setting the background color and its opacity and for setting the vertical spacing from the items above and below it.
Column & Row Setup
The widget has a control for setting the number of columns. There are controls for entering the start column and span of each item and for entering its row number on mobile devices.
As an example, if the image is to occupy 40% of the width and the text 60%, the number of columns is set at 5. The image is in row 1 and spans 2 columns and the text is in row 3 and spans 3 columns.
To switch the positions, the text would be in column 1 and span 3 columns and the image in column 4 and span 2 columns.
Mobile Position
If the image is to appear above the text on mobile devices, it is placed in row 1 and the text in row 2. Switch places by switching the row numbers.
The change takes place at the break point which has options for 799px, 739px and 599px which translate to tablet in portrait mode. mobile phone in landscape mode and phone in portrait mode.