DocumentatieCommercePage Builder

Layout - tabbladen

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

Gemaakt voor:

  • Beginner
  • tussenpersoon
  • Gebruiker

Gebruik het inhoudstype van Lusjes om een reeks lusjes in het Page Builder stadiumtoe te voegen. Wanneer u de tijdelijke aanduiding voor tabs van het deelvenster naar het werkgebied sleept, wordt in eerste instantie één standaardtabblad weergegeven. U kunt meer tabbladen toevoegen om een volledige set te maken. De breedte van de tabset wordt bepaald door de breedte van de bovenliggende container en de instellingen voor opvulling.

Reeks lusjes

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 van Lusjes werkt, voegt u individuele lusjes en de container van lusjes toe en uitgeeft die één of meerdere lusjes houdt. Elk tabblad heeft een eigen gereedschapset waarmee u tabbladen in het Page Builder -werkgebied kunt ontwerpen.

Afzonderlijke tabgereedschapset

toolbox van het Lusje

Gereedschap
Pictogram
Beschrijving
Verplaatsen
pictogram van de Beweging {width="25"}
Dit besturingselement naast het tablabel wordt gebruikt om de afzonderlijke tab naar een andere positie in de tabset te verplaatsen.
Instellingen
pictogram van Montages {width="25"}
Hiermee opent u de pagina Tabs bewerken, waarin u de eigenschappen van het afzonderlijke tabblad kunt wijzigen.
Dupliceren
Dupliceer pictogram {width="25"}
Hiermee maakt u een kopie van de tab.
Verwijderen
verwijder pictogram {width="25"}
Hiermee verwijdert u de tab uit de tabset.

Gereedschapset voor tabcontainers

de containertoolbox van het Lusje

Gereedschap
Pictogram
Beschrijving
Verplaatsen
pictogram van de Beweging {width="25"}
Hiermee verplaatst u de set met tabbladen naar een andere positie op het raster in de bovenliggende container.
Toevoegen
voeg pictogram {width="25"} toe
Hiermee voegt u een tab toe aan de tabset.
(label)
Tabs
Identificeert de huidige container als tabset. Houd de muisaanwijzer boven de bovenrand van de container om de gereedschapset weer te geven.
Instellingen
pictogram van Montages {width="25"}
Hiermee opent u de pagina Tabblad bewerken, waarin u de eigenschappen van de container kunt wijzigen.
Verbergen
het pictogram van de Huid {width="25"}
Hiermee verbergt u de tabcontainer.
Tonen
toon pictogram {width="25"}
Hiermee wordt de verborgen tabcontainer weergegeven.
Dupliceren
Dupliceer pictogram {width="25"}
Hiermee maakt u een kopie van het huidige tabblad.
Verwijderen
verwijder pictogram {width="25"}
Hiermee verwijdert u de huidige tabset 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 afzonderlijk tabblad toevoegen

  1. Sleep de tijdelijke aanduiding Tabs in het deelvenster Page Builder onder Layout ​rechtstreeks naar het werkgebied of naar een rij of kolom in het werkgebied.

    het slepen lusjes aan een rij {width="600" modal="regular"}

  2. Klik het Tab 1 etiket om individuele tabtoolbox te tonen en de Montages te kiezen ( pictogram van Montages {width="20"} ).

  3. Voer de Tab Name in die u als label wilt gebruiken.

    die de lusjenaam {width="600" modal="regular"} ingaat

  4. Voer indien nodig de Minimum Height voor de tab in.

    Deze waarde kan een getal zijn met elke geldige CSS-eenheid (zoals 100px , 50% , 50em , 100vh ) of een berekening (zoals 100vh - 237px ).

  5. Kies een instelling Vertical Alignment om inhoudscontainers uit te lijnen die aan het tabblad zijn toegevoegd (Boven, Midden of Onder).

  6. Stel zo nodig de andere opties in met de volgende secties als richtlijn:

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

Een set tabbladen toevoegen

De volgende stappen beginnen met een afzonderlijk tabblad en maken een set van drie tabbladen in een tabcontainer. Als u nog geen afzonderlijke tab hebt, volgt u de vorige instructies om één tab aan het werkgebied toe te voegen.

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

  2. Klik in het label Tab 2 om de cursor weer te geven en voer uw eigen label voor het tabblad in.

  3. Klik opnieuw het tweede lusje op het stadium en kies Dupliceer ( Dupliceer pictogram {width="20"}) pictogram.

  4. Klik in het label YourName Copy om de cursor weer te geven en voer uw eigen label voor het derde tabblad in.

het Aanpassen reeks lusjes met toolbox

Een tabblad in de set verplaatsen

  1. Klik op het tabblad dat u wilt verplaatsen.

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

Inhoud toevoegen aan een tabblad

U kunt elk inhoudstype op een tabblad toepassen, net als bij een rij. Gebruik de volgende stappen om een tekstinhoudstype als voorbeeld toe te voegen.

  1. Klik op het tabblad waar u de inhoud wilt toevoegen.

  2. In het Page Builder paneel, breid Elements uit en sleep placeholder van de a Tekst aan de tabel.

  3. Typ of plak tekst in de editor en gebruik de editor-werkbalk om deze zo nodig op te maken.

    Zie Elementen - Tekstvoor meer informatie over het werken met het type van tekstinhoud.

    het uitgeven tekstinhoud die op het lusje {width="500" modal="regular"} wordt toegevoegd

  4. Klik in de rechterbovenhoek op Save .

Afzonderlijke tabinstellingen wijzigen

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

  2. Wijzig zo nodig de basisinstellingen voor het tabblad:

    • Tab Name - Voer gereviseerde tekst voor het tablabel in. U kunt het label ook rechtstreeks in het werkgebied wijzigen.

    • Minimum Height - ga als pixel in als u de automatische hoogte wilt met voeten treden. U kunt bijvoorbeeld de minimumhoogte instellen zodat deze overeenkomt met de hoogte van een achtergrondafbeelding, zodat de volledige afbeelding zichtbaar is.

    • Vertical Alignment - Kies de verticale positie van inhoudscontainers die aan het tabblad worden toegevoegd.

  3. Wijzig desgewenst de overige instellingen met de volgende secties voor meer informatie.

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

Achtergrond

  • Background Color - Geef de achtergrondkleur op door een staal te kiezen, op de kleurkiezer te klikken of door een geldige kleurnaam of een gelijkwaardige hexadecimale waarde in te voeren. Deze instelling bepaalt de achtergrondkleur van de rij. U kunt ook de dekking van de kleur aanpassen.

    Geen kleur (gebrek) {width="200"}

    U kunt een waarde op drie manieren invoeren:

    • Een vooraf gedefinieerde kleurnaam, zoals White

    • De hexadecimale kleurwaarde voor de kleur, zoals #ffffff

    • De RGB-waarde voor de kleur, met een dekkingspercentage, zoals rgba(255, 255, 255, 0.75)

    Als u een kleur wilt kiezen, klik het monster links van Geen doos van de Kleur.

    het Kiezen van een kleurenmonster {width="600" modal="regular"}

    Als u nogmaals op het kleurvak klikt om de kleurkiezer te openen, worden in het vak onder de schuifregelaar de huidige waarden voor rood, groen, blauw en alpha (rgba) weergegeven. Het laatste getal geeft het huidige dekkingspercentage aan als een decimaal. U kunt de schuifregelaar gebruiken om de dekking aan te passen of de gewenste decimale waarde invoeren.

    Plaatsende opaciteit {width="600" modal="regular"}

    note note
    NOTE
    Page Builder steunt ook een transparantielaag, of alpha- kanaal, in achtergrondbeelden die kunnen worden gebruikt om achtergronden met variërende graden van opaciteit tot stand te brengen.

  • Background Image - Kies zo nodig met de beschikbare gereedschappen een achtergrondafbeelding die u op het tabblad wilt toepassen:

    table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
    Gereedschap Beschrijving
    Upload Uploadt een afbeeldingsbestand van uw lokale computer naar de galerie en past het vervolgens toe als achtergrondafbeelding voor de tab.
    Select from Gallery Hiermee wordt u gevraagd een bestaande afbeelding in de galerie te kiezen als achtergrondafbeelding voor het tabblad.
    het pictogram van de Camera {width="25"} Hiermee kunt u de afbeelding naar de tegel van de camera slepen of naar de afbeelding in uw lokale bestandssysteem bladeren.

  • Background Mobile Image - Gebruik indien nodig dezelfde gereedschappen om een andere achtergrondafbeelding te kiezen die u wilt gebruiken voor weergave op mobiele apparaten.

  • Background Size - Kies hoe de achtergrondafbeelding wordt geschaald ten opzichte van de breedte van het tabblad:

    table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
    Optie Beschrijving
    Cover De achtergrondafbeelding bedekt de volledige breedte van de tab.
    Contain De achtergrondafbeelding is beperkt tot de breedte van het tabgebied.
    Auto Hiermee past u de grootte van het huidige stijlblad toe.

  • Background Position - Bepaal hoe de achtergrondafbeelding ten opzichte van het tabblad wordt verankerd: Top Left / Top Center / Top Right / Center Left / Center / Center Right / Bottom Left / Bottom Center / Bottom Right

  • Background Attachment - Kies het type bijlage om te bepalen hoe de achtergrondafbeelding ten opzichte van de schuifpagina wordt verplaatst:

    table 0-row-2 1-row-2 2-row-2 layout-auto
    Optie Beschrijving
    Scroll De bijgevoegde achtergrondafbeelding wordt gesynchroniseerd zodat deze omlaag wordt verplaatst wanneer de pagina wordt verschoven.
    Fixed (Niet beschikbaar voor mobiele apparaten) De achtergrondafbeelding wordt niet verplaatst wanneer de container over de afbeelding schuift en op de opgegeven achtergrondpositie wordt vastgezet.

  • Background Repeat - Ingesteld op Yes om de achtergrondafbeelding te herhalen en de beschikbare ruimte op het tabblad te vullen.

Geavanceerd

  • Kies een Alignment als u de horizontale uitlijning wilt bepalen van inhoudscontainers die aan het tabblad worden toegevoegd.

    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 inhoudscontainers uit langs de linkerrand van het tabblad, waarbij rekening wordt gehouden met de opgegeven opvulling.
    Center Hiermee lijnt u de inhoudscontainer uit in het midden van het tabblad, waarbij rekening wordt gehouden met de opgegeven opvulling.
    Right Hiermee lijnt u de inhoudscontainer uit langs de rechterrand van het tabblad, waarbij rekening wordt gehouden met de opgegeven opvulling.

  • Stel de stijl Border in die op alle vier zijden van de tabcontainer 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.

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

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

    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.

    De rij in het volgende voorbeeld heeft een randstraal van 15.

    Rij met grensstraal van 15 {width="500"}

  • (Optioneel) Geef de namen van CSS classes op uit het huidige stijlblad die u wilt toepassen op de kolomcontainer.

    Scheid meerdere klassennamen met een spatie.

  • Voer in pixels waarden in voor de Margins and Padding om de buitenste marges en de binnenopvulling van de kolom op te geven.

    Voer elke bijbehorende waarde in het tabcontainerdiagram 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

Instellingen van tabsets wijzigen

  1. Beweeg over de hoogste grens van de lusje vastgestelde container om toolbox te tonen en de pictogram van Montages te kiezen ( pictogram van Montages {width="20"}).

  2. Wijzig indien nodig de Default Active Tab .

    Kies de tab in de set die u actief wilt maken wanneer de pagina wordt geladen.

  3. Voer de markering Minimum Height in pixels in als u de automatische hoogte voor de tabset wilt overschrijven.

  4. Als u de navigatietabels langs de bovenkant van de tabset wilt plaatsen, kiest u Tab Navigation Alignment (Left , Center of Right).

    rechts-gerichte navigatielabs {width="500" modal="regular"}

  5. Stel de Geavanceerde opties voor de tabset in:

    • Kies een Alignment als u de positie van de tabset 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 tabset uit langs de linkerrand van de bovenliggende container, waarbij rekening wordt gehouden met de opgegeven opvulling.
      Center Hiermee lijnt u de tabset uit in het midden van de bovenliggende container, waarbij rekening wordt gehouden met de opgegeven opvulling.
      Right Hiermee lijnt u de tabset uit langs de rechterrand van de bovenliggende container, waarbij rekening wordt gehouden met de opgegeven opvulling.

    • Stel de stijl Border in die op alle vier zijden van de container met tabbladen 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.

    • 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.

    • (Optioneel) Geef de namen van CSS classes op uit het huidige stijlblad die u wilt toepassen op de tabcontainer.

      Scheid meerdere klassennamen met een spatie.

    • Voer in pixels waarden in waarmee de buitenste marges en de binnenopvulling van de tabs-container worden bepaald door de Margins and Padding .

      Voer de bijbehorende waarden in het tabbladcontainerdiagram 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

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

recommendation-more-help
85b60248-86a4-4d5f-9933-5179643f608d