Pagina-inhoud bewerken in een drag-and-drop gebied

In de sleep-en-drop pagina-editor kunnen gebruikers aangepaste stijlen herschikken en toepassen op verschillende secties van een pagina. Slepen en neerzetten is beschikbaar voor pagina's die zijn gemaakt met startsjablonen, sommige themasjablonen en gecodeerde sjablonen met slepen en neerzetten.

De sleep-en neerzet-editor begrijpen

Drag and drop gebieden zijn samengesteld uit modules, die blokken van website-inhoud zijn. Modules kunnen worden gerangschikt in horizontale rijen of verticale kolommen, die vervolgens kunnen worden gegroepeerd in secties.

Door rijen, kolommen en secties te maken, kunt u meerdere modules tegelijk herschikken of van styling voorzien. Meer informatie over het aanpassen van stijlen voor inhoud met slepen en neerzetten.

1. Module: een individueel blok website-inhoud. Sommige modules, zoals rich text modules, kunnen meerdere soorten inhoud bevatten.
2. Rij: een horizontale rij modules. U kunt styling toepassen op een hele rij of de positie ervan op een pagina herschikken.
3. Kolom: een verticale stapeling van meerdere modules. U kunt styling toepassen op een hele kolom of de positie ervan op een pagina herschikken.
4. Katern: een groep van meerdere rijen of kolommen die de volledige breedte van de pagina beslaat. U kunt styling toepassen op een hele sectie of de positie ervan op een pagina herschikken.

Organiseer uw inhoud

In de zijbalkeditor ziet u een overzicht van de secties, rijen, kolommen en modules in uw inhoud. Van daaruit kunt u ze hernoemen, bewerken, klonen, verwijderen of verbergen:

• Navigeer naar uw inhoud:

  • Website Pagina's: Navigeer in uw HubSpot-account naar Marketing > Website > Websitepagina's.
  • Landingspagina's: Navigeer in uw HubSpot-account naar Marketing > Landingspagina's.
• Ga met de muis over een pagina en klik op Bewerken.
• Klik in de zijbalkeditor op het tabblad Inhoud .
• U kunt bepalen welke pagina-elementen zichtbaar zijn in de zijbalk-editor:
  • Om alleen de secties van uw pagina te bekijken, klikt u op Alles samenvouwen. Hierdoor worden alle rijen, kolommen en modules samengevouwen, zodat alleen de secties zichtbaar zijn in de sidebar-editor.
  • Als u alle inhoud van uw pagina wilt zien, klikt u op Alles uitbreiden. Hierdoor worden alle secties, rijen, kolommen en modules in de sidebar-editor weergegeven.
  • Als u een afzonderlijk pagina-element of container wilt bekijken, klikt u op het plusteken naast de naam ervan.
  • Als u een element of container wilt verbergen, klikt u op het minteken naast de naam.
• U kunt ook pagina-elementen bewerken, hernoemen, klonen, verwijderen en verbergen:
  • Om een element te bewerken, klikt u op de naam ervan.
  • Om een element te hernoemen, klikt u op de ellipses drie puntjes naast de naam en selecteert u Rename [element]. Voer in het dialoogvenster een naam in voor het element en klik op Opslaan.
  • Om een element te klonen, klikt u op de drie punt jes ellipses naast de naam en selecteert u Kloon. Dit maakt een exacte kopie van het oorspronkelijke element naast het element.
  • Om een element te verwijderen, klikt u op de drie punt jes ellipses naast de naam en selecteert u Verwijderen.
  • Om een module te verbergen, klikt u op de drie punt jes ellipses naast de naam en selecteert u Verberg deze module. Hierdoor wordt de module in het voorbeeld van de pagina verborgen, maar niet in de zijbalkeditor. Om een verborgen module op de pagina weer te geven, klikt u op de drie punt jes ellipses naast de naam en selecteert u Deze module weergeven.

Gebruik secties

In de drag-and-drop editor kunt u herbruikbare paginasecties maken door modules naar een lege sectielay-out te slepen. Ontwikkelaars kunnen deze secties ook maken met behulp van onze documentatie voor ontwikkelaars. Eenmaal gemaakt, kunnen secties worden gebruikt op elke pagina die hetzelfde thema gebruikt en die slepen en neerzetten ondersteunt. Opgeslagen secties die slimme regels bevatten zullen deze regels gebruiken wanneer ze aan een pagina worden toegevoegd.

Let op: er kunnenniet meer dan 50 herbruikbare secties tegelijk worden opgeslagen vanuit de sleep-en neerzet-editor. Om een nieuwe herbruikbare sectie op te slaan, verwijdert u een bestaande herbruikbare sectie.

Creëer een sectie

Je kunt een sectie opslaan om deze herbruikbaar te maken op andere pagina's met hetzelfde thema.

• Navigeer naar uw inhoud:

  • Website Pagina's: Navigeer in uw HubSpot-account naar Marketing > Website > Websitepagina's.
  • Landingspagina's: Navigeer in uw HubSpot-account naar Marketing > Landingspagina's.
• Ga met de muis over een pagina en klik op Bewerken.
• Ga in de inhoudseditor met de muis tussen twee secties staan en klik op hetplus-pictogram.

• Klik in het rechterpaneel op de tab Lay-outs en selecteer een lay-out voor uw sectie.

• Sleep in de inhoudseditor een module over de lay-out en zet hem op zijn plaats. Herhaal dit voor elke module van uw sectie.

• Ga met de muis over de sectie en klik op het icoon downCarat en selecteer vervolgens Sectie opslaan.

Let op: bestaande paginasecties en secties die zonder opmaak zijn gemaakt, kunnen ook worden opgeslagen als herbruikbare secties.

• Voer in het rechterpaneel een naam en beschrijving in voor uw sectie en klik op Opslaan.

Een sectie toevoegen of verwijderen

• Navigeer naar uw inhoud:

  • Website Pagina's: Navigeer in uw HubSpot-account naar Marketing > Website > Websitepagina's.
  • Landingspagina's: Navigeer in uw HubSpot-account naar Marketing > Landingspagina's.
• Ga met de muis over een pagina en klik op Bewerken.
• Ga in de inhoudseditor met de muis tussen twee secties staan en klik op hetplus-pictogram.

• Ga in het rechterpaneel met de muis over een sectie en klik op Selecteren. Secties die zijn opgeslagen vanuit de sleep-en neerzet-editor verschijnen onder Opgeslagen secties, terwijl de secties die door ontwikkelaars zijn gemaakt verschijnen onder Themesecties.
• Het toevoegen van een opgeslagen sectie die slimme regels bevat, zal die regels toepassen op de nieuw toegevoegde sectie. Deze secties krijgen het label Smart.
• Om een sectie te verwijderen, klikt u op het + plus pictogram voor het toevoegen van een sectie, vervolgens gaat u met de muis over de sectie en klikt u op het delete verwijder pictogram. Klik in het dialoogvenster op Verwijderen.

Rijen, kolommen of secties bewerken

• Ga in de pagina-editor met de muis over de rij, kolom of sectie enklik op het pictogram edit bewerken.
• Om de opvulling en marges rond de rij, kolom of sectie aan te passen, klikt u op Uitlijning en spatiëring in de zijbalkeditor.
• Om de achtergrond van een gebied te bewerken, klikt u op Achtergrond in de zijbalkeditor en selecteert u een stylingoptie :
  • Geen: verwijder alle achtergrondkleuren of -afbeeldingen.
  • Kleur: stel een enkele kleur in als achtergrond. Voer een hexadecimale waarde in of klik op dekleurenkiezer en selecteer een kleur, voer vervolgens een transparantiewaarde in.
  • Afbeelding: stel een afbeelding in als achtergrond. Om een nieuwe afbeelding toe te voegen, klik op Uploaden om een afbeelding van uw computer toe te voegen, of klik op Afbeeldingen bladeren om een afbeelding uit uw bestanden te selecteren.
  • Verloop: stel twee in elkaar overlopende kleuren in als achtergrond. Klik op het keuzemenu Richting en selecteer een verlooprichting. Voer voor elke kleur een hexadecimale waarde in, of klik op dekleurenkiezer en selecteer een kleur.

• Om een kopie te maken van een bestaand element, ga met de muis over het element en klik op het duplicate cckloonpictogram.
• Om een element van de pagina te verwijderen, gaat u met de muisover het element en klikt u op hetpictogram delete verwijderen.

Modules toevoegen en bewerken

• Navigeer naar uw inhoud:

  • Website Pagina's: Navigeer in uw HubSpot-account naar Marketing > Website > Websitepagina's.
  • Landingspagina's: Navigeer in uw HubSpot-account naar Marketing > Landingspagina's.
• Ga met de muis over een pagina en klik op Bewerken.
• Klik in de inhoudseditor op de module in de zijbalkeditor en sleep deze in positie op de pagina.
• Om de breedte van een module aan te passen, klikt u op de verticale scheidingslijn tussen de kolommen en sleept u deze in positie.

• Om de inhoud van een module aan te passen, gaat u met de muis over de module en klikt u op een pictogram:

• • edit Module bewerken: de inhoud van de module bewerken
  • clonduplicate Kloonmodule: maak een kopie van deze module op de pagina.
  • delete Verwijder module: verwijder deze module van de pagina.