Cómo agregar un título de sitio dinámico y un eslogan a un encabezado global de Divi
Publicado: 2020-05-15Saber cómo agregar un título de sitio dinámico y un eslogan a un encabezado global de Divi será útil al crear sitios web de Divi. Y hay algunas buenas razones por las que uno lo haría. Por un lado, no todos los sitios tienen un logotipo. El título de un sitio es un buen reemplazo de logotipo. Otra razón es impulsar su marca al incluir información vital sobre su sitio donde todos la vean.
En este tutorial, le mostraremos cómo agregar un título de sitio dinámico y un eslogan a un encabezado global de Divi. Esta solución extraerá el título del sitio y el lema del backend de WordPress de forma dinámica. Además, tendrás todas las poderosas opciones de diseño de Divi para personalizar el título y el eslogan como quieras.
Vistazo
Aquí hay un vistazo rápido al diseño que crearemos en este tutorial.
Observe el título del sitio y el lema en la parte superior central del encabezado que se muestra dinámicamente.
Descargue el título del sitio dinámico y la plantilla de encabezado global Divi del eslogan GRATIS
Para poner sus manos en la plantilla de encabezado global de este tutorial, 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.
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.
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!
Para importar la plantilla, vaya a Divi> Theme Builder.
Haga clic en el icono de portabilidad en la parte superior derecha de la página.
En la ventana emergente de portabilidad, seleccione la pestaña de importación y elija el archivo de descarga desde su computadora.
Luego haga clic en el botón Importar.
Una vez hecho esto, la plantilla de encabezado global estará disponible en Divi Theme Builder.
Vayamos al tutorial, ¿de acuerdo?
El título del sitio y el lema en WordPress
Cada sitio de WordPress tiene un título y un eslogan. El título del sitio es esencialmente el nombre del sitio y el lema es una oración corta que generalmente explica de qué se trata el sitio.
No es raro agregar el título del sitio al instalar WordPress y olvidarse de él.
Y algunas personas ni siquiera se dan cuenta de que el lema existe, y mucho menos se toman el tiempo para actualizarlo. Además, al usar Divi Theme, el título y el eslogan del sitio no estarán visibles en su sitio de forma predeterminada, por lo que es fácil de ignorar. Sin embargo, tanto el título del sitio como el lema son elementos vitales del sitio web y serán reconocidos por los motores de búsqueda.
Puede ubicar y actualizar el título del sitio y el lema en WordPress en cualquier momento yendo al Panel de WordPress y navegando a Configuración> General.
O puede tomar otra ruta usando el personalizador de temas para actualizar el título del sitio en la configuración general.
Ahora que sabemos dónde existen el título y el lema del sitio en el backend de WordPress, ¡exploremos cómo podemos agregarlos a un encabezado Divi!
Cómo agregar un título de sitio dinámico y un eslogan a un encabezado global en Divi
Importación de la plantilla de encabezado global prefabricada
Para este tutorial, nos concentraremos en cómo agregar el título y el eslogan dinámico del sitio a un encabezado existente en lugar de crear un encabezado completo desde cero. Esto ayudará a ahorrar tiempo y mejorará la claridad. Entonces, para poner en marcha este diseño de encabezado, vamos a importar una plantilla de encabezado global prefabricada de nuestro cuarto paquete de creación de temas.
Una vez que descargue el paquete de creación de temas, descomprima el archivo y busque el archivo JSON de plantilla de sitio web predeterminado.
Luego navega a Divi> Theme Builder.
Haga clic en el icono de portabilidad en la parte superior derecha. Dentro de la ventana emergente de portabilidad, elija el archivo JSON de plantilla de sitio web predeterminado y haga clic en el botón de importación.
Una vez que se haya agregado la plantilla al generador de temas, elimine la plantilla de pie de página y haga clic para editar el encabezado global.
Adición de un título y un lema dinámicos del sitio al encabezado
Dentro del editor de diseño de plantillas, verá el encabezado prefabricado ya diseñado. Podemos comenzar a realizar nuestras personalizaciones de inmediato.
Mover el logotipo
Para comenzar, arrastre el módulo de imagen que muestra el logotipo (dinámicamente) desde la columna del medio en la fila superior hacia la columna izquierda en la fila superior.
Agregue el módulo de llamado a la acción para mostrar el título y el lema del sitio
Luego, agregue un nuevo módulo de Llamado a la acción en la columna central de la fila superior (donde estaba el logotipo).
Usaremos el módulo Llamado a la acción para mostrar el título del sitio y el lema.
Pero antes de comenzar a agregar contenido, primero seleccione NO usar el color de fondo.
Agregar título de sitio dinámico
En la configuración de contenido, coloque el cursor sobre el cuadro de entrada del título y haga clic en el icono "Usar contenido dinámico". Luego seleccione "Título del sitio" de la lista.
Agregar lema de sitio dinámico
A continuación, coloque el cursor sobre el área del cuerpo y seleccione el icono "Usar contenido dinámico". Luego, seleccione "Lema del sitio" de la lista.
Agregar enlace dinámico a la página de inicio
Es común que el título del sitio redirija a la página de inicio al hacer clic, especialmente si está reemplazando el logotipo. Para que todo el módulo se redirija a la página de inicio, agregue el enlace de la página de inicio como contenido dinámico a la URL del enlace del módulo.
Título del sitio y diseño del texto del eslogan
Ahora, el título y el lema del sitio se muestran en el encabezado de forma dinámica. Todo lo que tenemos que hacer ahora es agregar un poco de estilo. Recuerde, necesitamos personalizar el texto del título para diseñar el título del sitio y el texto del cuerpo para diseñar el lema.
Vaya a la pestaña de diseño y actualice lo siguiente:
- Fuente del título: Heebo
- Peso de la fuente del título: negrita
- Estilo de fuente del título: TT
- Tamaño del texto del título: 32 px (escritorio), 24 px (tableta y teléfono)
- Espaciado de letras de título: 0.3em
- Fuente del cuerpo: Roboto
- Estilo de fuente del cuerpo: cursiva
- Color del texto del cuerpo:
- Tamaño del texto del cuerpo: 13px
- Espaciado de letras corporales: 0.1em
- Altura de la línea del cuerpo: 1em
Para ayudar con el centrado, elimine el relleno predeterminado debajo del texto del cuerpo agregando el siguiente CSS personalizado a la Descripción de la promoción:
padding-bottom: 0px
Ajustes de diseño adicionales
Para esta última parte del tutorial, haremos algunos ajustes de diseño adicionales en el encabezado para asegurarnos de que los elementos permanezcan centrados verticalmente en cada columna y para darle al botón un diseño único. También agregaremos una línea ondulada antes y después al eslogan (solo por diversión).
Centrado vertical de columnas / contenido
En este momento, la fila superior es el activo "Equalize Column Heights" que usa la propiedad flex. Podemos sacar provecho de esto agregando un pequeño fragmento de CSS para asegurarnos de que todas las columnas permanezcan centradas verticalmente dentro de la fila. Para hacer esto, abra la configuración de la fila superior y agregue el siguiente CSS al elemento principal:
align-items: center;
Actualizar la columna con el botón
A continuación, abra la configuración de la columna 3 en la fila superior y elimine el color de fondo y el relleno.
Actualizar el fondo del botón
A continuación, abra la configuración del módulo de botones y actualice el fondo con un nuevo degradado de fondo de la siguiente manera:
- Color de fondo degradado a la izquierda: #ffffff
- Color de fondo degradado a la derecha: # 1dbf73
- Dirección del gradiente: 135 grados
- Posición inicial: 10%
- Posición final: 0%
Agregar caracteres anteriores y posteriores al eslogan
Cada elemento de contenido dinámico se puede editar haciendo clic en el ícono de ajustes. Para agregar caracteres anteriores y posteriores al eslogan, abra la configuración del módulo de llamada a la acción que contiene el eslogan y haga clic en el icono de edición en el contenido dinámico del eslogan del sitio. Luego agregue los caracteres a las entradas antes y después.
Resultado final
Para ver el resultado, abra cualquier página de su sitio. ¡Debería ver el título del sitio dinámico y el eslogan mostrados a la perfección!
Así es como se acumula en tabletas y teléfonos.
Pensamientos finales
Realmente es bueno poder personalizar un encabezado global con un título de sitio dinámico y un eslogan. Parece algo que será útil para muchos sitios. También me gusta la idea de incluir el título del sitio y el lema además del logotipo para una representación de la marca aún más sólida.
Espero tener noticias tuyas en los comentarios.
¡Salud!