Cómo agregar una etiqueta de esquina «Nueva» o «Destacada» 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 utilizada con frecuencia 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 las esquinas 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. ¡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 poner sus manos en 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 nuestro boletín utilizando 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 será «resuscrito» ni recibirá correos electrónicos adicionales.

Descárgalo gratis

Únase al boletín informativo 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 muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro 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.

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

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

Ir a Menús en Apariencia

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

Agregar etiqueta al elemento del menú destacado

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

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

    Servicios

Agregar etiqueta a un nuevo elemento del menú

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

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

    Cursos Gratis

2. Ve 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».

Comience a construir desde cero

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

3. Crear encabezado global

Ajustes de sección

Color de fondo

Una vez dentro del editor de plantillas, verás 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éntete libre de crear cualquier diseño de encabezado que desees, siempre que incluyas el Módulo de código (más adelante) en él.

  • Color de fondo: #2a3749

Espaciado

Pase 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
  • Relleno inferior: 0px

Visibilidad

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

  • Desbordamiento horizontal: visible
  • Desbordamiento vertical: visible

Agregar nueva fila

Estructura de la columna

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

Color de fondo

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

  • Color de fondo: #FFFFFF

Dimensionamiento

Pase 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 del canalón: 1

Espaciado

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

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

Borde

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, cambiaremos la posición de la fila usando la configuración de traducción de transformación en la pestaña de diseño.

  • Transformar Traducir a la derecha: 50px

desbordamientos

Para asegurarnos de que nuestros menús desplegables aparezcan en tamaños de pantalla más pequeños, completaremos la configuración de fila configurando los desbordamientos para que sean 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.

Cargar logotipo

Cargue un logotipo 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 ícono del menú de hamburguesas en la configuración de los íconos.

  • 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 de él.

Agregar código CSS

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

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<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 generador 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 de menú dentro de su menú sin crear un viaje de navegación abrumador. ¡También pudo descargar el archivo JSON de forma gratuita! 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 regalos de Divi, asegúrese de suscribirse  a nuestro boletín de correo electrónico  y  al canal de YouTube  para que siempre sea una de las primeras personas en conocer y obtener los beneficios de este contenido gratuito.