Bouw blokken

Je kunt je website ontwerpen door bouwblokken te slepen en neer te zetten, en deze vervolgens te bewerken zodat ze passen bij je content- en lay-outbehoeften.

Een bouwblok toevoegen

Om een blok aan een websitepagina toe te voegen, ga je naar de pagina, klik je op Bewerken, en sleep je het gewenste bouwblok naar de juiste locatie. Er zijn twee soorten bouwblokken beschikbaar: Categorieën en Interne content. Interne content-bouwblokken kunnen alleen worden toegevoegd in Categorieën-bouwblokken.

Wanneer je op een categorieblok klikt, verschijnt een pop-up waarmee je kunt kiezen tussen meerdere sjablonen voor elke categorie.

Tip

Zoek naar een specifiek blok in de Voeg een blok toe-pop-up met behulp van de zoekbalk.

Pop-upblokkenselectie

Zodra het categorieblok is geplaatst, kun je Interne content-blokken erin slepen en neerzetten. De Interne content-blokken stellen je in staat om elementen zoals video’s, afbeeldingen, sociale mediabuttons, enz. toe te voegen in bestaande categorieblokken.

Notitie

  • Je kunt ook een bouwblok toevoegen op de inlogpagina. Ga daarvoor naar de startpagina van de website, voeg /web/login toe aan de URL en druk op Enter.

  • Toegang tot bepaalde blokken vereist installatie van de bijbehorende applicatie of module (bv. E-commerce voor het Producten-blok).

Example

Voeg al je sociale media-accounts op één plek toe met het interne content Sociale media-blok. Zet de schakelaar aan of uit naast het gewenste platform en kopieer/plak de URL van je account.

Interne content-blok voor sociale media

Formulier

Het Formulier-blok wordt gebruikt om informatie van websitebezoekers te verzamelen en, indien van toepassing, records in je database aan te maken. Sleep het blok uit de categorie Contact & Formulieren naar een websitepagina en selecteer een blok in de pop-up.

Voorbeeld van een formulierblok

Actie

Standaard wordt bij het verzenden van het formulier automatisch een e-mail met de door de bezoeker ingevoerde informatie verstuurd. Afhankelijk van de apps die in je database zijn geïnstalleerd, kunnen extra acties beschikbaar komen waarmee automatisch records kunnen worden aangemaakt. Klik op Bewerken, klik op het formulier, ga naar het tabblad Stijl en selecteer de gewenste Actie om een andere actie te kiezen:

  • Solliciteer op een functie (Werving)

  • Maak een klant aan (E-commerce)

  • Maak een ticket aan (Helpdesk)

  • Maak een verkoopkans aan (CRM)

  • Abonneer op nieuwsbrief (E-mailmarketing)

  • Maak een taak aan (Project)

  • Meer modellen: om andere soorten records te genereren

Standaard worden bezoekers na het verzenden van het formulier doorgestuurd naar een Bedankt-pagina. Gebruik het veld URL om ze naar een andere pagina te sturen. Je kunt er ook voor kiezen om niet door te sturen en ze op de formulierpagina te houden door Nothing of Show Message te selecteren in het veld On Success.

Velden

Ga naar het tabblad Stijl en klik op de knop + Veld naast de sectie Formulier of Veld om een nieuw veld aan het formulier toe te voegen. Selecteer het veld om een veld in het formulier te wijzigen en gebruik vervolgens de opties in de sectie Veld van het tabblad Stijl. Je kunt bijvoorbeeld:

  • Wijzig het veld Type.

    Tip

    Het is ook mogelijk om een Existing Field uit de database te selecteren en de gegevens die het bevat te gebruiken. De beschikbare velden zijn afhankelijk van de geselecteerde actie. Eigenschapvelden die aan de database zijn toegevoegd, kunnen ook worden gebruikt.

    Alle soorten formuliervelden

    Sommige velden lijken visueel op elkaar, maar de ingevoerde gegevens moeten een specifiek formaat volgen.

  • Bewerk het Label van het veld en pas de Position aan.

  • Schakel een veld Beschrijving in. Zet de schakelaar aan en klik op de standaardbeschrijving in het formulier om deze te wijzigen.

  • Voeg een Placeholder of Default value toe.

  • Geef aan of het veld Required is.

  • Bewerk de :doc:`zichtbaarheid <visibility>`instellingen van het veld.

  • Voeg een animatie toe.

Klik op Save zodra je de gewenste wijzigingen hebt aangebracht.

Voeg een Odoo-contactformulier toe op een niet-Odoo-website

Je kunt een Odoo-contactformulier op een andere website weergeven met behulp van een iframe. Volg hiervoor deze stappen:

  1. Prepare the Odoo form: Create a contact form on a page in Odoo Website and remove the header and footer. Make sure only the contact form remains on the page.

  2. Genereer een insluitbare code: Kopieer de URL van de Odoo-formulierpagina en plak deze in een iframe-generator, zoals La Digitale.dev of iFrame Generator. Pas de breedte en hoogte aan voor een goede weergave.

  3. Voeg de insluitbare code toe aan de niet-Odoo-website: Open de HTML van de relevante pagina (in de code-editor of CMS) en voeg de insluitbare code in waar het formulier moet worden weergegeven.

Example

Voorbeeld van een insluitbare code:

<iframe src="https://example.com/odoo-form"
        style="border:0;"
        name="odooForm"
        scrolling="no"
        frameborder="0"
        marginheight="0"
        marginwidth="0"
        height="400px"
        width="600px"
        allowfullscreen>
 </iframe>

Code insluiten

Insluitcode stelt je in staat om inhoud van diensten van derden in een pagina te integreren, zoals video’s van YouTube, kaarten van Google Maps, berichten van sociale media van Instagram, enz.

Sleep het blok Code insluiten uit de sectie Binnenste inhoud naar een pagina, klik op het blok, ga naar het tabblad Stijl en klik op Bewerken. Vervang de placeholder-code door je eigen insluitcode.

Voeg de link toe naar de insluitcode waarnaar je wilt verwijzen

Waarschuwing

Kopieer en plak geen code die je niet begrijpt, omdat dit je gegevens in gevaar kan brengen.

Verplaats, wissel, dupliceer of verwijder een bouwblok

Trek aan de turquoise randen van het blok om de ruimte bovenaan of onderaan te verkleinen of vergroten.

Wijzig de blokvolgorde door op (chevron up) of (chevron down) te klikken en verplaats het blok op de pagina door op (arrows) te klikken. Als je meerdere kolommen hebt, verplaats je een kolom naar links of rechts door op (chevron left) of (chevron right) te klikken.

Klik op (dupliceren) om een bouwblok te dupliceren. Het nieuwe blok verschijnt op de pagina onder het origineel.

Tip

Je kunt ook op het icoon (dupliceren) bovenaan het tabblad Stijl klikken om het geselecteerde blok te dupliceren.

Klik op (trash) om een blok te verwijderen.

Marges op bouwblok uitbreiden

Bouwblok bewerken

Klik op een bouwblok en ga naar het tabblad Stijl om de inhoud te bewerken. Beschikbare aanpassingsopties variëren afhankelijk van het type geselecteerde blok.

Achtergrond

Selecteer het blok, ga naar het tabblad Stijl en klik op de kleurstip of een andere Achtergrond-optie om de achtergrond van een bouwblok te wijzigen. Je kunt de kleur wijzigen en/of een afbeelding, video en/of vorm toevoegen. Zodra je een vorm hebt geselecteerd, verschijnen nieuwe velden waarmee je de vorm kunt aanpassen.

Tip

  • Positioneer een element (afbeelding, tekst, enz.) achter of voor een ander element met de iconen Naar achteren of Naar voren.

    Blokpositie wijzigen
  • Klik en sleep de punten rond de randen van een blok om het naar wens aan te passen.

    Blokgrootte aanpassen

Lay-out: matrix en kolommen

Voor de meeste bouwblokken kun je kiezen tussen twee lay-outstijlen: matrix of kolommen (cols). Klik op het blok, ga naar het tabblad Stijl en stel het veld Lay-out in op Matrix of Cols om de standaard lay-outstijl te wijzigen.

Matrix

Met de Matrix-lay-out kun je elementen zoals afbeeldingen of tekst verplaatsen en de grootte aanpassen door ze te slepen. Als Matrix is geselecteerd, zijn er extra opties beschikbaar om Elementen toe te voegen door op Afbeelding, Tekst of Knop te klikken.

Selecteer een afbeelding en sleep deze naar de gewenste plek wanneer de matrixlay-out is geselecteerd.

Cols

Als je de Cols-lay-out kiest, kun je het aantal elementen per regel binnen het blok bepalen. Selecteer het blok dat je wilt wijzigen, klik op het vervolgkeuzemenu naast het veld Cols en pas het aantal aan. Je kunt vervolgens de instellingen van een specifieke kolom wijzigen met behulp van de opties in de sectie Kolom van het tabblad Stijl.

Notitie

Standaard is op mobiele apparaten slechts één element (kolom) per regel zichtbaar om ervoor te zorgen dat de inhoud gemakkelijk leesbaar en toegankelijk blijft op kleinere schermen. Klik op het (mobiel icoon) bovenaan de website-editor om de waarde aan te passen en pas het aantal kolommen aan. Vormen zijn standaard verborgen op mobiele apparaten.

Aangepast bouwblok opslaan

Je kunt een aangepast bouwblok opslaan om het elders te hergebruiken. Selecteer het, ga naar het tabblad Stijl en klik op het icoon (diskette). Klik op de knop Opslaan in de pop-up om het opslaan van je aangepaste blok te bevestigen.

Ga naar het tabblad Blokken en sleep het Aangepast-blok uit het gedeelte Categorieën om een opgeslagen bouwblok aan de pagina toe te voegen. Klik in de pop-up die opent op het gewenste blok in de categorie Aangepast.

Tip

Klik in de pop-up Blok invoegen op (bewerken) om het aangepaste blok te hernoemen of op (verwijderen) om het te verwijderen.