El componente “Banner Contacto” es una sección destacada diseñada para promover la interacción y comunicación con los usuarios en una interfaz digital. Está estructurado de la siguiente manera:
1. Imagen de Fondo:Esta es la imagen que se utiliza como fondo del banner. Puede ser una fotografía, ilustración o gráfico relevante que complemente el propósito del banner y agregue un elemento visual atractivo.
2. Título:El título es un texto breve y llamativo que resalta el propósito del banner o la acción que se desea promover. Debe captar la atención del usuario y comunicar claramente el mensaje principal.
3. Párrafo: El párrafo proporciona información adicional o detalles sobre el propósito del banner. Puede ser un texto descriptivo que complemente el título y anime a los usuarios a tomar una acción específica, como ponerse en contacto, registrarse, etc.
4. Botón: El botón es un elemento interactivo que invita a los usuarios a realizar una acción concreta, como enviar un mensaje, hacer una llamada, acceder a un formulario de contacto, etc. El texto del botón debe ser claro y directo, indicando la acción que se realizará al hacer clic en él.
Este tipo de banner es una herramienta efectiva para dirigir la atención de los usuarios hacia la información de contacto relevante y fomentar la interacción y participación en la plataforma digital. La combinación de elementos visuales y textuales ayuda a comunicar el mensaje de manera clara y atractiva, lo que puede mejorar la experiencia del usuario y aumentar la efectividad de la comunicación.
Campos Personalizados
Banner-contact
banner-contact
Layout/Group
Image
banner-contact__image
Content/Image
Title
banner-contact__title
Basic/Text
Paragraph
banner-contact__paragraph
Basic/Text
Cta
banner-contact__cta
Relational/Link
Archivos Usados
1.
banner-contact.php
PHP
components/banner-contact.php
Component
1.
banner-contact.php
PHP
components/banner-contact.php
Component
<?php
$class_name = 'banner-contact';
$banner_contact = get_field($class_name);
if ($banner_contact): ?>
<section class=" <?php echo $class_name ?> 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="<?php echo $class_name ?>__decorated m-0 position-absolute w-100 h-100 top-0">
<div class="container border-3 br-white d-flex flex-column justify-content-center align-items-center ">
<div class="<?php echo $class_name ?>__text-content d-flex flex-column justify-content-center align-items-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-primary" 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>
</div>
</section>
<?php endwhile; ?>
<?php endif ?>
2.
_banner-contact.scss
SCSS
/components/_banner-contact.scss
Component
2.
_banner-contact.scss
SCSS
/components/_banner-contact.scss
Component
.banner-contact {
position: relative;
&__image {
@include fluid-aspect(35 30, "img");
@include from(m) {
@include fluid-aspect(50 15, "img");
}
@include from(l) {
@include fluid-aspect(50 15, "img");
}
}
&__decorated {
background: linear-gradient(rgba(0, 7, 45, 0.4), rgba(0, 7, 45, 0.4));
}
&__text-content {
@include center('both');
max-width: rem(600px);
@include from(l) {
bottom: 20%;
}
}
&__title,
&__paragraph {
text-align: center;
}
}
Anexos
Artículos relacionados
¿Cómo cambiar las imágenes de un producto Hesense?
Para cambiar las imágenes de productos en...
