Bloque contenedor con titular y botón
En este post aprenderemos a utilizar el bloque contenedor para confeccionar un conjunto como el siguiente:
Este es un bloque contenedor:
Este es un bloque titular
Este es un botónEn el cual tenemos:
- Un bloque contenedor padre, que engloba todo el conjunto y que contiene: Una imagen de fondo, así como una capa oscura sobre la imagen, para asegurar la legibilidad de los bloques que están dentro del contenedor (texto, botón), un borde redondeado y con color.
- Un bloque Titular que contiene el texto que queremos mostrar.
- Un bloque Botón que contiene un enlace a la información relacionada.
1.-Insertamos un bloque contenedor
2.-Configuramos la imagen de fondo
Desde la sección Fondo, de la zona de configuración de la derecha, podemos seleccionar cualquier imagen de la mediateca, o insertar una imagen con URL.
Una vez configurada, veremos que el contenedor muestra la imagen como fondo, pero únicamente se ve una franja horizontal. Nos falta todavía definir la altura del contenedor, si queremos ver más parte de la imagen o la imagen entera.
Desde la sección redimensionar, configuramos, por ejemplo, una altura mínima de 500 píxeles.
3.-Insertamos un bloque Titular
Dentro del contenedor, añadimos un bloque Titular.
Y configuramos el color del texto, tipografía, medida, negrita, alineación…
Podemos también aplicar márgenes al bloque Titular o bien relleno al bloque contenedor, para mover el texto hacia abajo, o bien podemos configurar, para todo el bloque contenedor, una posición/ubicación para los subbloques (véase apartado 6).
4.-Oscurecemos la imagen de fondo. Opacidad.
Para que el texto sobre la imagen sea más legible, será necesario aplicar una capa oscura. Lo haremos mediante las opciones de Colores de fondo y Opacidad de la imagen. Estas opciones corresponden al bloque contenedor.
5.-Insertamos un botón
Insertamos un bloque Botón y configuramos inicialmente algunas opciones del aspecto: Diseño de pantalla: Flex, alineación centrada, negrita para el texto.
Configuramos también los colores del botón y ponemos una anchura, por ejemplo 300 píxeles.:
Configuramos un enlace, donde nos dirigirá cuando pulsemos el botón:
6.-Posición de los contenidos dentro del contenedor
Desde la barra de herramientas contextuales del bloque contenedor, podemos configurar una posición general del contenido dentro del bloque.
Si escogemos la posición central, tanto el titular como el botón se distribuirán dentro del contenedor, alineados hacia el centro.
7.-Previsualización y ajuste de la profundidad de los elementos (z-index)
A pesar de que, en edición, el texto y el botón se muestran correctamente sobre la imagen de fondo, si previsualizamos el contenido en el front, resulta que ambos elementos han heredado la transparencia o falta de opacidad del contenedor, de forma que se visualizan desvanecidos, así:
Para solucionarlo, hace falta solo definir, para estos elementos, un número superior en la configuración de profundidad (z-index). Tenemos que imaginar que los contenidos se muestran en diferentes capas y nosotros queremos llevar los elementos a una capa superior, para que se muestran por encima del resto.
Vamos a la configuración del bloque titular y también a la del bloque botón y configuramos índex-z, por ejemplo a 1
Si previsualizamos ahora todo el contenido, ya se verá correctamente:
