Bloc contenidor amb titular i botó
En este post aprendrem a utilitzar el bloc contenidor per a confeccionar un conjunt com el següent:
Aquest és un bloc contenidor:
Aquest és un bloc titular
Aquest és un botóEn el qual tenim:
- Un bloc contenidor pare, que engloba tot el conjunt i que conté: Una imatge de fons, així com una capa fosca sobre la imatge, per tal d’assegurar-ne la llegibilitat dels blocs que estan dins del contenidor (text, botó), una vora arredonida i amb color.
- Un bloc Titular que conté el text que volem mostrar.
- Un bloc Botó que conté un enllaç a la informació relacionada.
1.-Inserim un bloc contenidor
2.-Configurem la imatge de fons
Des de la secció Fons, de la zona de configuració de la dreta, podem seleccionar qualsevol imatge de la mediateca, o inserir una imatge amb URL.
Una vegada configurada, veurem que el contenidor mostra la imatge com a fons, però únicament es veu una franja horitzontal. Ens falta encara definir l’alçada del contenidor, si volem veure més part de la imatge o la imatge sencera.
Des de la secció Redimensionar, configurem, per exemple, una alçada mínima de 500 píxels.
3.-Inserim un bloc Titular
Dins del contenidor, afegim un bloc Titular.
I configurem el color del text, tipografia, mida, negreta, alineació…
Podem també aplicar marges al bloc Titular o bé farciment al bloc contenidor, per tal de moure el text cap avall, o bé podem configurar, per a tot el bloc contenidor, una posició/ubicació per als subblocs (vegeu apartat 6).
4.-Enfosquim la imatge de fons. Opacitat.
Per tal que el text sobre la imatge siga més llegible, serà necessari aplicar una capa fosca. Ho farem mitjançant les opcions de Colors de fons i Opacitat de la imatge. Estes opcions corresponen al bloc contenidor.
5.-Inserim un botó
Inserim un bloc Botó i configurem inicialment algunes opcions de l’aspecte: Disseny de pantalla: Flex, alineació centrada, negreta per al text.
Configurem també els colors del botó i fiquem una amplada, per exemple 300 píxels.:
Configurem un enllaç, on ens dirigirà quan premem el botó:
6.-Posició dels continguts dins del contenidor
Des de la barra de ferramentes contextuals del bloc contenidor, podem configurar una posició general del contingut dins del bloc.
Si escollim la posició central, tant el titular com el botó es distribuiran dins del contenidor, alineats cap al centre.
7.-Previsualització i ajust de la profunditat dels elements (z-index)
Tot i que, en edició, el text i el botó es mostren correctament sobre la imatge de fons, si previsualitzem el contingut en el front, resulta que ambdós elements han heretat la transparència o falta d’opacitat del contenidor, de forma que es visualitzen una miqueta esvaïts, així:
Per a solucionar-ho, cal només definir, per a estos elements, un nombre superior en la configuració de profunditat (z-index). Hem d’imaginar que els continguts es mostren en diferents capes i nosaltres volem dur els elements a una capa superior, perquè es mostren per damunt de la resta.
Anem a la configuració del bloc titular i també a la del bloc botó i configurem índex-z, per exemple a 1
Si previsualitzem ara tot el contingut, ja es veurà correctament:
