Esta publicación es la parte 2 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!
Una de las decisiones que se enfrentan al usar un control deslizante de publicación en el diseño de su sitio web es elegir qué elementos de publicación presentar al usuario. Los elementos de publicación a considerar son el título, el meta, el extracto, la imagen destacada y el contenido de la publicación. El control completo sobre los elementos deslizantes individuales le dará una mayor flexibilidad en su diseño. El proyecto de hoy demuestra cómo personalizar el módulo Divi Post Slider usando CSS para mostrar (u ocultar) y diseñar elementos de publicación muy específicos.
¡Entremos en ello!
Antes
Después
Cómo diseñar el módulo deslizante de publicación de Divi como el control deslizante de publicación de fijngenoegen + Co
Suscríbete a nuestro canal de Youtube
El concepto y la inspiración
La inspiración del control deslizante de publicación de hoy proviene de fijngenoegen + Co , una empresa de medios y comercio que promueve la creatividad a través de contenido inspirador, kits de bricolaje y cursos en línea. Brit + Co , fundada en 2011 por Brit Moran, afirma llegar a más de 10 millones de personas cada mes a través de su sitio web brit.co (nota: el estilo del control deslizante ha cambiado en el sitio web brit.co desde que se creó esta publicación).
A primera vista, este control deslizante de publicación no parece complicado, ya que muestra una imagen destacada como fondo con la categoría y el título de la publicación en una superposición. El control deslizante de publicaciones de fijngenoegen + Co está diseñado para presentar tres publicaciones cada día, con un número destacado a la izquierda del título de cada publicación.
Preparación de los elementos de diseño
Antes de comenzar, asegúrese de tener tres publicaciones con imágenes destacadas. También deberá crear una categoría de publicación llamada «Lecturas obligadas de hoy» y asignar sus tres publicaciones a esa categoría. Para crear una categoría desde su panel de WordPress, desplace el cursor sobre «Publicaciones» en la barra lateral izquierda, luego haga clic en «Categorías». Ahora agregue la nueva categoría en la entrada «Nombre» en «Agregar nueva categoría» y luego haga clic en el botón «Agregar nueva categoría» en la parte inferior.
Ahora agregue cada una de sus publicaciones a la categoría «Lecturas obligadas de hoy». Esto se puede hacer fácilmente usando la función de «Edición rápida» de WordPress. Para llegar allí, haga clic en «Publicaciones» en la barra lateral izquierda, luego coloque el cursor sobre el nombre de la publicación y haga clic en «Edición rápida». En «Categorías», agregue una marca junto a «Lecturas obligadas de hoy» y desmarque todas las demás categorías, incluida «Sin categorizar».
Este control deslizante está diseñado para publicaciones con imágenes destacadas, por lo que si aún no lo ha hecho, agregue una imagen destacada para cada una de sus publicaciones. Sus imágenes deben ser lo suficientemente grandes como para llenar el tamaño del control deslizante de la publicación. Usé 800px X 600px.
Antes de guardar su publicación, hay una última cosa que debe hacer. Notarás que el control deslizante de publicación en fijngenoegen + Co no muestra ningún contenido o extracto de la publicación. El módulo Post Slider de Divi no nos ofrece la opción de no mostrar ningún contenido, así que utilizaré una solución sencilla. En Extracto en la columna central de su página de edición de publicaciones, elimine cualquier texto y agregue solo un espacio. Ahora guarde su publicación haciendo clic en «Publicar» en la barra lateral derecha.
Implementando el Diseño con Divi
Ahora que se han agregado sus publicaciones, puede comenzar a crear su nuevo diseño de control deslizante de publicación en Divi . Por el bien de este tutorial, agregue una nueva página pasando el cursor sobre «Nuevo» en el menú superior de su tablero y haciendo clic en «Página». Asigne un nombre a su página y haga clic en «Usar The Divi Builder».
Una vez en el constructor Divi, haga clic en «Insertar columna (s)»
Ahora selecciona la opción ⅔ ⅓.
Una vez que haya agregado sus columnas, vaya al generador visual para agregar y modificar su módulo Divi Post Slider. Para llegar allí, haga clic en «Usar Visual Builder» justo sobre Divi Builder.
Ahora agregue un módulo Post Slider en la primera columna haciendo clic en el ícono gris «Agregar módulo» y seleccionando «Post Slider» de las opciones disponibles.
Configuración general
Después de agregar el módulo, estará en la pestaña «General» de la configuración del módulo de publicación.
Establezca «Número de publicaciones» en 3 y seleccione «Lecturas obligadas de hoy» en «Incluir categorías».
Luego, desplácese hacia abajo hasta «Texto del botón» y cambie el texto a «Leer publicación».
Desplácese hacia abajo y cambie el «Color del texto» a «Oscuro».
Ahora configure «Usar superposición de texto» en «Sí», y haga que el «Color de superposición de texto» sea blanco con un 90% de opacidad.
Ahora haga clic en «Eliminar sombra interna» para cambiar la configuración a «Sí».
Configuración de diseño
A continuación, vaya a la configuración de «Diseño» haciendo clic en la pestaña en la parte superior del cuadro «Configuración del control deslizante de publicación».
Establezca «Relleno superior» en 20 px y «Relleno inferior» en 150 px.
Establezca «Radio de borde de superposición de texto» en 0px. Establezca «Color personalizado de flechas» en #ffffff. Establezca «Color personalizado de Dot Nav» en #929292.
Establezca la «Fuente del encabezado» en Roboto Light. (El control deslizante Brit + Co usa la fuente premium «Proxima Nova», pero me quedaré con las fuentes gratuitas para este tutorial). Cambie el «Tamaño de fuente del encabezado» a 24px y el «Color del texto del encabezado» a #3d3d3d.
Establezca «Fuente meta» en cursiva Droid Serif, «Tamaño de fuente meta» en 20 px y «Color de texto meta» en # 8c8c8c.
Configure «Usar estilos personalizados para el botón» en «sí», luego configure el «Tamaño del texto del botón» en 14px y el Color del texto del botón en # 8c8c8c.
CSS personalizado
Ahora muévase a la configuración de CSS haciendo clic en la pestaña «CSS» en la parte superior del cuadro «Configuración del control deslizante de publicación».
Dale a tu módulo una ID de brit-co-slider agregando el texto al cuadro de entrada debajo de «CSS ID». Esto nos permitirá agregar estilos a este módulo específico sin afectar ningún otro elemento en la página.
Ahora agregue el código CSS a los cuadros de entrada de la siguiente manera:
Elemento principal:
|
01
02
03
04
|
width: calc(100% - 20px); max-height: 470px; border:1px solid #D7D7D7; border-bottom: none; |
Descripción de la diapositiva:
|
01
02
|
text-align: left; margin-left: 0; |
Botón deslizante:
|
01
02
|
top: -60px; right: -240px |
Controladores de diapositivas:
|
01
02
03
|
position: absolute; bottom: -14px; background: #ffffff; |
Después de agregar el CSS, guarde su configuración haciendo clic en el botón verde Guardar con la marca de verificación blanca en la esquina inferior derecha del cuadro Configuración del módulo.
Ahora deberá agregar un código CSS adicional para los elementos que no están disponibles a través de la configuración del módulo. Ayer, agregamos este código a través de «Opciones de tema Divi», pero hoy agregaremos nuestro CSS a la configuración de la página. Esta es la mejor opción para los estilos que requieren mucho código adicional y solo se usan en una sola página. El CSS colocado en «Configuración de la página» solo se inyecta en la página que lo requiere en lugar de en todas las páginas del blog. Para acceder a «Configuración de la página», haga clic en el ícono morado en la parte inferior de la pantalla y luego haga clic en el ícono de configuración de la página en forma de engranaje.
Ahora haga clic en la pestaña CSS y pegue el siguiente código CSS en el área de entrada «Custom Css». Dado que aquí hay bastante código, incluí comentarios para aclarar el propósito de cada sección.
|
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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
sesenta y cinco
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
|
/*SIZE AND POSITION TEXT AREA OF SLIDER*/#brit-co-slider .et_pb_container { width: 350px !important; float: left;}/*HIDE POST META */#brit-co-slider .et_pb_slide_content .post-meta { color: rgba(0, 0, 0, 0) !important;}#brit-co-slider .author { visibility: hidden;}/*REVEAL AND REPOSITION CATEGORY*/#brit-co-slider .et_pb_slide_content .post-meta a { color: color: rgba(0, 0, 0, 1) !important;}#brit-co-slider p.post-meta { position: absolute; top: 5px; left: 15px;}#brit-co-slider .et_pb_slide_description { position: relative; left: -55px;}/*REMOVE ANIMATION FROM AND STYLE ARROWS*/#brit-co-slider .et-pb-arrow-prev,#brit-co-slider .et-pb-arrow-next { -webkit-transition: all 0 ease-in-out; -moz-transition: all 0 ease-in-out; -o-transition: all 0 ease-in-out; transition: all 0 ease-in-out;}#brit-co-slider .et_pb_slider:hover .et-pb-arrow-prev { left: -5px; opacity: 1;}#brit-co-slider .et_pb_slider:hover .et-pb-arrow-next { right: -5px; opacity: 1;}#brit-co-slider .et-pb-slider-arrows a { background-color: #000000; background-color: rgba(0, 0, 0, .4); padding: 10px 2px;}/*ADD STYLES TO CONTENT BLOCK*/#brit-co-slider .et_pb_slide_content { border: 1px solid #cdcdcd;}#brit-co-slider .et_pb_slide_title { background: transparent !important;}#brit-co-slider h2.et_pb_slide_title { display: block; position: absolute; top: 35px; left: 50px; line-height: 1.3em;}#brit-co-slider div.et_pb_slide_content { min-height: 180px;}#brit-co-slider .et_pb_slide { background-size: 100%; background-position: top left;}/*CREATE AND STYLE POST NUMBERS*/@import "https://fonts.googleapis.com/css?family=Roboto+Slab:300";#brit-co-slider .et_pb_slides div:before { position: absolute; display: block; content: ""; top: 100px; left: 10px; font-family: 'Roboto Slab', serif; font-size: 72px; opacity: 0; transition: opacity 2s;}@-webkit-keyframes fade-in { 0% { opacity: 0; top: 120px; } 100% { opacity: 1; top: 100px; }}@-moz-keyframes fade-in { 0% { opacity: 0; top: 150px; } 100% { opacity: 1; top: 100px; }}@-o-keyframes fade-in { 0% { opacity: 0; top: 150px; } 100% { opacity: 1; top: 100px; }}@keyframes fade-in { 0% { opacity: 0; top: 150px; } 100% { opacity: 1; top: 100px; }}#brit-co-slider .et_pb_slides div:nth-child(1)::before { content: "1";}#brit-co-slider .et_pb_slides div:nth-child(2)::before { content: "2";}#brit-co-slider .et_pb_slides div:nth-child(3)::before { content: "3";}#brit-co-slider .et_pb_slides .et-pb-active-slide:before { z-index: 3; -webkit-animation: fade-in 1.5s 1 cubic-bezier(.37, .34, .89, 1.08); -moz-animation: fade-in 1.5s 1 cubic-bezier(.37, .34, .89, 1.08); -o-animation: fade-in 1.5s 1 cubic-bezier(.37, .34, .89, 1.08); animation: fade-in 950ms 1 cubic-bezier(.37, .34, .89, 1.08); animation-fill-mode: forwards; animation-delay: 700ms;}/* TURN DOTS INTO BARS AND STYLE */#brit-co-slider .et-pb-controllers a { width: 33%; height: 10px; margin-right: .5%; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0;}#brit-co-slider .et-pb-controllers a:nth-child(3) { margin-right: 0px;}#brit-co-slider .et-pb-controllers:before { display: block; content: ""; width: 100%; height: 3px; border-top: 1px solid #d2d2d2;} |
Una vez que haya agregado el CSS, guarde su página haciendo clic en «Guardar borrador» o «Publicar» en la parte inferior derecha de su pantalla.
El resultado final
Ahora salga de Visual Builder, actualice su página y ahora debería ver un aspecto nuevo y agradable para su Divi Post Slider que se parece al del sitio web fijngenoegen + Co.
Mañana: cómo diseñar el módulo deslizante de publicación de Divi como el control deslizante de publicación de Tesco Living
¡No lo olvides! Esta publicación es solo 2 de 5 en la miniserie «5 formas de diseñar y usar el módulo deslizante de publicación de Divi». Si esta publicación le resultó útil, asegúrese de regresar mañana cuando veamos un control deslizante de publicación en el blog de Tesco Living y también experimentemos un poco con el uso de unidades de ancho de ventana gráfica para un diseño fluido.
¡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!