Dit is een eenvoudige ingewikkelde lay-out….
Het basisidee is een achtergrondkleur, een afbeelding links, een tweede afbeelding (of content) die de linker afbeelding deels overlapt, een content (tekst) vak voor de boodschap, en geheel rechts een afbeelding als achtergrond voor de content. Dit is gemaakt met Kadence blocks i.p.v. Greenshift blocks. Reden daarvoor is dat Kadence zich meer leent voor deze constructie; hun row block is echt geniaal in gebruik en eenvoud.
Het voorbeeld staat hier afgebeeld op volledige breedte, maar het kan uiteraard ook op elke andere breedte. Hou er rekening mee dat op mobile alleen de content van de rechter kolom zichtbaar moet zijn. De tablet versie is hier niet aangepast.
Het voorbeeld staat hier afgebeeld op volledige breedte, maar het kan uiteraard ook op elke andere breedte. Hou er rekening mee dat op mobile alleen de content van de rechter kolom zichtbaar moet zijn. De tablet versie is hier niet aangepast.
Afbeelding,
logo of
andere content
logo of
andere content
Werk aan jezelf
Volg een van onze cursussen of verwen jezelf met een sessie van onze healers… Ook dit jaar hebben we weer heerlijke opleidingen om te volgen.
De afbeelding hieronder toont de hele lay-out, zoals het er op desktop uitziet.
De structuur in details
- De achtergrondkleur is bepaald in de 1e Rij lay-out.
- De afbeelding met de blaadjes staat als achtergrond in de 1e sectie van de 1e Rij lay-out.
- De roze kleur (of afbeelding) met de overlap, staat in de 1e sectie van de 2e Rij lay-out. Deze sectie heeft op desktop een negatieve margin van 85 px; dit kun je uiteraard aanpassen, afhankelijk van de overlap die je wilt. Op mobile staat deze op niet tonen.
- De content (kop, bodytekst en knop) staat in de 2e sectie van de 2e Rij lay-out.
- De afbeelding rechts staat als achtergrond in de 2e sectie van de 2e Rij lay-out.
- Je kunt de hele lay-out wat hoger maken, door de 2e sectie van de 2e rij boven en onder wat padding te geven.
- Als je het eenmaal weet is het heel simpel.
- Belangrijk: elk builder heeft een vergelijkbaar blok, het heet dan kolommen, sections, rij of iets dergelijks. Deze gedragen zich echter niet allemaal hetzelfde. Het Rij (Row) blok van Kadence blocks is heel voorspelbaar, raakt nooit ‘door de war’ en is daardoor heel bruikbaar hiervoor.