Blog Widgets

These widgets can be used to set up a fully responsive blog in EverWeb. They can also be used to created a responsive mobile version of the blog when the EverWeb default blogging system is used on the full site.
The blog widgets can be set with a maximum width suitable for their purpose and will be responsive down to the width of the smallest iPhone screen. See the Setup page for more info.
If viewing this page on a computer, reduce the browser width to see the responsive action and try out the mobile style navigation.

NOTE: These widgets are for more experienced users to create a mobile blog. They do NOT work with the EverWeb blog.
Click any blog widget icon to see the demo or go to the Blog Entries page for the full list.

Blog Entry List

The entry list has a heading for the entry name, a date field with contrasting color option, a description and a "Read More …" tab link.
The list uses the EverWeb widget API Assets list to add the entries. This allows the entries to be rearranged by dragging them. The latest entry is added and then simply dragged to the top of the list.

Blog Entries Grid

A responsive grid where the number of items per row changes with browser or device width.
Each grid item has an image with overlay info link, an h1 heading and text. The matchHeight script is used to keep the height of the items equal despite varying amounts of text content.
The order of the items is changed by simply dragging them up/down in the list.

Blog Entry

The entry has a field for the heading, date and two text fields. When an image is added, it can be full width or set to a percentage width so that the second paragraph wraps it.
There is an optional "Back" tab link to return visitors to the blog entry list.
The widget has an optional comments section and a footer to allow a fully responsive page design.

Photo Entry

The Blog Photo Entry widget has similar functions to the previous widget and adds the ability to have a thumbnail image which launches a lightbox slideshow.
The thumbnail is wrapped by the second paragraph and has an "expand" icon. When this image is clicked or tapped, the lightbox opens and can display either a single image or a slider with captions.

Mobile Header Widget

This widget creates a full width, responsive header with built in logo, h1 heading and a "hamburger" icon drop down navigation menu. There are options for a gradient background and bottom border separator.
The icon can be configured as an internal link and the heading font size can be reduced when viewed on mobile phones.

Responsive Header

The responsive header is used when creating a fully responsive blog. It has an optional logo/link, h1 heading for the blog name and a built in navigation.
The navigation is inline when viewed on a computer and switches to a icon drop down mobile menu when the page is viewed on a touch device like an iPad or iPhone.

Archive Signup & Search

An established blog needs a way to navigate the archives and all blogs need a subscribers signup form and a search function.
This widget can achieve one, two or all three of these functions using a small tab menu.
The menu can be set to scroll and then fix to the top of the browser window if required.

Social Media & Share Links

The link tabs use the FontAwesome icons and navigate to all the poplar social media sites.
There is an internal link for returning visitors to the entry list and one for sharing the blog post by email.
The links can either scroll with the rest of the page content or be fixed relative to the top or bottom of the browser window and aligned left, center and right.

Subscribe/SignUp Button

This is a standalone CTA style tab which opens a modal window with a signup form with intro, fields for name and email address and a submit button.
The widget uses MailChimp to create the data base and send out the emails. MailChimp is an EverWeb recommended addon which can be used for free up to a certain number of subscribers.

© EverWeb Widgets -