El componente “Banner Texto” es una sección de diseño simple pero efectiva que se utiliza para resaltar un mensaje importante o destacado en una interfaz digital. Está estructurado de la siguiente manera:
1. Título: El título es un texto principal que sirve para captar la atención del usuario y comunicar el mensaje clave de manera concisa y llamativa. Debe ser breve pero impactante, utilizando un tamaño de fuente más grande o un estilo de texto distintivo para destacarse en el banner.
2. Párrafo:El párrafo proporciona información adicional o detalles complementarios al mensaje expresado en el título. Puede ser un texto descriptivo que amplíe el contexto o los detalles sobre el mensaje principal. Es importante mantener el párrafo breve y relevante para mantener la atención del usuario.
Este tipo de banner es ideal para situaciones en las que se necesita comunicar un mensaje directo y claro sin distracciones visuales. Al centrarse en el texto, este componente es especialmente útil para anuncios importantes, mensajes de bienvenida, alertas o cualquier otro contenido que requiera una presentación clara y concisa en la interfaz digital.
Campos Personalizados
Banner Text
banner-text
Layout/Group
Title
banner-text__title
Basic/Text Area
Paragraph
banner-text__paragraph
Content/Wysiwyg Editor
Archivos Usados
1.
banner-text.php
PHP
components/banner-text.php
Component
1.
banner-text.php
PHP
components/banner-text.php
Component
<?php
$class_name = 'banner-text';
$banner_text = get_field($class_name);
if ($banner_text): ?>
<section class=" <?php echo $class_name ?> p-4 my-5 transition-scroll">
<?php while (have_rows($class_name)):
the_row();
$title = get_sub_field($class_name . '__title');
$paragraph = get_sub_field($class_name . '__paragraph');
?>
<div class="container">
<div class="ps-lg-5">
<div class="<?php echo $class_name ?>__content px-3">
<h3 class="<?php echo $class_name ?>__title co-blue mb-3">
<?php if ($title):
echo $title;
endif ?>
</h3>
<div class="<?php echo $class_name ?>__paragraph co-black pb-5">
<p>
<?php if ($paragraph):
echo $paragraph;
endif ?>
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<?php endwhile; ?>
<?php endif ?>
2.
_banner-text.scss
SCSS
frontend/scss/theme/components/_banner-text.scss
Styles
2.
_banner-text.scss
SCSS
frontend/scss/theme/components/_banner-text.scss
Styles
.banner-text{
&__title {
text-align: center;
}
ul {
list-style-type: disc;
padding: 0 0 0 30px;
}
}
Anexos
