Tutorial Divi: Igualar la altura de cada elemento del módulo blog en rejilla

Divi post grid

¿Cómo hago para que la rejilla del blog tenga la misma altura? Esta es una pregunta muy común para los usuarios de Divi configurar el módulo Blog. No hay otros tutoriales sobre esto, así que como siempre pensamos que deberíamos proporcionar una gran solución para esta necesidad. Así que en este tutorial, te mostraré cómo igualar la altura de la cuadrícula del módulo Blog Divi.

Antes de llegar al fragmento de código real, primero tenemos que ir al módulo Blog que queremos hacer igual altura y añadir una clase CSS personalizada. Esta clase CSS nos permitirá apuntar a cualquier módulo Blog en particular donde desea que el efecto de igualdad de altura a tener lugar, y no afectará a ningún otro. Para añadir esto, ve a la configuración del módulo Blog a la pestaña Avanzado y abre el selector ID y clases CSS. Allí debe añadir la clase “pa-blog-equal-height” al campo de entrada Clase CSS. Esta misma clase se utilizará en el siguiente fragmento de código para que coincida y vincule el código a este módulo.

Ahora llegamos a la gran parte del tutorial, el código que hace todo el trabajo. Esto es jQuery y a primera vista es un snippet más grande de lo normal, pero lo explicaré todo claramente más abajo. Por ahora, sigue adelante y añade el código a tu sitio web.

Divi post tamaño de la imagen

Uno de los elementos de diseño de pie de página más interesantes es un pie de página revelador. Un pie de página revelador es cuando su pie de página permanece bloqueado en su lugar, pero no se ve hasta que la página web se desplaza más allá de él para revelar el pie de página debajo. Es como si el pie de página estuviera detrás de una cortina. Cuando se levanta la cortina, aparece el pie de página. Una de las maneras más fáciles de hacer un pie de página revelador es mediante el uso de un plugin de terceros llamado Pie de página revelador para Divi y Extra.

  Parada de Actualización – Hecho

Un pie de página revelador puede ser creado a mano si quieres profundizar en CSS. El CSS se puede añadir al personalizador del tema, a las opciones del tema o a una sola página. También añadirías el código para cambiar la altura del pie de página. Incluso podría añadir un toque extra de código para un efecto de sombra de caja a la última sección para que se destaque de la zona de pie de página. Para crear un pie de página revelador a mano consulta el artículo Cómo crear un pie de página revelador con Divi. Si quieres un poco de inspiración para los diseños de pie de página, ver el artículo 15 Divi sitios web con excelente diseño de pie de página.

Por supuesto, la ventaja de un plugin es que usted no tiene que manejar ningún código en absoluto. Esto es ideal para aquellos que no tienen las habilidades o no quieren lidiar con el código. En este artículo veremos cómo crear un pie de página revelador tanto para Divi como para Extra usando este plugin.

Alinear verticalmente el texto en divi builder

El plugin Divi FilterGrid crea una cuadrícula filtrable de entradas o cualquier tipo de entrada personalizada en un diseño de cuatro columnas utilizando CSS Grid. Puedes cambiar fácilmente el número de columnas en la pestaña Diseño de la configuración del módulo mediante un control deslizante. Para muchos usuarios, una cuadrícula perfectamente alineada de entradas de igual altura y anchura es un sitio hermoso de contemplar. Si no eres una de esas personas, te mostraremos cómo puedes añadir un poco de variedad a tu cuadrícula.

  El código es poesía CSS es arte

Antes de empezar, es posible que desee leer nuestra documentación sobre cómo CSS Grid se implementa en el plugin Divi FilterGrid. Esto no es en absoluto una guía definitiva sobre CSS Grid, pero puede ayudarle a entender cómo vamos a modificar el diseño de la cuadrícula en el tutorial a continuación.

Los resultados son exactamente los mismos. Utilizamos el CSS superior para que sea fácil aumentar o disminuir el número de columnas en la configuración del módulo y ver los resultados en el Constructor Visual. Pero avanzando en este tutorial, nos referiremos al CSS inferior porque creará la misma rejilla de cuatro columnas.

El fr representa una fracción del espacio disponible en el contenedor de la rejilla. En el CSS de arriba, estamos definiendo cuatro columnas en nuestra rejilla, cada una con una fracción igual (columnas de igual anchura). Podemos añadir tantos 1fr como queramos para crear columnas adicionales. También podemos cambiar el 1 por cualquier valor que queramos para hacer algunas columnas más anchas que otras. También podríamos utilizar valores porcentuales en lugar de fracciones.

Blog Divi

Esto es una especie de diseño libre de la mitad y el fragmento de CSS medio, es un blog de rejilla mirada se me ocurrió cuando se experimenta para un futuro tema Divi niño. Quién sabe cuándo se va a hacer aunque lol, así que pensé que sólo compartir esta mirada ahora. Es simple y limpio, debe encajar con una gran cantidad de sitios existentes después de que los colores se cambian.

  Quédate en casa y cuídate – Y para tus proyectos web 3 meses de hosting por menos de 1 euro

Por lo general, cuando el estilo de la cuadrícula del blog que terminan con otras áreas que no coinciden y hay que empezar a meterse con FTP y archivos de temas hijo, o utilizar un plugin inyector. He añadido CSS para hacer que la categoría, etiqueta, y las páginas de resultados de búsqueda coinciden por lo que no tiene que meterse con nada de eso

min-height: 6em; /* básicamente le estoy diciendo a hacer el título por lo menos 4 líneas de alto (altura de la línea de 1,2em x 4 = 4,8em) para que los puestos son la altura de la igualdad, puede que tenga que jugar con este número en función de su mayor longitud del título del puesto y la fuente */

max-height: 250px; /* mantiene las imagenes a la misma altura ya que estas paginas no dimensionan automaticamente la imagen destacada como lo hace el modulo blog, junto con el overflow oculto arriba oculta lo que no cabe */