Block Builder
De Block Builder is een tool die je op veel plekken in Web-Dock terugziet. Met deze builder is het heel makkelijk om zonder enige kennis van codering en webdesign makkelijk een pagina te maken die zich ook nog eens automatisch aanpast voor smartphone- en tabletgebruikers.
In de basis zijn er 2 verschillende soorten blokken die toegevoegd kunnen in de editor. Dit zijn Content Blokken en Layout blokken. Daarnaast zijn er ook Speciale blokken en Presets.
Content blokken
Dit zijn de verschillende content blokken die de Block Builder te bieden heeft.
Tekst blokken: Na het toevoegen van een tekstblok kun je makkelijk iedere soort tekst typen die je maar wilt. Dit werkt op een vergelijkbare manier als een Word-document aanmaken.
Aanpasmogelijkheden:
- Tabellen
- Dikgedrukte, schuine of doorgestreepte tekst
- Opsommingen (zoals de tekst die je nu leest)
- Citaten
- Uitlijning
- Verschillende stijlen
- Kopjes (Belangrijk voor SEO!)
- Verschillende lettertypes
- Lettergrootte
- Kleuren en achtergrondkleur
Afbeelding toevoegen: Als je op 'selecteer afbeelding' klikt, dan kom je in het bestandsbeheer terecht. Hier vind je alle bestanden die op de server van de website staan. Klik op de afbeelding die je wilt toevoegen in de Block Editor. Vervolgens zal deze op de pagina verschijnen.
Het is ook mogelijk om in het bestandsbeheer een eigen bestand toe te voegen.
Daarnaast kunnen afbeeldingen gelinkt worden aan een pagina. Dit doe je door op 'link' te klikken en de URL van de websitepagina te plaatsen waar je een link naartoe wenst.
Embedded Content (geavanceerd): Hier is het mogelijk om stukken HTML-code en dus ook bijvoorbeeld iFrames toe te voegen aan je pagina. Gebruik dit uitsluitend als je weet hoe dit werkt. Is dit niet het geval en wil je bijvoorbeeld wel een iFrame van Youtube of Facebook koppelen? Neem dan contact met ons op. Wij hebben dit binnen no-time geregeld.
Knop toevoegen: Hier kun je een stukje tekst invoeren en deze linken aan een pagina door een URL in te voeren bij 'Link'. De opmaak van deze knop wijzig je in de Theme Editor.
Ga naar Navigatie > Thema > Extra (rechtermenu). Hier pas je de achtergrondkleur, tekstkleur en hoekradius aan.
Contactformulier toevoegen: Als je op een pagina een contactformulier wilt toevoegen, doe je dat hier. Het e-mailadres waar de mails op binnen moeten komen stel je in bij de Theme Editor. Je wijzigt dit door te navigeren naar Thema > Social Media > Mail.
Nieuwsbriefregistratie toevoegen: Voeg een minimalistisch formulier toe aan je website waar websitebezoekers hun naam en email kunnen achterlaten. Deze gegevens komen in Web-Dock onder 'Nieuwsbrieven' binnen, zodat je de geïnteresseerde een nieuwsbrief kunt sturen. De kleur van de knop hangt samen met de knop in de instellingen van de Theme Editor. Dit geeft een uniform design.
Nieuwsberichten toevoegen: Voeg hier je gemaakte nieuwsberichten toe op een pagina. Deze kunnen toegevoegd worden bij de pagina "Nieuws". De stijl waarop je dit wilt weergeven is aanpasbaar in de Theme Editor. Ga naar Thema > Nieuws (rechtermenu).
Portfolioberichten toevoegen: Voeg hier je gemaakte portfoliopagina's toe op een pagina. Deze kunnen toegevoegd worden bij de pagina "Portfolio". De stijl waarop je dit wilt weergeven is aanpasbaar in de Theme Editor. Ga naar Thema > Portfolio (rechtermenu).
Shopproducten toevoegen: Voeg hier je eerder aangemaakte producten toe op een pagina. Deze kunnen toegevoegd worden bij de pagina "Shop". De stijl waarop je dit wilt weergeven is aanpasbaar in de Theme Editor. Ga naar Thema > Shop (rechtermenu).
Layout Blokken
Layoutblokken bepalen de structuur van je website. Het is namelijk mogelijk om complete pagina's aan te maken zonder layoutblokken, dan komt alles onder elkaar te staan. Met behulp van de layoutblokken is het echter ook mogelijk om verschillende content naast elkaar te plaatsen. Layoutblokken hebben wel een minimale breedte zodat deze op kleinere devices als een telefoon onder elkaar komen te staan. De layoutbreedte is standaard ingesteld op 1200px en deze wordt standaard gecentreerd. De layoutbreedte kun je aanpassen in de Theme Editor bij Theme > Body (rechtermenu).
Blokken naast elkaar toevoegen kan eindeloos. Zo kun je 2 blokken toevoegen, en in beide blokken weer klikken op 2 blokken toevoegen. Je hebt dan 4 blokken naast elkaar. Bij het invoegen van deze blokken wordt altijd automatisch rekening gehouden met de maximale breedte die is ingesteld zoals hierboven aangegeven is.
De blokken "100% breed, 66% breed en 50% breed" negeren deze regel. Deze doen precies wat de naam al zegt dat ze doen. Ze pakken het gegeven percentage breedte van je scherm. Zo kun je bijvoorbeeld afbeeldingen voor de achtergrond instellen op een volledige breedte. In dit 100% breedte blok kun je alsnog een 'normaal' blok toevoegen die vervolgens weer rekening houdt met de maximale breedte. Op deze manier kun je een uitgelijnde tekst plaatsen op een blok met een volledige achtergrond.
Bekijk hieronder de voorbeelden.
Dit is alleen duidelijk zichtbaar op een desktop omdat de blokken op een smartphone onder elkaar geplaatst zullen worden.
Dit is een "normaal blok" in een 100% breed blok.
Dit blok houdt 66% van je (desktop) scherm aan.
Dit blok houdt 50% van je (desktop) scherm aan.
Hieronder laten we zien wat één blok doet. Zoals je ziet houden deze blokken automatisch rekening met de maximale breedte.