¿Cómo mandar información de un archivo a otro PHP WordPress?
En algunas ocasiones se requiere enviar...
El componente “Banner Principal” es una sección destacada de una interfaz digital que ocupa un lugar prominente, diseñada para captar la atención del usuario y comunicar un mensaje clave de manera impactante. Está estructurado de la siguiente manera:
1. Imagen:La imagen principal es el elemento visual central del banner. Esta imagen suele ser grande y llamativa, ocupando una parte significativa del espacio del banner. Puede ser una fotografía, ilustración o gráfico relevante al contenido que se está presentando, y se utiliza para transmitir visualmente el mensaje principal del banner.
2. Título: El título es un texto destacado que acompaña a la imagen, sirviendo para proporcionar una declaración clara y concisa del mensaje principal que se desea comunicar. Debe captar la atención del usuario y complementar la imagen de manera efectiva.
3. Párrafo: El párrafo proporciona información adicional o detalles sobre el mensaje expresado en el título. Puede ser un texto descriptivo que amplíe el contexto o los detalles relevantes relacionados con el contenido presentado en el banner.
4: Rectángulo (Elemento decorativo): El rectángulo es un elemento decorativo que se utiliza para agregar un toque visual interesante al banner. Se coloca estratégicamente, quizás como una línea horizontal que separa visualmente el párrafo, o como un borde alrededor del banner para enfatizar su importancia. Este rectángulo no contiene información relevante, sino que se utiliza puramente con fines estéticos para mejorar la apariencia general del banner.
Este tipo de banner es especialmente efectivo para promociones, anuncios, lanzamientos de productos o cualquier otro contenido que requiera una presentación visualmente impactante y llamativa en la interfaz digital. La combinación de elementos visuales y textuales ayuda a captar la atención del usuario y comunicar el mensaje de manera efectiva.
Campos Personalizados
Banner main
banner-main
Layout/Group
Image
banner-main__image
Content/Image
Title
banner-main__title
Basic/Text
Paragraph
banner-main__paragraph
Content/Wysiwyg Editor
Archivos Usados
1.
banner-main.php
PHP
components/banner-main.php
Component
1.
banner-main.php
PHP
components/banner-main.php
Component
<?php
$class_name = 'banner-main';
$banner_main = get_field($class_name);
if ($banner_main): ?>
<section class=" <?php echo $class_name ?> p-4 my-5 transition-scroll">
<?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');
?>
<div class="container">
<div class="row">
<div class="col-md-4 mb-4 px-3">
<figure class="<?php echo $class_name ?>__image">
<?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>
<div class="col-md-8 ps-lg-5">
<div class="<?php echo $class_name ?>__text-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 class="<?php echo $class_name ?>__line-rectangle"></div>
</div>
</div>
</div>
</div>
</section>
<?php endwhile; ?>
<?php endif ?>
2.
_banner-main.scss
SCSS
frontend/scss/theme/components/_banner-main.scss
Styles
2.
_banner-main.scss
SCSS
frontend/scss/theme/components/_banner-main.scss
Styles
.banner-main {
&__image {
@include fluid-aspect(24 26, "img");
img {
border-radius: rem(6px);
}
}
&__line-rectangle {
width: rem(100px);
border: 2px solid $blue;
}
}
Anexos
