Page Builder Genomgång del 2: block

Gå till Content > Elements>Blocks ​på sidofältet_ Admin _.

Klicka på Add New Block i det övre högra hörnet.

Ange Google Map för Block Title.

Ange google-map för Identifier.

Välj Store View där blocket ska vara tillgängligt.

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

Klicka på Save i det övre högra hörnet.

Bläddra ned till förhandsgranskningen av Page Builder-innehållet (för närvarande tom) och klicka på Edit with Page Builder.

Expandera Media på panelen Page Builder och dra en Map platshållare till scenen.

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

En karta till din butiksplats visas om Google Maps har konfigurerats för din butik.

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

En platshållarkarta visas om Google Maps inte har konfigurerats för din butik än.

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

Klicka på ikonen Stäng helskärm ( ) i scenens övre högra hörn.

Om du klickar på den här ikonen återgår du till avsnittet Content ​för blocket med förhandsvisningen.

Klicka på pilen Save i det övre högra hörnet och välj Save & Close.

Gå till Google Cloud Platform Console.

Klicka på listrutan för projektet och välj eller skapa det projekt som du vill lägga till en API-nyckel för.

Om du vill konfigurera dina API-autentiseringsuppgifter följer du instruktionerna i Google Maps-dokumentationen.

Kopiera API-nyckeln till Urklipp.

Gå tillbaka till Commerce Admin och gå till Stores > Settings>Configuration.

Välj Content Management i den vänstra panelen under General.

Expandera Advanced Content Tools.

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

Mer information om konfigurationsalternativen för Content Management Advanced Tools finns i referenshandboken för konfiguration.

Klistra in den kopierade nyckeln för Google Maps API Key.

Klicka på Test Key.

Om det är problem med nyckeln går du tillbaka till Google Maps-plattformen för att lösa problemet. Försök sedan igen.

När nyckeln har verifierats klickar du på Save Config.

Gå till Content > Elements>Pages ​på sidofältet_ Admin _.

Leta reda på Simple Page ​som du skapade i den första självstudiekursen i rutnätet och välj Edit ​i kolumnen​ Action.

Expandera i avsnittet Content och klicka på Edit with Page Builder eller inuti förhandsvisningsområdet för innehållet.

Dra en Row-platshållare högst upp på scenen på panelen Page Builder under Layout.

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

Expandera Add Content på panelen Page Builder och dra en Block platshållare till den nya raden.

Håll pekaren över den tomma blockbehållaren för att visa verktygslådan och välj ikonen Inställningar ( {width="20"} ).

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

Klicka på Select Block på sidan Redigera block.

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

Ange map i sökrutan och tryck på Retur för att hitta det block som du skapade.

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

Klicka på Select i stödrastret för att välja Google Maps-blocket.

Klicka på Save i det övre högra hörnet för att spara inställningarna och återgå till arbetsytan i Page Builder.

Klicka på ikonen Stäng helskärm ( ) i scenens övre högra hörn.

Om du klickar på den här ikonen återgår du till avsnittet Content ​för sidan där förhandsvisningen visas.

Klicka på pilen Save i det övre högra hörnet och välj Save & Close.

Gå till Content > Elements>Dynamic Blocks ​på sidofältet_ Admin _.

{width="700" modal="regular"}

Klicka på Add Dynamic Block i det övre högra hörnet.

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

Slutför de grundläggande inställningarna för det nya dynamiska blocket:

• Ange Enable Dynamic Block till Yes.

• Ange Tee Shirt Promo för Dynamic Block Name.

• Ange Dynamic Block Type till Content Area och klicka på Done.

  Den dynamiska blocktypen avgör var i sidlayouten som blocket placeras. När du konfigurerar ett dynamiskt block för din butik bör du tänka på både sidlayouten och temat så att du kan utnyttja det tillgängliga utrymmet på ett bra sätt. Vissa butiker har ett aktivt innehållsområde som är begränsat till en fast bredd, medan andra utökar skärmens hela bredd.

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

• För Customer Segment markerar du kryssrutan för varje segment som du vill tillämpa på det dynamiska blocket och klickar på Klar för att spara listan med segment.

  I följande exempel finns det två kundsegment som identifierar registrerade kunder per kön. Det här dynamiska blocket visas endast för registrerade kvinnliga kunder som är inloggade på sina konton när de handlar i din butik.

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

Håll pekaren över radbehållaren för att visa verktygslådan och välj ikonen Inställningar ( {width="20"} ).

Välj Full Bleed under Appearance.

Ange 400px för Minimum Height.

Bläddra till avsnittet Background ​och ange Background Image ​genom att klicka på​ Select from Gallery ​och välja den wide-banner-background.png-bild som överfördes i den första självstudiekursen.

Klicka på Save i det övre högra hörnet för att tillämpa inställningarna och återgå till arbetsytan i Page Builder.

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

Expandera Elements på panelen Page Builder och dra en Text-platshållare till den andra kolumnen.

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

Ange följande tre textrader i redigeraren:

Even more ways to mix and match.

Buy 3 Luma tees and get a 4th free.

Shop Tees >

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

Markera alla tre textraderna och använd verktygsfältet för att ange radhöjden till 40px.

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

Ange Font Size för varje rad enligt följande:

Eftersom det här blocket kan placeras var som helst på sidan bör du använda standardstyckeformatet i stället för rubriknivåerna. Du ska inte heller oroa dig för att texten inte radbryts korrekt i kolumnen än.

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

Öppna butiken på en annan flik i webbläsaren och navigera till sidan som ska vara länkens måldestination.

Du kan använda den fullständiga URL:en eller en relativ URL som utelämnar referensen till din lagringsdomän.

Fullständig URL
: https://mystore.com/women/tops-women/tees-women.html

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

Gå tillbaka till arbetsytans flik och textredigerare för Page Builder, markera texten Shop Tees > på den tredje raden och välj Fet ( ) i redigeringsverktygsfältet.

Med texten Shop Tees > på den tredje raden markerad väljer du Infoga/redigera länk ( ) i redigerarens verktygsfält.

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

Ange den relativa länken som du förberedde för URL.

Ange Target till None.

Med den här inställningen öppnas sidan i samma webbläsarfönster, i stället för en ny flik.

Ange Shop Tees för Title.

Attributet för titellänken används av vissa webbläsare som verktygstips.

Klicka på OK om du vill spara länken och återgå till arbetsytan Page Builder.

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

Klicka på ikonen Stäng helskärm ( ) i scenens övre högra hörn.

Om du klickar på den här ikonen återgår du till avsnittet Content ​för det dynamiska blocket med förhandsvisningen.

Klicka på Save i det övre högra hörnet.

Öppna det dynamiska blocket Shirt Promo i redigeringsläget igen.

Expandera i avsnittet Related Promotions och klicka på Add Cart Price Rules.

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

På sidan Lägg till relaterade kundprisregler markerar du kryssrutan för Köp 3-tröjor och få den fjärde kostnadsfria prisregeln och klickar på Add Selected.

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

Prisregeln visas i avsnittet Relaterade kampanjer under Relaterad kundprisregel. Du kan koppla flera prisregler till ett dynamiskt block. I det här enkla exemplet används bara ett exempel.

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

Klicka på Save i det övre högra hörnet.

Gå till Content > Elements>Pages ​på sidofältet_ Admin _.

Hitta den enkla sidan som du skapade i den första genomgången och öppna den i redigeringsläge.

Expandera i avsnittet Content och klicka på Edit with Page Builder.

Hovra över den översta raden med samma bild som det dynamiska blocket för att visa verktygslådan och ikonen Ta bort ( {width="20"} ).

Bekräfta att raden har tagits bort från sidan genom att klicka på OK .

Dra en ny Row-platshållare högst upp på scenen på panelen Page Builder under Layout.

Expandera Add Content på panelen Page Builder och dra en Dynamic Block platshållare till den nya raden.

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

Håll pekaren över den dynamiska blockbehållaren för att visa verktygslådan och välj ikonen Inställningar ( {width="20"} ).

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

Klicka på Select Dynamic Block på sidan Edit Dynamic Block.

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

Leta reda på det Tee Shirt Promo ​dynamiska blocket som du skapade och klicka på​ Select.

En sammanfattning av informationen om det dynamiska blocket visas nedan.

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

Acceptera standardvärdet Template, Dynamic Block Block Template.

När du är klar klickar du på Save för att spara inställningarna och återgå till arbetsytan i Page Builder.

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

Klicka på ikonen Stäng helskärm ( ) i scenens övre högra hörn.

Om du klickar på den här ikonen återgår du till avsnittet Content ​för sidan där förhandsvisningen visas.

Klicka på pilen Save i det övre högra hörnet och välj Save & Close.

Gå till Content > Elements>Dynamic Blocks ​på sidofältet_ Admin _.

Hitta det dynamiska Tee Shirt Promo-blocket i rutnätet och öppna det i redigeringsläge.

Expandera i avsnittet Content och klicka på Edit with Page Builder.

Ändra kolumnbredden:

• Hovra över kanten mellan de två kolumnerna.

• Håll ned musknappen och dra kanten två indelningar åt vänster.

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

  Den första kolumnen är nu fyra av 12 (4/12) breda stödrasterindelningar, och den andra kolumnen är åtta av 12 (8/12) breda indelningar.

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

Ändra textfärgen:

• Markera de två första textraderna.

• Välj Text Color i redigeringsverktygsfältet och klicka på färgrutan White.

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

Klicka på ikonen Stäng helskärm ( ) i scenens övre högra hörn.

Om du klickar på den här ikonen återgår du till avsnittet Content ​för det dynamiska blocket med förhandsvisningen.

Klicka på Save i det övre högra hörnet.

Öppna ett webbläsarfönster i butiken.

Om du vill visa exempelsidan ändrar du URL-adressen i adressfältet enligt följande:

mystore.com/sample-page

Om din butik är konfigurerad att innehålla HTML-suffixet inkluderar du suffixet enligt följande:

mystore.com/sample-page.html

Logga in som en kvinnlig kund:

• Klicka på Sign In i det övre högra hörnet på startsidan.

• Om exempeldata för luma är installerade på datorn använder du följande autentiseringsuppgifter:

  Email - roni_cost@example.com

  Password - roni_cost3@example.com

• Klicka på Sign In.

• Gå tillbaka till exempelsidan för att se det dynamiska block som du skapade med Tee Shirt Promo.

{width="700" modal="regular"}