Edytor vs. Kompozytor! Prosty edytor tekstu WYSIWYG vs. plugin drag’n’drop

Wizualni kompozytorzy” to jeden z trendów w WordPressie. Każdy, kto chce tworzyć strony i artykuły w systemie zarządzania treścią WordPress jest uzależniony od zintegrowanego edytora WP. Edytor WP jest, w skrócie, edytorem WYSIWYG, czyli „to co widzisz jest tym co dostaniesz”. To znaczy, podobnie jak w znanym programie biurowym Word firmy Microsoft, zawsze widzisz zmiany na żywo. Pogrubienie słowa to pogrubienie. Podkreśl słowo, a zostanie ono podkreślone. To jest dokładnie tak, jak działa edytor WordPress, co robisz jest to, co widzisz. Dla mniejszych projektów internetowych, stron i blogów, ta funkcja jest całkowicie wystarczająca. Jednak w miarę jak WordPress stawał się coraz bardziej popularny, coraz większe strony były wdrażane przy użyciu tego systemu. Wielu webdesignerów i media managerów nie zadowalało się jednak prostymi polami tekstowymi i chciało upiększyć indywidualny układ stron. Poprzez indywidualne ikony, indywidualne tła, suwaki, duże obrazy i wiele innych.

Klasyczny edytor WordPress czy Composer?

Dla profesjonalisty nie stanowi to żadnego problemu, pisze kilka linijek kodu z HTML i CSS i gotowe. Jednak zasadą działania systemu zarządzania treścią jest zarządzanie dużymi ilościami danych, a w idealnym przypadku uczynienie ich łatwo dostępnymi, edytowalnymi i usuwalnymi dla użytkowników. W związku z tym wskazane jest, aby interfejs był przyjazny dla użytkownika i łatwy w obsłudze nawet bez dużej wiedzy technicznej.

Zasada, projektowanie z shortcodes

Aby w stosunkowo prosty sposób stylizować strony, pojawił się pomysł wykorzystania shortcodes. Te shortcodes łączą bardziej skomplikowany kod w proste tagi, które mogą być następnie wykorzystane przez użytkownika. Prostym przykładem może być zawinięcie fantazyjnego nagłówka w shortcode:

[Oto nagłówek[ /headline ].

… element otrzymuje wtedy specjalny kolor, specjalną pozycję, być może inną czcionkę, siłę czcionki i wiele więcej. Zanim zaczniemy wpisywać skomplikowane właściwości HTML i CSS, dobrze byłoby po prostu użyć terminu nagłówek. I dokładnie tak działa zasada działania shortcodes: pakujesz bardziej skomplikowane, długie kody w proste, małe snippety. Problem z tą zasadą jest taki, że trzeba mieć dużo wyobraźni wizualnej, bo użytkownik widzi kod, a nie ładnie sformatowany nagłówek. A teraz wyobraźmy sobie, że zwiększamy nieco złożoność i dodajemy tabele, z dokładnie takimi samymi odstępami, które są również kolorowane w tle, pojedynczo, raz na niebiesko, raz na żółto, raz na pomarańczowo. W tym miejscu shortcodes osiągają swoje granice, przynajmniej dla nietechnicznego użytkownika.

Nowość: Komponowanie w edytorze WordPress

Aby treść mogła być umieszczana bardzo łatwo, a także była bezpośrednio widoczna wizualnie, w przybliżonej pozycji, w przybliżonej formie, od pewnego czasu istnieją różne alternatywy dla standardowego edytora WP: Composer. Możesz pobrać je dość zwykle, zainstalować je w swoim systemie WordPress i gotowe. Wszystkie ważne pliki do pobrania można znaleźć tutaj i ponownie na końcu artykułu.

W pierwszym kroku instalujesz kompozytora swojego wyboru jak normalną wtyczkę w pulpicie nawigacyjnym WordPress. W kolejnym kroku aktywujesz plugin w zwykły sposób. Co się teraz zmieniło? Strony i posty. Najpierw spójrzmy jeszcze raz na pulpit WordPress, tutaj znajdziesz wszystkie ważne punkty dla Ciebie ponownie na pierwszy rzut oka, od postów na blogu do mediów do komentarzy i rozszerzeń. Istotne dla naszego dzisiejszego zadania są strony i posty. W zasadzie strony i posty różnią się tylko tym, że kategoryzujesz i odmierzasz czas wpisom, jak w klasycznym blogu. Strony to wszystkie statyczne strony, takie jak regulamin, strony kontaktowe lub „O nas”, ale także strona startowa i tak dalej.

Najważniejszy element pulpitu nawigacyjnego WP dla Twojej strony:

Aktywuj WP Composer

W poniższym przykładzie, używamy edytora układu w motywie WordPress Enfold (można go znaleźć tutaj). Niezależnie od tego, czy używasz Edytora układu, czy Visual Composer z WP Bakery, teraz znajdziesz niebieski przycisk na każdej indywidualnej stronie lub poście, który prowadzi Cię do Kompozytora lub przełącza tryb z Edytora WP do Kompozytora.

Wiele zalet, duża elastyczność

Przyjrzyjmy się najpierw niezliczonym zaletom, jakie niesie ze sobą Composer. Po pierwsze, mamy responsywną kompilację treści dla komputerów i urządzeń mobilnych. Kompozytor pozwala na wyświetlanie kolumn i wierszy jako pojedynczych elementów i dostosowanie ich do wielkości ekranu, tj. pulpitu, tabletu lub smartfona. Ponadto, masz wizualny interfejs, nie potrzebujesz HTML, CSS lub shortcodes, aby stworzyć mocne elementy, takie jak tła wideo. Wszystkie elementy w obrębie stron lub postów mogą być łatwo i intuicyjnie przenoszone za pomocą metody przeciągnij i upuść. Struktura poszczególnych elementów jest zdefiniowana i zawsze taka sama, dzięki temu Państwa strona ma jednolity wygląd i orientację użytkownika, a co za tym idzie mniej zakłóceń podczas wizyty.

Inne zalety:

• Elementy można dowolnie pozycjonować – nawet bez znajomości HTML, CSS
• Media, obrazy, itp. są łatwe do zintegrowania
• Możemy tworzyć układy jako szablony
• …

Kolumny, komórki i struktura

Przyjrzyjmy się teraz obrazowi 4. Znajdziesz tam podsumowanie małego wprowadzenia do pracy z edytorami wizualnymi w WordPressie. Jest to również ostatni etap moich warsztatów, ponieważ praca z kompozytorem jest bardzo intuicyjna i najlepiej uczyć się jej metodą prób i błędów. Nie zajmuje to też dużo czasu, bo elementów jest zwykle ograniczona do dwudziestu. Dzięki samodzielnemu treningowi, korzystanie z kompozytora jest łatwiejsze i szybsze do zrozumienia. Rezultaty będą szybko bardzo dobre, ponieważ aplikacja jest naprawdę prosta przy odrobinie wskazówek i wyobraźni:

Moja rada: zachowaj prostotę

Spójrz na strukturę na obrazku 4, często żaden z nagłówków specjalnych nie musi być, wystarczy pole tekstowe. Ustaw sobie sekcję, lub pracuj z kolumną, umieść element tekstowy w tym miejscu i zobacz co się stanie. Korzystając z podglądu (prawy górny róg strony edycji), możesz zobaczyć rezultat w nowej karcie przeglądarki. Teraz przejdź trochę dalej i umieść linię naszego pierwszego pola tekstowego. Utwórz nagłówek z pola tekstowego i umieść nowe pole tekstowe na samym końcu. Zrobione. Możesz po prostu skopiować te pola w kompozytorze i bezpośrednio stworzyć trzy, cztery lub pięć akapitów. W ten sposób można szybko stworzyć layout, a także szybko przeszkolić nowych pracowników i pokazać im, jak działa efektywne zarządzanie treścią.

Jeśli masz pytania dotyczące zarządzania treścią, content marketingu, WordPress lub warsztatów szkoleniowych dla pracowników, zadzwoń do nas. Mamy skuteczne i mocne koncepcje warsztatów, które wielokrotnie przetestowaliśmy w ścisłej współpracy z naszymi klientami. Możesz również skorzystać z naszego doświadczenia i know-how jako przedsiębiorcy i konsultanci internetowi.

• Pobierz: Visual Composer
  z CodeCanyon

W tym miejscu jednak chciałbym Cię ostrzec, abyś używał Composera tylko dla garstki stron w bardzo skoncentrowany sposób, aby nie przedłużać niepotrzebnie szybkości ładowania.