Sidlayouter

Layouten för varje sida i din butik består av distinkta avsnitt, eller behållare, som definierar sidhuvud, sidfot och innehållsområden för sidan. Beroende på layouten kan varje sida ha en, två, tre kolumner eller mer. Du kan tänka dig layouten som sidans golvplan och tilldela en särskild layout som ska användas som standard för CMS-, produkt- och kategorisidor.

På sidan flyter innehållsblocken så att det tillgängliga utrymmet fylls, enligt det avsnitt i sidlayouten där de har tilldelats. Observera att om du ändrar layouten från en layout med tre kolumner till en layout med två kolumner, så utökas huvudområdets innehåll så att det tillgängliga utrymmet fylls. Observera också att alla block som är kopplade till den oanvända sidofältet verkar försvinna. Om du återställer layouten med tre kolumner visas dock blocken igen. Den här flytande metoden, eller flytande layout, gör det möjligt att ändra sidlayouten utan att behöva omarbeta innehållet. Om du är van vid att arbeta med enskilda HTML-sidor kräver den här modulära metoden byggblock ett annat sätt att tänka.

Två kolumner med sidlayout för vänster stapel som standard

Konfigurera standardlayouter

  1. Gå till Stores > Settings>Configuration ​på sidofältet_ Admin _.

  2. Välj Web i den vänstra panelen under General.

  3. Expandera Expansionsväljaren i avsnittet Default Layouts.

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

  4. Välj den Default Product Layout som du vill använda för produktsidor.

    Den här inställningen avgör vilken layout som används som standard för produktsidor.

    • No layout updates - Det finns inga layoutuppdateringar tillgängliga för produktsidor.
    • Empty - En tom layout används för produktsidor.
    • 1 column - Använder en enda kolumnlayout för produktsidor.
    • 2 columns with left bar - Använder en layout med två kolumner och sidofältet till vänster för produktsidor.
    • 2 columns with right bar - Använder en layout med två kolumner och sidofältet till höger för produktsidor.
    • 3 columns - Använder en layout med tre kolumner och sidofält till vänster och höger för produktsidor.

    När Page Builder är aktiverat finns det ytterligare alternativ för full bredd. Du kan sedan använda Page Builder-innehållsverktygen för att utforma layouten för dina produktsidor.

    • Page -- Full Width - Använder layouten Sida - full bredd för produktsidor.
    • Category -- Full Width - Använder layouten Kategori - full bredd för produktsidor.
    • Product -- Full Width - (rekommenderas) Använder layouten Produkt - full bredd för produktsidor.
  5. Välj den Default Category Layout som du vill använda för kategorisidor.

    Den här inställningen avgör vilken layout som används som standard för kategorisidor.

    • No layout updates - Layoutuppdateringar är inte tillgängliga för kategorisidor.
    • Empty - En tom layout används för kategorisidor.
    • 1 column - Använder en enda kolumnlayout för kategorisidor.
    • 2 columns with left bar - Använder en layout med två kolumner och sidofältet till vänster för kategorisidor.
    • 2 columns with right bar - Använder en layout med två kolumner och sidofältet till höger för kategorisidor.
    • 3 columns - Använder en layout med tre kolumner och sidofält till vänster och höger för kategorisidor.

    När Page Builder är aktiverat finns det ytterligare alternativ för full bredd. Du kan sedan använda Page Builder-innehållsverktygen för att utforma layouten för dina kategorisidor.

    • Page -- Full Width - Använder layouten Sida - full bredd för kategorisidor.
    • Category -- Full Width - (rekommenderas) Använder layouten Kategori - full bredd för kategorisidor.
    • Product -- Full Width - Använder layouten Produkt - full bredd för kategorisidor.
  6. Välj den Default Page Layout som du vill använda för CMS-sidor.

    Den här inställningen avgör vilken layout som används som standard för CMS-sidor.

    • No layout updates - Det finns inga layoutuppdateringar tillgängliga för CMS-sidor.
    • Empty - Använder en tom layout för CMS-sidor.
    • 1 column - Använder en enda kolumnlayout för CMS-sidor.
    • 2 columns with left bar - Använder en layout med två kolumner och sidofältet till vänster för CMS-sidor.
    • 2 columns with right bar - Använder en layout med två kolumner och sidofältet till höger för CMS-sidor.
    • 3 columns - Använder en layout med tre kolumner och sidofält till vänster och höger för CMS-sidor.

    När Page Builder är aktiverat finns det ytterligare alternativ för full bredd. Du kan sedan använda Page Builder-innehållsverktygen för att utforma layouten för dina CMS-sidor.

    • Page -- Full Width - (Rekommenderas) Använder layouten Sida - full bredd för CMS-sidor.
    • Category - Full Width - Använder layouten Kategori - full bredd för CMS-sidor.
    • Product - Full Width - Använder layouten Produkt - full bredd för CMS-sidor.
  7. Klicka på Save Config när du är klar.

Standardsidlayout

En kolumn

Diagram - layout med en kolumn

Layouten 1 Column ​kan användas för att skapa en dramatisk startsida med en stor bild eller fokalpunkt. Det är också ett bra val för en landningssida eller en annan sida som har en kombination av text, bilder och video.

Två kolumner med vänster fält

Diagram - layout med två kolumner och vänster fält

Layouten 2 Columns with Left Bar ​används ofta för sidor med navigering till vänster, till exempel en katalog eller sökresultatsidor med navigering i flera lager. Det är också ett utmärkt val för hemsidor som behöver ytterligare navigering eller block med stöd för innehåll till vänster.

Två kolumner med höger fält

Diagram - layout med två kolumner och höger fält

Med layouten 2 Columns with Right Bar ​är huvudinnehållsområdet tillräckligt stort för en iögonfallande bild eller banderoll. Den här layouten används ofta för produktsidor med block med stödinnehåll till höger.

Tre kolumner

Diagram - layout med tre kolumner

Layouten 3 Column ​har en mittkolumn som är tillräckligt bred för sidans huvudtext, med utrymme på varje sida för ytterligare navigering och block med stöd för innehåll.

Tom

Diagram - tom layout

Layouten Empty ​kan användas för att definiera anpassade sidlayouter.

recommendation-more-help
2b0136b4-ef75-405f-9734-60d741f198de