On this page I’ve gathered most of the styles and effects I like to use when building premium websites.
Several of these effects need the pro version of GenerateBlocks.
I don’t try compete with Elementor or Avada. I take the best design principles and techniques wherever I find them. Then I use GeneratePress and GenerateBlocks to implement them. Where necessary I use plugins such as the Lightweight Accordion plugin By Andy Feliciotti and Lightbox for Gallery & Image Block By Johannes Kinast. Foe sliders I use Smart Slider 3 by Nextend.
I’m aiming for subtle additions that make the websites I build more interactive and enjoyable to use. But, I don’t want to annoy or distract the reader with things that scroll, slide in, or move without being hovered over or clicked. Browse through the examples below and see if you think I’ve achieved my goal.
Hover over the images, buttons and icons to see what happens.
These effects are set to work on desktop screens only.
Start by browsing the GeneratePress site library and the GenerateBlocks Pro patterns.
Generate Press Site Library
GenerateBlocks Pro Patterns
Once I’ve chosen a starter site and seen the available Pro Patterns, I can start thinking about adding a few embellishments. But, I remind myself that good design is clean and simple, so I don’t overdo it.
What is affordance?
Affordance is a use or purpose that a thing can have, that people notice as part of the way they see or experience it: In design, perceived affordance is important — that is, our implicit understanding of how to interact with an object.
These buttons grow on hover.
This makes it even more obvious that you can click them.
Not on mobile!
I set some of the examples on this page to display on desktops and laptops only. Some of these effects will work on mobile, but because you don’t use a mouse on small screens, hover effects are not as noticeable.
Grow on hover
The boxes below grow when you hover over them. This gives you a hint that you can click them. That is one instance of affordance. These are demo boxes so I’ve disabled the links, but you get the idea.
Learn
Boxes using effects
Basic
Nam dictum felis sed diam volutpat ultricies. Ut ultricies, dolor eu fermentum molestie, tortor libero pulvinar ipsum, nec congue leo elit at eros.
Intermediate
Nam dictum felis sed diam volutpat ultricies. Ut ultricies, dolor eu fermentum molestie, tortor libero pulvinar ipsum, nec congue leo elit at eros.
Advanced
Nam dictum felis sed diam volutpat ultricies. Ut ultricies, dolor eu fermentum molestie, tortor libero pulvinar ipsum, nec congue leo elit at eros.
Parking
Nam dictum felis sed diam volutpat ultricies. Ut ultricies, dolor eu fermentum molestie, tortor libero pulvinar ipsum, nec congue leo elit at eros.
Motorbike
Nam dictum felis sed diam volutpat ultricies. Ut ultricies, dolor eu fermentum molestie, tortor libero pulvinar ipsum, nec congue leo elit at eros.
Truck driving
Nam dictum felis sed diam volutpat ultricies. Ut ultricies, dolor eu fermentum molestie, tortor libero pulvinar ipsum, nec congue leo elit at eros.
The next three boxes show affordance.
- The box gains a shadow on hover.
- The box moves on hover.
- The background image grows on hover.
Different layouts for different category archive pages.
Click the buttons below to view the blog and category archive pages, note the different designs for each archive page.
Subtle hover effects.
Good web design is subtle. You don’t need garish distracting effects.
Sepia on hover.
This image changes color slightly on hover. I set the effect to only happen on desktop devices because mobiles don’t have a mouse and users don’t hover over images before clicking.
Swap image on hover.
This effect is great for showing before and after photos of work you’ve done. For instance, a painter could show a house before and after it was painted.
Box Shadow.
This photo does not change on hover. However, it has rounded corners and a subtle box shadow. These are small details but do make the page just a bit more interesting to look at.
Animated icons
Item one
Adding movement and color to these list items makes the whole layout look more interesting and appealing. And lucky for us, it’s easy. Watch Video.
Item two
Adding movement and color to these list items makes the whole layout look more interesting and appealing. And lucky for us, it’s easy. Watch Video.
Item three
Adding movement and color to these list items makes the whole layout look more interesting and appealing. And lucky for us, it’s easy. Watch Video.
Image & icons
Interactivity
Aenean bibendum pulvinar felis sed pretium. Fusce sodales ante sit amet mi imperdiet luctus. Aliquam sed velit dui. Nunc vitae justo non nunc cursus dictum.
Quisque pretium cursus ipsum, non consectetur metus bibendum et. Sed enim leo, placerat at suscipit eu, ultricies id nisi. Aenean vulputate eros a egestas lacinia.
Camping
Bonfire
Trips
Grow on Hover
Donec finibus volutpat enim sed ultricies. Ut in justo sed nulla ornare consequat at non ante.
More buttons.
The next blocks are…
Accordion, gas gage, and reveal on hover.
- The headline block with an icon.
- An accordion, this section uses the Lightweight Accordion plugin By Andy Feliciotti.
- A gas gage, I copied this straight from one of the GeneratePress site library themes.
- And text that is revealed on hover. I used the transform effect to do this on desktop only.
Icon Moves on Hover
with a sub-heading
This is the first item
This is the lightweight accordion, I set the first item to be open and changed the headline background color. You build this using a lightweight accordion block and you can use the block editor to add content.
This is the second item
The content goes here.
This is the third item
The content goes here.
This is the fourth item
The content goes here.
Gas Gage
Although this gas gage is not animated it still gives the user the information they need. And you don’t need an extra plugin to make it work.
Professionalism 50%
Experience 66%
Always on time 75%
Great support 100%
Reveal on hover.
This paragraph is revealed on hover. So your layout is less cluttered but the information is there for people who need it.
Background gradient and button styles.
The gradient makes the text easier to read. There are many button styles and effects, underline on hover makes it obvious you can click the link.
Background gradient.
This text is inside an inner container. I set the inner container to vertically align bottom. I used a gradient background to make the text easier to read while keeping the top of the photo clear.
Button Styles.
These look like text links but they’re actually buttons. You can style buttons in many ways, underlining on hover is just one option.
