Page Builder Gå igenom del 1: enkel sida

Hämta filen simple-page-assets och spara filen på din lokala dator.

Navigera till den hämtade filen och extrahera de zippade filerna.

Högerklicka på och välj Extract All filer i ett Windows-system. Välj sedan målmappen och klicka på Extract.

I ett Mac-system kan du bara dubbelklicka på zip-filen och flytta de extraherade filerna till målmappen.

Mappen innehåller följande bildfiler:

{width="500"}

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

Klicka på Add New Page i det övre högra hörnet och gör följande:

• Om du vill förhindra att den här sidan publiceras i din butik anger du Enable Page till No.

• Ange Simple Page för Page Title.

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

Expandera i avsnittet Design.

Observera att Layout är inställt på Page -- Full Width som standard. Utöver de fem standardalternativen för layout lägger Page Builder till helbreddslayouter för sidor, kategorier och produkter.

Om exempeldata är tillgängliga anger du New Theme till Magento Luma. Annars kan du välja ett annat tillgängligt tema eller lämna det tomt om du vill använda standardtemat.

Inställningen New Theme ​kan användas för att åsidosätta standardtemat och tillämpa ett annat tema på sidan.

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

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

När sidan sparas visas namnet Enkel sida i det övre vänstra hörnet på sidan.

Expandera i avsnittet Content.

Den här åtgärden visar förhandsvisningen av Page Builder med en tom rad.

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

Klicka på Edit with Page Builder eller i förhandsvisningsområdet för innehållet.

I den utökade Page Builder arbetsytan innehåller panelen till vänster de innehållsverktyg som du kan använda för att skapa ditt innehåll på scenen.

Håll pekaren över den tomma raden för att visa verktygslådan.

Varje innehållsbehållare har en verktygslåda med liknande alternativ.

Verktygslådan för {width="600" modal="regular"}

Välj ikonen Inställningar ( {width="20"}) i verktygslådan Rader.

Välj Fullständigt utfall under Appearance.

Inställningen för fullständigt utfall utökar den vänstra och högra kanten av innehållsområdet för raden och bakgrunden till hela sidbredden.

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

Bläddra ned till avsnittet Advanced ​och ange alla Margins and Padding-inställningar till 0.

Med den här inställningen utökas radens hela bredd.

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

Om du vill spara inställningarna och återgå till arbetsytan Page Builder rullar du uppåt på sidan och klickar på Save i det övre högra hörnet.

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

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

Håll pekaren över banderollbehållaren för att visa verktygslådan.

Förutom verktygslådan finns knapparna Överför bild och Välj från galleri med så att du snabbt kan ändra banderollen direkt från scenen.

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

I banderollverktygslådan väljer du ikonen Inställningar ( {width="20"} ).

Välj Collage Right under Appearance.

Inställningen Collage Right (collage till höger) placerar innehållet på banderollens högra sida.

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

Bläddra ned till avsnittet Background ​och ange bakgrundsbilden för banderollen:

• För Background Image klickar du på Överför.

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

  Navigera till katalogen där du sparade de extraherade enkla sidelementen och välj filen wide-banner-background.jpg.

  Bilden överförs och en miniatyrbild av den överförda bilden visas. Filnamn, bildstorlek och filstorlek anges nedan.

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

• För Background Mobile Image klickar du på Överför.

  I samma filkatalog väljer du filen wide-banner-background-mobile.jpg.

  Den mobila bakgrundsbilden används för mobila enheter och även när en webbläsarfönsterstorlek ändras till bredden på en mobil enhet.

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

• Bläddra tillbaka till sidans överkant och klicka på Save för att spara inställningarna och återgå till arbetsytan i Page Builder.

  Bakgrunden visas på scenen och radens hela bredd utökas.

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

Lägg märke till platshållartexten som visas på radens högra sida. Positionen för den här texten återspeglar utseendeinställningen Höger collage .

Klicka på platshållartexten och skriv följande meddelande på två rader:

Get fit and look fab in new seasonal styles.

New LUMA yoga collection

Redigeringsverktygsfältet visas ovanför textrutan. Du kan ange och formatera text antingen direkt från scenen eller genom att välja Inställningar i banderollverktygslådan.

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

Använd formatering på texten:

• Markera den första textraden. Gå sedan till redigeringsverktygsfältet under Format och välj Heading 2.

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

• Markera den andra textraden. Gå sedan till redigeringsverktygsfältet under Format och välj Paragraph.

Formatinställningarna använder formaten från formatmallen som är kopplad till det aktuella temat.

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

Hovra för att visa banderollverktygslådan, välj ikonen Inställningar ( {width="20"} ) igen och bläddra sedan till avsnittet Content.

Observera att texten visas i rutan Meddelandetext. Text kan anges och redigeras antingen från scenen eller från avsnittet Content ​i banderollinställningarna.

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

Ange banderolllänken och knappen för att fortsätta i avsnittet Content:

• Ange Länk till Category och klicka sedan på Select för att visa kategoriträdet.

• Välj What's New som den länkade kategorin.

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

• Ange Show Button till Always.

• För Button Text anger du Shop Now som texten som visas på knappen.

• Acceptera standardvärdet Primary för Button Type.

  Knappformatet från det aktuella temat avgör knappformatet.

Ange banderollövertäckning:

Du kan använda en övertäckning för att använda en bakgrundsfärg på det aktiva innehållsområdet som definieras av inställningen Utseende. Banderollens bakgrundsbild är fortfarande synlig för banderollens hela bredd.

• Ange Show Overlay till Always.

• Gör något av följande för Overlay Color:

  • Klicka på färgrutan och välj den vita färgrutan.
  • Klicka i textrutan Ingen färg och ange White eller det hexadecimala värdet #ffffff.

  Klicka sedan på Apply.

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

• Bläddra tillbaka till sidans överkant och klicka på Save för att spara inställningarna och återgå till arbetsytan i Page Builder.

  Knappen visas under banderollmeddelandet på scenen.

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

Du kan växla mellan de två arbetsytelägen när du vill.

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

Om du uppmanas till det klickar du på länken Cachehantering i meddelandet längst upp på sidan och uppdaterar eventuell ogiltig cache.

Leta reda på den enkla sidan som du skapade i den första delen av den här övningen i sidstödrastret och välj Edit i kolumnen Action.

Expandera i avsnittet Content.

Klicka på Edit with Page Builder eller i förhandsvisningsområdet för innehållet.

Dra en Row-platshållare till scenen under Page Builder och placera den ovanför banderollen.Layout

Den röda stödlinjen markerar gränsen mellan de två raderna.

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

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

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

Under Appearance ​godkänner du standardinställningen Innehållet.

Den här inställningen begränsar radens innehållsområde till bredden på sidan enligt temat.

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

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

Dra en Column-platshållare på panelen Page Builder under Layout ​till den nya raden.

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

Raden är nu uppdelad i två kolumner med samma bredd. Varje kolumn är en separat behållare för innehåll med en egen dedikerad verktygslåda med alternativ.

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

Klicka på den cirkulära kontrollen Stödraster ( ) i det övre vänstra hörnet i den första kolumnen om du vill visa stödlinjerna för stödrastret.

Rutnätet ser till att innehållet justeras på ett enhetligt sätt och att det återges korrekt på både stationära och mobila enheter. Information om hur du konfigurerar stödrasterstorleken finns i avsnittet Konfigurera Page Builder i avsnittet Page Builder Konfigurera.

Siffrorna inom parentes (6/12) i den övre kanten av varje kolumnbehållare anger antalet rutnätsindelningar i varje kolumn och det totala antalet indelningar i raden.

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

Expandera avsnittet Media på panelen Page Builder och dra en Image platshållare till den första kolumnen.

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

Infoga exempelbilden i platshållaren.

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

För en bild som finns på datorn kan du välja någon av följande metoder:

• Överför bildfilen: Klicka på Upload Image i den första kolumnen. Gå sedan till katalogen där du sparade de extraherade enkla sidelementen och välj filen small-banner-1.jpg.

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

  Upprepa den här åtgärden om du vill lägga till filen small-banner-2.jpg i den andra kolumnen.

• Dra bildfilen: På skrivbordet öppnar du den enkla sidresursmappen och placerar den bredvid administratörsfönstret där du arbetar med Page Builder -scenen. Dra sedan filen small-banner-1.jpg från den enkla sidresursmappen och släpp den i den första kolumnen.

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

  Upprepa den här åtgärden om du vill lägga till filen small-banner-2.jpg i den andra kolumnen.

Bestäm vilken sida i katalogen som du vill länka till varje bild.

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

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

Länka bilden till en kategori:

• Rulla ned och ange Länk till Category.

• Gå till kategoriträdet, gå nedåt och välj kategorin Men's Hoodies & Sweatshirt.

• I det övre högra hörnet Save inställningarna och återgår till arbetsytan i Page Builder.

Upprepa föregående steg om du vill länka bilden i den andra kolumnen till kategorin Kugghjul.

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.

När du uppmanas till det klickar du på länken Cachehantering i meddelandet längst upp på sidan och uppdaterar eventuell ogiltig cache.

Leta reda på den enkla sidan som du skapade i den första delen av den här övningen i sidstödrastret och välj Edit i kolumnen Action.

Expandera i avsnittet Content.

Klicka på Edit with Page Builder eller i förhandsvisningsområdet för innehållet.

Dra en Row-platshållare till scenen på panelen Page Builder under Layout ​och placera den ovanför raden som skapades i den andra delen av den här övningen.

En röd stödlinje markerar gränsen mellan de två raderna.

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

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

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

Välj Full Width på sidan Redigera rad under Appearance.

Den här inställningen begränsar innehållsområdet till den maximala sidbredd som definieras av temat. Bakgrundsfärgen och/eller bilden är inte begränsad och radens hela bredd utökas.

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

I avsnittet Background ​anger du #f1f1f1 som Background Color.

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

Bläddra ned till avsnittet Advanced ​och ange alla Marginaler och utfyllnad ​till 0.

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

Bläddra tillbaka till sidans överkant och klicka på Save för att spara inställningarna och återgå till arbetsytan i Page Builder.

Radens bakgrundsfärg är nu en blek beige.

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

Dra en Column-platshållare till den översta raden på scenen på panelen Page Builder under Layout.

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

Dra den högra kanten på den första kolumnen till den fyra av 12 (4/12)-positionen i rutnätet.

Den andra kolumnens storlek justeras till åtta av 12 (8/12).

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

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

Bläddra ned till avsnittet Advanced ​och ange alla Marginaler och utfyllnad ​till 0.

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

Bläddra tillbaka till sidans överkant och klicka på Save för att spara inställningarna och återgå till arbetsytan i Page Builder.

Expandera Media på panelen Page Builder och dra en Image-innehållstyp till den första kolumnen.

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

Klicka på Upload Image i bildplatshållaren.

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

Navigera till katalogen där du sparade de extraherade enkla sidelementen och välj filen review-image.jpg.

Den överförda bilden visas i den första kolumnen och blandas smidigt med radens bakgrundsfärg.

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

Expandera avsnittet Elements på panelen Page Builder och dra innehållstypen Text till den andra kolumnen.

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

Klicka i textelementet för att visa redigeringsverktygsfältet.

Klicka på ikonen Infoga bild ( ) i verktygsfältet och gör följande:

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

• Klicka på ikonen Sök ( ) bredvid fältet Source ​i dialogrutan​ Insert/edit image.

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

• Klicka på Choose Files på sidan Select Images.

• Välj rating.png i den mapp där du sparade de enkla sidresurserna.

• På sidan dubbelklickar du på bildpanelen för att markera den och infoga dess URL-adress i fältet Source.

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

• I Image Description anger du 5-Star Rating och klickar på OK för att infoga bilden i kolumnen.

• Klicka på Centrera ( ) i redigeringsverktygsfältet om du vill centrera bilden i kolumnen.

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

Placera insättningspunkten precis efter den femstjärniga bilden, tryck på Enter för att starta en ny rad och ange följande text:

Awesome Tank!

I'm a long distance runner and it keeps me pretty comfortable, although these companies always act like their shirts are magical and really it's just pretty basic stuff. Still it's a great shirt, and I would recommend it.

Antonia Racer Tank – Reviewed by Allyson

Texten centreras medan du skriver.

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

Formatera texten:

• Klicka någonstans på den första textraden och välj Heading 2 i redigeringsverktygsfältet under Format.

• Markera den återstående texten och välj Paragraph i redigeringsverktygsfältet under Format.

Texten formateras enligt den formatmall som är kopplad till temat.

Hämta bildens mått så att du kan centrera innehållet lodrätt i kolumnen:

• Håll pekaren över bilden i den första kolumnen för att visa verktygslådan och välj ikonen Inställningar ( {width="20"} ).

• Observera bildens dimensioner under miniatyrbilden.

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

• Klicka på Stäng i det övre högra hörnet.

Centrera innehållet lodrätt i den andra kolumnen:

• Håll markören över den andra kolumnen för att visa verktygslådan och välj ikonen Inställningar ( {width="20"} ).

• I Minimum Height anger du 450 som bildens höjd i pixlar i den första kolumnen.

• Ange Vertical Alignment till Center.

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

Rulla ned till avsnittet Advanced ​och ange alla Margins and Padding-värden till noll ( 0 ).

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

Bläddra tillbaka till sidans övre del och klicka på Save i det övre högra hörnet för att spara inställningarna och återgå till arbetsytan i Page Builder.

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

Markera texten Antonia Racer Tank och klicka på ikonen Infoga länk ( ) i redigeringsverktygsfältet.

I dialogrutan Infoga länk anger du länken till katalogprodukten:

• Ange produkten URL.

  Du kan ange en relativ eller fullständig URL. Följande relativa länk anges för det här exemplet:

  ../antonia-racer-tank.html

• (Valfritt) Ange produktnamnet för Rubrik.

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

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

• När du är klar klickar du på OK för att spara länken.

  Den länkade texten markeras nu i banderollen.

  {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å Save i det övre högra hörnet.

Expandera i avsnittet Content om det behövs.

Klicka på Edit with Page Builder eller i förhandsvisningsområdet för innehållet.

Håll markören över den första raden på scenen för att visa verktygslådan och välj ikonen Flytta ( ).

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

Håll ned musknappen när du kontrollerar att allt innehåll på raden är markerat och dra raden till en position under den röda stödlinjen längst ned på sidan.

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

Upprepa den här processen om du vill flytta den första raden till den andra positionen.

Radordningen på sidan matchar nu exemplet med enkel sida.

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.

Om du uppmanas till det klickar du på länken Cachehantering i meddelandet längst upp på sidan och uppdaterar eventuell ogiltig cache.