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 er een pop-up waarmee je kunt kiezen uit meerdere sjablonen voor elke categorie.

Tip

Je kunt ook naar een specifiek blok zoeken in de pop-up Blok invoegen 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

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

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 blok Formulier wordt gebruikt om informatie te verzamelen van websitebezoekers en records in je database aan te maken, indien van toepassing. Om een formulier toe te voegen aan een websitepagina, sleep je de categorie Contact & formulieren en zet je deze neer, en selecteer je vervolgens het Formulierblok.

Voorbeeld van een formulierblok

Actie

Standaard wordt er automatisch een e-mail met de door de bezoeker ingevoerde informatie verzonden wanneer het formulier wordt ingediend. Afhankelijk van de apps die op je database zijn geïnstalleerd, kunnen er extra acties beschikbaar komen waarmee automatisch records kunnen worden aangemaakt. Om een andere actie te kiezen, klik je op Bewerken, klik je op het formulier, ga je naar het tabblad Personaliseren en selecteer je de gewenste Actie:

Een formulier bewerken om de actie te wijzigen

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

Om een nieuw veld aan het formulier toe te voegen, ga je naar het tabblad Personaliseren en klik je op de knop + Veld naast de sectie Formulier of Veld. Om het nieuwe (of een ander) veld op het formulier te wijzigen, selecteer je het veld en gebruik je de beschikbare opties in de sectie Veld van het tabblad Personaliseren. 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. Klik op de standaardbeschrijving op het formulier om deze aan te passen.

  • 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. Bereid het Odoo-formulier voor: Maak een contactformulier op een pagina in Odoo Website en verwijder het headerontwerp en het footerontwerp. Zorg ervoor dat alleen het contactformulier op de pagina overblijft.

  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.

Nadat je het blok aan een pagina hebt toegevoegd, klik je op het blok, ga je naar het tabblad Personaliseren en klik je op Bewerken. Vervang de placeholder-code door je aangepaste embed-code.

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 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 (trash) om een blok te verwijderen.

Marges op bouwblok uitbreiden

Tip

Wijzig snel de blokcategorie door op (uitwisselen) te klikken.

Bouwblok bewerken

Om de inhoud van een bouwblok te bewerken, klik je erop en ga je naar het tabblad Personaliseren. Beschikbare personalisatieopties variëren afhankelijk van het type geselecteerde blok.

Achtergrond

Om de achtergrond van een bouwblok aan te passen, selecteer je het blok, ga je naar het tabblad Personaliseren en klik je op de kleurstip of een andere optie voor Achtergrond. Je kunt de kleur wijzigen en/of een afbeelding, video en/of vorm toevoegen. Zodra je een vorm hebt geselecteerd, verschijnen er 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). Om de standaard lay-outstijl te wijzigen, klik je op het blok, ga je naar het tabblad Personaliseren en stel je het veld Lay-out in op Matrix of Cols.

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

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

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.

Dupliceer een bouwblok

Om een bouwblok te dupliceren, klik je op het icoon (dupliceren) bovenaan het tabblad Personaliseren. Na het dupliceren verschijnt het nieuwe blok op de pagina onder het origineel.

Aangepast bouwblok opslaan

Je kunt een aangepast bouwblok opslaan om het elders te hergebruiken. Selecteer het hiervoor, ga naar het tabblad Personaliseren en klik op het icoon (diskette). Klik op de knop Opslaan en opnieuw laden 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.