Advanced Hover Settings. Make Your Gridbox Sites Spring to Life

Advanced Hover Settings

For the last year, we have been busy developing unique eCommerce tools for Joomla. If you have followed our releases, you have probably noticed that most of the new functionality has been developed for the Gridbox Store App. It's time to take a short break from expanding the functionality of the Store App and focus on improving the basic features of the Gridbox Editor.

So are you ready to add fresh air to your website designs? Then update your Joomla website builder Gridbox and read the blog post carefully. Because today we want to announce the release of flexible hover options for the Gridbox Editor. Want more details? Scroll down!

Gridbox :Hover Options

Hover effects are CSS hover animations in which elements respond with motion or other transition effects. Hover effects are used to emphasize the importance of a page element and improve site interactivity.



In Gridbox, all available buttons and navigation plugins already have hover effect settings. But today we have prepared something special for you. In Gridbox 2.12.3, you can add a hover effect to absolutely any element on the page. We are talking about much more than page plugins or page structure elements like sections or columns. Hover effects can be assigned to specific options - shadows, margins, paddings, backgrounds, etc.



Just imagine how your sites will be transformed. Actually, you know what? No need to imagine. We have prepared some examples for you! Just take a look at the screenshots below.




Changing Background Overlay Color On Hover

Changing Background Overlay Color - Advanced Hover Settings in Joomla Website Builder Gridbox

Changing Background Images On Hover

Changing Background Image To Image On Hover - Advanced Hover Settings in Joomla Website Builder Gridbox

Changing Background Color On Hover

Changing Background Color On Hover - Advanced Hover Settings in Joomla Website Builder Gridbox

Changing Margin On Hover

Changing Margin On Hover - Advanced Hover Settings in Joomla Website Builder Gridbox

Changing Shadow And Margin On Hover

Changing Shadow And Margin On Hover - Advanced Hover Settings in Joomla Website Builder Gridbox

Changing Padding On Hover

Changing Padding On Hover - Advanced Hover Settings in Joomla Website Builder Gridbox

Changing Border Radius On Hover

Changing Border Radius On Hover - Advanced Hover Settings in Joomla Website Builder Gridbox

Setting Up Hover Effects



You probably can't wait to find out how you can set up such effects on your website? Let's talk about this in more detail. You will find the toggle button “Hover Settings” next to the options in the Design and Layout tabs.

Enabling Option Hover Settings - Advanced Hover Settings in Joomla Website Builder Gridbox

By enabling the option Hover Settings, the following options will become available to you:


  • setting styles for the default state of an element;
  • setting styles on mouse hover;
  • transition settings.



The idea is very simple! First, you need to configure element styles for the default state. Then you set up the styles that will be applied on mouse hover.

Configuring Border Radius On Hover - Advanced Hover Settings in Joomla Website Builder Gridbox

Transition Settings



Transition options allow you to set a smooth transition animation from one state of an element to another.

Configuring Hover Transition - Advanced Hover Settings in Joomla Website Builder Gridbox

The next settings are available to you:

Duration

allows you to set the duration of the animation;

Easing

defines how the values between the start and the end of the transition are calculated. 24 pre-installed easing curves are available to you;

Advanced Easing Settings

allows you to set your own bezier curve.

By setting different duration and easing settings for the elements, you will get an interesting result. So don't be afraid to experiment with transition settings, and you are guaranteed to grab the attention of your customers!

Transition Animations - Advanced Hover Settings in Joomla Website Builder Gridbox

Advanced Shadow Settings

Don't use shadows in your website designs? It's time to change that. Because now, in addition to color and distance values, more advanced shadow settings are at your disposal. Using advanced shadow settings you can draw attention to certain elements to make them stand out. In the advanced settings, you can adjust the following values:

Horizontal Offset

a value that displaces the element's shadow horizontally;

Vertical Offset

a value that displaces the element's shadow vertically;

Blur

a value that blurs the shadow, making the edges of the shadow more blurry or more contrasting;

Spread

a value that expands or contracts the shadow in all directions.

Advanced Shadow Settings - Joomla Website Builder Gridbox

Gridbox shadows will make your site look more realistic and give your pages a unique and personalized touch. Customize and see for yourself!

View Page Button

We know what you missed so much all this time. Quick view page button, right?! Forget about linking the page to the main menu for viewing. Now you have an easy and fast way to view your page on the frontend. All you need to view your edited page is just click the View Page button on the sidebar navigation in the Gridbox editor!

View Page Button - Joomla Website Builder Gridbox

Conclusion

Today we brought you awesome hover options that will provide instant feedback between elements on your site and customers. But don't overdo it when experimenting with new functionality. When adding a hover effect to an element, remember that this should not distract the user from the main action (conversion).



Oh, one more thing! We have taken care of the speed of your sites. So you can be sure, the hover effects CSS styles are generated only after enabling them. Enjoy!

Changelog

2.12.3 — 12.10.2021

  • Hover options
  • View page button in the editor
  • Sync products in cart and store checkout
  • Issue with unpublished slides in Slideset, Carousel, Slideshow
  • Small bugs in the plugin Content Filter

Leave a comment

Share with your friends

Newsroom on your favourite platforms