Este componente “Grid Icons” se presenta como una cuadrícula organizada que destaca una serie de elementos visuales y descriptivos para proporcionar información de manera clara y atractiva. Está estructurado de la siguiente manera:
1. Título General:
El título general actúa como encabezado para el conjunto de elementos presentados en la cuadrícula. Proporciona una introducción concisa y contextualiza el contenido que se va a explorar.
2. Icono Card:
Cada “icono card” representa visualmente un concepto o función específica mediante un icono gráfico. Estos iconos son intuitivos y fácilmente reconocibles, lo que permite a los usuarios identificar rápidamente el contenido que desean explorar con mayor detalle.
3. Título Card:
Junto a cada icono, se presenta un título que describe brevemente el contenido o la función asociada al icono correspondiente. Este título complementa el icono al proporcionar una descripción adicional y facilitar la comprensión del contenido presentado.
4. Párrafo Card:
Cada “paragraph card” ofrece información más detallada sobre el contenido representado por el icono y el título asociado. Estos párrafos describen de manera concisa y relevante las características, beneficios o detalles adicionales relacionados con el tema presentado.
5. Botón (Opcional):
Opcionalmente, se puede incluir un botón que ofrezca una acción específica relacionada con el contenido presentado en la cuadrícula. Este botón puede dirigir a los usuarios a páginas de destino relevantes, formularios de contacto u otras acciones interactivas que complementen la información proporcionada.
Este diseño de cuadrícula ofrece una presentación estructurada y visualmente atractiva de información, permitiendo a los usuarios explorar y comprender fácilmente el contenido presentado. Además, su flexibilidad permite adaptarse a una variedad de contextos y necesidades, ofreciendo una experiencia de usuario intuitiva y satisfactoria.
TAMBIEN CUENTA CON UNA VERSION GRID ICONS MINI
Campos Personalizados
Grid Icons
grid-icons
Layout/Group
Title
grid-icons__title
Basic/Text
Card
grid-icons-card
Layout/Repeater
Image
grid-icons-card__image
Content/Image
Title
grid-icons-card__title
Basic/Text
Paragraph
grid-icons-card__paragraph
Basic/Text
Cta
grid-icons-card__cta
Relational/Link
Archivos Usados
1.
grid-icons.php
PHP
loops/grid-icons.php
Loop
1.
grid-icons.php
PHP
loops/grid-icons.php
Loop
<?php
/*
grid-icons
group
---------------
grid-icons__title
text
-------------------
grid-icons__card
repeater
-------------------
grid-icons-card__image
image
-------------------
grid-icons-card-title
text
-------------------
grid-icons-card-paragraph
text
-------------------
grid-icons-card__cta
Link
*/
$type = isset($args['type']) ? $args['type'] : '';
$class_name = 'grid-icons';
$class_card = $class_name . '-card';
$grid = get_field($class_name);
if ($grid): ?>
<section class="<?php echo $class_name; ?> <?php if ($type)
echo $class_name . '--' . $type; ?> transition-scroll ">
<div class="container">
<?php while (have_rows($class_name)):
the_row();
$title = get_sub_field($class_name . '__title');
$subtitle = get_sub_field($class_name . '__subtitle'); ?>
<header class="<?php echo $class_name ?>__title pt-3 ps-5 pb-5">
<?php if ($title): ?>
<h2>
<?php echo $title ?>
</h2>
<?php endif ?>
<?php if ($subtitle): ?>
<p>
<?php echo $subtitle; ?>
</p>
<?php endif ?>
</header>
<div class="row g-0 d-flex justify-content-center <?php echo $class_name ?>__container-cards ">
<?php while (have_rows($class_name . '-card')): the_row();
get_template_part('cards/' . $class_card, NULL, [
'class_card' => $class_card
]);
endwhile; ?>
</div>
<?php endwhile; ?>
</div>
</section>
<?php endif ?>
2.
grid-icons-card.php
PHP
cards/grid-icons-card.php
Card
2.
grid-icons-card.php
PHP
cards/grid-icons-card.php
Card
<?php
extract($args);
$image = get_sub_field($class_card.'__image');
$title = get_sub_field($class_card.'__title');
$paragraph= get_sub_field($class_card.'__paragraph');
$cta= get_sub_field($class_card.'__cta');
?>
<div class=" col-md-6 col-lg-3 px-2 d-flex align-items-stretch mb-3 <?php echo $class_card ?>__mini-card ">
<div class="<?php echo $class_card ?> px-4 pb-4 pt-5 bg-gray w-100">
<div class="<?php echo $class_card ?>__content d-flex flex-column align-items-center h-100">
<?php if ($image) : ?>
<figure class="<?php echo $class_card ?>__image mb-3">
<img class="w-100" src="<?php echo esc_url($image['url']) ?>" alt="<?php echo esc_attr($image['alt']) ?>">
</figure>
<?php endif ?>
<?php if ($title) : ?>
<h4 class="<?php echo $class_card ?>__name text-center mb-3">
<?php echo $title; ?>
</h4>
<?php endif ?>
<?php if ($paragraph) : ?>
<p class="<?php echo $class_card ?>__position body-s text-center mb-4">
<?php echo $paragraph; ?>
</p>
<?php endif ?>
<?php if($cta):?>
<a class="<?php echo $class_card ?>__cta button-secondary d-flex align-items-end mb-3" href="<?php echo esc_url($cta['url']);?>" target="<?php echo esc_attr($cta['target']);?>">
<span class=""><?php echo esc_html($cta['title']); ?></span>
</a>
<?php endif; ?>
</div>
</div>
</div>
3.
_grid-icons.scss
SCSS
frontend/scss/theme/components/_grid-icons.scss
Component
3.
_grid-icons.scss
SCSS
frontend/scss/theme/components/_grid-icons.scss
Component
.grid-icons {
$self: &;
&--mini {
#{$self}-card {
min-height: rem(30px);
@include from(l) {
margin: rem(17px);
}
&__content {
padding: 0 rem(16px);
}
&__mini-card {
@include from(l) {
width: rem(350px);
}
}
}
#{$self}__title {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin: 0 !important;
padding: rem(10px) !important;
p {
padding: rem(10px) 0;
@include from(l) {
width: 40%;
}
}
}
p,
h2 {
text-align: center;
}
}
}
4.
_grid-icons-card.scss
SCSS
frontend/scss/theme/card/_grid-icons-card.scss
Card
4.
_grid-icons-card.scss
SCSS
frontend/scss/theme/card/_grid-icons-card.scss
Card
.grid-icons-card{
border-radius: rem(6px);
min-height: rem(500px);
&__content{
& > *{
flex: 1 1 100%;
}
}
}
Anexos
Artículos relacionados
Tipo de componente Artículos (Tipo de Noticia, Tipo de Proyectos)
En este artículo encontrarás los campos para el...