DocumentatieCommercePage Builder

Layout - Rij

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

Gemaakt voor:

  • Beginner
  • tussenpersoon
  • Gebruiker

Gebruik het inhoudstype van de Rij om een rij in het Page Builder stadiumtoe te voegen.

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.

Gereedschapset Rij

De rijgereedschapset wordt weergegeven wanneer u de muisaanwijzer op de rijcontainer plaatst. De gereedschapset bevat opties voor het verplaatsen, verbergen, dupliceren, bewerken of verwijderen van de rij. De selectie van instellingen bepaalt de vormgeving, achtergrond en lay-out van de rij. Aanvullende inhoudselementen kunnen vanuit het deelvenster Page Builder aan de linkerkant naar de rij worden gesleept.

toolbox van de Rij

Gereedschap
Pictogram
Beschrijving
Verplaatsen
pictogram van de Beweging {width="25"}
Hiermee verplaatst u de rij naar een andere positie ten opzichte van andere rijen in het werkgebied.
(label)
Row
Hiermee wordt de huidige inhoudscontainer aangeduid als een rij. Houd de muisaanwijzer boven de container om de gereedschapset weer te geven.
Instellingen
pictogram van Montages {width="25"}
Hiermee opent u de pagina Rij bewerken, waarin u de eigenschappen van de container kunt wijzigen.
Verbergen
het pictogram van de Huid {width="25"}
Hiermee verbergt u de huidige rij.
Tonen
toon pictogram {width="25"}
De verborgen rij wordt weergegeven.
Dupliceren
Dupliceer pictogram {width="25"}
Maakt een kopie van de rij.
Verwijderen
verwijder pictogram {width="25"}
Hiermee verwijdert u de rijcontainer 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 rij toevoegen

  1. Sleep in het deelvenster Page Builder onder Layout ​een nieuwe Row ​naar het werkgebied, net onder de eerste rij.

  2. Om de rij te formatteren, over de rijcontainer te bewegen om toolbox te tonen en te kiezen Montages ( pictogram van Montages {width="20"}).

    Gebruik de volgende secties voor gedetailleerde informatie over de voltooiing van de beschikbare montages.

    Toevoegend een rij {width="600" modal="regular"}

Rijinstellingen wijzigen

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

    toolbox van de Rij {width="600" modal="regular"}

  2. Gebruik de volgende secties voor gedetailleerde informatie over het bijwerken van de beschikbare montages.

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

Weergave

Gebruik de montages van de Vormgeving om te bepalen hoe de inhoud in de rij wordt getoond.

montages van de Verschijning

  • Als u wilt bepalen hoe de achtergrondkleur en/of achtergrondafbeelding wordt weergegeven ten opzichte van de container en de breedte van het inhoudsgebied, kiest u de uitlijning:

    table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
    Optie Beschrijving
    Contained De achtergrondkleur of -afbeelding is beperkt tot de maximale paginabreedte die door het thema wordt gedefinieerd.
    Full Width Hiermee beperkt u de inhoud tot de maximale paginabreedte die door het thema wordt gedefinieerd. De achtergrondkleur en/of -afbeelding zijn niet beperkt en breidt de volledige breedte van de rij uit.
    Full Bleed De inhoud en achtergrondafbeelding en/of -kleur zijn niet beperkt en de rij is breder. Volledig afloopgebied kan slechts met thema'sworden gebruikt die de lay-out steunen.

  • Voer de Minimum Height in voor de rij. Deze waarde kan een getal zijn met elke geldige CSS-eenheid (zoals 100px , 50% , 50em , 100vh ) of een berekening (zoals 100vh - 237px ).

    U kunt bijvoorbeeld de minimumhoogte van een rij instellen om de volledige hoogte van de pagina te vergroten, zodat u aantrekkelijke opties hebt voor achtergrondafbeeldingen en video's van volledige pagina.

  • Kies een instelling Vertical Alignment om inhoudscontainers uit te lijnen die aan de rij zijn toegevoegd (Boven, Midden of Onder).

Achtergrond

Er zijn veel opties voor het definiëren van de achtergrondweergave van een rij. U kunt een eenvoudige kleur- of achtergrondafbeelding toepassen en geavanceerde effecten beheren.

Achtergrondkleur

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)

U kunt de waarde op drie manieren instellen:

  • 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

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

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 Type

Een achtergrondtype kan een afbeelding of video zijn. Page Builder is standaard ingesteld op Image en geeft verschillende afbeeldingsinstellingen weer. Als u Video selecteert, vervangt Page Builder de afbeeldingsinstellingen door video-instellingen. Beide achtergrondtypen worden als volgt beschreven.

Achtergrondtype

Instellingen voor afbeeldingstypen

Als u de Background Type ​op Image instelt, gebruikt u de volgende instellingen om de weergave van de achtergrondafbeelding te definiëren.

Achtergrondbeeld

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

    table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
    Optie Beschrijving
    Upload Uploadt een afbeeldingsbestand van uw lokale computer naar de galerie en past het vervolgens toe als de achtergrondafbeelding voor de rij.
    Select from Gallery Hiermee wordt u gevraagd een bestaande afbeelding in de galerie te kiezen als achtergrondafbeelding voor de rij.
    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 - Stel deze optie in om te bepalen hoe de achtergrondafbeelding wordt geschaald ten opzichte van de breedte van de rij:

    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 rij.
    Contain De achtergrondafbeelding is beperkt tot de breedte van het inhoudsgebied.
    Auto Hiermee past u de grootte van het huidige stijlblad toe.

    Achtergrondgrootte {width="250"}

  • Background Position - Stel deze optie in om te bepalen hoe de achtergrondafbeelding ten opzichte van de rij wordt verankerd:

    table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
    Ankerpunt Positie
    Top Links/midden/rechts
    Center Links/midden/rechts
    Bottom Links/midden/rechts

    Het ankerpunt is als een drukknop die de afbeelding op de opgegeven achtergrondpositie aan de rij koppelt.

  • Background Attachment - Stel het type bijlage in 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. Gebruik de Parallax-achtergrond om de schuifsnelheid te bepalen.
    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 in de rij te vullen.

Instellingen voor videotypen

Als u het Type van Achtergrond aan Video plaatst, gebruik de volgende montages om de vertoning van het achtergrondbeeld te bepalen.

  • Video URL - Voer een geldige video-URL in. Geldige video-URL's kunnen koppelingen zijn naar:

    • YouTube-video's: https://youtu.be/CoDhMRUUjeI
    • Vimeo-video's: https://vimeo.com/190156113
    • Geldige videobestanden (.mp4 wordt aanbevolen): https://myvideos.com/spiral.mp4

    Achtergrondvideo URL {width="300"}

  • Overlay Color - Selecteer een kleur om een transparante tint toe te passen op de video.

  • Infinite Loop - Ingesteld op No om de video eenmaal af te spelen en te stoppen. Wanneer deze optie is ingesteld op Yes (standaardwaarde), wordt de video in een oneindige lus herhaald.

  • Lazy Load - Ingesteld op No om de video met de pagina te laden, zelfs als deze niet zichtbaar is. Wanneer deze optie is ingesteld op Yes (standaardwaarde), wordt de video alleen vanaf de bron geladen wanneer deze zichtbaar is op het scherm.

  • Play Only When Visible - Ingesteld op No om het afspelen van de video direct te starten nadat deze is geladen, ongeacht of deze zichtbaar is. Wanneer deze optie is ingesteld op Yes (standaardwaarde), wordt het afspelen van de video alleen gestart wanneer deze zichtbaar is.

  • Fallback Image - Geef indien nodig een afbeelding op die op het scherm moet worden weergegeven voordat de video wordt geladen en als de video om welke reden dan ook niet wordt geladen.

Parallax-achtergrond

Gebruik deze opties om de snelheid van een schuivende achtergrondafbeelding of -video te bepalen in verhouding tot het schuiven van de pagina. De achtergrond kan worden ingesteld om langzamer te schuiven om een gevoel van onderdompeling te creëren.

  • Plaats laat Parallax Achtergrond aan Yes toe.
  • Ga de Parallaxsnelheid als decimale waarde tussen -1.0 en 2.0 in.

Parallax de montages van de Achtergrond

Geavanceerd

  • Kies een Alignment als u de horizontale plaatsing wilt bepalen van inhoudscontainers die aan de rij 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 de rijcontainer, waarbij rekening wordt gehouden met de opgegeven opvulling.
    Center Hiermee lijnt u de inhoudscontainer in het midden van de rijcontainer uit, waarbij rekening wordt gehouden met de opgegeven opvulling.
    Right Hiermee lijnt u de inhoudscontainer uit langs de rechterrand van de rijcontainer, waarbij rekening wordt gehouden met de opgegeven opvulling.

  • Stel de stijl Border in die wordt toegepast op alle vier zijden van de rijcontainer:

    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 de Straal van de Rand van 15 {width="500"}

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

    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 rij op te geven.

    Ga elke overeenkomstige waarde in het diagram van de rijcontainer 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

    Marges en het Opvullen {width="600" modal="regular"}

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