Esta publicación es la parte 1 de 5 en nuestra miniserie titulada 5 formas creativas de diseñar el módulo deslizante de publicación Divi . ¡Estén atentos esta semana para conocer los cinco ejemplos únicos del módulo Post Slider de Divi, con un tutorial sobre cómo lograr cada uno!
Los controles deslizantes de publicación son un elemento de diseño de uso común para publicaciones en línea. Son una excelente manera de enfatizar publicaciones recientes o categorías de publicaciones específicas. Los controles deslizantes de publicación presentan su contenido a su audiencia en lugar de esperar a que lo encuentren. La apariencia del control deslizante de su publicación a menudo determinará si su audiencia se siente atraída o no a leer una publicación.
El módulo deslizante Divi Post se ve muy bien incluso con su configuración predeterminada, pero habrá situaciones que requerirán que modifiques su apariencia. Esta serie explorará cinco diseños diferentes de controles deslizantes de publicaciones que se encuentran en algunas publicaciones en línea populares, y cómo se pueden crear diseños similares utilizando el Módulo de control deslizante de publicaciones de Divi.
¡Echemos un vistazo al diseño que haremos hoy!
La primera imagen a continuación muestra el módulo deslizante divi post con su configuración predeterminada y sin imagen destacada, mientras que la segunda es una modificación creada con solo algunos ajustes en la configuración y algunos CSS personalizados.
Antes
Después
Cómo diseñar el control deslizante de publicación de Divi como el control deslizante de publicación de Design Milk
Suscríbete a nuestro canal de Youtube
El concepto y la inspiración
La inspiración para nuestro primer estilo post-slider proviene de Design Milk , una revista en línea dedicada a las tendencias del estilo moderno. Design Milk es una publicación popular entre diseñadores de interiores, arquitectos y artistas, y ha aparecido en The San Francisco Chronicle, LA Times, Time Out New York y otros. El control deslizante de publicación en el sitio web de Design Milk es simple y elegante y proporciona un buen punto de partida para esta serie.
Preparación de los elementos de diseño
En preparación para este diseño, deberá crear algunas publicaciones de blog. Idealmente, ya habrá creado algunos, pero si solo está haciendo este tutorial como un ejercicio, puede crear algunos de manera muy simple con un poco de texto de lorem ipsum.
También deberá asegurarse de haber seleccionado una imagen destacada para cada una de las publicaciones que aparecerán en el control deslizante. Si no está familiarizado con la configuración de imágenes destacadas, puede encontrar la configuración a lo largo del lado derecho y hacia la parte inferior de la página del editor de publicaciones.
Haga clic en el enlace «Establecer imagen destacada» en la parte inferior de la barra lateral derecha, luego elija o cargue una nueva imagen. Este control deslizante se verá mejor si cada una de las imágenes destacadas tiene el mismo tamaño. Elegí 800 px por 600 px para el mío, pero el tamaño exacto no es crítico.
También querrá agregar un extracto 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. Este diseño de control deslizante mostrará un extracto de su publicación como un subtítulo debajo del título, por lo que querrá que sea breve y agradable.
Implementando el Diseño con Divi
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 haciendo clic en «Páginas» en la barra lateral izquierda del administrador de WP, luego «Agregar nuevo». Ahora haga clic en el botón «Usar Divi Builder» y luego en «Cargar desde la biblioteca» y seleccione el diseño predefinido de Divi «Barra lateral derecha de la página». Este diseño es el más cercano al diseño general de la página de Design Milk .
Una vez que se carga el diseño, puede hacer clic en «Usar Visual Builder» para comenzar a realizar las modificaciones necesarias.
En caso de que seas nuevo en Visual Builder de Divi, hagamos un recorrido rápido por esta nueva e increíble herramienta. Mueva el mouse por la pantalla y observe los bordes y las barras de herramientas que aparecen cuando se desplaza sobre los distintos elementos de la página.
El código de colores es el mismo que el del Divi Builder . Las secciones serán azules, naranjas o moradas dependiendo de si son regulares, especiales o de ancho completo, respectivamente. Las filas siempre son verdes y los módulos siempre son grises.
Los iconos de la barra de herramientas se explican por sí mismos e incluyen información sobre herramientas en caso de que haya alguna duda sobre su función. También hay una barra de configuración principal en la parte inferior de la pantalla con el botón Guardar a la derecha y varias vistas receptivas disponibles a la izquierda. También será útil tener en cuenta que cmd+z (ctrl+z) proporciona varios niveles de deshacer por si acaso.
Agregar y configurar el módulo deslizante Divi Post
Comencemos eliminando el módulo de texto superior justo debajo del encabezado y reemplazándolo con un Módulo deslizante de publicación.
Configuración general
Nuestras modificaciones comienzan con la configuración «General», que es donde se encuentra por defecto después de agregar cualquier módulo nuevo.
- Adelante, establece el número de publicaciones y elige una categoría.
- Cambie «Mostrar publicación meta» a «No».
- Establezca el color del texto en «Oscuro».
- Cambie «Ubicación de la imagen» a «Izquierda».
Configuración de diseño
Ahora pasemos a la configuración en la pestaña Diseño.
- Establecer el relleno superior a 50px
- Establecer el relleno inferior a 40px
- Cambie el «Color personalizado de las flechas» a blanco (#FFFFFF)
- Cambie «Colores personalizados de Dot Nav» a negro (# 000000)
- Establezca la fuente del encabezado en mayúsculas y el tamaño en 25px
Ahora desplácese hasta la parte inferior y realice los siguientes cambios:
- Cambie «Usar estilos personalizados para el botón» a sí
- Establezca el tamaño del texto del botón en 13 px
- Establezca el color del texto del botón en negro
- Establezca el ancho del borde del botón en 1px
- Establecer el radio del borde del botón en 0
Pestaña CSS personalizada
Ahora deberá agregar algo de código a la pestaña CSS. Haga clic en la pestaña «CSS» en la parte superior del cuadro de configuración del módulo. Ahora asigne al control deslizante una ID de «dm-slider» escribiéndolo en la entrada de ID de CSS.
Ahora agregue el código CSS en las secciones de la siguiente manera:
Elemento principal:
|
01
|
border: 1px solid gray; |
Título de la diapositiva:
|
01
02
|
margin-top: 10px; font-family: Georgia, serif !important; |
Guarde sus cambios haciendo clic en el ícono de verificación en la parte inferior derecha del cuadro de configuración del módulo. Luego guarde la página haciendo clic en el botón «Guardar» en la parte inferior derecha de la página.
Puede ver en Visual Builder que nuestro módulo de publicación está comenzando a tomar forma, pero aún no ha llegado.
Agregar CSS personalizado a través de las opciones del tema Divi
Todavía necesitamos cambiar el tamaño y la posición de nuestra imagen, y cambiar nuestros puntos de navegación en rectángulos. Para lograr estos detalles finales, deberá ir a la configuración general de sus Opciones de tema. Para llegar allí, salga de Visual Builder y regrese a su panel de administración. Ahora, en la barra lateral izquierda hacia la parte inferior, haga clic en «Divi», que muestra la configuración de «Opciones de tema».
Desplácese hasta la parte inferior de la pantalla y agregue el siguiente fragmento de código en «CSS personalizado» y luego haga clic en «Guardar cambios».
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
/*MOVE IMAGE TO TOP LEFT EDGE OF SLIDER*/#dm-slider .et_pb_slide_image img { margin-top: 0px; margin-left: 0px; max-height: 100% !important;}#dm-slider .et_pb_slide { padding-left: 0px;}/* TURN DOTS INTO RECTANGLES */#dm-slider .et-pb-controllers a { width: 24px; height: 4px; margin-right: 4px; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px;}#dm-slider .et-pb-arrow-prev,#dm-slider .et-pb-arrow-next { background-color: rgba(0, 0, 0, .25); -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50% !important;}#dm-slider .et-pb-controllers { top: 30px !important; left: calc(47.25% + 20px)!important; width: 50%!important; height: 10px!important; text-align: left!important;} |
Ahora abra la página con su control deslizante de publicación y ahí lo tiene, una nueva apariencia para su control deslizante de publicación Divi inspirado en el que se encuentra en la página de inicio de Design Milk .
Mañana: cómo diseñar el módulo deslizante de publicación de Divi como el control deslizante de publicación de Bri + Co
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.
¡No lo olvides! Esta publicación es solo 1 de 5 en la miniserie «5 formas creativas de diseñar el módulo deslizante de publicación Divi». Si desea ver qué más se me ocurrió, asegúrese de regresar mañana, donde le mostraré cómo crear un control deslizante de publicación como el que se encuentra en el sitio web de fijngenoegen + Co ( brit.co ) .
¡Asegúrate de suscribirte a nuestro boletín de correo electrónico y canal de YouTube para que nunca te pierdas un gran anuncio, un consejo útil o un obsequio de Divi!