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
- Zaloguj się do panelu administracyjnego sklepu.
- W zakładce Dodatki i integracje → Aplikacje wyszukaj aplikację Edytor responsywnych treści i kliknij przycisk Zainstaluj aplikację.
- Zaakceptuj regulamin appstore i kliknij przycisk Zamawiam.
Aplikacja po instalacji jest wyłączona.
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.
- W zakładce Dodatki i integracje → Moje aplikacje wyszukaj Edytor responsywnych treści i kliknij ikonę aplikacji.
- Aby włączyć aplikację:
- Ustaw opcję Włącz aplikację jako aktywną.
- Wybierz rodzaje powiadomień e-mail, które chcesz otrzymywać.
- Kliknij przycisk Zapisz.
- 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.
Przejdź do działu Wgrywanie obrazka/filmu do sklepu, aby dowiedzieć się jak wgrać obrazek do sklepu.
Wstawianie filmu
Kliknij w przycisk , aby wstawić film. Zostanie otwarte okno, w którym wprowadzisz odnośnik do filmu w formacie MP4.
Przejdź do działu Wgrywanie obrazka/filmu do sklepu, aby dowiedzieć się jak wgrać film do sklepu.
Aby filmy były poprawnie wyświetlane w sklepie musi być wyłączone czyszczenie kodu HTML. Przejdź do działu Wyłączanie czyszczenia kodu HTML, aby dowiedzieć się jak to zrobić.
Wstawianie filmu YouTube
Kliknij w przycisk , aby wstawić film YouTube. Zostanie otwarte okno, w którym wprowadzisz odnośnik do filmu YouTube.
Filmy YouTube dodawane są z włączonym rozszerzonym trybem prywatności.
Do umieszczenia filmów YouTube w sklepie wymagana jest zgoda użytkownika na marketingowe pliki cookies. Jeśli użytkownik nie wyraził zgody, w sklepie zostanie wyświetlony odnośnik do filmu wraz z jego miniaturą.
Aby filmy były poprawnie wyświetlane w sklepie musi być wyłączone czyszczenie kodu HTML. Przejdź do działu Wyłączanie czyszczenia kodu HTML, aby dowiedzieć się jak to zrobić.
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.
Opis produktu
Tworzenie opisu produktu
- Przejdź do Obsługa sklepu → Produkty.
- Odszukaj produkt, dla którego chcesz wprowadzić opis.
- W kolumnie Akcje, po prawej stronie, kliknij trybik i wybierz opcję Aplikacje → Edytor opisu produktu.
Tłumaczenie opisu produktu
- Przejdź do Obsługa sklepu → Produkty.
- 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).
- Odszukaj produkt, dla którego chcesz przetłumaczyć opis.
- W kolumnie Akcje, po prawej stronie, kliknij trybik i wybierz opcję Aplikacje → Edytor opisu produktu.
- Wybierz język, z którego opis produktu ma być skopiowany.
- Przetłumacz opis.
- Kliknij przycisk Zapisz.
Duplikowanie opisu produktu
- Przejdź do Obsługa sklepu → Produkty.
- Odszukaj produkt, którego opis chcesz zduplikować.
- W kolumnie Akcje, po prawej stronie, kliknij trybik i wybierz opcję Aplikacje → Edytor opisu produktu.
- W prawym górnym rogu kliknij przycisk Duplikuj.
- Wyszukaj produkt po ID lub kodzie, do którego opis chcesz zduplikować.
- Kliknij przycisk Wybierz przy wybranym produkcie.
- Dostosuj opis dla wybranego produktu.
- Kliknij przycisk Zapisz.
Treść strony informacyjnej
Tworzenie treści strony informacyjnej
- Przejdź do Wygląd i treści → Strony informacyjne.
- Odszukaj stronę informacyjną, dla której chcesz wprowadzić treść.
- W kolumnie Akcje, po prawej stronie, kliknij trybik i wybierz opcję Aplikacje → Edytor treści strony informacyjnej.
Duplikowanie treści strony informacyjnej
- Przejdź do Wygląd i treści → Strony informacyjne.
- Odszukaj stronę informacyjną, której treść chcesz zduplikować.
- W kolumnie Akcje, po prawej stronie, kliknij trybik i wybierz opcję Aplikacje → Edytor treści strony informacyjnej.
- W prawym górnym rogu kliknij przycisk Duplikuj.
- Wyszukaj stronę informacyjną po ID, do której treść chcesz zduplikować.
- Kliknij przycisk Wybierz przy wybranej stronie informacyjnej.
- Dostosuj treść dla wybranej strony informacyjnej.
- Kliknij przycisk Zapisz.
Treść wpisu bloga
Tworzenie treści wpisu bloga
- Przejdź do Wygląd i treści → Blog → Lista wpisów.
- Odszukaj wpis bloga, dla którego chcesz wprowadzić treść.
- W kolumnie Akcje, po prawej stronie, kliknij trybik i wybierz opcję Aplikacje → Edytor treści wpisu.
Duplikowanie treści wpisu bloga
- Przejdź do Wygląd i treści → Blog → Lista wpisów.
- Odszukaj wpis bloga, którego treść chcesz zduplikować.
- W kolumnie Akcje, po prawej stronie, kliknij trybik i wybierz opcję Aplikacje → Edytor treści wpisu.
- W prawym górnym rogu kliknij przycisk Duplikuj.
- Wyszukaj wpis bloga po ID, do którego treść chcesz zduplikować.
- Kliknij przycisk Wybierz przy wybranym wpisie bloga.
- Dostosuj treść dla wybranego wpisu bloga.
- Kliknij przycisk Zapisz.
Wyłączanie czyszczenia kodu HTML
- Przejdź do Ustawienia → Zaawansowane → Bezpieczeństwo.
- Zaznacz opcję Wyłącz czyszczenie kodu HTML.
- Kliknij przycisk Zapisz.
Wgrywanie obrazka lub filmu do sklepu
- Przejdź do Ustawienia → Zaawansowane → Zarządzanie plikami.
- Kliknij przycisk Zarządzaj plikami.
- Kliknij przycisk Upload.
- Kliknij przycisk Add files.
- Wybierz plik ze swojego komputera i kliknij Otwórz.
- Kliknij przycisk Upload.
- Odnośnik do dodanego pliku:
https://[domena-twojego-sklepu]/upload/[nazwa-pliku]
np.https://sklep.pl/upload/produkt.png
Najczęściej zadawane pytania
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:
- Przejdź do Wygląd i treści → Wygląd sklepu → Obecny szablon graficzny.
- Przejdź do zakładki Własny styl CSS.
- Wklej powyższe style CSS do edytora.
- Kliknij przycisk Zapisz.