EverWeb Custom Class

EverWeb Custom Class

#31

Using the EverWeb Custom Class feature

Search Blog Entries Grid

Search Grid

#20

Scroll through entries grid or enter keywords to search …

How To Blog

Blog Design & Setup

#1

Create a better blog using responsive grid layout widgets …

Create & Upload Sitemap

#30

Improve SEO - create and upload a sitemap.xml

Responsive Toolbars

Toolbars

#29

Using toolbars to insert essential items and clean up the page design …

Website Video

Video

#28

How to insert MP4, Video and YouTube video for professional results …

Headers & Footers

Headers & Footers

#27

Multi function responsive headers and footers …

Overlapping Elements

Overlapping Elements

#26

Create free flowing designs that draw attention to the content …

Stack Widgets

Stack Widgets

#25

A better alternative to the responsive row …

Hero Images

Hero Images

#24

How to successfully insert a hero image …

Web Page Design

Web Page Design

#23

How to create better designs using whitespace and hidden content …

Blog  Subscriber Signup

Blog Signup

#22

How to encourage blog subscribers and grow your mailing list …

Image Rotate

Image Rotate

#21

How to rotate a responsive image …

Mark & Blockquote

Blog Text

#19

How to uses marks and create block quotes …

Trapezoid Image

Trapezoid Image

#18

Using CSS "clip-path" to shape an image …

Clipped Hero Image

Clipped Hero Image

#17

Create a diagonal layout effect with clipped images …

Blog Basics

Blog Basics

#16

Header, navigation, heading/spacer and a footer for blog entries …

Show More

Show More

#15

Blog entries or image link grid with "Show More" function …

Social Links

Social Links

#14

Horizontal & Vertical , round or square, scroll or sticky …

Blog Latest Post Grid

Blog Latest Post Grid

#13

Feature the latest post with a larger entry …

Blog Post List

Round Wrapping

#12

Create a compact post list with text wrap around a round image …

Blog Comments

Blog Comments

#11

Engage your blog subscribers with a comments section …

Blog Hero Image

Hero Switch Image

#10

Start off a blog post with an eye catching image …

Blog Entries Slider

Card Slider

#9

Blog entry link cards slide over a background image …

Related Posts

Related Posts

#8

Overlay image grid for internal related post links …

Blog Photos

Blog Photos

#7

Lazy loading images will download photo rich blog pages fast …

Flyout Menu

Flyout Menu

#6

These flyout image links have an overlay with heading, date and text …

sticky sidebar

Sticky Sidebar

#5

Link, advertise and monetise with a scrolling sidebar …

lightbox

Blog Images

#4

Use a lightbox to display images and increase page download speed …

Images & Download Speed

Images & Download Speed

#3

If it doesn't load fast we'll move on …

Blog Essentials

Blog Essentials

#2

Readable text and easy to use links are the basis of a good blog …

Blog Entries List

The RGL Blog Overlay widget is used here 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.
The first item has a larger image than the rest when viewed on computers and can be used for the latest post or a link to a pinned item.
Grid
The widget uses the CSS Grid Layout Module to create the grid so the item spacing can easily be adjusted as well as the top/bottom and left/right padding.
Images
Apart from the first pinned one, all the images used in this example were cropped to 480px x 360px which is plenty big enough. The images can have a border and/or a box shadow if required.
Lazy Load
The images are lazy loaded so the grid can handle a large number of them without making mobile device users wait for ages for the page to download.
Overlay
The images are inserted in HTML5 <figure> elements. This has an overlay with adjustable color and opacity and a vertically centered text section in an HTML5 <article> element. Thie article has a heading, optional date field, text and a link tab.
There is an option for adding a "label" at the top left. Both the label and the date can have contrasting colors.
Links
To make life easy, the link text is enter only once using a CSS "::after" pseudo element. Any text can be entered although the above example uses the internationally recognised symbol for "Read More …" which is three periods enclosed in square brackets.

© EverWeb Widgets -