Un teletipo de publicación de blog es una herramienta conveniente para mostrar dinámicamente publicaciones de blog (recientes, relacionadas, etc.) en su sitio web. Puede pensar en ello como un teletipo de noticias para las publicaciones de blog de WordPress.
Hoy, le mostraremos cómo crear un ticker de publicación de blog con el módulo de control deslizante de publicación de Divi. Similar a un teletipo de noticias, el teletipo de publicaciones de blog que vamos a crear será una versión simplificada y compacta del módulo de control deslizante de publicaciones de Divi. Y, debido a que el módulo de control deslizante de publicaciones tiene funciones integradas para mostrar publicaciones de varias maneras, puede usarlo en cualquier lugar que desee. Puede usarlo en la página de inicio como marcador de publicaciones para mostrar publicaciones recientes, o puede usarlo en el encabezado de una plantilla de publicación de blog para mostrar publicaciones relacionadas por categoría actual.
Después de que le mostremos cómo crear el teletipo de publicación de blog en Divi, también le mostraremos cómo guardarlo en su Biblioteca Divi para que pueda agregarlo a un encabezado de una plantilla de publicación de blog en Divi Builder .
¡Empecemos!
Aquí hay un vistazo rápido al teletipo de la publicación del blog que construiremos en este tutorial.
Así es como el teletipo de publicación se apila muy bien en la pantalla del teléfono.
También le mostraremos cómo agregar el indicador de publicación para mostrar publicaciones relacionadas en el encabezado de una plantilla de publicación de blog.
Descargue el diseño y la plantilla GRATIS
Para poner sus manos en los diseños de este tutorial, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestro boletín utilizando 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 será «resuscrito» ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín informativo 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 muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro 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.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
Importar el diseño a la biblioteca Divi
Para importar el diseño de la sección a su Biblioteca Divi, navegue hasta la Biblioteca Divi.
Haga clic en el botón Importar.
En la ventana emergente de portabilidad, seleccione la pestaña de importación y elija el archivo de descarga desde su computadora. Será el archivo JSON dentro de la carpeta llamada «diseño de teletipo de publicación de blog (Biblioteca Divi)».
Luego haga clic en el botón importar.
Una vez hecho esto, el diseño de la sección estará disponible en Divi Builder.
Importe la plantilla de encabezado al generador de temas Divi
Si desea importar la plantilla de publicación de blog con el marcador de publicación agregado al encabezado, deberá navegar por Creador de temas»>Divi > Generador de temas .
Luego use el ícono de portabilidad en la parte superior derecha de la página para importar el archivo JSON. Será el archivo dentro de la carpeta llamada «plantilla de encabezado de publicación de blog con marcador de publicación (Generador de temas)».
Vayamos al tutorial, ¿de acuerdo?
Lo que necesitas para empezar
Para comenzar, deberá hacer lo siguiente:
- Si aún no lo has hecho, instala y activa el tema Divi .
- Cree una nueva página en WordPress y use Divi Builder para editar la página en la parte delantera (constructor visual).
- Elija la opción «Construir desde cero».
Después de eso, tendrás un lienzo en blanco para comenzar a diseñar en Divi.
Creación del teletipo de publicaciones de blog en Divi
Crear la fila
Para comenzar, creemos una fila de una columna dentro de la sección.
Configuración de fila
A continuación, actualice la configuración del diseño de la fila de la siguiente manera:
- Ancho del canalón: 1
- Relleno: 0px arriba, 0px abajo
Creación del título del teletipo de publicación con un módulo de texto
Ahora que la fila está en su lugar, agregue un módulo de texto a la fila para crear el título de la publicación.
Texto del título y fondo
Actualice el cuerpo del texto para que diga «Publicaciones recientes:».
Luego actualice el color de fondo:
- Color de fondo: #333333
Configuración de diseño
En la pestaña de diseño, actualice los estilos de texto de la siguiente manera:
- Fuente del texto: Poppins
- Peso de fuente de texto: semi negrita
- Estilo de fuente de texto: TT
- Texto Color del texto: rgba(255,255,255,0.7)
- Espaciado entre letras de texto: 1px
- Altura de línea de texto: 40px
- Alineación de texto: Centro
- Ancho: 100%
- Ancho máximo: 175 px (computadora de escritorio y tableta), 100 % (teléfono)
Eso se encarga de nuestro título de teletipo de publicación. Ahora comencemos a construir el teletipo de publicación.
Creación del teletipo de publicaciones de blog con un módulo de control deslizante de publicaciones de blog
Para crear el teletipo de la publicación del blog, vamos a utilizar un módulo deslizante de publicación y luego simplificaremos el diseño para que sea realmente compacto.
Agregue un módulo deslizante de publicación debajo del módulo de texto.
Publicar contenido del control deslizante
En la pestaña de contenido, puede elegir el número de publicaciones, las categorías incluidas y cómo se ordenaron. Para este ejemplo, mantendremos el valor predeterminado y haremos que el control deslizante muestre las publicaciones más recientes.
Para ocultar el extracto de la publicación, asegúrese de actualizar lo siguiente:
- Usar extractos de publicaciones: NO
- Longitud del extracto: 0
Publicar elementos deslizantes y fondo
Realmente, todo lo que queremos mostrar en el control deslizante es el título de la publicación y las flechas de la diapositiva. En el grupo de opciones de elementos, oculta todo menos las flechas.
- Mostrar controles: NO
- Mostrar botón Leer más: NO
- Mostrar mensaje meta: NO
Vamos a mantener la opción de mostrar la imagen destacada como fondo de cada diapositiva. Pero para una copia de seguridad, asegúrese de agregar el siguiente color de fondo:
- Color de fondo: #eeeeee
Configuración del diseño del control deslizante de publicación
Estilos de superposición y flecha
En la pestaña de diseño, actualice la superposición de fondo y el color de la flecha de la siguiente manera:
- Usar superposición de fondo: SÍ
- Color de superposición de fondo: rgba(248,248,248,0.9)
- Color de la flecha: #ffffff (escritorio), #ef51f7 (pasar el cursor)
Texto del título
Luego, actualice los estilos de texto del título de la siguiente manera:
- Fuente del título: Poppins
- Peso de la fuente del título: Medio
- Alineación del texto del título: Izquierda
- Color del texto del título: #333333
- Color del texto del título (pasar el cursor): #ef51f7
- Tamaño del texto del título: 16 px (escritorio), 14 px (teléfono)
- Altura de la línea del título: 40 px
- Sombra del texto del título: ver captura de pantalla
- Color de la sombra del texto del título: transparente
Espaciado
Necesitamos hacer espacio para el módulo de texto del título del teletipo de la publicación para que podamos colocar nuestro control deslizante de la publicación en el lado derecho. Para hacer eso, actualice lo siguiente:
- Margen: 175 px a la izquierda (computadora de escritorio y tableta), 0 px a la izquierda (teléfono)
- Relleno: 0px arriba, 0px abajo, 0px izquierda, 0px derecha
Animación Automática
El control deslizante de publicación tiene una opción incorporada para agregar animación automática. Esto nos dará la funcionalidad de teletipo que necesitamos para ver las publicaciones sin tener que hacer clic en las flechas de deslizamiento.
Agregue la animación automática de la siguiente manera:
- Animación automática: ON
- Velocidad de animación automática: 3500
Siéntase libre de aumentar o disminuir la velocidad a lo que crea que es mejor.
Estilo avanzado
Clase CSS y CSS personalizado
En este punto, el control deslizante de publicación es un teletipo de publicación en funcionamiento en su mayor parte. Pero hay algunos ajustes avanzados que podemos agregar para limpiar el diseño.
Primero, agregue una clase CSS personalizada de la siguiente manera:
- Clase CSS: et-post-ticker
Para asegurarse de que el título de la publicación permanezca en una línea dentro del control deslizante/ticker y oculte el desbordamiento con puntos suspensivos, agregue el siguiente CSS al título de la diapositiva:
|
01
02
03
04
|
padding-bottom:0px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis; |
Para dar a las flechas deslizantes una sensación de botón, agregue el siguiente CSS a las flechas deslizantes:
|
01
02
03
04
05
06
07
|
height: 40px;width: 40px;line-height:40px;font-size: 28px;text-align: center;margin-top:-20px;background:#333; |
CSS adicional con módulo de código para colocar flechas deslizantes
En este punto, la funcionalidad predeterminada de las flechas de la diapositiva se mostrará solo al pasar el mouse por encima y la ubicación de las flechas se encuentra en los lados derecho e izquierdo de la diapositiva. Para mejorar la experiencia del usuario y hacer que se parezca más a un teletipo de publicación, podemos hacer que las flechas se muestren siempre y colocarlas a la derecha del control deslizante.
Para hacer esto, agregue un nuevo módulo de código debajo del control deslizante de publicación.
Luego pegue el siguiente CSS asegurándose de envolverlo con las etiquetas de estilo necesarias.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
|
.et-post-ticker.et_pb_slider:hover .et-pb-arrow-prev,.et-post-ticker .et-pb-arrow-prev { right: 40px !important; opacity: 1 !important; left: auto !important;}.et-post-ticker.et_pb_slider:hover .et-pb-arrow-next,.et-post-ticker .et-pb-arrow-next { right: 0px !important; opacity: 1 !important;}.et-post-ticker .et_pb_slide { padding: 0 84px 0 3% !important;} |
Resultado final
Aquí está el resultado final en una página en vivo.
Observe cómo el teletipo de publicación maneja el desbordamiento del texto del título.
Y así es como el teletipo de publicación se apila muy bien en la pantalla del teléfono.
Agregar el marcador de publicación al encabezado de una plantilla de publicación de blog
Un caso de uso obvio para este marcador de publicación es hacer que muestre publicaciones recientes en un encabezado real de una plantilla de publicación de blog. Así es como puedes hacer eso.
Guardar la fila en la biblioteca Divi
Primero, guarde la fila que contiene los elementos que componen nuestro teletipo de publicación en la Biblioteca Divi. Puede hacer esto haciendo clic en el ícono de tres puntos en la fila y seleccionando «Guardar en la biblioteca». Luego asigne un nombre al diseño y haga clic en el botón «Guardar en la biblioteca».
Adición de la fila Post Ticker a la plantilla de encabezado
Editar el encabezado personalizado
Una vez que la fila se ha guardado en la biblioteca, estamos listos para agregarla a un encabezado personalizado. Para este ejemplo, asegúrese de que la plantilla esté asignada a «Todas las publicaciones». Luego haga clic para editar el encabezado personalizado para esa plantilla.
Insertar fila (post ticker) de la biblioteca
En el editor de diseño de encabezado, haga clic para agregar una nueva fila donde desee que se muestre el teletipo de publicación.
En el modal Insertar fila, seleccione la pestaña Agregar desde biblioteca. Busque la fila de teletipo de la publicación del blog que guardó previamente en la biblioteca y selecciónela.
Ahora el teletipo de publicación se mostrará en el encabezado.
Mostrar publicaciones relacionadas para la categoría actual
Debido a que este marcador de publicaciones solo se mostrará en las publicaciones del blog, podemos optar por mostrar solo las publicaciones relacionadas con la categoría actual.
Primero, necesitamos actualizar el texto del título en nuestro módulo de texto a «Publicaciones relacionadas:».
Luego, abra la configuración del control deslizante de publicación. En Categorías incluidas, seleccione la opción Categoría actual.
Ahora, cada publicación de blog tendrá un indicador de publicación en el encabezado que muestra las publicaciones relacionadas por categoría actual.
Resultado en plantilla de publicación de blog
Aquí está la animación automática en acción.
Así es como puede hacer clic en las flechas de navegación para saltar a las publicaciones siguientes y anteriores. Y hacer clic en el título de la publicación lo lleva a esa publicación.
Y así es como se ve en la tableta y el teléfono.
Pensamientos finales
Como hemos aprendido, podemos crear un teletipo de publicación de blog fácilmente simplificando el diseño del módulo deslizante de Divi y haciendo algunos ajustes personalizados en las flechas de navegación. Y no olvide que siempre puede hacer ajustes de estilo fácilmente usando todas las opciones integradas en el control deslizante de publicación. Con suerte, esto será útil para todos los blogueros y desarrolladores web.
Espero escuchar de usted en los comentarios.
¡Salud!