Tipo de componente Artículos (Tipo de Noticia, Tipo de Proyectos)
En este artículo encontrarás los campos para el...
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
