WordPress - usar columnas y lineas

usar columnas y lineas

Publicado por Silvana (1 intervención) el 31/07/2023 16:24:24

Necesito que mi sitio muestre en la pagina donde estan los integrantes con el formato de la imagen que subo, seria en la pagina dos columnas una para colocar imagen , debajo cargo , denajo titulo etc ; y la otra para poner una breve descripcion , este se tiene que replicar en cada integrante que agregue y deben estar separdos mediante una linea horizontal , gracias
2023-07-31-11_14_19-Window

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Diseño de página de integrantes con dos columnas y línea horizontal

Publicado por Alejandro (169 intervenciones) el 17/04/2024 23:45:42

Para lograr el diseño de dos columnas con una imagen, título, descripción y una línea horizontal separando cada integrante en tu página de integrantes, puedes utilizar HTML y CSS. Aquí te proporciono un ejemplo de cómo puedes estructurar tu código:

HTML:

<div class="integrante">

  <div class="columna-imagen">

    <img src="ruta-de-la-imagen" alt="Nombre del integrante">

    <h3>Nombre del integrante</h3>

    <p>Cargo</p>

    <p>Título</p>

  </div>

  <div class="columna-descripcion">

    <p>Breve descripción del integrante</p>

  </div>

</div>

<hr>

CSS:

.integrante {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  margin-bottom: 20px;

.columna-imagen {

  flex: 1;

  text-align: center;

.columna-imagen img {

  width: 200px;

  height: 200px;

  object-fit: cover;

  border-radius: 50%;

.columna-descripcion {

  flex: 2;

hr {

  border: none;

  border-top: 1px solid #ccc;

  margin: 20px 0;

Debes reemplazar "ruta-de-la-imagen" con la ruta de la imagen de cada integrante. Puedes agregar este código en el editor de texto de WordPress en la página de integrantes, asegurándote de cambiar la información correspondiente para cada integrante.

Este código creará una estructura de dos columnas, donde la columna de la izquierda contendrá la imagen, el nombre, el cargo y el título del integrante, y la columna de la derecha contendrá la breve descripción. La línea horizontal se creará con el elemento <hr>.

Recuerda que puedes personalizar el diseño y los estilos según tus necesidades, modificando el CSS proporcionado.

Espero que esto te ayude a lograr el diseño deseado en tu página de integrantes.

¡Buena suerte con tu sitio web, Silvana!

Saludos, Alejandro.

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar