Studio Editor: Containers gebruiken
Leestijd 3 minuten
Containers zijn responsieve indelingstools waarmee je de inhoud van je website kunt stroomlijnen en structureren. Je kunt ze aanpassen aan het ontwerp van de website en elementen zoals tekst, media en knoppen toevoegen.
In dit artikel lees je meer over:
Containers aan een website toevoegen
Ga aan de slag door een container toe te voegen die past bij het ontwerp en de inhoudsbehoeften van de klant. Je kunt kiezen uit een reeks vooraf ontworpen en aangewezen containers, of vanaf nul beginnen met een leeg ontwerp.
Om een container toe te voegen:
- Klik links in de Editor op Elementen toevoegen
. - Selecteer Containers.
- Kies een containerstijl (Leeg, Ontworpen of Aanwijzen).
- Klik en sleep de door jou gekozen container om deze aan de pagina toe te voegen.
Containers ontwerpen
Pas het ontwerp van de container aan om de esthetiek van de website aan te vullen. Je kunt de achtergrondkleur wijzigen, de straal instellen en meer.
Om een container te ontwerpen:
- Selecteer de betreffende container.
- Klik rechtsboven in de Editor op het Inspector openen-pictogram
.
- Kies onder Ontwerp hoe je de container wilt aanpassen:
- Achtergrond: Stel de achtergrondkleur in en maak deze meer of minder zichtbaar.
- Rand: Voeg een rand toe aan de container en gebruik de opties om de grootte, kleur en dekking in te stellen.
- Hoeken: Pas de straal van de hoeken van de container aan (in px) om ze ronder of vierkanter te maken.
- Schaduw: Voeg een schaduweffect toe aan de container en pas deze aan.
Elementen aan containers vastmaken
Wanneer je elementen in een container plaatst, worden ze automatisch gekoppeld. Dit betekent dat je de container en de gekoppelde elementen als geheel kunt slepen en ze samen kunt bekijken in het Lagen-paneel.
Om een element aan een container vast te maken:
- Klik op het betreffende element.
- Sleep het naar de gewenste positie in de container.
- Zet het element neer wanneer je het Vastmaken-bericht ziet.
Een raster toepassen op een container
Pas een geavanceerd CSS-raster toe op de container om de indeling te structureren. Je kunt het aantal rijen en kolommen kiezen en hun grootte instellen met behulp van responsieve metingen (bijvoorbeeld: fr, Min/max, %)
Om een raster op een container toe te passen:
- Selecteer de betreffende container.
- Klik op het Meer acties-pictogram
. - Klik op Geavanceerd CSS-raster toepassen.
- Kies een indeling uit de 1x1-dropdown.
Tip: Selecteer Overige als je je eigen aantal rijen en kolommen wilt instellen.
Vond je dit artikel nuttig?
|