Ahora que has instalado Divi de Elegant Themes y poco a poco has ido personalizando la web de acuerdo a tus objetivos, es momento de agregar esos pequeños detalles que marcan la diferencia cuando el usuario accede a ella.
El primer paso debe centrarse en la sección de encabezado y menú. Como primera sección de un sitio web, esta será una de las cosas más importantes a las que debe prestar atención.
Y si quieres tener un buen impacto en tus usuarios y diferenciarte de la competencia, debes hacer el máximo esfuerzo por personalizar esta área.
Este estilo es minimalista y elegante, es una línea que aparece al pasar el cursor por debajo de cada título de menú cuando colocamos el cursor, y esta línea se mantendrá cuando hagamos clic.
El código CSS para este efecto es:
#top-menu .current-menu-item a::before,
#top-menu .current_page_item a::before {
content: «»;
position: absolute;
z-index: 2;
left: 0;
right: 0;
}
#top-menu li a:before {
content: «»;
position: absolute;
z-index: -2;
left: 0;
right: 100%;
bottom: 50%;
background: #15bf86; /* color a elección */
height: 3px;
-webkit-transition-property: right;
transition-property: right;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
#top-menu li a:hover {
opacity: 1 !important;
}
#top-menu li a:hover:before {
right: 0;
}
#top-menu li li a:before {
bottom: 10%;
}
