homefinance blog
Tener llamamientos claros a la acción en sus páginas es una necesidad para la mayoría de los sitios web. ¿Y qué mejor manera de llamar la atención sobre algunos de los CTA más importantes que colocándolos en su encabezado? En el tutorial de hoy, le mostraremos cómo agregar dos botones de lado a lado a su encabezado global utilizando el constructor de temas de Divin. Uno de los botones es primario, el otro secundario. ¡Podrá descargar el archivo JSON del encabezado global de forma gratuita! Vamos a eso. Vista previa antes de arrojar nuestras cabezas en el tutorial, para echar un vistazo rápido al resultado en diferentes tamaños de pantalla.
Escritorio
Móvil
Descargue el encabezado global de forma gratuita para poner su mano en la plantilla Global de encabezado gratuita, primero deberá descargarlo usando el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos
Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia.
Te has suscripto satisfactoriamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos! 1. Vaya al Temo Builder Divin y cree un encabezado global Access El Div Div Theme Builder Comience accediendo a Div Theme Builder y haga clic en “Agregar un encabezado global”.
Build Global Show Continúe haciendo clic en “Build Global Show”.
2. Construya el diseño del encabezado global Agregue una nueva sección de espaciado Una vez que llegue al editor de plantillas, notará una sección. Abra la configuración de la sección y elimine todos los valores predeterminados desde arriba e inferior.
SUS Lingo: 0 PX
Finamiento inferior: 0 PX
IND ÍNDICE Asegúrese de aumentar el índice Z de la sección y en la configuración de visibilidad. Esto asegurará que el contenido de encabezado global aparezca en la parte superior de toda la página y el contenido publicado.
IND ÍNDICE: 99999
Agregue una nueva fila a la estructura de la columna Después de haber completado la configuración de la sección, agregue una nueva línea a la sección utilizando la siguiente estructura de columnas:
Dimensión sin agregar módulos, abra la configuración de la fila y permita que la fila ocupe todo el ancho del contenedor de sección.
Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1
Igualar las alturas de la columna: sí
Ancho: 100%
Ancho máximo: 100%
Sparting modifica los valores de llenado a la izquierda y a la derecha.
ENLIZACIÓN IZQUIERDA: 2VW (escritorio), 10VW (tableta y teléfono)
Revestimiento derecho: 2VW (escritorio), 10VW (tableta y teléfono)
El elemento principal para centrar todo el contenido de la columna, agregaremos estas dos líneas de código CSS al elemento principal de la fila. Pantalla: Flex;
Alinine-Ritams: Centro; Retire la propiedad de visualización de escritorio de la tableta y el móvil. Pantalla: bloque; la columna 1 borde continúe abriendo configuraciones de la columna 1 y agregue un borde recto en el escritorio.
Ancho del borde derecho: 1 PX (escritorio), 0 PX (tableta y teléfono)
Color de borde derecho: # D8D8D8
El índice z y el índice z de la columna.
IND ÍNDICE: 11
Columna 2 El elemento principal luego abra la configuración de la columna 2 y agregue las siguientes líneas de código CSS al elemento principal de la columna para convertirlo en dos columnas. Pantalla: cuadrícula;
Columnas de plantilla de cuadrícula: 50% 50%;
Agregue un módulo de menú en la columna 1 ¡Seleccione el menú es hora de comenzar a agregar módulos! Agregue un módulo de menú en la columna 1 y seleccione un menú de su elección.
Cargue el logotipo cargar un logotipo más.
Cambio de apariencia a la pestaña Diseño del módulo y asegúrese de que se apliquen la siguiente configuración de apariencia:
Estilo: alineado a la izquierda
Dirección del menú desplegable: abajo
Texto del menú luego cambie la configuración del texto del menú.
Color de enlace activo: # EF6F49
Fuente del menú: Montserrat
El peso de la fuente del menú: semi en negrita
El estilo de la fuente del menú: mayúscula
El color del texto del menú: # 333333 (predeterminado), # EF6F49 (coloque el cursor)
Tamaño del texto del menú: 0.7VW (escritorio), 1.8VW (tableta), 2.5VW (teléfono)
Cartas de menú de espacio: 1 PX
Texto en el menú desplegable y realice algunos cambios en la configuración de texto en el menú desplegable.
El color del fondo de caída: #fffff
La línea de color niega: # EF6F49
Los íconos, cambian el color del icono del menú de hamburguesas.
Icono de menú de hamburguesas de color: # 000000
Dimension también agrega un ancho de logotipo máximo a la configuración de dimensionamiento. Logotipo máximo: 9VW (escritorio), 12VW (tableta), 15VW (teléfono)
LOGO LOGO CSS y complete la configuración del módulo agregando una línea de código CSS al logotipo del menú en la pestaña avanzada. Margen-derecha: 10VW;
Agregue un módulo de código a la columna 1 Agregue el código CSS personalizado al siguiente modo y el último módulo que necesitamos en la columna 1 es un módulo de código. Agregue las siguientes líneas de código CSS para personalizar el espacio entre los elementos del menú:
.et-Menu> li {
ROLDING-LEFT: 1.5VW! IMPORTANTE;
Right: 1.5VW! IMPORTANTE;
}
Agregue el módulo de botón no. 1 en la columna 2 Agregue una copia Pase al siguiente módulo! Agregue el primer módulo de botón e ingrese una copia de su elección.
Agregue un enlace Agregue un enlace al módulo de botones a continuación.
Alineación Vaya a la pestaña Diseño del módulo y cambie la alineación de los botones.
Alineación de botones: correcto
Botón de configuración Stilet y botón.
Use estilos personalizados para el botón: Sí
Tamaño de texto de texto: 0.8VW (escritorio), 1.7VW (tableta), 2.5VW (teléfono)
El color del texto del botón: # 000000
El color del fondo del botón: # EDEF0 (predeterminado), # D6D7D8 (pasando con el mouse)
El ancho del nudo del botón: 0 PX
El rasgo de botón de botón: 0 px
Distancia entre letras y botones: 2 PX
Botón de fuente: Montserrat
Peso de fuente de fuente: semi audac.
El estilo de la fuente del botón: mayúscula
Espacio Complete la configuración del módulo agregando algunos valores de llenado personalizados en diferentes tamaños de pantalla.
Revelaje superior: 1VW (escritorio), 2VW (tableta), 3VW (teléfono)
Bajo forro: 1VW (escritorio), 2VW (tableta), 3VW (teléfono)
Revelaje izquierdo: 2VW (escritorio), 4VW (tableta), 6VW (teléfono) Replineación recta: 2VW (escritorio), 4VW (tableta), 6VW (teléfono)
Botón de clona después de haber completado el módulo de primer botón, clon.
Cambie la conexión Abra el módulo de botones duplicados y cambie la URL.
Cambiar el cambio de alineación y alinear el módulo.
Alineación de botones: izquierda
Cambie la configuración del botón y la configuración de los botones.
El color del texto del botón: #ffffff
El color del fondo de fondo: # EF6F49 (predeterminado), # E06945 (coloque el cursor)
La escala de transformación del control deslizante completa la configuración del botón agregando un efecto de colocación de la escala de transformación.
Derecha: 110%
ABAJO: 110%
3. Guarde los cambios y el resultado de una vista previa del tema una vez que se complete su encabezado global, guarde todos los cambios del fabricante y vea el resultado en su sitio web.
Vista previa ahora que hemos dado todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla. Escritorio
Móvil
