De Dwelling CMS-websitetemplate is gemaakt voor vastgoedbedrijven die een aantrekkelijke website voor hun klanten nodig hebben die helpt bij het genereren van nieuwe leads.
Structuur
De structuur van deze template is hoofdzakelijk gebaseerd op een lay-out met 12 kolommen.
Om een kolomindeling te creëren, heeft een sectie een ouder div-blok nodig met de klasse "12 Columns". Er zijn combinatieklassen beschikbaar om de uitlijning te wijzigen.
Plaats vervolgens div-blokken met de klasse "Column" erin. Deze zullen je kolommen worden, dus je kunt er zoveel plaatsen als je nodig hebt.
Vervolgens kunt u een specifieke combinatieklasse toevoegen die bepaalt hoeveel kolommen de inhoud in beslag neemt. Een lay-out met inhoud aan de linkerkant en een afbeelding aan de rechterkant kan bijvoorbeeld de combinatieklasse 'Desktop 6' gebruiken voor beide kolommen. Dit betekent dat elk blok 6 kolommen in beslag neemt, oftewel 50% van de beschikbare breedte.
Combinatieklassen kunnen worden toegevoegd om de breedte van kolommen aan te passen voor tablets en mobiele apparaten.
Secties en containers
Voor elk contentblok moeten secties en containers worden gebruikt. Secties organiseren de content en passen boven- en onderopvulling toe op het blok. Containers stellen een maximale breedte in die zich aanpast aan de schermgrootte van het apparaat. Secties hebben klassen en combinatieklassen voor variaties, die u hieronder kunt raadplegen.
Toegepast op het sectie-element van Webflow, voegt dit boven- en onderopvulling aan de inhoud.
Wijzigt de bovenste opvulling in de klasse Section naar een dubbele waarde .
Wijzigt de onderste opvulling in de klasse Section naar een dubbele waarde .
Wijzigt zowel de boven- als onderopvulling in de Section-klasse naar het dubbele .
Toegepast op een div-blok dat is genest in een section-element. Dit beperkt alle inhoud tot een maximale breedte .
Onderdelen
Deze template bevat vooraf gebouwde componenten waarmee je snel en eenvoudig pagina's kunt bouwen. De template heeft componenten voor de navigatie, de footer en veelvoorkomende secties die vaak herhaald worden. Je kunt de volledige lijst met componenten hier . Componenten kunnen op twee manieren worden gebruikt:
Identieke inhoud voor elke instantie: Dit is handig voor de navigatie en de voettekst, waar de inhoud op elke pagina identiek moet zijn. Een wijziging in de inhoud op één plek wordt automatisch op elke pagina doorgevoerd.
Componenteigenschappen: Voor componenten die gebruikmaken van de eigenschappen van Webflow, zoals de Split Layout-component, kunt u de rechterzijbalk gebruiken om tekst, afbeeldingen en links in die ene instantie bij te werken zonder andere instanties te beïnvloeden. Dit is ideaal voor modules met wisselende inhoud op de website, waarbij de lay-out en stijl altijd hetzelfde moeten blijven.
Hoe te gebruiken
U kunt de componenten in de linkerwerkbalk openen. Selecteer de gewenste component om deze op de pagina te plaatsen.
Dubbelklik op het component om alle inhoud wereldwijd bij te werken.
Gebruik de componenteigenschappen in de rechterzijbalk om unieke inhoudswijzigingen aan te brengen zonder andere instanties van die component te beïnvloeden.
Als het onderdeel volledig uniek moet zijn, klik dan met de rechtermuisknop op het onderdeel en selecteer 'Instantie ontkoppelen'.
Stijlgids
Een stijlgids is beschikbaar om eenvoudig stijlen bij te werken die wereldwijd op de site veranderen. Bekijk de stijlgids hier .
Typografie
Het bijwerken van het lettertype en de lettergrootte moet in de stijlgids gebeuren. Om het primaire lettertype bij te werken, selecteert u het Body-element en kiest u vervolgens de tag Body (Alle pagina's) in het stijlpaneel. Wijzigingen die u hier aanbrengt, worden doorgevoerd in het lettertype van het gehele project.
Om het lettertype en de grootte van de kopteksten aan te passen, selecteert u elke koptekst en wijzigt u deze vervolgens naar de gewenste stijl.
Kleuren
Om de kleuren van de website te wijzigen, ga je naar het gedeelte 'Kleuren' in de stijlgids. Selecteer een van de kleurblokken.
Selecteer in het stijlpaneel de achtergrondkleur.
Kies in het pop-upvenster het potloodpictogram om de primaire kleur te wijzigen. Hiermee wordt de kleur op de hele website aangepast.
Meer informatie
Ga voor meer informatie naar Webflow University voor uitgebreide tutorials.
.png)