Wszystko, co musisz wiedzieć, aby rozpocząć pracę z Divi

W kwietniu 2018 roku ogłosiliśmy zmianę naszego modelu biznesowego. Postanowiliśmy pożegnać się z Upfront, naszym unikalnym rozwiązaniem problemu wizualnego projektowania stron internetowych w ramach WordPressa. Zrobiliśmy to, by zawęzić naszą uwagę. Pracować wyłącznie nad aspektem naszej działalności, który zawsze był naszą najsilniejszą stroną: pomaganie programistom w tworzeniu i zarządzaniu witrynami WordPress.

Główną częścią tego obrotu było objęcie pozostałych motywów i wtyczek na czele przestrzeni projektowej WordPress – upewnienie się, że nasza społeczność je rozumie i że nasze produkty i usługi bezproblemowo z nimi współpracują. W tym celu stworzyliśmy ten przewodnik po temacie Divi.

Divi By Elegant Themes jest, według wszystkich kont, najczęściej używanym motywem premium i wizualnym kreatorem stron w WordPress. Od wielu lat cieszymy się z użytkowników Divi-w rzeczywistości zarówno strony Edublogs, jak i CampusPress, które są siostrzanymi usługami WPMU DEV, uruchamiają motywy potomne Divi, podobnie jak witryny, które zbudowaliśmy dla wielu naszych klientów.

Wybraliśmy Divi, ponieważ daje to naszemu zespołowi elastyczność w dokonywaniu zmian treści i aktualizacji stron ze złożonymi układami w locie. A dla tych, którzy używają go samodzielnie, Divi nie wymaga żadnych umiejętności kodowania, aby tworzyć niestandardowe strony internetowe.

W tym ostatecznym Przewodniku po Divi przyjrzymy się niektórym funkcjom, które najbardziej nam się podobają, i kilku przykładom Divi w naturze.

Dlaczego Warto Wybrać Divi?

Istnieje wiele opcji dla użytkowników WordPress, którzy szukają konfigurowalnego motywu lub Kreatora Stron; jest Beaver Builder, Elementor, Avada i wiele innych. Co czyni Divi wyjątkowym?

Najważniejsze Cechy

  • Wizualny konstruktor front-end, zbudowany z ReactJS
  • Responsywne ustawienia projektu oraz możliwość przeciągania szerokości i wysokości
  • 1495 + profesjonalnie zaprojektowane gotowe układy
  • Możliwość zapisywania i ponownego użycia czegokolwiek z biblioteką Divi
  • Pełny eksport projektów i treści (do udostępnienia lub sprzedaży!)
  • Zarządzanie rolami użytkowników
  • Proste testy split A/B wbudowane

Ogromna, Pełna Pasji Społeczność

Jedną z miar każdego produktu lub usługi jest społeczność za nim, a Divi ma duży.

Istnieje wiele grup na Facebooku z ponad członkami 100,000 łącznie, spotkania WordCamp i sieć Divi Nation. A poza tym istnieje cały ekosystem dodatków, wtyczek, motywów potomnych i więcej dla Divi zbudowanych przez strony trzecie.

Produkt był konsekwentnie ulepszany przez lata, a co tydzień dwa nowe profesjonalnie zaprojektowane Pakiety layoutu są uwalniane do biblioteki Divi, aby wszyscy użytkownicy Divi mogli pobrać i używać za darmo.

Krótko mówiąc, Divi to solidny wybór, pełen funkcji i firma z eleganckimi motywami i społecznością wokół niego, która stale się rozwija i ulepsza, bez oznak spowolnienia.

Pierwsze Kroki Z Divi

Wszystko powiedziane i zrobione, Divi to tylko motyw WordPress. Jak każdy motyw, pobierasz pliki motywów i przesyłasz je do swojej witryny WordPress, aby aktywować.

Divi jest motywem premium i będzie cię kosztować $89 za jeden rok aktualizacji lub $249 za dożywotni dostęp – który może być używany na nieograniczonych witrynach. Osobiście jestem członkiem od 2009 roku-co tylko zachęca mnie do myślenia o tym, jak szybko leci czas (i jak cenny jest ten dożywotni dostęp).

Nie będziemy ponownie tworzyć całego przewodnika pobierania i instalowania Divi, możesz znaleźć szczegółowe filmy i instrukcje krok po kroku w sekcji docs tutaj.

Po aktywacji zobaczysz opcje “Divi Builder” podczas edycji lub tworzenia nowej strony i postu. Poświęć trochę czasu na zapoznanie się z budowniczym i jego działaniem.

3 słowa kluczowe, które musisz znać

Sekcja-pierwszą rzeczą, którą wybierasz podczas projektowania układów z Divi są sekcje. Strona lub post będzie składał się z jednej lub więcej sekcji, a Ty możesz wybierać spośród sekcji o pełnej szerokości lub standardowych.

Wiersz – każda sekcja składa się z jednego lub więcej wierszy i możesz wybrać wiersze z maksymalnie 4 kolumnami.

Moduł-każdy wiersz składa się z jednego lub więcej modułów, które czasami nazywane są również ” elementami.”Istnieją moduły do prawie wszystkiego, co można wymyślić, w tym obrazy nagłówka, suwaki, przyciski, menu, paski boczne i filmy.

O wiele bardziej szczegółowy przegląd tych narzędzi i jak to wszystko działa w dokumentach dla edytora wizualnego Divi tutaj.

Making The Most From Divi

Front-end vs. back-end Editor

Divi Builder Page Editor in WordPress
Tworzenie układów stron w backendzie WordPress.
Divi Builder front-end content layout editor
Utwórz nowy układ, wybierz szablon lub Sklonuj go w interfejsie witryny.

Jedną z bardziej imponujących cech Divi jest to, że opanował on “kwadratową przestrzeń”, podobną do front-endowego doświadczenia edycyjnego-w Divi speak nazywany jest ” wizualnym budowniczym.”Działa naprawdę dobrze, gdy nauczysz się kilku dziwactw i co oznaczają różne symbole i ikony. Możesz przeciągać i upuszczać elementy, tworzyć kolumny i wiersze oraz edytować zawartość, aby dokładnie zobaczyć, jak będzie wyglądać w aktywnej witrynie.

Szczerze mówiąc, Kiedy używam Divi, osobiście nadal domyślam się doświadczenia edytora back-end, ale może to być tylko dlatego, że używałem Divi przez lata, zanim edytor front-end w ogóle istniał. Są chwile, kiedy front-end jest łatwiejszy, a inne, jak tworzenie bardziej złożonej strony od zera, kiedy back-end działa lepiej dla mnie. Cieszę się, że mogę wypróbować zupełnie nowy proces tworzenia stron na front-endzie z przyszłymi projektami, co może zmienić moje zdanie na ten temat.

Jest całkiem zgrabne demo, w którym możesz grać z edytorem front-end w akcji tutaj.

Korzystanie Z Personalizatora

Divi Theme Customizer in WordPress
Nie ma kodu, nie ma problemu.

Jeśli chcesz wprowadzić zmiany projektowe w całej witrynie, Divi działa bezproblemowo ze standardowym dostosowywaniem WordPress. Możesz przesyłać logo, wybierać czcionki i kolory oraz wybierać spośród wielu ustawień i opcji.

Moduł dostosowujący zawiera ustawienia nagłówka, stopki i każdego “modułu”, takie jak posty na blogu, suwaki, dzielniki i inne.

Korzystanie Z Biblioteki

Divi Page Editor save to library view
Tworzenie biblioteki Układów Stron.

Główną oszczędność czasu jest ” lfunkcja ibrary, która jest częścią Divi. Sekcje, wiersze i moduły można zapisywać w bibliotece do ponownego wykorzystania na innych stronach i postach. Na przykład, jeśli chcesz rozpocząć lub zakończyć wszystkie posty standardowym zestawem tekstu, możesz dodać ten moduł tekstowy do biblioteki. Jeśli tworzysz wiele stron docelowych, które mają podobne układy lub elementy, można je również dodać i ponownie wykorzystać.

Jeszcze bardziej imponujące jest to, że każdy element biblioteki może być, za pomocą jednego kliknięcia, oznaczony jako “globalny”. Elementy globalne oznaczają, że gdy zaktualizujesz ten element na jednej stronie witryny, będzie on automatycznie aktualizowany wszędzie tam, gdzie pojawi się element biblioteki. Przy odrobinie planowania i myślenia, te elementy biblioteki mogą być niezwykle przydatne.

Mobilny I Responsywny Design

advanced settings display options
Łatwo wyłącz Moduły na określonych urządzeniach w ustawieniach zaawansowanych.

Po wyjęciu z pudełka, Divi jest responsywny, tak że zmieni rozmiar i zreorganizuje wszystkie moduły, wiersze i kolumny bez potrzeby robienia czegokolwiek.

Istnieje jednak opcja ukrycia lub pokazania dowolnego elementu w zależności od rozmiaru ekranu odwiedzającego. Na przykład możesz wyświetlić inne menu niż menu na komputerach stacjonarnych i urządzeniach mobilnych. Możesz też ukryć ten gigantyczny i powolny suwak w nagłówku dla użytkowników mobilnych, zapewniając im lepsze wrażenia z przeglądania.

Możesz również wyświetlić podgląd widoku każdej strony na urządzeniach o różnych rozmiarach z poziomu Divi builders, co jest przydatne.

Przeprowadzanie Testów A / B

Split Testing in Divi Theme
Wiesz, że chcesz przetestować wiele układów!

Masz problem z podjęciem decyzji, którego wezwania do działania powinieneś użyć lub chcesz przetestować inne elementy projektu witryny? Divi sprawia, że nie musisz inwestować w bardziej skomplikowane narzędzia do testowania A / B, można to zrobić bezpośrednio z poziomu edytora Divi.

W Divi nazywa się Divi Leads, co pozwala na “split testing” nieograniczone wersje na raz. Po prostu wybierz swoje odmiany i jesteś gotowy do pracy.

Motyw Potomny Czy Na?

Z naszego doświadczenia, jeśli chodzi o korzystanie z Divi dla klientów CampusPress lub naszych usług hostingowych dla przedsiębiorstw, prawie zawsze tworzymy motyw potomny. Dzieje się tak dlatego, że możemy następnie kontrolować aspekty brandingu i projektowania witryny i powstrzymywać użytkowników końcowych przed łamaniem tych wytycznych. Możemy również zaimplementować szablony stron dla układów i być trochę bardziej idealnym pikselem z takimi rzeczami, jak elementy menu, bułka tarta, typografia i tym podobne.

Ale rzeczywistość jest taka, że Divi może być niesamowicie elastyczny samodzielnie – nie jest potrzebny motyw potomny. Jeśli budujesz witrynę, w której będziesz jedynym z dostępem administratora, może być idealna dla Ciebie od razu po wyjęciu z pudełka. Istnieje również mnóstwo pakietów układów, które możesz pobrać i dostosować, aby nie musieć zaczynać od zera i aby żadne dwie witryny Divi nie wyglądały tak samo.

Więcej zasobów na temat tematów dziecięcych:

Poniższa prezentacja zawiera przykłady witryn wykorzystujących Divi, które są zbudowane z motywami potomnymi i bez nich, co powinno również pomóc ci w dobrym zrozumieniu, co możesz osiągnąć, niezależnie od wybranej trasy.

Showcase

/ campuspresspng “alt=” Strona główna CampusPress “width =” 600 ” height = “316” / >

campuspress.com -motyw potomny Divi, wbudowaliśmy elementy do biblioteki, aby je ponownie wykorzystać na różnych stronach docelowych.

Canvas Learning Management System Home

canvas.psu.edu -odwiedzane przez 10 tysięcy studentów i wykładowców na Penn State university każdego dnia. Jest zgodny z wytycznymi dotyczącymi brandingu uniwersyteckiego.
Recubre Home

recubre.com.mx -witryna członka WPMU DEV, przykład Divi działa świetnie również w witrynach e-commerce.

Round Rock ISD Home

roundrockisd.org -motyw potomny, który ponownie stworzyliśmy ten sam wygląd i układ z motywu Za pomocą Visual Composer. Zmiana na Divi znacznie poprawiła wydajność i niezawodność.

Williamson County Smphony Orchestra Home

wilcosymphony.org -strona, którą zbudowałem przez weekend dla lokalnej organizacji non-profit.

WPGoby Home

wpgoby.com -Agencja WordPress i członek WPMU DEV.

Moja Divi Lista Życzeń

Podczas gdy Divi sprawdza prawie każde pudełko i spełnia większość potrzeb, jest kilka pozycji na mojej liście życzeń Divi, którymi warto się podzielić.

Po pierwsze, wydaje się to proste i istnieją rozszerzenia Divi przez strony trzecie, które na to pozwalają, ale często chciałem szybkiego sposobu na umieszczenie tytułu strony w nagłówku, a nie użycie logo. W wielu przypadkach istniejące logo może nie pasować dobrze do nagłówków lub jakość po prostu nie jest wystarczająco dobra do użycia. Niewyraźne lub zagubione logo może odwrócić uwagę użytkowników od treści na stronie.

Co ważniejsze, chcielibyśmy zobaczyć, jak zespół Divi włącza funkcje naszej wtyczki Divi Accessibility do samego produktu Divi i pracuje nad zapewnieniem, że Divi może być łatwiej używany w sposób, który spełni i przekroczy standardy dostępności. Możemy ograniczyć użycie niektórych elementów i zbliżyć się do nich, ale są pewne kwestie, które należy poprawić.

I na koniec, jestem pewien, że zespół Divi ma plan, a my w ogóle nie omawialiśmy go z nimi, ale chcę wiedzieć, jak Divi będzie dobrze grać z nowym doświadczeniem edytora “Gutenberg”, gdy będzie częścią rdzenia WordPress.

Wrapping up

Jeśli szukałeś nowego motywu i nie chcesz spędzać czasu na grzebaniu w niestandardowym kodzie, sprawdź niektóre z powyższych linków i zacznij budować z Divi już dziś.

Ponadto, jeśli używasz Divi – pamiętaj, aby zoptymalizować go za pomocą naszych wtyczek. Mamy artykuł o optymalizacji Divi z Smush i Koliber.

Tagi: