Adding Hover & Enter Effects

Effects are a critical feature that make your website feel dynamic, interactive, and professional (when used properly). We plan to have more in-depth tutorials on effects soon.

Here is what you will learn to add: a right slide enter effect and a pic grow hover effect!

There are two types of effects in WebCPR: enter and hover. Enter effects are animations triggered when the stripe or elements come into view. Hover effects are triggered when the user's mouse hovers over an item within the stripe. To get started:

  1. Select an item or section then click item settings
  2. Click effects in the top right corner
  3. Under 'enter effects' select your choice

There are several enter effects you can choose from, such as slides from all directions, grows, shrinks, and others.

The same steps are required for hover effects, except you need to click 'hover effects' in the right-side control panel. Select from options such as pic grow, jump, underline, color change, and many more.

That's it! Now explore and test all of the different effects :)

Remember to use effects strategically. Hover effects should be used as a form of feedback to the user (I imagine jumping or button color-change effect saying "Hey! I click me!). Enter effects should be used for aesthetics.

Excessive or dramatic usage can make your website feel unprofessional or poorly designed. Remember to keep your effects consistent throughout your website! :)