Edytor responsywnych treści

Za pomocą edytora treści utworzysz czytelne opisy produktów, treści stron informacyjnych i wpisów bloga, które poprawnie wyświetlą się na wszystkich urządzeniach - również mobilnych. Edytor treści jest prosty w obsłudze i pozwala na zamieszczanie tekstów, zdjęć, filmów w formacie MP4 oraz filmów YouTube.

Edytor treści umożliwia dodawanie nowych wierszy i kolumn do układu treści, edycje dodanych treści, duplikowanie, usunięcie czy zmianę kolejności wierszy.

Z poziomu edytora treści utworzysz siatkę (tzw. grid), dzięki której zaprojektujesz układ treści, decydując o ilości wierszy i kolumn, w których mają się wyświetlać.

Siatka zbudowana jest według następującej struktury:

• Wiersze [W]
• Kolumny [K] (zawierające się w wierszu)

• Widok desktop
• Widok mobile

Film instruktażowy

Instalacja aplikacji

1. Zaloguj się do panelu administracyjnego sklepu.
2. W zakładce Dodatki i integracje → Aplikacje wyszukaj aplikację Edytor responsywnych treści i kliknij przycisk Zainstaluj aplikację.

3. Zaakceptuj regulamin appstore i kliknij przycisk Zamawiam.

Włączanie i wyłączanie aplikacji

Aplikację możesz włączyć lub wyłączyć w każdej chwili bez konieczności jej odinstalowywania i ponownego instalowania.

1. W zakładce Dodatki i integracje → Moje aplikacje wyszukaj Edytor responsywnych treści i kliknij ikonę aplikacji.

2. Aby włączyć aplikację:
   • Ustaw opcję Włącz aplikację jako aktywną.
   • Wybierz rodzaje powiadomień e-mail, które chcesz otrzymywać.
   • Kliknij przycisk Zapisz.
3. Aby wyłączyć aplikację:
   • Ustaw opcję Włącz aplikację jako nieaktywną.
   • Kliknij przycisk Zapisz.

Obsługa edytora treści

Dodawanie wiersza

Kliknij przycisk Dodaj kolejny wiersz lub najedź wskaźnikiem myszy na wybrany wiersz i kliknij przycisk , aby dodać wiersz powyżej.

Duplikowanie wiersza

Najedź wskaźnikiem myszy na wybrany wiersz i kliknij przycisk , aby powielić wiersz wraz z zawartością.

Zmiana kolejności wiersza

Najedź wskaźnikiem myszy na wybrany wiersz i kliknij przycisk , aby przenieść wiersz w górę lub , aby przenieść wiersz w dół.

Usuwanie wiersza

Najedź wskaźnikiem myszy na wybrany wiersz i kliknij przycisk , aby usunąć wiersz.

Wybór układu wiersza

Kliknij w przycisk układu wiersza, aby wybrać układ wiersza.

Dostępne układy wiersza:

• 1 kolumna
• 2 kolumny
• 3 kolumny

Wybór typu zawartości kolumny

Kliknij w przycisk typu zawartości kolumny, aby wybrać typ zawartości.

Dostępne typy zawartości:

• Treść z edytora tekstu
• Obrazek
• Film
• Film YouTube

Wstawianie treści z edytora tekstu

Kliknij przycisk , aby wstawić treść z edytora tekstu. Zostanie otwarte okno, w którym wprowadzisz treść.

Wstawianie obrazka

Kliknij przycisk , aby wstawić obrazek. Zostanie otwarte okno, w którym wybierzesz zdjęcie produktu lub wprowadzisz odnośnik do obrazka w formacie JPG, PNG, GIF lub WEBP oraz wprowadź alternatywny opis obrazka ("alt").

Wstawianie filmu

Kliknij w przycisk , aby wstawić film. Zostanie otwarte okno, w którym wprowadzisz odnośnik do filmu w formacie MP4.

Wstawianie filmu YouTube

Kliknij w przycisk , aby wstawić film YouTube. Zostanie otwarte okno, w którym wprowadzisz odnośnik do filmu YouTube.

Edycja zawartości kolumny

Najedź wskaźnikiem myszy na wybraną kolumnę i kliknij w przycisk edytuj treść, zmień obrazek, zmień film lub zmień film YouTube, aby przejść do edycji zawartości kolumny.

Usuwanie zawartości kolumny

Najedź wskaźnikiem myszy na wybraną kolumnę i kliknij w przycisk , aby usunąć zawartość kolumny.

Szablony treści

Szablony treści to gotowe układy, które ułatwiają szybkie tworzenie spójnych treści. Dzięki nim możesz zachować jednolity styl komunikacji w całym sklepie, oszczedzając czas i eliminując konieczność powtarzania tych samych czynności.

1. W zakładce Dodatki i integracje → Moje aplikacje wyszukaj Edytor responsywnych treści i kliknij ikonę aplikacji.

2. Z menu po lewej stronie wybierz zakładkę Szablony treści.
3. Kliknij przycisk Dodaj szablon.

4. Wprowadź Nazwę szablonu.
5. Zbuduj Szablon.
6. Kliknij przycisk Zapisz i wróć do listy lub Zapisz.

Opis produktu

Tworzenie opisu produktu

1. Przejdź do Obsługa sklepu → Produkty.
2. Odszukaj produkt, dla którego chcesz wprowadzić opis.
3. W kolumnie Akcje, po prawej stronie, kliknij trybik i wybierz opcję Aplikacje → Edytor opisu produktu.

Tłumaczenie opisu produktu

1. Przejdź do Obsługa sklepu → Produkty.
2. W lewym dolnym rogu zmień Język edytowany na konkretny język, w którym będziesz wprowadzać zmiany (lub upewnij się, że wybrany jest poprawny).
3. Odszukaj produkt, dla którego chcesz przetłumaczyć opis.
4. W kolumnie Akcje, po prawej stronie, kliknij trybik i wybierz opcję Aplikacje → Edytor opisu produktu.

5. Wybierz język, z którego opis produktu ma być skopiowany.

6. Przetłumacz opis.
7. Kliknij przycisk Zapisz.

Duplikowanie opisu produktu

1. Przejdź do Obsługa sklepu → Produkty.
2. Odszukaj produkt, którego opis chcesz zduplikować.
3. W kolumnie Akcje, po prawej stronie, kliknij trybik i wybierz opcję Aplikacje → Edytor opisu produktu.

4. W prawym górnym rogu kliknij przycisk Duplikuj.

5. Wyszukaj produkt po ID lub kodzie, do którego opis chcesz zduplikować.
6. Kliknij przycisk Wybierz przy wybranym produkcie.

7. Dostosuj opis dla wybranego produktu.
8. Kliknij przycisk Zapisz.

Treść strony informacyjnej

Tworzenie treści strony informacyjnej

1. Przejdź do Wygląd i treści → Strony informacyjne.
2. Odszukaj stronę informacyjną, dla której chcesz wprowadzić treść.
3. W kolumnie Akcje, po prawej stronie, kliknij trybik i wybierz opcję Aplikacje → Edytor treści strony informacyjnej.

Duplikowanie treści strony informacyjnej

1. Przejdź do Wygląd i treści → Strony informacyjne.
2. Odszukaj stronę informacyjną, której treść chcesz zduplikować.
3. W kolumnie Akcje, po prawej stronie, kliknij trybik i wybierz opcję Aplikacje → Edytor treści strony informacyjnej.

4. W prawym górnym rogu kliknij przycisk Duplikuj.

5. Wyszukaj stronę informacyjną po ID, do której treść chcesz zduplikować.
6. Kliknij przycisk Wybierz przy wybranej stronie informacyjnej.

7. Dostosuj treść dla wybranej strony informacyjnej.
8. Kliknij przycisk Zapisz.

Treść wpisu bloga

Tworzenie treści wpisu bloga

1. Przejdź do Wygląd i treści → Blog → Lista wpisów.
2. Odszukaj wpis bloga, dla którego chcesz wprowadzić treść.
3. W kolumnie Akcje, po prawej stronie, kliknij trybik i wybierz opcję Aplikacje → Edytor treści wpisu.

Duplikowanie treści wpisu bloga

1. Przejdź do Wygląd i treści → Blog → Lista wpisów.
2. Odszukaj wpis bloga, którego treść chcesz zduplikować.
3. W kolumnie Akcje, po prawej stronie, kliknij trybik i wybierz opcję Aplikacje → Edytor treści wpisu.

4. W prawym górnym rogu kliknij przycisk Duplikuj.

5. Wyszukaj wpis bloga po ID, do którego treść chcesz zduplikować.
6. Kliknij przycisk Wybierz przy wybranym wpisie bloga.

7. Dostosuj treść dla wybranego wpisu bloga.
8. Kliknij przycisk Zapisz.

Wyłączanie czyszczenia kodu HTML

1. Przejdź do Ustawienia → Zaawansowane → Bezpieczeństwo.
2. Zaznacz opcję Wyłącz czyszczenie kodu HTML.
3. Kliknij przycisk Zapisz.

Wgrywanie obrazka lub filmu do sklepu

1. Przejdź do Ustawienia → Zaawansowane → Zarządzanie plikami.
2. Kliknij przycisk Zarządzaj plikami.

3. Kliknij przycisk Upload.

4. Kliknij przycisk Add files.

5. Wybierz plik ze swojego komputera i kliknij Otwórz.
6. Kliknij przycisk Upload.

7. Odnośnik do dodanego pliku: https://[domena-twojego-sklepu]/upload/[nazwa-pliku] np. https://sklep.pl/upload/produkt.png

Najczęściej zadawane pytania

Czy aplikacja jest kompatybilna z różnymi szablonami sklepu?

Tak, aplikacja działa bez problemu z różnymi szablonami sklepu - zarówno standardowymi, dostępnymi w sklepie ze stylami graficznymi, jak i tworzonymi przez partnerów Shoper oraz projektowanymi indywidualnie.

Czy instalacja aplikacji wpływa na dotychczasowe opisy/treści wprowadzone w sklepie?

Instalacja aplikacji nie wpływa na dotychczasowe opisy/treści wprowadzone w sklepie. Aplikacja działa tylko na opisach/treściach utworzonych przez edytor aplikacji.

Czy aplikacja działa dla wszystkich języków w sklepie?

Tak, aplikacja działa dla wszystkich języków w sklepie. Opisy/treści wprowadzasz dla aktualnie wybranego języka edytowania.

Dlaczego film nie działa w sklepie?

Film nie działa ponieważ masz włączone czyszczenie kodu HTML, który usuwa niezbędne elementy filmu do jego odtworzenia. Wyłącz czyszczenie kodu HTML, żeby film był poprawnie wyświetlany w sklepie. Przejdź do działu Wyłączanie czyszczenia kodu HTML, aby dowiedzieć się jak to zrobić.

Jak będą wyglądać opisy/treści gdy nie opłacę subskrypcji?

Brak opłaty subskrypcji spowoduje utratę wsparcia widoku kolumnowego. Każda kolumna będzie wyświetlana jedna pod drugą na pełną szerokość sklepu.

Przykład:

• Widok bez aktywnej subskrypcji
• Widok z aktywną subskrypcją

Jak będą wyglądać opisy/treści gdy odinstaluję aplikację?

Odinstalowanie aplikacji spowoduje usunięcie styli odpowiedzialnych za formatowanie opisu. Dlatego zalecamy pozostawienie zainstalowanej aplikacji nawet gdy subskrypcja nie jest opłacona.

Jednak jeśli zdecydujesz się na odinstalowanie aplikacji, dodaj poniższe style do szablonu, aby dodane treści przez edytor wyświetlały się w ten sam sposób gdy subskrypcja nie jest opłacona.

.webowa-content {display:flex; flex-direction:column; row-gap:32px}
.webowa-content .webowa-row {display:flex; flex-direction:column; row-gap:32px; column-gap:32px}
.webowa-content .webowa-video {position:relative; padding-bottom:56.25%}
.webowa-content .webowa-video video, .webowa-content .webowa-video iframe {position:absolute; top:0; left:0; width:100%; height:100%}

Aby dodać style do szablonu:

1. Przejdź do Wygląd i treści → Wygląd sklepu → Obecny szablon graficzny.
2. Przejdź do zakładki Własny styl CSS.
3. Wklej powyższe style CSS do edytora.
4. Kliknij przycisk Zapisz.