Cómo agregar una etiqueta de esquina "Nuevo" o "Destacado" a un elemento de menú en su encabezado Divi personalizado

Al crear el encabezado de su sitio web, prestar especial atención al comportamiento de sus visitantes puede ayudar a aumentar las tasas de clics. Su encabezado no solo debe verse bien, sino que también debe ayudar a guiar a los visitantes a las páginas más importantes de su sitio web. Una técnica de uso frecuente es agregar una llamada a la acción dentro de su encabezado global, pero esa no es la única opción que existe. También puede optar por una etiqueta de esquina en los elementos del menú que desea destacar. En este tutorial, le mostraremos cómo agregar una etiqueta "destacado" o "nuevo" a elementos de menú específicos. Estas etiquetas de esquina ayudarán a enfatizar los elementos del menú en la lista, lo que aumenta el cambio de que sus visitantes sientan curiosidad y hagan clic en ellos. ¡También podrá descargar la plantilla de encabezado global!

Hagámoslo.

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al concepto del tutorial en diferentes tamaños de pantalla.

Descargue la plantilla de encabezado global GRATIS

Para tener en sus manos la plantilla de encabezado global gratuita, primero deberá descargarla usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante el formulario a continuación. ¡Como nuevo suscriptor, recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.

Descarga los archivos

Descárgalo gratis

Únase al boletín de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.

DESCARGAR

Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!

1. Agregar etiquetas a los elementos del menú de WordPress

Ir a los menús en Apariencia

La primera parte de este tutorial está dedicada a configurar las etiquetas dentro de su menú de WordPress. Para hacerlo, vaya a su panel de WordPress> Menús> Abra el menú principal que está usando o cree uno nuevo.

Agregar etiqueta al elemento destacado del menú

A continuación, agregaremos una etiqueta destacada a un elemento del menú de nuestra elección colocando las etiquetas HTML de la etiqueta delante del elemento del menú.

• <label class="menu-label featured-label">Featured</label>

  Servicios

Agregar etiqueta a un nuevo elemento de menú

Haremos lo mismo con otro elemento de menú de nuestra elección y cambiaremos la clase CSS dentro de las etiquetas junto con la copia de la etiqueta.

• <label class="menu-label new-label">New</label>

  Cursos gratuitos

2. Vaya a Divi Theme Builder

Vaya a Divi Theme Builder y agregue un encabezado global

Ahora que se han configurado las etiquetas, es hora de cambiar a Divi. Navegue hasta Divi Theme Builder de su sitio web y haga clic en "Agregar encabezado global".

Empiece a construir desde cero

Luego, seleccione "Crear encabezado global" para ser redirigido al editor de plantillas.

3. Crear encabezado global

Configuración de la sección

Color de fondo

Una vez dentro del editor de plantillas, verá una sección. Abra esa sección y agregue un color de fondo. El diseño de encabezado que crearemos va bien con el Tutor Layout Pack, pero siéntase libre de crear cualquier diseño de encabezado que desee, siempre que incluya el Módulo de código (más adelante) en él.

• Color de fondo: # 2a3749

Espaciado

Vaya a la pestaña de diseño de la sección y elimine todo el relleno superior e inferior predeterminado en la configuración de espaciado.

• Relleno superior: 0px
• Acolchado inferior: 0px

Visibilidad

Debido a la superposición que agregaremos a nuestra fila (como puede observar en la vista previa), necesitaremos configurar los desbordamientos de la sección como visibles.

• Desbordamiento horizontal: visible
• Desbordamiento vertical: visible

Agregar nueva fila

Estructura de la columna

Continúe agregando una nueva fila a la sección usando la siguiente estructura de columnas:

Color de fondo

Sin agregar ningún módulo todavía, abra la configuración de fila y aplique un color de fondo blanco.

• Color de fondo: #FFFFFF

Dimensionamiento

Vaya a la pestaña de diseño y modifique la configuración de tamaño en consecuencia:

• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1

Espaciado

También aplicaremos algunos valores de relleno personalizados a la configuración de espaciado.

• Acolchado superior: 25px
• Acolchado inferior: 25px
• Relleno izquierdo: 50px
• Relleno derecho: 50px

Frontera

Junto con algunas esquinas redondeadas.

• Todas las esquinas: 6px

Sombra de la caja

Y una sutil sombra de caja.

• Posición vertical de la sombra del cuadro: 16px
• Color de sombra: rgba (0,0,0,0.07)

Transformar Traducir

A continuación, reposicionaremos la fila usando la configuración de conversión de transformación en la pestaña de diseño.

• Transformar Traducir a la derecha: 50px

Desbordes

Para asegurarnos de que nuestros menús desplegables aparezcan en tamaños de pantalla más pequeños, completaremos la configuración de la fila configurando los desbordamientos en visibles.

• Desbordamiento horizontal: visible
• Desbordamiento vertical: visible

Agregar módulo de menú a la columna

Seleccione el menú

Es hora de agregar el módulo de menú. Seleccione el menú que ha editado en la primera parte de este tutorial.

Subir logotipo

Sube un logo a continuación.

Configuración del texto del menú

Luego, pase a la pestaña de diseño y cambie la configuración del texto del menú de la siguiente manera:

• Fuente del menú: PT Sans
• Color del texto del menú: # 000000
• Tamaño del texto del menú: 16px
• Alineación de texto: derecha

Configuración del menú desplegable

Modifique también el color de la línea del menú desplegable.

• Color de la línea del menú desplegable: # 007aff

Iconos

Continúe cambiando el color del icono del menú de hamburguesas en la configuración de los iconos.

• Color del icono del menú de hamburguesas: # 007aff

Dimensionamiento

Y complete la configuración del módulo asignando un ancho máximo de logotipo a la configuración de tamaño.

• Ancho máximo del logotipo: 40%

Agregar módulo de código a la columna

Una vez que haya completado la apariencia general de su módulo de menú, continúe agregando un módulo de código justo debajo.

Agregar código CSS

El siguiente código CSS nos ayudará a diseñar las etiquetas del menú individualmente y a crear un diseño receptivo:

<style>
 
.menu-label {
text-transform: uppercase;
color: #fff;
letter-spacing: 1px;   
border-radius: 5px;    
font-size: 10px;  
padding: 5px 10px;  
}  
  
.featured-label {
background-color: #F9654D;
}
.new-label {
background-color: #007AFF;
}
 
.et_pb_menu .et_pb_menu__menu, 
.et_pb_menu .et_pb_menu__menu>nav, 
.et_pb_menu--style-left_aligned.et_pb_text_align_right .et_pb_menu__menu>nav>ul {
width: 100% !important;
}

.et_pb_menu .et_pb_menu__menu>nav>ul>li
{
padding-left: 15px !important;
padding-right: 15px !important;
}

@media all and (min-width: 980px) {
.menu-label {  
position: absolute;
top: -10px;  
padding: 8px 15px;
}

}
@media all and (max-width: 980px) {  
.menu-label {
position: relative;
float: right;
font-size: 12px;  
padding: 5px 20px;   
}
}
  
</style>

4. Guarde todos los cambios del Creador de temas y obtenga una vista previa del resultado

Una vez que haya completado el diseño del encabezado, asegúrese de guardar todos los cambios de Divi Theme Builder antes de ver el resultado en su sitio web.

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.

Pensamientos finales

En esta publicación, le mostramos cómo resaltar elementos de menú específicos dentro de su encabezado global creado por Divi. Más específicamente, hemos incluido etiquetas de esquina en nuestro menú de WordPress, que se muestran dentro de un módulo de menú. Esta es una excelente manera de resaltar diferentes elementos del menú dentro de su menú sin crear un viaje de navegación abrumador. ¡También pudo descargar el archivo JSON gratis! Si tiene alguna pregunta o sugerencia, no dude en dejar un comentario en la sección de comentarios a continuación.

Si está ansioso por aprender más sobre Divi y obtener más obsequios de Divi, asegúrese de suscribirse a nuestro boletín por correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.