En esta guía, te mostraremos cómo crear un header personalizado con dos botones alineados horizontalmente utilizando el Constructor Divi en WordPress. Este diseño puede ser útil para mejorar la navegación de tu sitio web y hacer que tus llamadas a la acción sean más visibles.
Configurar una Sección
Primero, abre el Constructor Divi y añade una nueva sección regular. Dentro de esta sección, añade una nueva fila de dos columnas, que tendrán el siguiente formato:
Configurar una Fila
Esta fila, en su parte mas hancha llevará dentro el módulo menú, y adaptaremos a nuestro proyecto y en su parte más angosta añade el primer módulo de botón, agrega la URL de la página de inicio o una llamada a la acción, como por ejemplo !Comprar ahora! Ajusta los colores, tamaño y bordes del botón según tu diseño. Repite el proceso para añadir el segundo botón, configurando el texto como «Contáctanos» y enlazando a la página de contacto o sección deseada.
Alinear los Botones
Para alinear los botones horizontalmente, ve a las configuraciones avanzadade la columna que tiene dentro los dos botones y ajusta el margen y padding. En este caso usarremos CSS personalizado para lograr una mejor alineación. Un ejemplo de esto sería:
–
display: flex;
justify-content: center;
–
Lo colocaremos en la columna que contiene los dos módulos botones, en -Avanzado,CSS personalizado,Elemento principal
Revisa el diseño para asegurarte de que el header y los botones se vean bien tanto en escritorio como en dispositivos móviles. Realiza cualquier ajuste necesario en los estilos. Finalmente, guarda los cambios y publica tu proyecto.
Con estos simples pasos, puedes crear un header atractivo y funcional con dos botones en línea usando el Constructor Divi. Este diseño no solo mejora la navegación de tu sitio, sino que también hace que tus llamadas a la acción sean más accesibles y atractivas para tus visitantes.
Espero que este ejercicio te ayude a llevar tus proyectos web al siguiente nivel, no olvides descargar el archivo de manera GRATUITA de este trabajo.!
0 comentarios