DocumentatieCommercePage Builder

Elements - Knoppen

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Onderwerpen:

Gemaakt voor:

  • Beginner
  • tussenpersoon
  • Gebruiker

Gebruik het inhoudstype van Knopen om of een individuele knoop of een reeks knopen in het Page Builder stadiumtoe te voegen. U kunt knoppen horizontaal of verticaal rangschikken en rechtstreeks toevoegen aan rijen, kolommen, tabbladen en banners in het werkgebied.

Banner met een knoop op de storefront

NOTE
Als u significante veranderingen in Page Builder inhoud aanbrengt, adviseert men dat u het Levenslang van de Zitting Adminverhoogt om de zitting te verhinderen uit timing terwijl u werkt.

Werkbalken

Wanneer u met het inhoudstype Knoppen werkt, voegt u afzonderlijke knoppen en de knoppencontainer die een of meer knoppen bevat toe en bewerkt u deze. Elk gereedschap heeft een eigen gereedschapset die u kunt gebruiken om knoppen te ontwerpen in het Page Builder -werkgebied.

Afzonderlijke knopgereedschapset

toolbox van de Knoop

Gereedschap
Pictogram
Beschrijving
Instellingen
pictogram van Montages {width="25"}
Hiermee opent u de pagina Knop Bewerken, waar u de eigenschappen van de knop kunt wijzigen.
Dupliceren
Dupliceer pictogram {width="25"}
Hiermee maakt u een kopie van de knop.
Verwijderen
verwijder pictogram {width="25"}
Hiermee verwijdert u de knop uit het werkgebied.

Knoppencontainer, gereedschapset

de containertoolbox van Knopen

Gereedschap
Pictogram
Beschrijving
Verplaatsen
pictogram van de Beweging {width="25"}
Verplaatst de knopcontainer naar een andere geldige plaats op de pagina.
Toevoegen
voeg pictogram {width="25"} toe
Hiermee voegt u een knop aan de container toe.
(label)
Knop
Identificeert de huidige container als een knopelement.
Instellingen
pictogram van Montages {width="25"}
Hiermee opent u de pagina Knoppen bewerken, waarin u de eigenschappen van de container kunt wijzigen.
Verbergen
het pictogram van de Huid {width="25"}
Verbergt de knopcontainer.
Tonen
toon pictogram {width="25"}
Hiermee wordt de verborgen knopcontainer weergegeven.
Dupliceren
Dupliceer pictogram {width="25"}
Maakt een kopie van de knopcontainer.
Verwijderen
verwijder pictogram {width="25"}
Hiermee verwijdert u de knopcontainer en de inhoud ervan uit het werkgebied.
NOTE
Verborgen elementen worden opgeslagen in de database en onzichtbaar voor klanten. Deze elementen zijn echter zichtbaar voor zoekmachines en andere bots die uw site kruipen. Ze worden ook geretourneerd als onderdeel van de inhoud als ze worden opgevraagd via een API-aanroep met een kenmerk van onzichtbaarheid, tenzij u ze uit het werkgebied verwijdert.

Een afzonderlijke knop toevoegen

  1. Vouw in het deelvenster Page Builder Elements uit en sleep een tijdelijke aanduiding Buttons naar een rij, kolom of tabset in het werkgebied.

    slepend een knoop aan het stadium {width="500" modal="regular"}

  2. Beweeg over de knoop om toolbox te tonen en het pictogram van Montages te kiezen ( pictogram van Montages ).

  3. Voer de Button Text in die op de knop moet worden weergegeven.

    Basisknoopmontages {width="600" modal="regular"}

  4. Stel Button Type in op een van de volgende opties:

    table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
    Type Beschrijving
    Primary Past de primaire knoopstijl van het huidige stijlblad toe.
    Secondary Past de secundaire knoopstijl van het huidige stijlblad toe als toepasselijk.
    Link Maakt een hyperlink in plaats van een knop.

    Primair en secundair knoopvoorbeeld {width="500" modal="regular"}

  5. Stel de Button Link in met een van de volgende typen:

    • URL - Voer de doel-URL voor de koppeling in.

      De URL kan een relatieve koppeling zijn naar een product of pagina in uw winkel of een volledig gekwalificeerde URL.

      Relatief URL-voorbeeld - ../luma-analog-watch.html

      Volledig gekwalificeerd URL-voorbeeld - http://mystore.com/luma-analog-watch.html

      Als de koppeling naar een andere website gaat, kunt u de huidige pagina open houden voor uw winkel door de koppeling op een nieuw browsertabblad te openen.

      Schakel het selectievakje Open in new tab in om te voorkomen dat de bezoeker uit uw winkel navigeert.

    • Product - Voer een productnaam (gedeeltelijk of volledig) of SKU in en kies vervolgens de productnaam in de lijst.

      note note
      NOTE
      De producten worden getoond in de lijst volgens toon uit voorraadproducten montages. Voor de Multicamakers van Source die Inventory managementgebruiken, wordt de productlijst beperkt door de bron die aan de standaardwebsite slechts wordt toegewezen.

      Kiekend een product voor de knoopverbinding {width="600" modal="regular"}

    • Category - Voer een categorienaam in (gedeeltelijk of volledig) of klik in het lege veld om de categoriestructuur weer te geven. Kies vervolgens de categorienaam in de structuur.

      Kiekend een categorie voor de knoopverbinding {width="600" modal="regular"}

    • Page - Voer de naam van een CMS-pagina in (gedeeltelijk of volledig) of klik in het lege veld om de volledige lijst weer te geven. Kies vervolgens de naam van de pagina in de lijst met zoekresultaten.

      kies CMS pagina voor knoopverbinding {width="600" modal="regular"}

  6. Voltooi de geavanceerde montageszoals nodig.

  7. Klik na afloop op Save in de rechterbovenhoek om de instellingen toe te passen en terug te keren naar de werkruimte van Page Builder .

Een set knoppen toevoegen

In de volgende secties wordt een reeks stappen beschreven die met een afzonderlijke knop moeten beginnen en wordt een set van drie knoppen in een knopcontainer gemaakt. Als u nog geen afzonderlijke knop hebt, volgt u de vorige instructies om een afzonderlijke knop aan het werkgebied toe te voegen.

Stap 1: De tweede knop maken

  1. Beweeg over de knoopcontainer om toolbox te tonen en te kiezen voeg toe ( voeg pictogram {width="20"} toe) pictogram.

    Toevoegend een andere knoop {width="500" modal="regular"}

  2. Voer de tekst in die u op de tweede knop wilt weergeven.

  3. Klik de nieuwe knoop om zijn toolbox te tonen en het pictogram van Montages te kiezen ( pictogram van Montages {width="20"}).

    Uitgevend de knoop {width="500" modal="regular"}

  4. Stel Button Type in op Secondary .

  5. Stel de Button Link naar wens in.

    In het volgende voorbeeld, is de verbinding een relatieve URL die naar de pagina van het Contact van onsgaat.

    de knoopmontages van het Contact van ons {width="600" modal="regular"}

  6. Voltooi de geavanceerde montageszoals nodig.

  7. Klik na afloop op Save om de instellingen toe te passen en terug te keren naar de werkruimte van Page Builder .

Stap 2: De derde knop maken

  1. Klik opnieuw de tweede knoop op het stadium en kies Dupliceer ( Dupliceer pictogram {width="20"}) pictogram.

    Duplicerend een knoop {width="500" modal="regular"}

  2. Voer de tekst in die u op de derde knop wilt weergeven.

  3. Klik de derde knoop om toolbox te tonen en het pictogram van Montages te kiezen ( pictogram van Montages {width="20"}).

    Toolbox voor de derde knoop {width="500" modal="regular"}

  4. Werk de Button Link zo nodig bij.

  5. Klik in de rechterbovenhoek op Save om de instellingen toe te passen en terug te keren naar de werkruimte van Page Builder .

Stap 3: De knopcontainer bijwerken

  1. Beweeg over de knoopcontainer om toolbox te tonen en de pictogram van Montages te kiezen ( pictogram van Montages {width="20"}).

    de containertoolbox van Knopen {width="500" modal="regular"}

  2. Kies onder Appearance ​de optie Stacked.

  3. Stel All Buttons are same size in op Yes .

    Gestapelde knopen van de zelfde grootte {width="300"}

  4. Werk de resterende montages zoals nodig bij, gebruikend de beschrijvingen van montages van de Verandering voor een knoopcontainer.

  5. Klik na afloop op Save om de instellingen toe te passen en terug te keren naar de werkruimte van Page Builder .

    De volledige gestapelde knopset wordt in het werkgebied weergegeven met één primaire knop en twee secundaire knoppen.

    Gestapelde knopen op het stadium {width="500" modal="regular"}

Een knop verplaatsen

  1. Klik op de knop die u wilt verplaatsen.

  2. Selecteer en sleep het pictogram van de Beweging ( het pictogram van de Beweging {width="20"}), dat net vóór de knooptekst verschijnt, aan een nieuwe positie voor de knoop binnen de knoopcontainer.

    Bewegend een knoop {width="500" modal="regular"}

Instellingen voor een knop wijzigen

  1. Klik de knoop op het stadium om toolbox te tonen en de pictogram van Montages te kiezen ( pictogram van Montages {width="20"}).

    toolboxes van de Knoop {width="500" modal="regular"}

  2. Werk de standaardinstellingen naar wens bij.

    • Button Text - Voer de tekst in die op de knop moet worden weergegeven (kan ook rechtstreeks vanuit het werkgebied worden bijgewerkt).

    • Button Type - Hiermee bepaalt u de knopindeling.

      table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
      Type Beschrijving
      Primary Past de primaire knoopstijl van het huidige stijlblad toe.
      Secondary Past de secundaire knoopstijl van het huidige stijlblad toe, indien van toepassing.
      Link Maakt een hyperlink in plaats van een knop.

    • Button Link - Bepaalt de bestemmingspagina die wordt gediend wanneer de knoop wordt geklikt.

      table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto
      Optie Beschrijving
      URL Gebruikt of een relatieve of volledig - gekwalificeerde URL om de bestemmingspagina te identificeren.
      Product Identificeert de bestemmingspagina die op de productnaam of SKU wordt gebaseerd. U kunt zoeken naar de productnaam op basis van een gedeeltelijke of volledige naam. Het product wordt vervolgens gekozen uit de lijst met zoekresultaten.
      Category Hiermee wordt de doelpagina geïdentificeerd als een specifieke categorie of subcategorie in de categoriestructuur.
      Page Hiermee wordt de doelpagina geïdentificeerd als een specifieke CMS-pagina.

  3. Voltooi de geavanceerde montageszoals nodig.

  4. Als u de instellingen wilt opslaan en wilt terugkeren naar de werkruimte van Page Builder , klikt u op Save in de rechterbovenhoek.

Instellingen wijzigen voor een knopcontainer

  1. Beweeg over de knoopcontainer om toolbox te tonen en de pictogram van Montages te kiezen ( pictogram van Montages {width="20"}).

  2. Werk de instellingen van Appearance naar wens bij.

    • Gebruik de opties voor rangschikking om de knoppen horizontaal of verticaal in de container weer te geven:

      table 0-row-2 1-row-2 2-row-2 layout-auto
      Optie Beschrijving
      Inline Hiermee rangschikt u de knoppen horizontaal.
      Stacked Hiermee rangschikt u de knoppen verticaal.

    • Stel de optie All buttons are same size in op basis van uw voorkeur.

      Wanneer ingesteld op Yes , hebben alle knoppen in de container een consistente grootte, gebaseerd op de lengte van de langste knoptekst.

  3. Voltooi de Geavanceerde montageszoals nodig.

  4. Klik na afloop op Save om de instellingen toe te passen en terug te keren naar de werkruimte van Page Builder .

Geavanceerde instellingen wijzigen

U kunt de Advanced-instellingen voor afzonderlijke knoppen en voor de knopcontainer wijzigen.

  1. Kies de optie Alignment als u de positionering in de bovenliggende container wilt bepalen:

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto
    Optie Beschrijving
    Default Hiermee past u de standaardinstelling voor uitlijning toe die is opgegeven in het stijlblad van het huidige thema.
    Left Hiermee lijnt u de inhoud uit langs de linkerrand van de bovenliggende container, waarbij rekening wordt gehouden met de opgegeven opvulling.
    Center Hiermee lijnt u de inhoud uit in het midden van de bovenliggende container, waarbij rekening wordt gehouden met de opgegeven opvulling.
    Right Hiermee lijnt u de inhoud uit langs de rechterrand van de bovenliggende container, waarbij rekening wordt gehouden met de opgegeven opvulling.

  2. Stel de stijl Border in die op alle vier zijden van de knop of knoppencontainer wordt toegepast:

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2 8-row-2 9-row-2 10-row-2 layout-auto
    Optie Beschrijving
    Default Past de standaardrandstijl toe die door het bijbehorende stijlblad wordt gespecificeerd.
    None Geeft geen zichtbare indicatie van de containerranden.
    Dotted De containerrand wordt weergegeven als een stippellijn.
    Dashed De containerrand wordt weergegeven als een onderbroken lijn.
    Solid De containerrand wordt weergegeven als een effen lijn.
    Double De containerrand wordt weergegeven als een dubbele lijn.
    Groove De containerrand wordt weergegeven als een gegroefde lijn.
    Ridge De containerrand wordt weergegeven als een afgeronde lijn.
    Inset De containerrand wordt weergegeven als een inzetlijn.
    Outset De containerrand wordt weergegeven als een omtreklijn.

  3. Als u een andere randstijl dan None instelt, voert u de weergaveopties voor de rand in:

    table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
    Optie Beschrijving
    Border Color Geef de kleur op door een staal te kiezen, op de kleurkiezer te klikken of door een geldige kleurnaam of een gelijkwaardige hexadecimale waarde in te voeren.
    Border Width Voer het aantal pixels in voor de lijnbreedte van de rand.
    Border Radius Voer het aantal pixels in om de grootte te bepalen van de straal die wordt gebruikt om elke hoek van de rand te afronden.

  4. (Optioneel) Geef de namen van CSS classes op uit het huidige stijlblad die u wilt toepassen op de knop of knoppencontainer.

    Scheid meerdere klassennamen met een spatie.

  5. Voer in pixels waarden in voor de Margins and Padding om de buitenste marges en de binnenopvulling van de knop of knoppencontainer te bepalen.

    Voer de overeenkomende waarden in het diagram in.

    table 0-row-2 1-row-2 2-row-2 layout-auto
    Containergebied Beschrijving
    Margins De hoeveelheid lege ruimte die wordt toegepast op de buitenrand van alle zijden van de container. Opties: Top / Right / Bottom / Left
    Padding De hoeveelheid lege ruimte die wordt toegepast op de binnenrand van alle zijden van de container. Opties: Top / Right / Bottom / Left
recommendation-more-help
85b60248-86a4-4d5f-9933-5179643f608d