Zarządzanie stronami i rich contentem w Magento 2 (Pagebuilder)

Page Builder

Domyślny edytor od Magento 2.4.3: Od Magento 2.4.3 do wprowadzania contentu najczęściej używamy Page Buildera.

Page Builder umożliwia graficzne tworzenie kontentu oraz jest automatycznie uruchamiany w miejscach:

strony CMS: Content → Pages → Add New Page → Content
edycja produktów: Catalog → Products → Add Product → Content → Description
bloki statyczne: Content → Blocks → Add New Block → Content

Uruchamianie Page Builder

Uruchamiamy page builder klikając Edit with Page Builder w sekcji Content

Podstawowe możliwości górnej belki

1 i 2 - Przełączanie pomiędzi mobile/desktop
3 - Możliwość przywrócenia zapisanego tamplate'u w razie uszkodzenia/nadpisania
4 - Możliwość zapisania gotowej strony/bloku do szybkiego powielania w innych miejscach (opcja zapisuje całość jako tamplate)
5 - Powrót do klasycznego widoku sekcji Content

Boczne menu - komponenty do budowania struktury i wypełniania elementami

oznaczone strzałką są to gotowe elementy do budowania struktury strony oraz jej poszczególnych elementów

Budowanie struktury (drag&drop)

Budowanie struktury:
- zaczynamy od wrzucenia pustej sekcji Row
- złap element po oznaczony strzałką i przeciągnij do edytora
- do tej sekcji (Row) można już wrzucać poszczególne elementy (Text, Heading, Buttons itd)

można dodatkowo sekcję Row podzielić na kolumny przeciągając opcję Column do środka sekcji Row (na poniższym screenie widać podzielenie sekcji na 3 kolumny)

Aby zdefiniować szerokość kolumn należy kliknąć na krawędź jednej z kolumn i przeciągnąć w lewo lub w prawo (w zależności, czy chcemy rozszerzyć czy zwęzić kolumnę):

Uzupełniamy kolumny poszczególnymi komponentami

1 - Heading
2 - Text
3 - HTML Code
4 - Heading
5 - Image
6 - Buttons
7 - Video

Na koniec wyłączamy tryb pełny edytora klikając ikonkę

oraz zapisujemy stronę klikając Save:

Edytor starszego typu

Ścieżka: Pole wprowadzania treści > Show/Hide Editor

Dwa rodzaje edytora treści

Treści są wprowadzane w panelu magento dla kilku widoków: stron kategorii, produktowych, statycznych.

Aby wpisywany tekst był dostosowany stylem i fontem do zaprojektowanego UI (obecnego w sklepie) można go umieszczać w polu tekstowym na dwa sposoby (zmienia je naciśnięcie buttonu "Show/Hide Editor"):

Edytor WYSIWYG (domyślny) - zawartość pisana jest ręcznie w widoku edytora oraz formatowania za pomocą narzędzi edytora. Taka edycja pozwala na wpisanie lub wklejenie tekstu gotowego. Edytor ten automatycznie naniesie style CSS na tekst tak, aby na stronie zawartość wyświetlała się tak samo jak w edytorze.
Edytor HTML - zawartość zapisana w języku HTML wklejana jest bezpośrednio w widoku HTML. Po przełączeniu się na widok edycji treści w formacie HTML, każda zmiana jest chroniona przed błędami w składni za pomocą narzędzia do edycji. Składnia HTML może podlegać wygodnej edycji w rozbudowanych edytorach np.: Notepad++ i Sublime Text.

Zarządzanie treścią - Content

Ścieżka: CONTENT > Elements > Pages

Do panelu edycji treści strony statycznych takich jak "Polityka prywatności" mamy dostęp po wybraniu Zawartość > a następnie Strony w sekcji Elementy.

W widoku ogólnym dla stron statycznych można zapoznać się z listą wszystkich stron statycznych i przejrzeć np. ich tytuł, klucz URL, układ (format ułożenia treści na stronie), widok sklepu (czy dostępny jest dla wszystkich wersji strony), status (włączony/wyłączony), datę utworzenia, czy modyfikacji.

W ostatniej kolumnie wybieramy rodzaj operacji, jaką chcemy z konkretną treścią dokonać - Edycję, Usunięcie lub Podgląd strony.

Aby dodać stronę statyczną klikamy pomarańczowy przycisk w prawym górnym rogu strony Add New Page.

Dodawanie stron statycznych i edycja treści

Ścieżka: CONTENT > Elements > Pages

Edycja treści

Kliknięcie w "Edit" przenosi do edycji wybranej strony.

Edycji podlega:

1 - Widoczność strony: "Enable Page" Yes/No
2 - Edycja treści
3 - Page Title
4 - Ważne dla SEO: URL Key bez znaków diakrytycznych i spacji; Meta Title; Słowa kluczowe; Meta Description
5 - Wskazanie wersji: z jakich wersji (np. językowych) strony użytkownicy mogą mieć dostęp do edytowanego widoku
Design: format ułożenia treści na stronie (jedna kolumna, dwie kolumny, itd).

Powiązane

Storeviews - wersje językowe - treści w wielu językach
Zarządzanie ogólne - Custom Variables do użycia w treściach
Cache i indeksery - po zmianach treści odśwież Page Cache i Block HTML
Newsletter - Page Builder dla szablonów newslettera