Saber 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 para hacerlo. Por un lado, no todos los sitios tienen logo. El título de un sitio es un buen reemplazo de logotipo. Otra razón es impulsar su marca al incluir información vital en 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 Divi. Esta solución extraerá dinámicamente el título del sitio y el eslogan del backend de WordPress. Además, tendrás todas las poderosas opciones de diseño de Divi para personalizar el título y el eslogan como quieras.

Resultado posible

Aquí hay una vista previa del diseño que crearemos en este tutorial.

Plantilla de encabezado global de título de sitio dinámico 6

Tenga en cuenta el título del sitio y el eslogan en la parte superior central del encabezado que se muestra dinámicamente.

Ejemplo de modificación de título Divi

Descarga gratuita

Únase a Divi Newlsetter y le enviaremos por correo electrónico una copia del paquete de diseño de página de destino Divi Ultimate, y mucho más Recursos, trucos y consejos Divi gratuitos y sorprendentes. Síguelo y serás un Divi Master en poco tiempo. Si ya está suscrito, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.DESCARGAR

Para importar la plantilla, vaya a Divi> Generador de temas.

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.

Elija una plantilla divi

Una vez completada, la plantilla de encabezado general estará disponible en Divi Theme Builder.

Modificar el encabezado divi global

En lo que sigue, pasaremos al diseño.

El título del sitio y el eslogan en WordPress

Cada sitio de WordPress tiene un título y un eslogan. El título del sitio es básicamente el nombre del sitio y el lema es una frase corta que generalmente explica de qué se trata.

No es raro agregar el título del sitio al instalar WordPress y olvidarlo.

Personalizar el título divi

Y, algunas personas ni siquiera se dan cuenta de que existe el eslogan, y mucho menos se toman el tiempo para actualizarlo. Además, al usar el Tema divi, el título y el eslogan del sitio no estarán visibles en su sitio de forma predeterminada, por lo que es fácil pasarlos por alto. Sin embargo, el título y el eslogan del sitio son elementos esenciales 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.

configuraciones generales de wordpress

O bien, puede tomar otra ruta utilizando el personalizador de temas para actualizar el título del sitio en la configuración general.

Personalizar la identidad de wordpress

Ahora que sabemos dónde están el título y el eslogan 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 prediseñada

Para este tutorial, nos centraremos 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. Le ahorrará tiempo y mejorará la claridad. Entonces, para comenzar este diseño de encabezado, vamos a importar una plantilla de encabezado global predefinida de nuestro cuarto paquete generador de temas .

Una vez que tienes descargado el paquete de creación tema , descomprima el archivo y busque el archivo JSON de plantilla de sitio web por defecto.

Luego vaya a Divi> Theme Builder.

Haga clic en el icono de portabilidad en la parte superior derecha. En la ventana emergente de portabilidad, elija el archivo JSON de plantilla de sitio web predeterminado y haga clic en el botón Importar.

Importación del modelo Divi

Una vez que la plantilla se agrega al generador de temas, elimine la plantilla de pie de página y haga clic para editar el encabezado general.

Quitar plantilla del pie de página

Agregar un título de sitio dinámico y un eslogan al encabezado

Dentro del editor de diseño de plantilla, verá el encabezado prefabricado ya diseñado. Podemos comenzar a realizar nuestras personalizaciones de inmediato.

Mover logo

Para comenzar, arrastre el módulo de imagen que muestra el logotipo (dinámicamente) desde la columna central de la fila superior a la columna izquierda de la fila superior.

Agregue un 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).

Personaliza el llamado a la acción

Usaremos el módulo Llamado a la acción para mostrar el título y el lema del sitio.

Pero antes de comenzar a agregar contenido, primero seleccione NO para usar el color de fondo.

Configurar acciones de llamado a la acción

Agregar un 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.

Plantilla dinámica divi 1

Agregar un eslogan dinámico del sitio

Luego, pase el mouse sobre el área del cuerpo y seleccione el ícono "Usar contenido dinámico". Luego, seleccione "Lema del sitio" de la lista.

Agregar un eslogan de sitio divi

Agregar un enlace de página de inicio dinámico

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 redirigir todo el curso 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 curso.

Agregar un enlace a la página de inicio

Diseño del título del sitio y el texto del eslogan

Ahora el título del sitio y el eslogan se muestran dinámicamente en el encabezado. 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 eslogan.

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)
  • Espacio entre 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 entre letras del cuerpo: 0.1em
  • Altura de la línea del cuerpo: 1em
Personalizar la fuente del título divi

Para ayudar con el centrado, retire el relleno predeterminado debajo del texto del cuerpo agregando el siguiente CSS personalizado a la Descripción de la promoción:

relleno inferior: 0px
Agregar código divi css personalizado

Ajustes de diseño adicionales

Para esta última parte del tutorial, vamos a hacer 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 patadas).

Centrado vertical de las columnas / contenido

En este momento, la fila superior es la activa "Igualar alturas de columna" que utiliza la propiedad flex. Podemos capitalizar 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:

alinear elementos: centro;
Título dinámico divi

Actualización de la columna con el botón

A continuación, abra la configuración de la columna 3 en la fila superior y saque el color de fondo y el relleno.

Personaliza el botón de contacto divi

Actualización del fondo del botón

Luego abra la configuración del módulo de botones y actualice el fondo con un nuevo degradado de fondo de la siguiente manera:

  • Fondo degradado Color izquierdo: #ffffff
  • Color de fondo derecho del degradado: # 1dbf73
  • Dirección de degradado: 135deg
  • Posición de inicio: 10%
  • Posición final: 0%
Personaliza el fondo del botón divi

Agregar caracteres antes y después al eslogan

Cada elemento de contenido dinámico se puede cambiar haciendo clic en el ícono de ajustes. Para agregar caracteres antes y después del 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 de antes y después.

Mostrar el lema divi

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 maravillosamente!

Resultado final divi

Consideraciones finales

Es realmente bueno que pueda personalizar un encabezado general con un título y un eslogan dinámico del sitio. Esto 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 aún más sólida de la marca.

Fuente: Tema elegante