¿Te gustaría publicar publicaciones de blog en Divi?
Hoy le mostraremos una forma creativa de presentar publicaciones de blog como tarjetas flotantes en Divi. Cada blog o Sitio web debe aspirar a tener una excelente contenido atractivo y quizás igualmente importante o accesible.
Una forma de garantizar que el contenido permanece accesible para los usuarios es hacerlo flotar en la página.
Y para los bloggers, les mostraremos cómo presentar artículos de tu blog como tarjetas flotantes para que permanezcan visibles mientras se desplaza la página.
Vamos.
vista
Aquí hay una breve descripción del resultado que obtendremos al final de este tutorial.
Lo que necesitas para empezar
Antes de comenzar a crear este diseño en Divi, deberá hacer lo siguiente:
- Cree una nueva página, asigne un nombre relevante y haga clic en 'Usar Divi Builder'
- Seleccione la opcion Elija el diseño".
- Buscar y seleccionar el diseño 'página de inicio de blogger'.
- Haga clic en el botón Elija el diseño para cargarlo en la página.
Después de eso, tendrá el diseño prefabricado listo para usar en este tutorial.
Cómo crear tarjetas flotantes para publicaciones de blog usando el módulo de blog de Divi
Ahora que el diseño está cargado en la página, estamos listos para crear las tarjetas flotantes de nuestra publicación de blog.
Lea también: Cómo crear un encabezado global fijo en Divi
Cree una nueva sección en la parte inferior del diseño.
Luego agregue una nueva fila de una columna a la sección.
Agregue un módulo de Blog y un título a la fila/columna
En lugar de crear un nuevo módulo de Blog aquí, desplácese hacia arriba y busque el módulo de Blog existente que muestra tres publicaciones de blog (está en la tercera sección cerca del medio de la página). Abierto " Otros parámetros del módulo »Y seleccione« Copia del módulo".
Luego pegue el módulo en la nueva fila de una columna que creamos en la parte inferior de la página haciendo clic con el botón derecho en el ícono gris más y seleccionando " Módulo de pegado".
A continuación, agregaremos un título sobre las publicaciones de nuestro blog que también flotará sobre las tarjetas del blog. Para hacer esto, copie el módulo de texto existente con el texto de título pequeño " Estilo de vida".
Luego pegue el módulo justo encima del nuevo módulo Blog que acabamos de agregar.
A continuación, edite el texto del título para describir el tipo de publicaciones de blog que desea presentar. En este ejemplo, solo usaremos " Destacados".
Personalización de la línea con posición fija y ancho personalizado
Queremos reducir el tamaño de las publicaciones de blog flotantes para que no ocupen demasiado espacio en la página cuando tienen una posición fija. Sería entretenido. Para hacer esto, abra la configuración de la línea y actualice lo siguiente:
Para hacer que los elementos floten, debemos darle a la línea una posición fija. En la pestaña Avanzado, actualice lo siguiente:
- Posición: Fija
- Ubicación: Abajo a la derecha
- Desplazamiento vertical: 20px
- Desplazamiento horizontal: 20 px
- Índice Z: 12
Módulo de blog actualizado con contenido mínimo y sombra de caja
Generalmente, el módulo Blog ya tiene un diseño de cuadrícula de tres columnas y un estilo agradable que viene con el paquete de diseño que hemos elegido. Pero hay algunas cosas que debemos hacer.
Ver también: Cómo crear un encabezado global con formulario de inicio de sesión en Divi
En primer lugar, necesitamos reducir el tamaño de los mapas (verticalmente) y eliminar algunos elementos de contenido.
Para hacer esto, abra la configuración del blog y oculte todos los elementos excepto la imagen destacada. Esto hará que la publicación muestre solo la imagen y el título destacados.
En la pestaña Estilo, configure la sombra del cuadro de la siguiente manera:
- Cuadro de sombra: Ver captura de pantalla
- Fuerza de desenfoque de sombra de cuadro: 28px
- Color de fuente de los subtítulos: rgba(0,0,0,0.19)
vista
Aquí hay una vista previa del resultado que tenemos hasta ahora.
Hacer que la línea de artículos aparezca al pasar el mouse
Finalmente, podemos agregar un agradable efecto de desplazamiento que anime a los usuarios a interactuar con los artículos flotantes.
Lea también: Cómo crear la página del blog con el módulo Blog en Divi
Configuración de línea abierta y opciones de actualización:
para la oficina
- Transformar: 50%
Para estado flotante
- Transformar: 0%
Inicialmente, esto traerá toda la línea fuera de la ventana del navegador en un 50%. Una vez que el usuario se desplaza sobre la línea, vuelve a estar completamente visible.
Ocultar fila en el móvil
A menos que desee publicar una sola publicación de blog, no tiene sentido publicar esas publicaciones de blog en dispositivos móviles. Probablemente ocuparía demasiado espacio y causaría problemas al intentar desplazarse.
Ver también: Cómo agregar un formulario de contacto a un encabezado global en Divi
Para ocultar mapas en dispositivos móviles, abra la configuración de la sección y desactive la visibilidad de la sección en el teléfono y la tableta.
Resultado final
¡¡¡Descarga DIVI ahora!!!
Conclusión
Listo ! Le hemos mostrado en este tutorial una forma creativa y original de presentar las publicaciones de blog que desea resaltar.
Si tienes alguna inquietud o sugerencia, encuéntranos en la sección de comentarios para discutirlo
Sin embargo, también puedes consultar nuestros recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet, consulte nuestra guía sobre Creación de blog de WordPress o el de Divi: el mejor tema de WordPress de todos los tiempos.
Pero mientras tanto, comparte este artículo en tus diferentes redes sociales.
...
