EverWeb Widgets

Responsive Grid Blog Widgets [1]

Create a responsive blog using the new CSS Grid Layout Module for a future proof design, faster download and great features.
Click any widget icon to see the demo …

Comments

A successful blog requires an engaged audience. Interaction with blog subscribers encourages them to feel as though they belong to a group and are more likely to mention the blog to others.
Disqus is a very well know comments engine and, best of all - it's free. It is really easy to set up and, using this widget, only requires the Disqus "shortname" to be entered.

Flyout Image Links

These image links flyout on click or tap from the left side of the page. They are good for quick links to related posts - or anthing else for that matter!
The number of images per row can be set for each device type - computer, tablet landscape, tablet portrait and mobile phone.

Hero Switch Image

A full width fixed height "hero" image looks great when viewed on computers but not so much on touch devices like the iPad and iPhone.
This one overcomes the poor performance and image visibility by switching from fixed height on computers to responsive height on mobile devices and then viewport height on mobile phones in landscape mode.

Lightbox Image/Slider

A simple lightbox slideshow can be the best way to display either one larger image or a whole bunch of them. Only the thumbnail image needs to download with the rest of the page content. The large images don't need to download until the visitor selects them.
The container has two grid columns - one with the image and the other with text.

Round Wrap Entries List

This blog entries grid displays the latest post at full width and the rest in two columns when viewed on devices with a browser/screen width above the break point. On narrower screens, they all become full width.
Each item has a heading, optional date, a round image to the left, wrap text and a link with the option to show a title on hover.

Header/Navigation

The navigation for a blog doesn't have to have any more than links to the home page, the entries list and the archive(s).
The optional subscriber signup and search functions open in a modal window are pretty much essential for inserting on every blog page.

Image Overlay Entries List

The EverWeb Widgets Blog uses the RGL Overlay Grid to display the entries in an attempt to move away from these boring lists with thumbnails and Wordpress style grids.
The entries are added using the EverWeb Widget API Assets list so their order can easily be rearranged by grabbing an entry and dragging it up or down the list.

Photo Post

The RGL Blog Photo Post widget has an image with alt text and an optional overlay caption, a heading, text, optional date field and on open link. The images are lazy loading and inserted in two sizes.
Lots of these can be stacked on a page since only the first one or two will be in the viewport when the page is loaded and the rest will download as the visitor scrolls the page.

Quick Links

The quick links bar can be used anywhere links to other pages are required. CTA style links are used nowadays in place of text links and are far more likely to be clicked.
The bar can hold any amount of links. These have several styling options and can be configured to open internal or external pages and files.

Sticky Sidebar

A main article with a heading image and text and a sidebar. The sidebar has an optional h1 heading with scroll indicators and ad blocks which contain an image, heading text and CTA style link.
The sidebar can have an auto height so that it shows all the content or a fixed height with the overflow set to scroll to reveal the hidden content.

Text Wrap

The RGL Blog Text Wrap widget has an h1 heading, lead in paragraph, an image, an h2 heading and the wrapped text paragraph.
The image is set at a fixed width at browser/device widths above the break point. Below the break it becomes full width. The break point can be set for tablets in landscape or portrait and phones in landscape or portrait mode.

Blockquotes

Create stylish blockquotes. Three Google hosted fonts - all with websafe fallbacks - can be selected for the quotes, the text and the "signature". Each has controls for setting the font size and color. The quotes have a spacing and vertical position control.
The "signature" has controls for font style and letter spacing and can be aligned left, center or right.

© EverWeb Widgets -