El componente “Banner Full Width” es una sección de diseño expansivo que ocupa todo el ancho de la pantalla, destinada a captar la atención del usuario y comunicar un mensaje destacado. Está estructurado de la siguiente manera:
1. Título: El título es un texto principal y llamativo que resalta el mensaje clave que se desea transmitir. Debe ser breve, impactante y captar la atención del usuario de inmediato.
2. Párrafo: El párrafo proporciona información adicional o detalles sobre el mensaje principal expresado en el título. Puede ser un texto descriptivo que complemente el título y brinde contexto o detalles adicionales sobre el propósito del banner.
3. Llamado a la Acción (CTA):El llamado a la acción es un elemento interactivo que invita al usuario a realizar una acción específica en respuesta al mensaje del banner. Puede ser un botón con un texto claro y directo, como “Más información”, “Registrarse”, “Comprar ahora”, etc. El CTA debe estar diseñado de manera llamativa para atraer la atención del usuario y fomentar la participación.
Este tipo de banner es especialmente efectivo cuando se desea destacar una promoción, evento, o cualquier otro contenido relevante que requiera una atención inmediata por parte del usuario. Su diseño de ancho completo maximiza la visibilidad y el impacto del mensaje, lo que lo convierte en una herramienta poderosa para la comunicación efectiva en interfaces digitales.
Campos Personalizados
Banner full width
banner-full-width
Layout/Group
Image
banner-full-width__image
Content/Image
Title
banner-full-width__title
Basic/Text Area
Paragraph
banner-full-width__paragraph
Content/Wysiwyg Editor
Cta
banner-full-width__cta
Relational/Link
Archivos Usados
1.
banner-full-width.php
PHP
components/banner-full-width.php
Component
1.
banner-full-width.php
PHP
components/banner-full-width.php
Component
<?php
/*
banner_full_width
group
---------------
banner_full_width__image
image
-------------------
banner_full_width__title
text
-------------------
banner_full_width__paragraph
text
-------------------
banner_full_width__cta
link
*/
$class_name = 'banner-full-width';
$banner_full= get_field($class_name);
if ($banner_full) : ?>
<section class="banner-full-width p-0 transition-banner-content co-white">
<?php while (have_rows($class_name)) : the_row();
$image = get_sub_field($class_name . '__image');
$title = get_sub_field($class_name . '__title');
$paragraph = get_sub_field($class_name . '__paragraph');
$cta = get_sub_field($class_name . '__cta');
?>
<figure class="<?php echo $class_name ?>__image m-0">
<?php if ($image) : ?>
<img class="w-100" src="<?php echo esc_url($image['url']) ?>" alt="<?php echo esc_attr($image['alt']) ?>">
<?php endif ?>
</figure>
<div class="container border-3 br-white">
<div class="<?php echo $class_name ?>__text-content d-flex flex-column justify-content-center px-3">
<h2 class="<?php echo $class_name ?>__title mb-5">
<?php if ($title) :
echo $title;
endif ?>
</h2>
<div class="<?php echo $class_name ?>__paragraph mb-3">
<?php if ($paragraph) :
echo $paragraph;
endif ?>
</div>
<div class="<?php echo $class_name ?>__cta mt-5 mb-2">
<?php if ($cta) : ?>
<a class="button-tertiary" 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>
</section>
<?php endwhile; ?>
<?php endif ?>
2.
_banner-full-width.scss
SCSS
frontend/scss/theme/components/_banner-full-width.scss
Styles
2.
_banner-full-width.scss
SCSS
frontend/scss/theme/components/_banner-full-width.scss
Styles
.banner-full-width {
position: relative;
&__image {
@include fluid-aspect(16 17, "img");
@include from(s) {
@include fluid-aspect(16 8, "img");
}
@include from(m) {
@include fluid-aspect(15 6, "img");
}
}
&__text-content {
bottom:rem(40px);
max-width: rem(600px);
position: absolute;
z-index: 1;
@include from(l) {
bottom: 20%;
}
}
&__title, &__paragraph {
text-wrap: balance;
}
}
Anexos
