I want to build pages that look better and load faster than Elementor and Avada layouts.
As a small business web designer my customers and clients often show me websites belonging to their competitors and ask me to bulid something similar.
Many of the websites they show me were built using Elementor or Avada. These websites are often peppered with fancy effects that use a lot of code which makes the pages slow to load.
It’s my job to build a website that is as close as possible to what my client wants but using GeneratePress and GenerateBlocks which both output lightweight code that loads fast.
GenerateBlocks Pro to the rescue.
Using the premium version of GeneratePress and the free version of GenerateBlocks I can build websites and web page layouts that look as good as Elementor and Avada layouts.
But both Elementor and Avada come with many fancy effects. So, I too, must build websites that include a sprinkling of fancy effects. The trick, as Goldilocks will tell you, is to have not too much nor too little but just the right amount of fancy effects. So my client’s website looks great and loads fast.
GenerateBlocks Pro Effects.
The premium version of GenerateBlocks has a set of effects that I can apply to my layouts that take it closer to the look of an Elementor or Avada site. But I still keep the light weight fast loading code that GeneratePress and GenerateBlocks are so well known for. See the pro effects documentation page.
The effects I use are…
- Box shadow.
- Text shadow (rarely).
- Transform (move, rotate, skew, scale).
Transitioning between normal and hover state.
If I apply an effect on hover, such as making a button larger, I also add a transition. Transitions make the transition between the normal state and hover state smooth.
I can apply effects to the following blocks:
- Container.
- Headline.
- Buttons.
Elements I can target…
- Self: the currently selected block.
- Inner Container: of the currently selected block.
- Background image of a container block: the background image must be set as a Pseudo Element for effects to apply to it.
- Icon: when editing a Button or Headline block, I can target the icon associated with that block.
Custom Selector.
I can specify a custom CSS selector to target. (See documentation.)
This means I can apply effects to anything inside a block that handles effects. Such as images, highlights, SVG paths.
Opacity.
I can apply an opacity to for instance a background image. (See documentation.)
Filters.
I can also add PhotoShop style filters. (See documentation.)
Device type and hover state.
I can apply effects to different device types:
- All.
- Desktop.
- Tablet.
- Tablet and mobile.
- Mobile.
I can show one effect when the page is viewed on a desktop device and a different effect when the same page is viewed on a mobile device.
State
I can apply one effect to the normal state and one to the hovered state.
Are GenerateBlocks effects enough?
I think they are. I spent several hours looking at the effects on Elementor and Avada websites. I divided the effects in to three types, affordance, eye-candy, and gimmicks.
Affordance.
Affordance helps the site visitor understand how the site works. For instance, if a button changes color or expands on hover it becomes more obvious to the user that this is a button and not a headline with a background color. Affordance is a good thing that helps your site visitors use your site more easily.
Eye-candy.
Eye-candy makes your website more enjoyable to look at and therefore more likely to be read. Applying a box shadow to an image can make that section of the page look more appealing. This encourages visitors to stop and read that section of the page. When used properly and in moderation, eye-candy is a good thing.
Gimmicks.
Gimmick: something that is not serious or of real value that is used to attract people’s attention or interest temporarily.
Cambridge dictionary
I consider many of the effects on Elementor and Avada websites to be gimmicks.
One thing that especially annoys me is when every page element slides in from the side as I scroll down the page. This makes me feel seasick and I’m sure other people find it annoying too. But more importantly, it doesn’t help your readers.
Ticker-tape headlines are another of my pet hates. They type different messages one after the other. The designer is assuming you’ll be so dazzled by the technology that you’ll wait for three or more messages to type themselves out.
In fact, if something moves with out my clicking or scrolling it I find it distracting and usually, annoying too.
My plan.
Having carefully analysed many websites built with Elementor and Avada I can use their good features and ditch the bad features.
I can build websites that look great, are easy and intuitive to use, and load fast.
