Szukając inspiracji do zbudowania nowej strony, trafiłem na stronę https://oxygenapp.com/
Moja pierwsza reakcja? Hmmm, kolejny page builder, z którym będzie więcej problemów niż pożytku. Ciekawość jednak nie dawała mi spokoju, więc przyjrzałem się tematowi bliżej.
Aby przekonać użytkownika WordPress’a do swojego rozwiązania, autorzy wykorzystali genialne narzędzie wpsandbox.pro – środowisko uruchomieniowe, w którym można przetestować możliwości wtyczki na wiele sposobów. Zatem nie trzeba kupować „kota w worku”, choć i tak autorzy oferują 30 dni gwarancji satysfakcji i zwrot inwestycji, jeśli zakup nie spełni oczekiwań użytkownika.
Po pierwszych testach, okazało się, że jest to „strzał w dziesiątkę”.
Oxygen 2.0 całkowicie eliminuje konieczność stosowania motywów. Brzmi dość rewolucyjnie, prawda? Przetestowałem i… dokładnie tak jest. Zamiast motywu, oferuje potężne narzędzie do tworzenia graficznych szablonów metodą Drag&Drop oraz system szablonów, który pozwala wizualnie projektować praktycznie każdy pojedynczy element witryny.
Jak to działa?
Oxygen jest nazywany visual page builder, ale to nie to samo co rozumiemy przez “page builder” innych producentów. Oczywiście, w wielu przypadkach można stosować obydwa jednocześnie. Np. testowo sprawdziłem działanie Oxygen z Divi Page builder czy Visual Composer (VC). W obu przypadkach, wszystko działało poprawnie. Nie mniej, jako samodzielne rozwiązanie do tworzenia stron, Oxygen tworzy kod zdecydowanie bardziej przyjazny dla Googla i przeglądarek. Co jednak ważne, testy prędkości stron wykonanych w VC i Oxygen wypadają na zdecydowaną korzyść Oxygen.
Oxygen w odróżnieniu od innych pagebuilderów nie opiera się na motywie WordPress. W przeciwieństwie do funkcji budowania motywów, które można uzyskać np. w Elementor Pro, w stronie zbudowanej na bazie Oxygen nie ma motywu „firmy trzeciej”.
By faktycznie sprawdzić ten sposób podejścia, podczas tworzenia strony testowej, usunąłem całkowicie z domyślnej instalacji WordPress’a wszystkie motywy. Oxygen całkowicie zastępuje motyw na stronie.
Zatem trudno określić, czy jest to motyw czy wtyczka, bo z jednej strony daje efekty motywu, ale instaluje się jak wtyczka.
Co daje nam Oxygen?
Pozwala on tworzyć 3 rodzaje treści.
- Szablony – należy na nie patrzeć, jak na budowanie wyglądu strony od zera. Szablony są podstawą witryny. Można przykładowo budować szablony dla:
-
- Pojedynczych wpisów blogowych, stron, niestandardowych typów postów. To właśnie zobaczą internauci, gdy przeglądają poszczególne posty
- Archiwów – użytkownicy widzą , gdy przeglądają listę wpisów
- Strony głownej – czyli osobny szablon na pierwszą stronę
- Index postów na blogu – czyli osobny szablon dla strony bloga
- Części wielokrotnego użytku – to zespół elementów, które można wielokrotnie używać w innych szablonach. Coś na kształt sekcji lub bloku
- Strony – można projektować poszczególne strony od zera, lub na bazie jednego z tworzonych szablonów.
Oxygen ma też kilka predefiniowanych szablonów, na bazie których można poznać jego możliwości. Szablony te umożliwiają stworzenie w krótkim czasie prostej strony, lub „miksując” sposoby prezentacji danych, utworzenie dowolnej strony w zupełnie innej odsłonie. Z uwagi na to, że mamy wpływ na wszystkie wizualne elementy szablonów, „zapożyczenie” np. slidera z innego predefiniowanego szablonu nie stanowi problemu, gdyż mamy możliwość dowolnej modyfikacji sekcji z użyciem kodu CSS.
Konfiguracja
Podczas pierwszej instalacji Oxygen, można wybrać jeden z 2 rodzajów instalacji:
- Instalację pustą (bez predefiniowanych szablonów)
- Instalację z użyciem któregoś z predefiniowanych szablonów.
Póki co, Oxygen dysponuje 9 gotowymi predefiniowanymi zestawami szablonów. Każdy zestaw zawiera wiele gotowców stron, szablonów i sekcji. Przykładowo, pojedyncza „witryna” może mieć 11 różnych nagłówków do wyboru.
Można wybrać jedną z tych predefiniowanych stron internetowych. Ja jednak, zamierzam użyć pustej instalacji, by pokazać Ci budowanie strony od przysłowiowego “zera”.
Utwórzmy zatem szablon
Powyżej zdefiniowałem, czym jest szablon, zatem na potrzeby tego artykułu używajmy tych definicji. Nie myl go z (błędnie określanym) motywem. To jednak temat na inny artykuł.
Zbudujmy zatem szablon. By to zrobić, po zainstalowaniu Oxygen i aktywowaniu, wybierz „Blank Installation”.
Następnie, przejdź do Oxygen => Templates => Add new template.
By podać parametry szablonu, trzeba najpierw wpisać jego nazwę i opublikować. Następnie, pojawią się pola edycji właściwości.
Tworząc nowy szablon, możesz wybrać zakres jego zastosowania, używając do tego pól akordeonu czy checkboxów.
W przykładzie, zdefiniowałem go dla pojedynczego wpisu blogowego (Singular)
Co bardzo wygodne, dany szablon można zastosować np. do określonych taksonomii (Only apply if taxonomized as all of the following) lub parent ID (Only apply if parent ID is one of the following ).
Można też wykorzystać funkcję Template Priority. Odpowiada ona za priorytet zastosowania szablonu, gdy do danego wpisu miałaby zastosowanie większa ilość szablonów.
To pozwala nam zdefiniować przykładowo:
- Jeden szablon dla wszystkich wpisów
- Różne szablony dla różnych kategorii wpisów.
Priorytet szablonu pozwala określić, który z tych dwóch ma pierwszeństwo.
Należy pamiętać, że można również łączyć wiele szablonów ze sobą, ponieważ szablony dziedziczą projekty z innych szablonów.
Pytanie, do czego może się nam to przydać?
Otóż – możemy przykładowo utworzyć jeden szablon z podstawowym wyglądem dla nagłówka i stopki. Następnie, użyć pojedynczych szablonów do kontrolowania zawartości, pomiędzy nagłówkiem i stopką. Dzięki temu, każda z podstron odziedziczy taki sam nagłówek i stopkę.
Jeśli nie jesteś programistą, to ta koncepcja może wymagać przyzwyczajenia, nie mniej, daje ona sporą elastyczność w tworzeniu różnych konfiguracji.
Użycie Oxygen Visual Editor
Tuż po instalacji, okno edytora przedstawia się następująco (Edit with Oxygen):
Tutaj mamy wiele możliwości…
Po lewej stronie możemy dodawać nowe elementy strony, klikając przycisk +Add. Elementy te podzielone są na 5 grup:
- Basics (podstawowe) – proste elementy, takie jak tekst, kontenery, obrazy, własny blok kodu
- Helpers (pomocnicy) – bardziej zaawansowane elementy, takie jak kreatory nagłówków, ikony socialmediów, pola cenowe, referencje, paski postępu, proste slidery, harmonijki czy mapy googla
- WordPress – elementy charakterystyczne dla WordPress’a, czyli, menu, formularz komentarzy, formularz logowania, sidebar, informacje o wpisie
- Library (biblioteka) – tutaj jest dostęp do gotowych zestawów projektowych
- Reusable – wielokrotnego użytku – tutaj mamy dostęp do własnych zapisanych „klocków” do wielokrotnego wykorzystania.
Można też wprowadzać zawartości wtyczek, takich jak formularze czy jakieś inne dane wyjściowe z wtyczek.
Osadzanie dynamicznych danych w projektach
Jednym z głównych obszarów, w których Oxygen wykracza sporo poza standardowe konstrukcje stron, jest łatwość w importowaniu danych dynamicznych, pochodzących np. z bazy danych WordPress’a np.:
- Tytuł, treść, miniatura wpisu
- Niestandardowe pole (custom field) w tym pola dodawane za pomocą np. Advanced Custom Fields, Pods czy Types)
- Aktualna wyświetlana nazwa użytkownika
- I inne…
Istnieją dwa sposoby wstawiania danych dynamicznych. Pierwszy, podczas edycji niektórych elementów, kiedy pojawia się opcja „Wpisz dane” (Insert data). Np. gdy dodajesz nagłówek lub element tekstowy, można kliknąć “Insert data”, aby otworzyć wszystkie opcje:
Następnie wybierając podgląd „Previewing”, możemy wybrać konkretny fragment treści do podglądu (Oxygen będzie dynamicznie pobierał dane z tego fragmentu treści). Oto np. jak wygląda nagłówek wpisu „Hello world”.:
Dynamiczne dane można też wstawiać w innych częściach witryny. Np. w sekcji obrazek tła (background image) możemy wstawić „Obrazek wyróżniający”.
Oxygen oferuje również gotowe elementy danych dynamicznych, które nie wymagają konieczności przebrnięcia przez interfejs wstawiania danych, a są dostępne bezpośrednio:
Np. kiedy wstawiamy elementy z pól własnych (ACF).
Stylizacja i edycja elementów
Dla każdego dodawanego elementu możesz edytować ten element za pomocą tego samego paska bocznego:
Mamy tu możliwość edycji m.in. takich elementów, jak:
- Tła (background)
- Rozmiary i margines wewnętrzny
- Układ
- Typografia
- Krawędzie i obramowania
- Efekty
- Własny CSS
- JavaScript
- i inne parametry charakterystyczne dla konkretnego elementu.
Co ważne dla developerów, Oxygen umożliwia łatwą pracę z niestandardowymi CSS i JS.
Dla każdego elementu można szybko zastosować selektory CSS, w tym zapytania o media responsywne.
Można też pracować bezpośrednio z CSS i JS w edytorze, w zakładce Zaawansowane.
Zabawa „klockami” – czyli układanie elementów
Wiemy już jak dodawać i stylizować elementy, przejdźmy zatem do układania ich na stronie.
Oxygen 2.0 został wyposażony w funkcję Drag & drop, więc ustawianie „klocków” na stronie jest już zdecydowanie prostsze niż przy jego wcześniejszych wersjach.
Można też edytować pozycję w obszarze Struktura po prawej stronie, który pokazuje drzewo wszystkich elementów strony, w tym elementów CSS.
Za pomocą Struktury można również przeciągać i upuszczać elementy na ich nowe pozycje:
Jedną z ciekawszych i ułatwiających pracę właściwości Oxygen jest to, że opiera się on na Flexboxie, którego pewnie znasz, jeśli zajmujesz się projektowaniem stron.
Umożliwia to przydatne ustawienie dla elementu potomnego podczas edycji pojedynczej sekcji. W efekcie, pozwala to na kontrolę wyrównywania każdego elementu w sekcji, co często przysparza wielu kłopotów mniej wprawionym projektantom.
Można na przykład wyśrodkować wszystkie elementy w sekcji bez konieczności ręcznego dopasowywania poszczególnych elementów.
Stack Child Elements można ustawiać zarówno dla elementów poziomych jak i pionowych, co w przypadku układów poziomych nie wymaga konfigurowania oddzielnych kolumn, tak jak w przypadku większości pagebuilderów.
Można też zastosować te ustawienia w różny sposób dla różnych urządzeń. Można np.:
- Układać elementy w poziomie dla dużych ekranów
- Układać elementy w pionie na urządzenia mobilne, by uzyskać lepszą responsywność.
Kolejną przydatną rzeczą związaną z układem graficznym jest przeciąganie marginesów sekcji w celu zmiany jej odstępów. Można również dodać odstępy do poszczególnych elementów, używając tego samego podejścia „Drag & Drop”.
Strony archiwów
Jeśli chcesz wyświetlić posty lub niestandardowe typy postów (np. na stronie archiwum lub w sklepie), Oxygen ma szczegółowy kreator zapytań, który umożliwia:
- Zapytanie według typu posta
- Filtrowanie według taksonomii lub autora
- Sortowanie
- Ograniczenie liczby wyświetlanych rezultatów
Kilka innych ciekawych opcji w Visual Builderze
W sekcji Zarządzaj (Manage) możesz zarządzać i dodawać arkusze stylów do swojego szablonu, w tym, bezpośrednio edytować arkusze stylów w edytorze kodu:
Można również zarządzać selektorami za pomocą zbliżonego interfejsu.
Budowanie stron z Oxygen
Poza konfigurowaniem szablonów, możesz także używać Oxygen na poszczególnych stronach. Gdy edytujesz stronę za pomocą Oxygen, możesz ją “wyrenderować” za pomocą istniejącego szablonu, lub zbudować ją od podstaw używając edytora Oxygen.
Można też oczywiście nadal korzystać ze standardowego edytora WordPress.
Ile to kosztuje i czy aby na pewno jest drogo?
Oxygen ma bardzo atrakcyjny system licencjonowania. Autorzy zapowiadają zmiany w cenniku, jednak póki co koszt licencji to 99$. Licencja obejmuje nieograniczoną liczbę witryn, również dla Twoich klientów. Jednocześnie, jest to licencja lifetime – otrzymujesz wsparcie autora i aktualizacje. Dodatkowo, społeczność dorzuca co jakiś czas, jakieś dodatkowe rozwiązania – “pluginy”, które w bezpieczny sposób poszerzają jego właściwości.
Oxygen jest wart rozważenia, szczególnie gdy przychodzi co roku czas na odnowienie licencji na któryś z używanych pagebuilderów, czy wtyczek. Z Oxygen, mimo początkowo pozornie wysokiej ceny, w perspektywie czasu sporo oszczędzamy.
Z ciekawości, zrobiłem zestawienie najczęściej wykorzystywanych pluginów, wtyczek i motywów, które z powodzeniem mogą być w podstawowym zastosowaniu zastąpione Oxygen’em. I tak, przykładowo:
- Visual Composer – 46$
- Tixed TOC – wtyczka do tworzenia „spisu treści” dla wpisu/strony – 20$
- Accordion Tables, FAQs, Columns… – czyli wszystkie ciekawe zobrazowania wpisu – 15$
- Testimonials, dodatek do Visual Composera – 10$
- Slider Revolution – 26$
- Motyw… np. Kallyas – 69$
I już mamy zdecydowanie więcej niż 99$, a do tego należy pamiętać, że dla każdej strony trzeba zakupić oddzielną licencję… Dla mnie rachunek jest bardzo prosty.
Podsumowując
Jeśli szukasz narzędzia, które pozwoli Ci zbudować całą stronę, Oxygene 2.0 umożliwia znacznie więcej niż np. Elementor 2.0. System szablonów, w tym sposób dziedziczenia szablonów z innych szablonów i ustawianie priorytetów, zapewniają kontrolę nad różnymi typami treści.
Ponad to, flexbox znacznie ułatwia konfigurowanie układów stron, bez konieczności polegania na kolumnach lub ręcznego ustawiania wyrównywania dla każdego układu. Nawet jeśli jesteś w stanie osiągnąć taki efekt za pomocą innego pagebuildera, Oxygen może zrobić to zdecydowanie szybciej i prościej.
Nie uważam jednak, że Oxygen jest przyjazny dla początkującego, tak jak np. Elementor, jednak oferuje on znacznie więcej niż inne pagebuildery. Zatem, jak zawsze „coś” kosztem „czegoś”. Jednak, jak dla mnie, zdecydowanie większe możliwości Oxygen i sposób licencjonowania, przemawiają za tym, by nie używać innych pagebuilderów. Upraszczam w ten sposób budowę stron, uzupełniając je tylko tymi dodatkami, które faktycznie są konieczne, a nie dodając w nieskończoność dodatkowych wtyczek, bo jakaś funkcjonalność w podstawowym builderze nie została przewidziana…
I jeszcze na sam koniec. Jeśli chcesz przetestować Oxygen, możesz śmiało założyć sobie “konto” na stronie do testów, lub też zakupić go do testowania. Autorzy wtyczki oferują 30 dniową gwarancję satysfakcji. Zatem, jeśli pracujesz w temacie budowania stron, i chcesz to robić efektowanie i prościej niż dotychczas, nie pozostaje Ci nic innego, niż testować i wdrażać go na swoich stronach.
Być może znasz już Oxygen’a. Daj znać w komentarzu, co sądzisz o jego funkcjonalnościach i jak, wg Ciebie, wypada w porównaniu z innymi page builderami.
