Korzystanie z edytora tekstu sformatowanego do obsługi treści

Możesz używać edytora tekstu sformatowanego Shopify do formatowania i stylizacji treści wyświetlanych w Twoim sklepie online.

Gdzie używać edytora tekstu sformatowanego

Za pomocą edytora tekstu sformatowanego możesz dodawać lub edytować tekst w kilku miejscach w swoim sklepie:

• Opisy produktów
• Opisy kolekcji
• Posty na blogu
• Strony
• Regulamin sklepu

Jeśli używasz kompatybilnego szablonu, możesz dodawać sekcje tekstu sformatowanego do stron lub szablonów za pomocą edytora szablonów.

Dodaj treść HTML za pomocą edytora tekstu sformatowanego

Za pomocą edytora tekstu sformatowanego możesz wprowadzić treść HTML dla postów na blogu, stron, opisów produktów i opisów kolekcji.

Kliknij przycisk , aby wyświetlić kod HTML dla treści w edytorze tekstu sformatowanego.

W widoku HTML można wprowadzić wiele zmian w treści w edytorze tekstu sformatowanego. Za pomocą kodu HTML możesz dodawać obrazy, filmy lub tabele, a także debugować lub dostosowywać układ i styl treści.

Osadź widżet multimediów

Jeśli chcesz osadzić widżet wideo lub muzyczny, musisz najpierw umieścić go w serwisie takim jak Youtube, Vimeo lub SoundCloud. Serwisy te generują kod osadzania, który możesz skopiować i wkleić do edytora tekstu sformatowanego w panelu administracyjnym Shopify.

Kroki:

1. Znajdź kod osadzania dla multimediów, które chcesz osadzić.
2. Zaznacz cały kod osadzania, klikając go i naciskając klawisze ctrl + A na komputerze PC lub command + A na komputerze Mac.
3. Skopiuj kod osadzania, naciskając klawisze ctrl + C na komputerze PC lub command + C na komputerze Mac.
4. W panelu administracyjnym Shopify kliknij przycisk Pokaż HTML w edytorze tekstu sformatowanego dla edytowanej treści.
5. Wklej kod osadzania, naciskając klawisze ctrl + V na komputerze PC lub command + V na komputerze Mac.
6. Kliknij opcję Zapisz.

Formatuj tekst za pomocą edytora tekstu sformatowanego

Za pomocą przycisku Formatowanie możesz szybko tworzyć akapity, nagłówki lub cytaty blokowe. Używanie odpowiedniego formatowania i poziomów nagłówków ułatwia ludziom i wyszukiwarkom odczytanie zawartości strony internetowej.

Aby wybrać format tekstu, zaznacz tekst, a następnie kliknij przycisk Formatowanie.

Opcje formatowania

• Akapit

  Większość treści tekstowych na Twojej stronie internetowej to tekst akapitu. Tekst akapitu ma zazwyczaj rozmiar czcionki 10–12 pt, ale niektóre szablony używają różnych rozmiarów czcionek.

• Nagłówek (1-6)

  Nagłówki służą do tworzenia struktury treści. Istnieje 6 poziomów nagłówków. Nagłówek 1 jest najważniejszym poziomem, a Nagłówek 6 — najmniej ważnym.

• Cytat blokowy

  Cytat blokowy jest używany do wyświetlania tekstu przypisywanego komuś innemu, np. cytatu lub fragmentu z książki lub strony internetowej.

Pogrubiony tekst

Aby pogrubić tekst, zaznacz go i kliknij przycisk Pogrubienie.

Pochylony tekst

Aby napisać tekst kursywą, zaznacz go i kliknij przycisk Kursywa.

Podkreślony tekst

Aby podkreślić tekst, zaznacz go i kliknij przycisk Podkreślenie.

Utwórz listę punktowaną

Aby utworzyć listę punktowaną, kliknij przycisk Lista punktowana.

Możesz wpisać tekst, aby utworzyć pierwszą pozycję na liście punktowanej. Aby utworzyć nowe pozycje na liście, naciśnij klawisz enter lub return. Aby zakończyć listę, naciśnij klawisz enter lub return dwa razy.

Utwórz listę numerowaną

Aby utworzyć listę numerowaną, kliknij przycisk Lista numerowana.

Możesz wpisać tekst, aby utworzyć pierwsze pozycje na liście numerowanej. Aby utworzyć nowe pozycje na liście, naciśnij klawisz enter lub return. Aby zakończyć listę, naciśnij klawisz enter lub return dwa razy.

Zwiększ wcięcie tekstu

Zwiększenie wcięcia akapitu powoduje dodanie marginesu po lewej stronie. Aby zwiększyć wcięcie akapitu, kliknij przycisk Zwiększ wcięcie.

Zmniejsz wcięcie tekstu

Zmniejszenie wcięcia akapitu powoduje usunięcie wszelkich istniejących wcięć. Aby zmniejszyć wcięcie akapitu, kliknij przycisk Zmniejsz wcięcie.

Wyrównaj tekst

Aby wyrównać tekst, zaznacz go, kliknij przycisk Wyrównanie i wybierz opcję Wyrównaj do lewej, Wyśrodkuj lub Wyrównaj do prawej.

Zmień kolor tekstu

1. Zaznacz tekst i kliknij przycisk Kolor.
2. Kliknij kolor lub wprowadź kod szesnastkowy, aby zmienić kolor zaznaczonego tekstu.

Zmień kolor tła tekstu

1. Zaznacz tekst i kliknij przycisk Kolor.
2. Kliknij kartę Tło.
3. Kliknij kolor lub wprowadź kod szesnastkowy, aby zmienić kolor tła zaznaczonego tekstu.

Wyczyść formatowanie w edytorze tekstu sformatowanego

Aby usunąć formatowanie tekstu lub obrazów, zaznacz zawartość, a następnie kliknij przycisk Wyczyść formatowanie.

Wstawianie tabel za pomocą edytora tekstu sformatowanego

Za pomocą edytora tekstu sformatowanego możesz wstawiać tabele w postach na blogu, na stronach, w opisach produktów i w opisach kolekcji. Po utworzeniu tabeli możesz w niej umieścić tekst, obrazy, a nawet filmy.

Kroki:

1. W edytorze tekstu sformatowanego kliknij przycisk Wstaw tabelę.
2. Kliknij opcję Wstaw tabelę, aby wstawić tabelę. Spowoduje to utworzenie tabeli z jednym wierszem i jedną kolumną.

Po utworzeniu tabeli kliknij ponownie przycisk Wstaw tabelę, aby zmodyfikować wiersze i kolumny tabeli:

• Wstaw wiersz powyżej: Umieść kursor w wierszu i kliknij ten przycisk, aby wstawić nowy wiersz powyżej.
• Wstaw wiersz poniżej: Umieść kursor w wierszu i kliknij ten przycisk, aby wstawić nowy wiersz poniżej.
• Wstaw kolumnę przed: Umieść kursor w kolumnie i kliknij ten przycisk, aby wstawić nową kolumnę przed tą kolumną.
• Wstaw kolumnę po: Umieść kursor w kolumnie i kliknij ten przycisk, aby wstawić nową kolumnę po tej kolumnie.
• Usuń wiersz: Umieść kursor w wierszu, który chcesz usunąć, a następnie kliknij ten przycisk.
• Usuń kolumnę: Umieść kursor w kolumnie, którą chcesz usunąć, a następnie kliknij ten przycisk.
• Usuń tabelę: Umieść kursor w dowolnym miejscu w tabeli, a następnie kliknij ten przycisk, aby usunąć całą tabelę.

Wstawianie linków za pomocą edytora tekstu sformatowanego

Za pomocą edytora tekstu sformatowanego możesz wstawiać linki (hiperłącza) w postach na blogu, na stronach, w opisach produktów i w opisach kolekcji. Możesz dodawać linki, które kierują klientów do stron w Twoim sklepie online Shopify i do innych stron internetowych. Możesz również dodawać linki, które otwierają wiadomości e-mail lub inicjują połączenia telefoniczne, aby ułatwić klientom kontakt z Tobą.

Kroki:

1. Zaznacz tekst lub obraz, który chcesz przekształcić w link.
2. Kliknij opcję Wstaw link.
3. Wprowadź docelowy adres URL dla linku w polu Link do :
   • Aby utworzyć link do zewnętrznej strony internetowej, która znajduje się poza Twoim sklepem Shopify, wpisz https://, a następnie adres internetowy, na przykład https://www.example.com.
   • Aby utworzyć link do strony w Twoim sklepie online Shopify, wprowadź krótki adres URL, na przykład /collections/summer-collection.
   • Aby utworzyć link otwierający wiadomość e-mail, wpisz mailto:, a następnie adres e-mail, na przykład mailto:example@example.com.
   • Aby utworzyć link do nawiązywania połączenia telefonicznego, wpisz tel:, a następnie numer telefonu, na przykład tel:+0-123-456-7890.
4. Wprowadź krótki opis linku w polu Tytuł linku.
5. W menu Otwórz ten link w wybierz, w jaki sposób ma się otwierać link:
   • tym samym oknie: link otworzy się w istniejącej karcie lub oknie przeglądarki użytkownika.
   • nowym oknie: link otworzy się w nowej karcie lub oknie przeglądarki.
6. Kliknij opcję Wstaw link, aby przekształcić zaznaczony tekst w link.

Dodawanie linków wewnętrznych i zewnętrznych za pomocą edytora tekstu sformatowanego

Linki do stron w Twoim sklepie Shopify nazywane są linkami wewnętrznymi. Do tworzenia linków wewnętrznych możesz używać krótkich adresów URL. Na przykład adres URL /collections będzie wskazywać na stronę kolekcji w Twoim sklepie.

Aby utworzyć link do określonej strony Twojego sklepu online, takiej jak strona kolekcji lub strona produktu, użyj formatu adresu URL /typ-strony/identyfikator-strony. Na przykład, aby utworzyć link do utworzonej przez Ciebie kolekcji o nazwie Kolekcja letnia, użyj adresu URL /collections/summer-collection.

Linki do stron internetowych, które znajdują się poza Twoim sklepem Shopify, nazywane są linkami zewnętrznymi. Linki zewnętrzne muszą być wprowadzone w całości i zaczynać się od http://.

Tworzenie linku do pliku w treści strony

Po przesłaniu pliku możesz utworzyć do niego link w treści w edytorze tekstu sformatowanego, aby udostępnić go do pobrania z opisu produktu lub kolekcji, strony WWW lub posta na blogu.

Kroki:

Wstawianie obrazów za pomocą edytora tekstu sformatowanego

W edytorze tekstu sformatowanego możesz wstawić obraz na trzy sposoby:

• przesłać obrazy
• wybrać je spośród obrazów produktów
• użyć publicznego adresu URL obrazu.

Przesyłanie obrazów

Kroki:

1. W edytorze tekstu sformatowanego kliknij przycisk Wstaw obraz.

2. W oknie dialogowym Wstaw obraz kliknij kartę Przesłane obrazy.

3. Kliknij Prześlij plik.

4. Wybierz z komputera plik obrazu w formacie WebP, HEIC, SVG, GIF, JPEG lub PNG.

5. Kliknij przesłany obraz, aby go wybrać.

6. Z menu Rozmiar wybierz rozmiar wyświetlania obrazu. Możesz wybrać opcję Oryginalny, aby wstawić obraz bez zmiany jego rozmiaru wyświetlania.

7. Kliknij Wstaw obraz, aby umieścić obraz w edytorze tekstu sformatowanego.

Wybieranie spośród obrazów produktów

Kroki:

1. W edytorze tekstu sformatowanego kliknij przycisk Wstaw obraz.

2. W oknie dialogowym Wstaw obraz kliknij kartę Obrazy produktu.

3. Kliknij obraz, który chcesz wstawić. Jeśli nie możesz znaleźć multimediów produktu do wstawienia, użyj przycisków strzałek, aby przeglądać strony.

4. Z menu Rozmiar wybierz rozmiar wyświetlania obrazu. Możesz wybrać opcję Oryginalny, aby wstawić obraz bez zmiany jego rozmiaru wyświetlania.

5. Kliknij Wstaw obraz, aby umieścić obraz produktu w edytorze tekstu sformatowanego.

Używanie adresu URL obrazu

Aby wstawić obraz za pomocą publicznego adresu URL:

1. W edytorze tekstu sformatowanego kliknij przycisk Wstaw obraz.
2. W oknie dialogowym Wstaw obraz kliknij kartę URL.
3. Wprowadź publicznie dostępny adres URL pliku obrazu.
4. Kliknij Wstaw obraz, aby wstawić obraz do edytora tekstu sformatowanego w jego oryginalnym rozmiarze.

Przenoszenie i zmiana rozmiaru obrazu w edytorze tekstu sformatowanego

Po dodaniu obrazu do opisu produktu lub kolekcji, na stronę WWW lub do bloga, można go przenieść w inne miejsce w treści.

Kroki:

1. W panelu administracyjnym Shopify kliknij produkt, kolekcję, stronę WWW lub post na blogu zawierający obraz, który chcesz przenieść lub którego rozmiar chcesz zmienić.
2. W edytorze tekstu sformatowanego kliknij obraz.
3. Wykonaj jedną z następujących czynności:
   • Aby przenieść obraz, kliknij go i przeciągnij w inne miejsce w polu Treść.
   • Aby zmienić rozmiar obrazu, kliknij i przeciągnij jeden z rogów.
4. Kliknij opcję Zapisz.

Edytowanie obrazu w edytorze tekstu sformatowanego

W edytorze tekstu sformatowanego można zmienić rozmiar obrazu, zawijanie tekstu wokół niego i wyrównanie. Można także edytować adres URL obrazu albo dodać lub edytować alternatywny tekst obrazu.

Kroki:

1. Kliknij dwukrotnie obraz w edytorze tekstu sformatowanego, aby otworzyć okno dialogowe Edytuj obraz.
2. Użyj opcji rozmiaru i wyrównania, aby edytować obraz:
   • Aby zmienić rozmiar obrazu, wybierz opcję rozmiaru.
   • Aby poprawić pozycjonowanie (SEO) i dostępność swojego sklepu online, dodaj lub edytuj alternatywny tekst obrazu.
   • Aby dodać odstęp, wprowadź liczbę pikseli odstępu, który chcesz dodać z każdej strony.
   • Aby zmienić wyrównanie obrazu, wybierz jedną z ikon oznaczających wyrównanie do lewej, do środka lub do prawej.
   • Aby dodać zawijanie tekstu, zaznacz opcję Zawijaj tekst wokół obrazu.
3. Kliknij opcję Edytuj obraz, aby zapisać zmiany.

Wstawianie filmów wideo za pomocą edytora tekstu sformatowanego

Za pomocą edytora tekstu sformatowanego można wstawiać lub osadzać filmy wideo w postach na blogu, na stronach, w opisach produktów i w opisach kolekcji.

Jeśli chcesz osadzić utworzony przez siebie film wideo, musisz go najpierw przesłać na stronę do strumieniowania wideo, taką jak YouTube lub Vimeo.

Serwis YouTube nie pozwala na wyłączenie powiązanych filmów wideo, ale można określić, że powiązane filmy wideo powinny pochodzić z tego samego kanału co właśnie odtworzony film.

Kroki:

1. Skopiuj adres URL filmu wideo, naciskając klawisze Ctrl + C na komputerze PC lub Command + C na komputerze Mac.

2. Odwiedź stronę Embed Responsively. Embed Responsively to narzędzie, które wygeneruje ulepszony kod osadzania filmu.

3. Na stronie Embed Responsively kliknij, aby wybrać serwis wideo, na którym znajduje się film.
4. Wklej skopiowany adres URL filmu do pola Adres URL strony w narzędziu Embed Responsively, naciskając klawisze ctrl + V na komputerze PC lub command + V na komputerze Mac.
5. Kliknij przycisk Osadź. Narzędzie Embed Responsively utworzy kod osadzania.
6. Jeśli film pochodzi z serwisu YouTube i chcesz wyświetlać tylko powiązane filmy z tego samego kanału YouTube, znajdź adres URL filmu w kodzie osadzania. Skopiuj i wklej kod ?rel=0 na końcu, wewnątrz cudzysłowu.
7. Skopiuj cały kod z pola Kod osadzania.
8. W panelu administracyjnym Shopify kliknij przycisk Wstaw film w edytorze tekstu sformatowanego.
9. Wklej kod osadzania do pola w oknie dialogowym Wstaw film.
10. Kliknij Wstaw film.
11. Po zakończeniu kliknij przycisk Zapisz, aby zapisać zmiany w edytowanej pozycji.

Wstawianie plików audio za pomocą edytora tekstu sformatowanego

Za pomocą edytora tekstu sformatowanego można wstawiać lub osadzać pliki audio w postach na blogu, na stronach, w opisach produktów i w opisach kolekcji.

Kroki:

1. W panelu administracyjnym Shopify przejdź do opcji Treść > Pliki.

2. Kliknij opcję Prześlij pliki, aby przesłać plik audio, który chcesz wstawić lub osadzić w sklepie.

3. W sekcji Sklep online otwórz edytor tekstu sformatowanego dla strony lub posta na blogu, w którym chcesz umieścić plik audio.

4. Skopiuj kod <div id="player"><audio controls="controls">, a następnie wklej go do edytora tekstu sformatowanego, aby osadzić odtwarzacz audio na stronie.

5. Skopiuj następujący kod:

• <source src="https://cdn.shopify.com/s/files/1/0220/2378/files/example.mp3" type="audio/mpeg" /></div>

6. Wklej ten kod do edytora tekstu sformatowanego za kodem odtwarzacza audio, a następnie zastąp adres https://cdn.shopify.com/s/files/1/0220/2378/files/example.mp3 adresem URL utworzonym dla pliku audio po przesłaniu go do Shopify. Adres URL pliku audio możesz znaleźć w dowolnym momencie na stronie Pliki.
7. Kliknij opcję Zapisz.
8. Kliknij przycisk Podgląd, aby upewnić się, że plik audio odtwarza się prawidłowo.

Dodawanie lub usuwanie komentarzy wewnętrznych w edytorze tekstu sformatowanego

Możesz używać tagów komentarza <!-- i --> dla tekstu wewnętrznego, którego nie chcesz publikować w sklepie.

Kroki:

1. W edytorze tekstu sformatowanego kliknij przycisk Pokaż HTML.
2. Aby dodać komentarz wewnętrzny, umieść tekst, który chcesz ukryć, w tagach <!-- i -->. Na przykład: <!--twójtekst-->.
3. Kliknij opcję Zapisz.

Tagi HTML umieszczone w tagach komentarza są zapisywane jako tekst wewnętrzny. Aby te tagi HTML działały prawidłowo, należy usunąć otaczające je tagi komentarza <!-- i -->.

Omówienie edytora tekstu sformatowanego

Edytor tekstu sformatowanego jest zintegrowany z TinyMCE, zewnętrzną siecią dostarczania treści (CDN). Wiąże się to z kilkoma ważnymi kwestiami:

• Limit treści: Obowiązuje ścisły limit 64 KB dla treści wprowadzanej do edytora tekstu sformatowanego. Dotyczy to Stron, Postów na blogu i dodatkowych skryptów.
• Oczyszczanie kodu HTML: TinyMCE zapewnia logikę filtrowania treści, która automatycznie koryguje formatowanie HTML, aby zapobiec nieprawidłowemu działaniu witryny sklepu i zagrożeniom bezpieczeństwa. Mimo że można ręcznie edytować kod HTML, aby przywrócić go do pierwotnej postaci, zaleca się akceptowanie tych automatycznych zmian w celu uniknięcia potencjalnych problemów.

Rozwiązywanie problemów z edytorem tekstu sformatowanego

Jeśli występują problemy z edytorem tekstu sformatowanego, zapoznaj się z poniższymi krokami rozwiązywania problemów i częstymi problemami.

<p style="float: left;"><br/><img alt="" src="your image link" style="float: left; margin-right: 20px;">This 22x34 special purchase frame...</p>

<img alt="" src="your image link" style="margin-right: 20px; float: left;">
<p>This 22x34 special purchase frame...</p>

mailto:email@example.com