OPEN IN READYMAG
JOIN!

Website Elements Kit

A collection of tried-and-true website elements that help craft an outstanding page with just a little creative tweaking. Headers, pop-ups, hotspots, slideshows and footers are all ready for publication in no time. Just click Open in Readymag at the bottom right corner of the page (and create an account if you don’t have one), then copy the elements you need to your own project, configure and hit Publish. Plus, it’s completely free.

Each template here is accompanied by a few of usability heuristics for interface design and some funny bits for your amusement. Hopefully, both will be useful.

This project was created by Readymag—a tool for designing the web without code.

00

Intro

HEADERS

POP-UPS

SLIDESHOW & HOTSPOTS

FORMS

FOOTERS

Illustration
Animation
Design
About
We love buttons
Contact
Stuff
Lookbook
Shop
Contact

Headers

This is what people see in the first seconds of loading a website, so a header should provide basic information about your site and help users understand what it offers at once. It usually includes a brand logo or dentifier, navigation elements, and some kind of call to action.


A header is usually fixed to the top of the page. To have it appear on all the pages of your Readymag project, switch on the On all pages toggle. A burger menu will be very useful for mobile.

01

Love affairs

Timeline Archive About






2022

Persona grata

A short description about your prominent self

Contact

BOLD FONTS LOVER

Illustrations Typefaces Logos

About Contact

Company name

About us

Shop

Contact

Keep popups pithy
Ok!
Close me

Hey! Here are a few dos and don'ts of using popups.

While closing the pop ups on this page is fun, keep in mind that nonsensical modal windows and those of marketing purposes are an inherently user-hostile act. This sort of engagement basically trains your users to use ad-blockers instead of viewing the web unfiltered in the long run.

Close me
Aye!
Don't overwhelm users with importunate advertisements
I promise

> Ok, got it

Yes, one more pop-up to close

Don’t use popups that take over the screen

one more window to close

(close)

Nice
Just close me please
Ok!

Show popups to help users rather than push them

Close me

And the last one to close!

Ok
Ok

(Will do)

Pop-ups

Pop-up windows can be helpful as well as distracting. A clear exit notice or a sort of discount announcement, when done right, are typically effective. But let’s imagine you run into a slew of popups browsing airline tickets.


Feels pretty annoying, right? Yeah, it is. Intrusive pop-ups and sidebars are pure distraction. Wield your power wisely.

02

Yeah, like this one.

SlideshowS

If you’ve ever wondered how these sorts of show-stopping visuals are created, this section will be of most interest for you. That’s actually the power of Slideshow widgets with some specific settings turned on, grabbing your attention quickly and helping convey information in a genuinely unique way. Just copy this page to your account and explore the nuts and bolts of how to work with Picture and Slideshow widgets.

03

Hotspots

Hotspots are a great choice for crafting footnotes, price tags, notifications, burger menus, or even product galleries. As soon as visitors hover over or click on the Hotspot, a caption appears. Head over to the video tutorial for thorough instructions on how to set them up.

04

Subscribe
Subscribe to R/m newsletters
Subscribe
Subscribe
Subscribe
  
Subscribe
Subscribe
Subscribe
Subscribe

Forms

Concise well-crafted forms can help with gathering on-site user feedback, managing reservations, ordering products, or even collecting secret declarations of love. You can add six different field types to your forms in Readymag: starting with standard text, numbers and emails; and ending in specific checkboxes, dropdowns and files.


Setting up Forms is pretty cut and dry, but our video tutorial with all the necessary instructions is always close at hand. So, choose any form you like to style away and hit any button below to stay updated on Readymag features and editorial spotlights.

05

06

Footers

While footers get less attention than the top of the page, they should still be consistent, meaningful and easily accessible. The most common footer components include: company or product details, contact information, doormat navigation, site map, social media and secondary links, plus privacy and user policies. Add content to the footer and design based on the business and user goals.

hello@title.com

Nothing-to-add footer

2022

Just another footer

Use it a second chance to convince the visitor

2022

SEO-bomb footer

company

about
terms of service
privacy policy
cookie policy
we are hiring

product

product updates

community

help

case studies

design studio

customer stories

portfolio

editorial

presentations

readymag editorials

design almanac

design stories

enso

designing women

projects of the year

special projects

subscribe to

newsletter

youtube

medium

facebook

instagram

twitter

pinterest

are.na

dribbble

2022

Company name

Terms of Service

2022

Explore
OPEN IN READYMAG

Every template here can be added to your own project—just click Open in Readymag at the bottom right corner of the page and copy the elements you want.


If you need inspiration or a quick prompt to start designing, try our set of websites, portfolios, digital editorials and other web projects made by Readymag users.

07

Fin