Cómo diseñar el módulo de control deslizante de publicaciones de Divi como el control deslizante de publicaciones de Facebook Newsroom

Los controles deslizantes de publicación son una solución elegante para presentar una variedad de contenido a sus lectores. Las publicaciones que se resaltan se pueden organizar de varias maneras desde las categorías hasta la fecha. En el proyecto de hoy, estamos viendo un ejemplo de la página del blog de Facebook Newsroom que presenta una categoría de publicaciones denominada «Historias 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 Divi Post Slider.

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 algunos CSS personalizados.

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, una mirada rápida a este blog ampliará su perspectiva. Con $8.800 millones en ingresos el último trimestre y 1.230 millones de usuarios activos por día, el control deslizante de publicaciones de blog en la página de Facebook Newsroom 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 es posible que desee 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á un extracto de su publicación si tiene uno, pero usará una parte de su contenido real si no lo tiene.

Implementando el Diseño con Divi

Suscríbete a nuestro canal de Youtube

Si 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 deslizante de publicación 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 configure «Usar extracto posterior si está definido» en sí, y configure «Longitud del extracto automático» 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 de diseño:

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

Cambie «Color personalizado de Dot Nav» a #576d90.

Cambie el «Color del texto» a Oscuro.

Ahora haga que la «Fuente del encabezado» esté en negrita, configure el «Tamaño de fuente del encabezado» en 34 px, configure el «Color del texto del encabezado» en # 3b5998 y la «Altura de la línea del encabezado» en 42 px.

Ahora configure 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 16 px, el «Ancho del borde del botón» a 0 px, el «Color del texto del botón flotante» a # 666666 y el «Color de fondo del botón flotante» 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 debajo de CSS ID, 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 se pueden mostrar en la página.

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

Antes

01
02
03
04
05
06
07
position:absolute;
top:57px;
right:-6px;
content:"";
border:4px solid transparent;
border-top-color:#2C477F;
border-left-color:#2C477F;

Elemento principal

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

Después

01
02
03
04
05
06
07
08
09
10
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

01
02
03
04
05
06
07
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 la diapositiva

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

Botón deslizante

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

Controladores de diapositivas

01
margin-bottom:-55px;

Deslizar flechas

01
02
03
04
05
06
07
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 un poco de camino por recorrer para que nuestro control deslizante de publicación se vea como el de la página de Facebook Newsroom.

Eso no es nada que un poco de CSS no pueda resolver, y podremos verlo tomar forma agregando el código restante a la configuración de la página directamente desde Visual Builder. Para llegar allí, haga clic en el ícono Expandir configuración en la parte inferior central de la página, luego haga clic en el ícono «Configuración de página».

Si está trabajando en un monitor más grande, le sugiero que mueva el modal al costado del Control deslizante de publicación para que pueda ver qué hace cada bit de código a medida que lo agregamos. Eso lo 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 del control deslizante y la superposición agregando el siguiente CSS al área de texto «CSS personalizado».

01
02
03
04
05
06
07
08
09
10
11
#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 ocuparemos de ocultar la 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.

01
02
03
04
05
06
07
08
09
10
11
#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 las flechas anterior y 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 de CSS personalizado justo debajo del código ingresado anteriormente.

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

Ahora necesitamos cambiar la posición de 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 se envuelve alrededor de la esquina superior derecha.

01
02
03
04
05
06
07
08
#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 coincida más con nuestro control deslizante modelo. Aunque no es una combinación perfecta, es lo más cercano que pude estar sin entrar en las soluciones de jQuery. También hay algunas consultas de medios para hacer que nuestro control deslizante responda un poco más.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
.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 guardó la página, salga del generador visual para ver el control deslizante de publicación terminado, inspirado en el control deslizante de publicación en la página de la Sala de prensa de Facebook.

Pensamientos finales

Bueno, ya sea que haya encontrado útil este diseño en particular o no, espero que haya brindado una visión detallada de algunas de las configuraciones más avanzadas dentro del módulo Post Slider de Divi, así como despertado su imaginación en cuanto a lo que es posible.