Componente Values (Dts-solar)

Mosaico

martes 9 diciembre 2025

Este componente representa una sección de valores (values) en un sitio web.

Sección de Valores: La sección está encapsulada en un elemento `<section>` con la clase “values”. Esto indica que la sección está dedicada a presentar los valores de la empresa o del sitio web.

Contenido Dinámico: El contenido de la sección se carga dinámicamente.

Estructura de la Sección: La sección está organizada dentro de un contenedor para asegurar que su contenido esté bien alineado y limitado a un ancho específico. Esto mejora la legibilidad y la experiencia del usuario.

Encabezado de la Sección: Cada sección de valores comienza con un encabezado que incluye un título y una línea verde. El título se obtiene dinámicamente de un campo personalizado en WordPress y se muestra si está disponible.

Contenido de Valores: Dentro de la sección, hay un bucle que recorre los valores. Esto permite que se muestren múltiples valores si existen.

Elementos de Valores: Cada valor se muestra dentro de un div. Este div incluye una imagen y un título.

Imagen de Valores: Cada valor puede tener una imagen asociada que se muestra en un elemento `<figure>` con la clase.

En resumen, este componente representa una sección dedicada a mostrar los valores de la empresa o del sitio web, con un diseño dinámico que permite la inclusión de múltiples valores con sus respectivas imágenes y títulos.

Archivos Usados

1.

Nombre
values.php

Lenguaje
PHP

Ubicación
/components/values.php

Tipo
Component

<?php $values = get_field('values');
if ($values): ?>
    <section class="values p-0">
        <div class="container">
            <?php while (have_rows('values')):
                the_row(); ?>
                <?php $header = get_sub_field('values__header');
                ?>
                <header class="values__header">
                    <h2>
                        <?php if ($header): ?>
                            <?php echo $header; ?>
                        <?php endif ?>
                        <div class="line-green"></div>
                    </h2>
                </header>
                <div class="values__repeeter">
                    <?php while (have_rows('values_repeeter')):
                        the_row(); ?>
                        <div class="values__content-values">
                            <?php $image = get_sub_field('values_repeeter__image');
                            ?>
                            <figure class="">
                                <?php if ($image): ?>
                                    <img src="<?php echo esc_url($image['url']) ?>"
                                        alt="<?php echo esc_attr($image['alt']) ?>">
                                <?php endif ?>
                            </figure>
                            <?php $title = get_sub_field('values_repeeter__Title');
                            ?>
                            <h3>
                                <?php if ($title): ?>
                                    <?php echo $title; ?>
                                <?php endif ?>
                            </h3>
                        </div>
                    <?php endwhile; ?>
                </div>
            <?php endwhile; ?>
        </div>
    </section>
<?php endif ?>

2.

Nombre
_values.scss

Lenguaje
SCSS

Ubicación
/frontend/scss/theme/components/_values.scss

Tipo
Styles

.values {
  margin-top: rem(50px);
  &__header {
    text-align: center;
  }

  &__repeeter {
    display: flex;
    justify-content: center;
    text-align: center;
    flex-wrap: wrap;
    @include from(l) {
      flex-wrap: nowrap;
    }
  }

  &__content-values {
    padding: space(.1);
    @include from(s) {
      margin: rem(20px);
      padding: space(0.25);
    }
    figure{
      width:100%;
      height: auto;
    }
    @include from(l) {
      flex-wrap: nowrap;
      margin: rem(7px);
      padding: space(0.25);
      img{
        width:7vw;
      }
    }
    
  }
  h3 {
    margin: rem(10px);
    white-space: nowrap;
    font-size: rem(16px);
    @include from(l) {
      font-size: rem(25px);
    }
  }
}