Jak korzystać z edytora tekstu Pixpa?

Podczas edycji treści ważne jest, aby nauczyć się obsługi edytora tekstowego / WYSIWYG (dostajesz to, co widzisz). Ten edytor tekstu umożliwia edycję, zmianę i dodawanie treści do stron internetowych (formularz kontaktowy, kalendarz, księga gości), postów na blogu i banerów okładkowych bez znajomości języka HTML.

Podczas pracy z edytorem tekstu Pixpa naciśnij ENTER (okna) lub RETURN (mac) aby utworzyć nowy akapit, aby wstawić nowy wiersz bez wymuszania nowego akapitu, naciśnij i przytrzymaj SHIFT klawisz, a następnie naciśnij klawisz Enter lub Return.

Większość funkcji edytora zacznie działać w momencie, gdy ty kliknij przycisk/ikonę. W innych przypadkach kliknięcie ikony spowoduje wyświetlenie małego rozwijanego menu z dodatkowymi opcjami.

Podczas dodawania stylizacji do tekstu możesz albo kliknąć opcję edytora i rozpocząć pisanie, aby uzyskać wybrany wynik, albo wpisać tekst, podświetlić go, a następnie kliknąć opcję edytora, aby dodać go do zaznaczonego tekstu.


Wyjaśnione opcje to: 

  1. Formatuj — zmień styl czcionki
  2. Wyrównaj — wyrównanie tekstu
  3. Pogrubienie / Kursywa / Przekreślenie / Podkreślenie
  4. Lista — uporządkowane / nieuporządkowane
  5. Obraz — Dodaj obraz
  6. Wideo — Dodaj wideo
  7. Tabela — Dodaj tabelę
  8. Link – Dodaj link do swojego tekstu
  9. Kolor tekstu – Zmień kolor tekstu
  10. Klipy – Dodaj przyciski CTA
  11. Widżet – Dodaj niestandardowy kod
  12. Linia – Dodaj linię
  13. Pełny ekran
  14. Widok kodu HTML

1. Format – Zmień styl czcionki

Możesz użyć cztery różne typy stylów czcionek w Twojej witrynie (jednorazowo), które zostałyby określone w pliku Sekcja projektowania. Jest to powszechny styl projektowania używany w całej witrynie.



Wszystkie style czcionek są określone w pliku sekcja projektowa. Możesz także kliknąć Zarządzaj czcionkami, która jest ostatnią opcją na liście rozwijanej po kliknięciu na Tekst przycisk. Możesz teraz zobaczyć i ustawić następujące czcionki oraz edytować styl czcionki, rozmiar, kolor, grubość, wysokość linii i odstępy między literami:

  • Dział 1
  • Dział 2
  • Dział 3
  • Dział 4
  • Tekst akapitu (normalny, mały i duży)

Oto zrzut ekranu stylu Nagłówek 1. Tutaj możesz również edytować inne czcionki akapitów nagłówków.


Uwaga: „Kod” i „Cytat” mają domyślny styl.

  • Code: Służy do zdefiniowania fragmentu kodu komputerowego. Zawartość wewnątrz jest wyświetlana w domyślnej czcionce przeglądarki o stałej szerokości.
  • Cytuj: To jest to samo co H3 wraz ze znacznikiem blockquote.


Po określeniu stylu czcionki w sekcji projektowania możesz efektywnie używać ich w całej witrynie. Wystarczy zaznaczyć tekst i zastosować formatowanie. System automatycznie zastosuje kolor czcionki, rozmiar i grubość tego konkretnego stylu do wybranego tekstu. Możesz przejrzeć to samo na stronie internetowej.

Note: Styl czcionki, grubość i kolor będą widoczne tylko na stronie internetowej, a NIE w studio.


2. Wyrównaj — wyrównanie tekstu

Możesz wyrównać tekst do lewej, do prawej, do środka i wyjustowany. Zaznacz tekst i wybierz wyrównanie z listy rozwijanej.


3. Pogrubienie / Kursywa / Przekreślenie / Podkreślenie

  • Pogrubienie – Po kliknięciu wyróżniony tekst stanie się pogrubiony. W HTML używa to tagu.
  • italski – Po kliknięciu wyróżniony tekst zmieni się na kursywę. W HTML używa się
  • przekreślenie – Podświetlony tekst zostanie oznaczony jako usunięty po kliknięciu. W HTML używa to etykietka.
  • podkreślać – Po kliknięciu podświetlony tekst zostanie podkreślony. W HTML używa tagu.

4. Lista – uporządkowane / nieuporządkowane

Możesz łatwo przekształcić tekst w listy z wcięciami, aby je uporządkować.

  • Lista nieuporządkowana – Wyróżniony tekst zostanie sformatowany jak lista wypunktowana. W HTML używa to zestawu I tagi.
  • Lista numerowana – Podświetlony tekst zostanie sformatowany jak lista numerowana. W HTML używa to zestawu I tagi.
  • wcięcie – Podświetlony obszar tekstowy nie będzie wcięty.
  • tiret – Podświetlony obszar tekstowy zostanie wcięty.


5. Obraz – Dodaj obraz

Możesz dodać wiele obrazów klikając na nią. Kliknięcie tego przycisku otworzy małe okno modalne, w którym możesz przeciągnąć lub wybrać obraz ze swojego systemu. W HTML używanym tagiem jest .

Możesz również zmienić rozmiar obrazu przeciągnij i upuść z prawej dolnej niebieskiej ikony na tym konkretnym obrazie.


Edytor umożliwia również dodawanie plików tytuł obrazu, podpis i link do przesłanego obrazu. Kliknij dowolny obraz, a zobaczysz opcję Edytuj (1) Usuń (2) i Resize (3).


Po kliknięciu Edytuj, zobaczysz wyskakujące okienko, w którym możesz określić:

  1. Tytuł – To byłoby tag alt tego konkretnego obrazu.
  2. Podpis – Aby pokazać podpis wraz z obrazem na stronie na żywo.
  3. Pozycja – Wybierz wyrównanie obrazu (do lewej, do środka, do prawej lub brak).
  4. Połączyć – Dodaj link do obrazu.
  5. Otwórz w nowej karcie – Zaznacz to pole wyboru, jeśli chcesz otworzyć link do obrazu w nowej karcie.
  6. Zapisz – Zapisz zmiany
  7. Usuń – Usuń obraz
  8. Zastąp obraz, upuszczając nowy obraz na samą miniaturę.

Idealny rozmiar obrazu dla obrazów edytora tekstu posta na blogu to szerokość 1500 pikseli x dowolna wysokość. Jest to preferowany rozmiar dla wszystkich układów blogów. Obsługiwane formaty plików obrazów witryn internetowych to JPG, JPEG, PNG i GIF. Jeśli prześlesz zdjęcia w większym rozmiarze, my mniejszy rozmiar je do szerokości 1500 pikseli. 


6. Wideo – Dodaj wideo

Tutaj możesz dodać swoje filmy z YouTube/Vimeo. Kliknięcie tego przycisku otworzy małe okno modalne, w którym możesz wprowadzić adres URL filmu z YouTube/Vimeo lub kod do umieszczenia na stronie.

Wskazówka: Możesz także bezpośrednio umieścić adres URL YouTube w edytorze tekstu. System automatycznie pobierze zrzut ekranu wideo.  


7. Tabela – Dodaj tabelę

Kliknij ikonę tabeli (7), aby dodać tabelę N wierszy. Treść możesz podzielić na wiersze i kolumny.

 

Edytor umożliwia wstawienie linku do dowolnego tekstu. Możesz połączyć swoje istniejące strony internetowe lub dowolną inną stronę internetową/blog/pliki PDF itp.


Zaznaczenie tekstu i kliknięcie tego przycisku spowoduje otwarcie małego okna modalnego, w którym można wprowadzić docelowy adres URL, wybrać, czy otworzyć w nowym oknie, czy też wybrać link do innej strony w ich własnej witrynie. W HTML używanym tagiem jest tekst łącza

Proszę zanotować:

  • Aby połączyć się z zewnętrzną witryną, która znajduje się poza witryną Pixpa, wprowadź http://po którym następuje np. adres internetowy http://www.example.com.
  • Aby połączyć się z galerią, kategorią sklepu lub stroną w witrynie, wprowadź na przykład adres URL /gallery
  • Aby utworzyć łącze otwierające stacjonarnego klienta poczty e-mail, wprowadź mailto: po którym następuje np. adres e-mail mailto:example@example.com.
  • Aby utworzyć łącze, które wykonuje połączenie telefoniczne, wprowadź tel:, po którym następuje np. numer telefonu z numerem kierunkowym kraju tel:+0-123-456-7890
  • Aby utworzyć łącze otwierające Whatsapp, wprowadź https://wa.me/<number> gdzie <number> to pełny numer telefonu w formacie międzynarodowym. Pomiń wszelkie zera, nawiasy i myślniki podczas dodawania numeru telefonu w formacie międzynarodowym. Na przykład: Użyj https://wa.me/15551234567 zamiast https://wa.me/+001-(555)1234567Wiedzieć więcej.
  • Aby połączyć się z plikiem PDF lub innym plikiem przesłanym w sekcji plików, wprowadź skopiowany link tutaj. Wiedzieć więcej.


9. Kolor tekstu – Zmień kolor tekstu

Domyślnie system zastosuje kolor czcionki określony w pliku sekcja projektowa. Za pomocą tego narzędzia można jednak zastąpić kolor globalny. Wybierz tekst i kliknij ikonę koloru, pojawi się standardowa paleta kolorów do wyboru.

Uwaga: Możesz określić dowolny inny niestandardowy kolor, który nie jest dostępny w palecie kolorów z widoku kodu HTML. Przewiń w dół do punktu 12, aby dowiedzieć się więcej.


10. Klipy – Dodaj przyciski CTA

Edytor umożliwia również dodawanie przycisków CTA – kwadratowych lub zaokrąglonych, aby połączyć dowolną stronę/galerię/witrynę internetową/pdf itp. Możesz dostosować jego rozmiar i kolor z poziomu widoku kodu HTML. Przewiń w dół do punktu 12, aby dowiedzieć się więcej.

Kliknięcie tej ikony otworzy małe okno modalne, w którym możesz wybrać przycisk CTA.


11. Widżet – Dodaj niestandardowy kod

Edytor umożliwia również dodawanie dowolnego niestandardowego kodu, np. Kod osadzania Google Map, kod osadzania Soundcloud, kod osadzania posta na Twitterze itp. Zasadniczo dowolny kod osadzania można dodać w edytorze za pomocą ikony widżetu.

Kliknięcie tej ikony otworzy małe okno modalne, w którym możesz wkleić swój kod osadzania.


12. Linia – Dodaj linię

Edytor umożliwia dodanie linii poziomej.

Kliknięcie tej ikony spowoduje dodanie linii w miejscu, w którym znajduje się kursor.


13. Tryb pełnoekranowy

Edytor umożliwia przejście do trybu pełnoekranowego. Byłoby bardzo pomocne, gdybyś organizował długi post na blogu lub pisał długi artykuł.


14. Widok kodu HTML

Okno edytora może funkcjonować jako edytor wizualny (WYSIWYG) lub jako edytor HTML.

Możesz jednak przełączyć się do edytora HTML, klikając go. Możesz zmienić wszystko z widoku kodu, jeśli wiesz, jak to zrobić, lub możesz również pingować zespół pomocy technicznej Pixpa, jeśli potrzebujesz pomocy.

Wskazówka: Za pomocą widoku kodu HTML możesz dodać dowolny typ kodu osadzania w swoim poście na blogu.  

Nie możesz znaleźć tego, czego szukasz?

Skontaktuj się z Ekspertem Pixpa.