DocumentatieCommercePage Builder

Page Builder Doorlopen, deel 2: blokken

Last update: Thu Oct 31 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Onderwerpen:

Gemaakt voor:

  • Beginner
  • tussenpersoon
  • Gebruiker

De volgende oefening illustreert het verschil tussen eenvoudige blokkenen dynamische blokken, en hoe te om Page Builder te gebruiken om elk type van blok tot stand te brengen.

NOTE
Page Builder heeft een nieuw inhoudstype genoemd Banner, dat in de eerste doorloopoefening wordt vermeld en niet met de vorige bannerfunctionaliteit verwant is. Wat eerder de optie van de Banner in het menu van de Inhoudwas, is nu Dynamisch Blok.

Dynamisch blok in storefront {width="700" modal="regular"}

Deze oefening veronderstelt dat u Deel 1 hebt voltooid: Eenvoudige Pagina, met inbegrip van de eerste vereisten en gedownloade steekproefdossiers. Volg de onderdelen van deze doorloopoefening in orde.

NOTE
Deze doorlopende oefeningen worden bijgewerkt om recente wijzigingen in de Page Builder -werkruimte in de release 2.4.1 te weerspiegelen.

Deel 1: Een eenvoudig blok maken

In deze doorlichtingsoefening, creeert u een eenvoudig blok met inhoud van Google Maps. De eenvoudige blokken worden soms genoemd blokken van CMS of statische blokken, omdat de inhoud niet verandert. Een eenvoudig blok is ideaal voor inhoud die u wellicht opnieuw wilt gebruiken.

Stap 1: Een blok maken

  1. Voor Admin sidebar, ga Content > Elements>Blocks.

  2. Klik in de rechterbovenhoek op Add New Block .

  3. Voer bij Block Title Google Map in.

  4. Voer bij Identifier google-map in.

  5. Kies de locatie Store View waar het blok beschikbaar moet zijn.

    Informatie van het Blok {width="600" modal="regular"}

  6. Klik in de rechterbovenhoek op Save .

Stap 2: Een Google Map toevoegen

  1. Schuif omlaag naar de voorvertoning van de Page Builder -inhoud (momenteel leeg) en klik op Edit with Page Builder .

  2. Vouw Media uit in het deelvenster Page Builder en sleep een tijdelijke aanduiding Map naar het werkgebied.

    slepend een kaart aan het stadium {width="600" modal="regular"}

    Er wordt een kaart naar de locatie van uw winkel weergegeven als Google Maps is geconfigureerd voor uw winkel.

    Gevormde Kaart van Google voor uw opslag {width="600" modal="regular"}

    Er wordt een plaatsaanduidingskaart weergegeven als Google Maps nog niet is geconfigureerd voor uw winkel.

    Google Maps placeholder {width="600" modal="regular"}

  3. In de hoger-juiste hoek van het stadium, klik het Dichte Volledige Scherm ( Dichte volledig het schermpictogram ) pictogram.

    Wanneer u op dit pictogram klikt, keert u terug naar de sectie Content ​voor het blok met de voorvertoning weergegeven.

  4. Klik in de rechterbovenhoek op de pijl Save en kies Save & Close .

Stap 3: configureren Google Maps

Als Google Maps al voor uw opslag wordt gevormd, kunt u deze stap overslaan en aan volgende te werk gaan.

  1. Ga naar de Console van het Platform van Google Cloud.

  2. Klik het project drop-down en selecteer of creeer het project waarvoor u een API sleutel wilt toevoegen.

  3. Om uw API geloofsbrieven te vormen, volg de instructiesin de Google Maps documentatie.

  4. Kopieer de API-sleutel naar het klembord.

  5. Ga terug naar Commerce Admin en ga naar Stores > Settings>Configuration.

  6. Kies in het linkerdeelvenster onder General ​de optie Content Management.

  7. Breid selecteur van de Uitbreiding Advanced Content Tools uit.

    Geavanceerde Hulpmiddelen van de Inhoud {width="600" modal="regular"}

    Voor meer informatie over de Content Management Advanced Tools configuratieopties, zie de Gids van de Verwijzing van de Configuratie.

  8. Plak voor Google Maps API Key de gekopieerde sleutel.

  9. Klik op Test Key.

    Als er een probleem is met uw sleutel, gaat u terug naar de Google Maps Platform-site om het probleem op te lossen. Probeer het vervolgens opnieuw.

  10. Klik op Save Config nadat de toets is geverifieerd.

Stap 4: Het blok toevoegen aan een pagina

  1. Voor Admin sidebar, ga Content > Elements>Pages.

  2. Zoek in het raster de Simple Page ​die u in de eerste zelfstudie hebt gemaakt en selecteer Edit ​in de kolom​ Action .

  3. Breid selecteur van de Uitbreiding de Content sectie uit en klik Edit with Page Builder of binnen het gebied van de inhoudsvoorproef.

  4. Sleep in het deelvenster Page Builder onder Layout ​een tijdelijke aanduiding voor Row ​naar de bovenkant van het werkgebied.

    Toevoegend de rij aan de bovenkant van het stadium {width="600" modal="regular"}

  5. Vouw Add Content uit in het deelvenster Page Builder en sleep een tijdelijke aanduiding Block naar de nieuwe rij.

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

    toolbox van het Blok {width="600" modal="regular"}

  7. Klik op de pagina Blok bewerken op Select Block .

    Uitgezochte Blok {width="600" modal="regular"}

  8. Typ map in het zoekvak en druk op Enter/Return om het blok te zoeken dat u hebt gemaakt.

    Vondst Blok in Lijst {width="600" modal="regular"}

  9. Klik in het raster op Select om het Google Maps -blok te kiezen.

  10. Klik in de rechterbovenhoek op Save om de instellingen op te slaan en terug te keren naar de werkruimte van Page Builder .

  11. In de hoger-juiste hoek van het stadium, klik het Dichte Volledige Scherm ( Dichte volledig het schermpictogram ) pictogram.

    Wanneer u op dit pictogram klikt, keert u terug naar de sectie Content ​voor de pagina waarop de voorvertoning wordt weergegeven.

  12. Klik in de rechterbovenhoek op de pijl Save en kies Save & Close .

Gefeliciteerd! U hebt het eerste deel van de blokexercitie voltooid. Zorg ervoor dat u uw werk ter referentie bijhoudt.

Deel 2: Een dynamisch blok maken

Een dynamisch blok omvat logica die bepaalt waar, wanneer, en aan wie het verschijnt. In deze analyse oefening, creeert u een dynamisch blok voor een bevordering die wordt teweeggebracht wanneer de voorwaarden van de prijsregel worden voldaan, en dat slechts aan een specifiek klantensegment lijkt. Het resultaat van dit voorbeeld is vergelijkbaar met de banner die tijdens de eerste oefening is gemaakt, maar met de logica die bepaalt wanneer deze in de storefront wordt weergegeven.

Bevordering van de Boom van de Steekproef Luma {width="600" modal="regular"}

Stap 1: Een nieuw dynamisch blok maken

  1. Voor Admin sidebar, ga Content > Elements>Dynamic Blocks.

    Dynamische lijst van Blokken {width="700" modal="regular"}

  2. Klik in de rechterbovenhoek op Add Dynamic Block .

    Nieuwe Dynamische pagina van het Blok {width="600" modal="regular"}

  3. Voltooi de basisinstellingen voor het nieuwe dynamische blok:

    • Stel Enable Dynamic Block in op Yes .

    • Voer bij Dynamic Block Name Tee Shirt Promo in.

    • Stel Dynamic Block Type in op Content Area en klik op Done .

      Het Dynamische Type van Blok bepaalt waar in de paginalay-outdat het blok wordt geplaatst. Wanneer vestiging een dynamisch blok voor uw opslag, zowel de paginalay-out als het themaoverweegt, zodat kunt u de beschikbare ruimte aan goed gebruik zetten. In sommige winkels is het actieve inhoudsgebied beperkt tot een vaste breedte, terwijl in andere winkels de volledige breedte van het scherm wordt uitgebreid.

      Dynamisch Type dat van Blok {width="600" modal="regular"} plaatst

    • Voor Customer Segment, selecteer checkbox van elk segment dat u op het dynamische blok wilt toepassen en Gedaan klikken om de lijst van segmenten te bewaren.

      Voor het volgende voorbeeld, zijn er twee klantensegmentendie geregistreerde klanten door geslacht identificeren. Dit dynamische blok lijkt slechts aan geregistreerde vrouwelijke klanten die aan hun rekeningen worden aangemeld terwijl zij in uw opslag winkelen.

      Kiekend de klantensegmenten {width="600" modal="regular"}

Stap 2: De instellingen voltooien

Schuif omlaag naar de sectie Content, waarin een lege voorvertoning van de Page Builder -inhoud wordt weergegeven en klik op Edit with Page Builder. Voer vervolgens de volgende taken uit:

Taak 1: voeg een achtergrondbeeld toe

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

  2. Kies onder Appearance ​de optie Full Bleed.

  3. Voer bij Minimum Height 400px in.

  4. Blader naar de sectie Background ​en stel de Background Image ​afbeelding in door op Select from Gallery ​te klikken en de wide-banner-background.png afbeelding te kiezen die in de eerste zelfstudie is geüpload.

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

    Rij met het beeld {width="600" modal="regular"}

Taak 2: voeg kolommen toe

Sleep in het deelvenster Page Builder onder Layout ​een tijdelijke aanduiding Column ​naar de rij.

slepend het kolomtype in de rij {width="600" modal="regular"}

De rij is nu verdeeld in twee kolommen van gelijke breedte.

Taak 3: voeg tekst toe

  1. In het Page Builder paneel, breid Elements uit en sleep placeholder van de a Tekst aan de tweede kolom.

    slepend een tekstvakje aan de tweede kolom {width="600" modal="regular"}

  2. Voer de volgende drie tekstregels in de editor in:

    Even more ways to mix and match.

    Buy 3 Luma tees and get a 4th free.

    Shop Tees >

    het ingaan van tekst voor de kolom {width="600" modal="regular"}

  3. Selecteer alle drie lijnen van tekst en gebruik de toolbar om de Hoogte van de Lijn aan 40px te plaatsen.

    plaatsend de lijnhoogte {width="600" modal="regular"}

  4. Stel de Font Size voor elke regel als volgt in:

    table 0-row-2 1-row-2 2-row-2 3-row-2
    Lijn Fontgrootte
    Regel 1: 28px
    Regel 2: 24px
    Regel 3: 18px

    Omdat dit blok overal op de pagina kan worden geplaatst, gebruikt u de standaardalineastijl in plaats van de kopniveaus. Ook, maak niet ongerust dat de tekst nog niet correct in de kolom verpakt.

    Opgemaakte tekst {width="600" modal="regular"}

Taak 4: voeg een Verbinding toe

In de eerste oefening, leerde u hoe te om het 1} inhoudstype van de Knoop {te gebruiken om een verbinding tot stand te brengen.In dit voorbeeld ziet u hoe u een koppeling invoegt op de werkbalk van de editor.

  1. Open de storefront op een ander browsertabblad en navigeer naar de pagina die het doeldoel voor de koppeling moet zijn.

    U kunt de volledig gekwalificeerde URL of een relatieve URL gebruiken die de verwijzing naar uw archiefdomein weglaat.

    Volledige URL
    : https://mystore.com/women/tops-women/tees-women.html

    Relatieve URL
    : ../women/tops-women/tees-women.html

  2. Terugkeer aan het Page Builder werkruimtekentabblad en de tekstredacteur, selecteer de Shop Tees > tekst in de derde lijn, en kies Vet ( Vette knoop ) in de redacteurstoolbar.

  3. Met de Shop Tees > tekst in de derde nog geselecteerde lijn, kies Tussenvoegsel/geef verbinding uit ( Tussenvoegsel/geef verbindingsknoop uit ) in de redacteurstoolbar.

    Invoegend een verbinding {width="600" modal="regular"}

  4. Voer bij URL de relatieve koppeling in die u hebt voorbereid.

  5. Stel Target in op None .

    Met deze instelling wordt de pagina in hetzelfde browservenster geopend in plaats van een nieuw tabblad te openen.

  6. Voer bij Title Shop Tees in.

    Het kenmerk Title link wordt door sommige browsers gebruikt als knopinfo.

  7. Klik op OK om de koppeling op te slaan en terug te keren naar de werkruimte van Page Builder .

    de details van de Verbinding {width="600" modal="regular"}

  8. In de hoger-juiste hoek van het stadium, klik het Dichte Volledige Scherm ( Dichte volledig het schermpictogram ) pictogram.

    Wanneer u op dit pictogram klikt, keert u terug naar de sectie Content ​voor het dynamische blok met de voorvertoning.

  9. Klik in de rechterbovenhoek op Save .

Stap 3: Een prijsregel toevoegen

  1. Open opnieuw het Grondige Promo van de Bevestiging dynamische blok op geef wijze uit.

  2. Breid selecteur van de Uitbreiding de Related Promotions sectie uit en klik Add Cart Price Rules.

    Verwante bevorderingen {width="600" modal="regular"}

  3. Op voeg de Verwante pagina van de Prijsregels van de Kar toe, selecteer checkbox voor 3 T shirts kopen en krijgen de vierde vrije prijsregel en klik Add Selected.

    Toevoegend een verwante regel van de kartprijs {width="600" modal="regular"}

    De prijsregel verschijnt in de Verwante Bevorderingen sectie, onder Verwante Regel van de Prijs van de Kar. U kunt meerdere prijsregels koppelen aan een dynamisch blok. In dit eenvoudige voorbeeld wordt echter slechts één voorbeeld gebruikt.

    Geselecteerde de prijsregel van de kar {width="600" modal="regular"}

  4. Klik in de rechterbovenhoek op Save .

Stap 4: Voeg het dynamische blok toe aan een pagina

  1. In Admin sidebar, ga Content > Elements>Pages

  2. Vind de Eenvoudige Pagina die u in de eerste walkthrough oefeningcreeerde en het opent op geef wijze uit.

  3. Breid selecteur van de Uitbreiding de Content sectie uit en klik Edit with Page Builder.

  4. Beweeg over de hoogste rij met het zelfde beeld zoals het dynamische blok om toolbox en te tonen verwijder ( verwijder pictogram {width="20"} ).

    Klik op OK om te bevestigen dat de rij van de pagina is verwijderd.

  5. Sleep in het deelvenster Page Builder onder Layout ​een nieuwe tijdelijke aanduiding voor Row ​naar de bovenkant van het werkgebied.

  6. Vouw Add Content uit in het deelvenster Page Builder en sleep een tijdelijke aanduiding Dynamic Block naar de nieuwe rij.

    slepend een dynamisch blok op de rij {width="600" modal="regular"}

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

    Dynamische bloktoolbox {width="600" modal="regular"}

  8. Klik op de pagina Edit Dynamic Block ​op Select Dynamic Block.

    Uitgezochte Dynamisch Blok {width="600" modal="regular"}

  9. Zoek het Tee Shirt Promo ​dynamische blok dat u hebt gemaakt en klik op Select.

    Hieronder wordt een samenvatting van de dynamische blokinformatie weergegeven.

    Dynamische blokinformatie {width="600" modal="regular"}

  10. Accepteer de standaardwaarde Template , Dynamic Block Block Template .

  11. Klik wanneer u klaar bent op Save om de instellingen op te slaan en terug te keren naar de werkruimte van Page Builder .

    Dynamisch Blok in de paginavoorproef {width="600" modal="regular"}

  12. In de hoger-juiste hoek van het stadium, klik het Dichte Volledige Scherm ( Dichte volledig het schermpictogram ) pictogram.

    Wanneer u op dit pictogram klikt, keert u terug naar de sectie Content ​voor de pagina waarop de voorvertoning wordt weergegeven.

  13. Klik in de rechterbovenhoek op de pijl Save en kies Save & Close .

U hebt het tweede deel van de blokexercitie voltooid. Zorg ervoor dat u uw werk ter referentie bijhoudt.

Deel 3: Dynamisch blok bijwerken

In dit laatste deel van de oefening, geeft u een dynamisch blok uit terwijl de pagina in uw opslag levend is. Dan, login aan de opslag als lid van het klantensegment om het blok te maken verschijnen.

Dynamisch blok van de Steekproef in de storefront {width="600" modal="regular"}

Stap 1: Bewerk het dynamische blok

  1. In Admin sidebar, ga Content > Elements>Dynamic Blocks.

  2. Zoek het Tee Shirt Promo ​dynamische blok in het raster en open het in de bewerkingsmodus.

  3. Breid selecteur van de Uitbreiding de Content sectie uit en klik Edit with Page Builder.

  4. De kolombreedte wijzigen:

    • Houd de cursor boven de rand tussen de twee kolommen.

    • Houd de muisknop ingedrukt en sleep de rand twee verdelingen naar links.

      de afdelingen van het Net {width="600" modal="regular"}

      De eerste kolom is nu vier van 12 (4/12) rasterdivisies breed en de tweede kolom is acht van 12 (8/12) divisies breed.

      Twee ongelijke kolommen {width="600" modal="regular"}

  5. Wijzig de tekstkleur:

    • Selecteer de eerste twee tekstregels.

    • Kies Text Color op de editor-werkbalk en klik op het staal White .

    kleur van de Tekst {width="600" modal="regular"}

  6. In de hoger-juiste hoek van het stadium, klik het Dichte Volledige Scherm ( Dichte volledig het schermpictogram ) pictogram.

    Wanneer u op dit pictogram klikt, keert u terug naar de sectie Content ​voor het dynamische blok met de voorvertoning.

  7. Klik in de rechterbovenhoek op Save .

Stap 2: Het dynamische blok weergeven

Omdat dit dynamische blok slechts aan leden van een specifiek klantensegment zichtbaar is, moet u login als klant die een lid van het klantensegment is om de bevordering te zien. In dit voorbeeld wordt het blok alleen weergegeven voor vrouwelijke klanten.

  1. Open een browservenster naar de winkel.

  2. Als u de voorbeeldpagina wilt weergeven, wijzigt u de URL in de adresbalk als volgt:

    mystore.com/sample-page

    Als uw opslag wordt gevormd om het html achtervoegsel te omvatten, omvat het achtervoegsel als volgt:

    mystore.com/sample-page.html

  3. Aanmelden als vrouwelijke klant:

    • Klik in de rechterbovenhoek van de startpagina op Sign In .

    • Als de Luminagegegevens van het voorbeeld op uw systeem zijn geïnstalleerd, gebruikt u de volgende referenties:

      Email - roni_cost@example.com

      Password - roni_cost3@example.com

    • Klik op Sign In.

    • Keer terug naar de steekproefpagina om het dynamische blok te zien dat u met de Steenschitterende Promo creeerde.

    Dynamisch die blok voor een klantensegment {width="700" modal="regular"} wordt getoond

U hebt de blokoefening voltooid. Zorg ervoor dat u uw werk ter referentie bijhoudt.

Wanneer u klaar bent, ga aan Deel 3 te werk: De Inhoud van de Catalogus

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