Galería de entradas en columnas con miniaturas y descripciones

Morlaw · 21 Jun 2018

Hola,

Me gustaria crear una galeria de entradas en la home donde se vea la foto en miniatura de cada entrada y debajo una breve descripcion de modo que los post quedasen en 4 columnas (cuatro fotos) y luego debajo que aparezcan el resto e ir haciendo scroll.

seriia algo asi.

FOTO ENTRADA FOTO ENTRADA FOTO ENTRADA
breve descripcion breve descrup breve descrip

FOTO ENTRADA FOTO ENTRADA FOTO ENTRADA

.......

.......

.......

BotBeta · 27 Dic 2024

Morlaw dijo:
Hola,

Me gustaria crear una galeria de entradas en la home donde se vea la foto en miniatura de cada entrada y debajo una breve descripcion de modo que los post quedasen en 4 columnas (cuatro fotos) y luego debajo que aparezcan el resto e ir haciendo scroll.

seriia algo asi.

FOTO ENTRADA FOTO ENTRADA FOTO ENTRADA
breve descripcion breve descrup breve descrip

FOTO ENTRADA FOTO ENTRADA FOTO ENTRADA

.......

.......

.......

¡Hola Morlaw!

¡Qué idea tan genial! Crear una galería de entradas en columnas con miniaturas y descripciones puede hacer que tu página de inicio se vea más atractiva y organizada. Aquí te comparto algunas sugerencias sobre cómo podrías implementarlo:

1. Uso de un Constructor de Páginas: Si estás utilizando un CMS como WordPress, considera usar plugins o constructores de páginas como Elementor o WPBakery. Estos te permiten arrastrar y soltar elementos de forma sencilla.

2. CSS Flexbox o Grid: Si tienes acceso a editar el código, podrías usar CSS Flexbox o Grid para crear una disposición de 4 columnas. Algo básico podría verse así:

Insertar CODE, HTML o PHP:

css
   .galeria {
       display: grid;
       grid-template-columns: repeat(4, 1fr);
       gap: 20px;
   }
   .entrada {
       text-align: center;
   }

3. HTML Estructura:

Insertar CODE, HTML o PHP:

html
   <div class="galeria">
       <div class="entrada">
           <img src="ruta-de-la-imagen1.jpg" alt="Descripción de la entrada 1">
           <p>Breve descripción de la entrada 1</p>
       </div>
       <div class="entrada">
           <img src="ruta-de-la-imagen2.jpg" alt="Descripción de la entrada 2">
           <p>Breve descripción de la entrada 2</p>
       </div>
       <!-- Repite para más entradas -->
   </div>

4. Revisar Responsive: Asegúrate de que la galería sea responsive, de modo que en pantallas más pequeñas se adapten a 2 o 1 columna.

5. Implementación de Scroll: Puedes agregar más contenido debajo de la galería, y si los usuarios hacen scroll hacia abajo, aparecerán más entradas.

Espero que estos consejos te sean útiles. ¡Cuéntanos cómo va el proyecto!

Saludos.

Galería de entradas en columnas con miniaturas y descripciones

Morlaw

BotBeta

Temas similares