El menú secundario de Divi puede ser mucho más que un lugar donde enumeras las redes sociales y alojas una barra de búsqueda . Es un lugar fantástico para involucrar a su audiencia y llamarlos a la acción de alguna manera. Muchos de nuestros paquetes de encabezado/pie de página gratuitos hacen un gran uso del menú secundario. En este tutorial, vamos a pasar por el proceso de agregar un Llamado a la acción a la barra de menú secundaria de su sitio web Divi .
Escritorio
Móvil
Para este artículo, vamos a utilizar el paquete de diseño de CV creativo y el encabezado gratuito . Nuestro primer paso es ir a la publicación del encabezado y descargar el archivo .json .
Luego, dirígete a tu tablero de WordPress. Luego navegue a Divi – Theme Builder y haga clic en el ícono de flechas hacia arriba y hacia abajo para abrir las opciones de portabilidad de Divi.
Dentro de la ventana emergente, haga clic en la pestaña Importar , busque el archivo .json para el encabezado que descargó y haga clic en Importar plantillas de Divi Theme Builder .
Una vez hecho esto, puede hacer clic en el encabezado global para ingresar al Divi Builder. Si se le solicita, seleccione CV creativo en el menú desplegable.
Cuando ingrese al Divi Builder para su encabezado, asegúrese de identificar qué barra de menú es la principal y cuál es la secundaria. Identificamos el principal como la barra de menú con la barra de navegación principal. Así que vamos a agregar nuestro Llamado a la acción en la barra superior.
Agregar una nueva fila
Debido al diseño del encabezado que estamos usando, queremos que el CTA tenga tanto espacio como sea posible sin interrumpir el diseño. Elegimos el encabezado de este paquete de diseño porque usa la columna central grande con columnas laterales más pequeñas. Esto le dará prominencia en el sitio, sin importar en qué dispositivo esté el usuario. Puede ver cuál es a continuación, si está utilizando un encabezado diferente al nuestro.
Ajustar la visibilidad de los módulos existentes
Si usa el mismo diseño de encabezado que este tutorial, querrá ir a las opciones de Fila para todas las filas y asegurarse de que cada columna esté visible individualmente en todos los dispositivos. Esto se encuentra en Configuración de fila – Configuración de columna – Avanzado – Visibilidad .
Asegúrese de desmarcar cualquier dispositivo en el que desee ver el contenido de la columna.
Agregue el módulo de llamada a la acción
A continuación, haremos clic en el icono negro + para agregar un nuevo módulo a la nueva fila. Estamos usando el módulo Llamado a la acción en Divi, y puedes encontrarlo cerca de la parte superior del menú desplegable Insertar módulo .
Edite el módulo de llamada a la acción
Si observa en la captura de pantalla a continuación, el tamaño y el estilo predeterminados del módulo Llamado a la acción no son adecuados para el menú de encabezado. O la mayoría de los sitios web, directamente de la caja. Así que vamos a diseñarlo apropiadamente para que no parezca fuera de lugar.
Cambiar el color de fondo
En primer lugar, ajustemos el fondo para que sea transparente , de modo que no importa dónde se encuentre el CTA, coincida con el diseño que lo rodea. Encontrará esta opción en el área Fondo en la pestaña Contenido del módulo Llamado a la acción. La opción para convertir el fondo en transparente es el círculo en la paleta con una barra roja sobre los cuadrados cuadriculados .
Ajustar el contenido de la CTA
El módulo Llamado a la acción es versátil, ya que puede usar este único módulo para tener un encabezado, un cuerpo de texto y un botón al mismo tiempo. Además, la verdadera utilidad es que puedes usar el módulo CTA para enlazar a dos URL diferentes dependiendo de cómo lo uses (uno para el botón y otro para el cuerpo/título).
Sin embargo, debido a que se puede incluir tanta información, el módulo puede ser bastante grande. Así que vamos a mantener las cosas bastante sucintas para nuestro CTA, editando el título, el cuerpo y el texto del botón para que encajen más fácilmente en la barra de menú secundaria del encabezado. Estas opciones de edición se encuentran en la configuración de la llamada a la acción en la pestaña Contenido . Puede ajustarlos todos bajo el encabezado Texto .
Ajuste el tamaño y el espacio de la llamada a la acción
Es muy importante asegurarse de que el módulo de llamada a la acción encaje bien en el encabezado. Vaya a la pestaña Diseño de la configuración del módulo y busque la sección Espaciado . Establezca el Margen superior para el módulo CTA en -3vh y el Margen inferior en -10vh . Esto debería llevar la barra de menú a una posición más estrecha.
A continuación, vaya a la configuración de Capacidad de respuesta y establezca los márgenes para dispositivos móviles en -9vh en la parte superior y -20vh en la parte inferior.
Personaliza los colores de la llamada a la acción
Un CTA debe ser llamativo. ¿De qué otra manera llamará a cualquiera de sus visitantes a la acción? Con eso en mente, queremos ir a la pestaña Diseño para el módulo CTA y encontrar el encabezado Botón . Debajo, habilite la palanca que dice Usar estilos personalizados para el botón .
Vamos a mantenerlo simple y hacer que el botón en el CTA coincida con el botón de Portafolio existente del diseño del encabezado. Establezca el color del texto del botón en blanco (#ffffff) , el fondo del botón en #fe5a25 , el ancho del borde del botón en 4px y el color del borde del botón en blanco (#ffffff) .
Una vez que haya terminado de personalizar el diseño para que coincida con su diseño existente, guarde su trabajo haciendo clic en el botón verde Guardar en la esquina inferior derecha y luego haga clic en el icono X en la esquina superior derecha para volver al generador de temas.
En Theme Builder, asegúrese de que el botón verde de arriba diga Todos los cambios guardados . Si dice Guardar cambios , las actualizaciones que ha realizado aún no están activas.
Resultados Finales del Módulo Llamado a la Acción
Cuando haya terminado con todas las personalizaciones, su sitio debería verse similar a esto:
Escritorio
Móvil
Conclusión
Agregar una llamada a la acción en la barra de menú secundaria de su sitio Divi es un proceso bastante simple. Tener un módulo CTA en la parte superior de tus páginas puede ser una manera increíble de atraer a tu audiencia. Los usuarios pueden volverse insensibles a las ventanas emergentes y a varios modales, pero una buena llamada a la acción a la antigua nunca deja de llamar su atención.
¿Cómo utiliza las llamadas a la acción en sus sitios web? ¡Cuéntanos en los comentarios!