EverWeb Widgets

Responsive Grid Blog Widgets [2]

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 …

Card Slider

The slideshow has a full width, fixed height background with card style slides. The slides can be used as a different approach to blog navigation by making the slides links to the various posts.
The slideshow can have up to 48 images and these can be set to lazy load for better page download efficiency.
Swipe on mobile and autoplay with stop at last slide option.

Footer

The footer has icons for launching a signup form and a search field in modal windows and a center text section which has an option to add and update the copyright year.
It has an option to add extra bottom padding if required when on the same page as a social;link widget and/or the scroll down/up function.

Heading

The responsive heading widget can be configured as an h1 through h4 heading to separate items and/or sections. It has many styling options and can be set up as a container with background opacity and a border and/or box shadow.
The heading can also be configured as an anchor. When used in combination with a suitable link widget, it provides smooth scrolling to the various sections of a long page.

Image Links

Most of the professionally designed blogs have lots of image links since they encourage visitors to click through more than text links.
The widget creates three image links for the previous post, entries list and the next post. They can be configured as links to any page - internal or external.

Latest Post Entries Grid

A blog entries grid with the latest post featured by increasing its size in relation to the other items.
Each grid item is an HTML5 article element with an image, heading, optional date/price, text and a CTA style link.
The number of items per row is specified for each device type - computer, tablet landscape, tablet portrait and mobile phone.

Load More

The grid is create using the CSS Grid Layout Module and can acommodate up to 100 items. The number of items per row can be set for each devices type and the grid padding and item spacing can be adjusted. Normally this amount of content would slow the web page download time and make it totally unsuitable for use on mobile devices.
This widget makes the impossible doable by using a show more function along with lazy loading.

Related Posts Links

To encourage visitors to stay on a blog, it's important to have links to related blog posts just above the footer at the bottom of the blog entry page.
Using image links with a caption and a few words of description will not only make visitors more likely to follow but also get the search engines to index the keywords.

Step Scroll Down/Smooth Scroll Up

The pair of scroll arrows stick at the bottom of the browser/device window and can be aligned left, center or right.
Clicking the chevron down icon scrolls the page down in steps of 100vh which is the height fo the browser or device window.
The chevron up tab smooth scrolls to the top from any point on the page.

Horizontal Social Links

The social media links can be turned on/off individually and link to Facebook, Linkedin, Pinterest, Twitter and share by email. The icon color and the icon hover color are shared by all the links but there is a control for setting the background color of each link.
The links can be round or square a stick to the top or bottom if required.

Vertical Social Links

The vertical version of the social links widget stacks the icons vertically at the left edge of the page. It has most of the same styling options and a vertical spacing control.
The links can be square, have an outside border radius or be round. There is an option for an expand animation on hover.

Text - Mark - Blockquote

The widget has an optional heading and text and can be styled with a border and/or a box shadow. It can use a web safe font or a non web safe or Google hosted font with a web safe fallback.
There are options for styling span tags, marks and blockquotes and up to three CTA style links for internal or external pages.

Toolbar

The Blog Toolbar can be placed anywhere on the page and can overlay an item above it - like a hero image - by checking a box and adding transparency to the background.
It has links to the comments page, previous post, entries list, next post and a spam protected "Email Me" link which prevents spammers from harvesting the email address..

© EverWeb Widgets -