Landing pages: beneficios

A esta parte le llamo beneficios o ventajas, es el módulo donde se describen las características que hacen de este un buen producto, que aporta soluciones de forma fácil para el usuario.

Recuerda: como es el producto pero por delante los beneficios, ventajas y facilidades para el usuario. Como siempre esquemático, pero si el visitante ha llegado aquí es porque al menos tiene algo de curiosidad o de interés. Se trata de asegurar ese interés.

Para el ejemplo cursos este apartado aislado lo puedes ver aquí

Código HTML

Como es habitual lo primero será escribir el contenido de la página sin preocuparse del aspecto. Quedará un esquema completo de lo que debe aparecer. Después vas colocando las clases para darle el aspecto que deseas.

<header class="titarticulo"><h1>¿Por qué nuestros cursos?</h1></header>

<div class="cuerpo"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam .  </div>

</div>

<div class="cuerpo"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>

</div>

</div>

</section>

</div>

</div>

</div>

</section>

</article>

Para rellenar he usado un Lorem Ipsum, lógicamente eso se debe sustituir por texto relativo al curso, pero no andaba muy inspirado. Pero la idea en este diseño es que el apartado tenga dos filas de tres celdas, cada una de las cuales es a su vez una columna con una cabecera y un cuerpo.

Bueno en pantalla grande, en el móvil todo se convierte a columnas.

Observa que tiene el elemento article con su id="beneficios" y dentro tienes las section a las que asigno una clase fila. Cada section posee tres div que serán las columnas, con sus div anidadas para titulo y cuerpo.

Los estilos CSS

Al escribir el código HTML he ido asignando nombres de clases pensando en la función que ha de cumplir. Esta práctica debes usarla con cuidado para no repetir definiciones de estilos CSS (no es que eso sea malo pero da más trabajo). Usa también clases muy genéricas para aplicar a cualquiere elemento, como bg-black, para fondo negro por ejemplo. Y si quieres particularizar un elemento concreto pues utilizas el atributo id, por ejemplo #beneficios

.apdo-ancho {

width: 100%

}

.apdo-ancho section {

width: var(--anchoCentral);

margin: 32px auto;

}

.titarticulo {

text-align: center;

font-size: 2rem;

}

#beneficios .columna {

padding: 0 8px;

margin: 0 16px;

}

.columna .titulo {

text-align: center;

font-weight: bold;

color: rgba(255, 103, 48, 1.00);

font-size: 2.5rem;

margin-top: 8px

}

.columna .cuerpo {

border-top: 1px solid rgba(255, 156, 120, 0.60);

border-bottom: 1px solid rgba(255, 156, 120, 0.60);

padding: 8px;

text-align: justify;

flex-grow: 1;

}

Ya habíamos definido algunas clases al crear el módulo menu y el hero. No la repetimos, claro. Solo ajustamos a las condiciones particulares de esta sección, por ejemplo .columna para el apartado #beneficios modifico las propiedades padding y margin.

Con esto creamos una banda a todo el ancho a la que doy un color de fondo clarito. Rompemos así un poco el flujo de la página, es muy larga y un continuo puede cansar. No es algo oblligatorio, pero puede venir bien. El color va dentro del esquema elegido.

Las celdas de las columnas van a tener un título y un cuerpo, más adelante se repetirá el mismo esquema. Así que defino las clases .titulo y .cuerpo dentro de la clase .columna. Les doy los colores, tipos y tamaños que me parezcan más adecuado. Para los títulos uso iconos dentro del contexto, les he puesto el color naranja que junto con el azul forma el esquema de color básico.

Para pantallas pequeñas la estructura de filas no es aconsejable, la solución más simpe es colocar los bloques en vertical. Como son filas basadas en flex-box, pues redefino la la propiedad flex-direction al valor column. Las restantes propiedades son para ajustar los contenidos al ancho de la pantalla.

@media (max-width:1024px) {

.apdo-ancho .fila {

flex-direction: column

}

.apdo-ancho section {

width: 100%;

margin: 0;

}

Si quieres puedes definir más puntos de ruptura (breakpoints) para otros tamaños de pantalla. Yo, por simplicidad, solo he usado uno.