#Divi css hover effects code#It uses Hover.CSS, which is premium code that you can download from GitHub that adds lots of 2D transitions, background transitions, icons, border transitions, shadow and glow transitions, speech bubbles, and curls. et-fixed-header #top-menu li. This tutorial provides step-by-step instructions and the code you need to add hover effects to the Divi blurb module. As far as ease of editing the color is very easy to change, but if you plan to change the width of the border you’ll find you’ll need to play with the other numbers in the CSS as well.īox-shadow: 0 10px 0 0 #F15A29 !important /*** COLOR AND THICKNESS OF THE LINE ON HOVER ***/ ImplementationĪdd the code below to your child theme’s stylesheet or to Divi’s custom css box under the Theme Options general tab. It’s important to match any type of small design detail like a hover effect to the overall feel of the site. Visually this is not as subtle as the first style, I think picking the right site to use it on would be key. I use this style myself on a Divi child theme I developed called Executive (I’ll link to the demo below so you can see the hover in action on a real site). It also places a chunky box over the active menu link. In this menu style we’ll be placing a large “blocky” line that animates down from the menu section beneath the menu item the mouse is hovering over. Style Two – Thick “boxy” look with line underneath webkit-transition-timing-function: ease-out Height: 3px /*** THICKNESS OF THE LINE ***/ ImplementationĪdd the following code to your child stylesheet OR to Divi theme options > general > custom CSS box:īackground: #15bf86 /*** COLOR OF THE LINE ***/ I think it’s subtlety is what makes it so versatile, it can be used on a real estate site as well as a musician’s site and everything in-between. It’s a pretty popular hover effect that I’ve seen on sites for years. #Divi css hover effects plus#This is a really nice effect that can work well on pretty much any kind of site, plus editing the code for this style to change the color and line width is pretty easy for any level user. It will also set a static line directly beneath the active page link. In this menu style we’ll be adding a line that appears to grow from left to right directly beneath the menu item being hovered over. #Divi css hover effects zip#If you’d prefer to just skip the tutorial, you can download the layout and CSS in one handy little zip file. In the following tutorial, I’ll use the Divi Blurb module to make things a little simpler. In those blocks I used Font Awesome icons as I needed a Drupal icon. If you’ve just installed Divi you don’t need to configure this setting, it should be set to this automatically. This is a hover effect that I used on the front page of. Let’s get started! 3 Beautiful CSS Hover Effects You Can Add to Your Divi Menusįirst off, for all the styles we’re going to be using the default settings for header format. It’s not absolutely necessary, but it’s a nice bit of helpful UX. This is a common visual marker to include on websites to help remind the user where they are on the site. For instance, if the user is on the homepage, then the home link in the menu will have some sort of small design treatment applied. Los hover effect hacen que un sitio web sea más interactivo. Not only will we be adding a nice hover effect but there will also be some style applied to the link of the active page. Divi Hover effect aparece cuando un usuario coloca el cursor del ordenador sobre un elemento sin activarlo. These will add just the right amount of “pop” to your Divi navigation. Hover effects should be subtle, we want visual interest but that’s not the most important part of the site, your content is. Your menu is one of the first things visitors see when they go to your website, so you want it to have some style right? Of course you do! That’s why in today’s post I’m going to share three ways to add some nice hover effects to your menu with custom CSS.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |