Cómo diseñar el módulo deslizante de publicación de Divi como el deslizador de publicación de Facebook Newsroom

Los controles deslizantes de publicaciones son una solución elegante para presentar una variedad de contenido a sus lectores. Las publicaciones que están resaltadas se pueden organizar de varias formas, desde las categorías hasta la fecha. En el proyecto de hoy, estamos viendo un ejemplo de la página del blog de la sala de redacción de Facebook que presenta una categoría de publicaciones llamada "Noticias destacadas". Es un control deslizante muy atractivo que enfatiza el título de la publicación y la imagen destacada. Recrearemos el aspecto de este control deslizante utilizando el módulo Control deslizante de publicación de Divi.

Antes y después: el módulo deslizante Divi Post

La primera imagen a continuación muestra el módulo deslizante divi post con su configuración predeterminada, mientras que la segunda es una modificación creada con solo algunos ajustes en la configuración y algo de CSS personalizado.

Antes

Después

El concepto y la inspiración

Como se mencionó, el modelo para el estilo de control deslizante de publicaciones de hoy proviene de Facebook Newsroom. Este es un blog de noticias dedicado, como habrás adivinado, a todo lo relacionado con Facebook. Si bien la mayoría de nosotros conocemos a Facebook como el gigante de las redes sociales, un vistazo rápido a este blog ampliará su perspectiva. Con $ 8.8 mil millones en ingresos el último trimestre y 1.23 mil millones de usuarios activos por día, el control deslizante de publicación de blog en la página de la sala de redacción de Facebook proporciona un modelo digno para el proyecto de hoy.

Preparación de los elementos de diseño

En preparación para este diseño, necesitará algunas publicaciones de blog con imágenes destacadas. Si no está familiarizado con la configuración de imágenes destacadas para sus publicaciones, encontrará la configuración en la página de edición de publicaciones en la parte inferior derecha de la página.

Este diseño de control deslizante funcionará mejor si cada una de las imágenes destacadas es de 600 px x 400 px, pero el tamaño exacto no es crítico.

También puede agregar un extracto de texto para cada una de sus publicaciones en el cuadro de entrada "Extracto" que se encuentra en la parte inferior de la página del editor de publicaciones. La publicación mostrará el extracto de su publicación si tiene uno, pero utilizará una parte de su contenido real si no lo tiene.

Implementando el diseño con Divi

Suscríbete a nuestro canal de Youtube

Si lo está siguiendo y aún no tiene una configuración de página para mostrar el control deslizante de su publicación, simplemente cree una nueva página y haga clic en "Usar Visual Builder" para comenzar a realizar las modificaciones necesarias.

Comenzamos agregando una Sección Regular con una fila de estructura de 1 Columna.

Luego agregue el módulo Post Slider a la fila.

Nuestras modificaciones comienzan con la configuración de "Contenido", que es donde se encuentra de forma predeterminada después de agregar cualquier módulo nuevo en Visual Builder.

Realice los siguientes cambios en la configuración de contenido predeterminada:

Establezca "Número de publicación" en la cantidad de publicaciones que desee. Para este ejemplo, estoy usando 3.

Luego, establezca "Usar extracto de publicación si está definido" en sí, y establezca "Longitud automática del extracto" en 180.

Ahora estamos listos para pasar a la configuración de diseño haciendo clic en la pestaña en la parte superior del modal de configuración del módulo.

Realice los siguientes cambios en la configuración del diseño:

Cambie el "Color de superposición de fondo" a blanco (#ffffff).

Cambie "Color personalizado de navegación por puntos" a # 576d90.

Cambie el "Color del texto" a Oscuro.

Ahora ponga la "Fuente del encabezado" en negrita, configure el "Tamaño de fuente del encabezado" en 34px, configure el "Color del texto del encabezado" en # 3b5998 y la "Altura de la línea del encabezado" en 42px.

Ahora establezca el "Color del texto del cuerpo" en # 141924 y la "Altura de la línea del cuerpo" en 24px.

Ahora haga clic en "Usar estilos personalizados para el botón" para cambiarlo a sí. Cambie el "Tamaño del texto del botón" a 16px, el "Ancho del borde del botón" a 0px, el "Color del texto al pasar el botón" a # 666666 y el "Color de fondo al pasar el botón" a rgba (0,0,0,0).

Ahora haga clic en la pestaña "Avanzado" en la parte superior del modal de configuración del módulo. En la entrada de texto en ID de CSS, agregue "fb-post-slider". Esto nos permite agregar estilos a este módulo específico sin tener ningún efecto en otros módulos de publicación que pueden mostrarse en la página.

Ahora agregue código CSS a los diversos elementos de la siguiente manera:

Antes

position:absolute;
top:57px;
right:-6px;
content:"";
border:4px solid transparent;
border-top-color:#2C477F;
border-left-color:#2C477F;

Elemento principal

border-radius: 3px;
border:1px solid #dedede; 

Después

position:absolute;
top:25px;
right:-7px;
display:block;
content:"Top Stories";
color:#F9F4F7;
background-color:#4573CC;
padding:4px 15px;
border-radius:2px;
z-index:2!important;

Descripción de la diapositiva

min-height:460px;
width: 35%;
min-width: 300px;
float:left;
padding: 57px 45px 50px 35px!important;
font-family: 'Alegreya Sans', sans-serif;
text-align:left

Título de diapositiva

font-family: 'Alegreya Sans', sans-serif;

Botón deslizante

padding:0!important;
margin-top:0;

Controladores de diapositivas

margin-bottom:-55px;

Deslizar flechas

color:#ffffff!important;
background-color:rgba(0,0,0,.4);
font-weight:bold;
border-radius:2px;
 -ms-transform: scale(1.2, 2.5); /* IE 9 */
 -webkit-transform: scale(1.2, 2.5); /* Safari */
 transform: scale(1.2, 2.5);

Ahora guarde la configuración del módulo haciendo clic en la marca de verificación en la esquina inferior derecha del modal.

Puede ver en Visual Builder que todavía hay algunos pequeños caminos por recorrer para que nuestro control deslizante de publicaciones se parezca al de la página de la sala de redacción de Facebook.

Eso no es nada de lo que un poco de CSS no pueda encargarse, y podremos ver cómo toma forma agregando el código restante a la Configuración de página directamente desde Visual Builder. Para llegar allí, haga clic en el icono Expandir configuración en la parte inferior central de la página, luego haga clic en el icono "Configuración de página".

Si está trabajando en un monitor más grande, le sugiero que mueva el modal al costado del Post Slider para que pueda ver lo que hace cada bit de código a medida que lo agregamos. Eso le ayudará a comprender mejor el CSS utilizado para diseñar nuestro módulo.

Primero, nos ocuparemos del tamaño y la posición de la imagen de fondo (actualmente oculta detrás de la superposición blanca), así como de la posición del texto y la superposición del control deslizante agregando el siguiente CSS al área de texto "CSS personalizado".

#fb-post-slider.et_pb_post_slider_0 .et_pb_slide {
    background-size: 70%;
    background-position: top right;
    padding-left: 0;
    overflow: visible!important;
}
 
#fb-post-slider.et_pb_slider_with_overlay .et_pb_slide_overlay_container {
    width: 30%;
    min-width: 300px;
}

Ahora nos encargaremos de ocultar el meta de nuestra publicación, con la excepción de la fecha, y de mover la posición de la fecha sobre el título. Para lograr esto, agregue el siguiente código a la entrada de texto CSS personalizado justo debajo del código ingresado anteriormente.

#fb-post-slider .et_pb_slide_content .post-meta {
    height: 0px;
    overflow: hidden
}
#fb-post-slider .et_pb_slide_content .post-meta .published {
    position: absolute;
    top: 32px;
    left: 35px;
    color: #898f9c;
    font-size: 16px
}

Estamos casi allí con solo algunas excepciones menores. Notarás que cuando pasas el cursor sobre nuestro módulo Post Slider, aparecen tanto la flecha anterior como la siguiente. En el control deslizante de la sala de redacción de Facebook, solo aparece la siguiente flecha. Eso se soluciona fácilmente agregando el siguiente CSS a la entrada de texto CSS personalizado justo debajo del código ingresado anteriormente.

#fb-post-slider .et-pb-arrow-prev {
    display: none
}

Ahora necesitamos reposicionar los puntos de navegación debajo del control deslizante con el siguiente código. Por cierto, también notará que establecer la propiedad de desbordamiento del control deslizante en visible revela el efecto 3D que creamos anteriormente para la etiqueta "Historias principales" que envuelve la esquina superior derecha.

#fb-post-slider.et_pb_post_slider_0 .et-pb-controllers a {
    height: 8px;
    width: 8px;
    order-radius: 50%
}
#fb-post-slider.et_pb_slider {
    overflow: visible!important
}

Finalmente, este último fragmento de código cambiará la animación de nuestro control deslizante para que se asemeje más a nuestro control deslizante de modelo. Aunque no es una combinación perfecta, es lo más cercano que podría estar sin entrar en las soluciones de jQuery. También hay algunas consultas de medios para que nuestro control deslizante sea un poco más receptivo.

.et-pb-active-slide .et_pb_slide_description {
    animation-name: fadeIn;
}
.et_pb_slide.et-pb-active-slide {
    transition: opacity 2.5s!important
}
 
@media all and (max-width: 1252px) {
    #fb-post-slider.et_pb_post_slider_0 .et_pb_slide {
        background-size: 90%
    }
}
@media all and (max-width: 980px) {
    #fb-post-slider.et_pb_post_slider_0 .et_pb_slide {
        background-size: 100%;
        background-position: top center;
    }
}

Ahora puede guardar la página haciendo clic en el botón Guardar en la esquina inferior derecha de su pantalla. Una vez que se guarda la página, salga del constructor visual para ver el control deslizante de la publicación final, inspirado en el control deslizante de la publicación en la página de la sala de redacción de Facebook.

Pensamientos finales

Bueno, ya sea que este diseño en particular le haya resultado útil o no, espero que haya proporcionado una visión detallada de algunas de las configuraciones más avanzadas dentro del Módulo Post Slider de Divi, y que haya despertado su imaginación sobre lo que es posible.