Wszystko o divi builder | Webinsider - Internet widziany od środka ™

Tag: divi builder

Sterowanie zachowaniem segmentów w module akordeonu w motywie Divi za pomocą kodu CSS i JavaScript, czyli sam decydujesz, co ma być na początku otwarte, a co zamknięte

Napisała do mnie z prośbą o pomoc i konsultację czytelniczka, która – jak to określiła – czuje się nabita w butelkę, bo “kobieta uwierzyła kobiecie”, że nie musi mieć żadnej wiedzy technicznej, by w jedno popołudnie wyklikać sobie stronę, a w weekend nawet i sklep internetowy. No cóż, temat “wyklikanych w stronę” (taka kontekstowa wersja nabitych w butelkę) mam na liście i prędzej czy później i nad nim się pochylę, ale to nie dziś. Dziś zajmiemy się z jednym z tematów, z którymi zwróciła się do mnie wspomniana czytelniczka i obecnie już też i klientka.

Divi AI Image Editor i Divi Code AI, czyli w Divi za pomocą AI już nie tylko wygenerujesz tekst i grafikę, ale też ją zmodyfikujesz, a nawet wygenerujesz kod CSS, HTML i JavaScript

Dziś w kontekście AI (Sztucznej Inteligencji, SI) pewnie wypadałoby napisać o nowym “produkcie” od OpenAI, czyli Sora, czyli nowym modelu do generowania filmów wideo, przy którym liczne serwisy do generowania wideo za pomocą AI wypadają… No średnio, ale to i tak będzie eufemizm. Ja jednak uznałem, że to dobry moment, by nadrobić zaległości w kontekście AI i motywu Divi do WordPressa.

W Divi 5 dev-beta 3, czyli edytor Divi bez krótkich kodów, a na formacie JSON, czyli rozwiązaniu znanym z Gutenberga

Ukazała się trzecia dev-beta motywu Divi 5 od Elegant Themes, a więc nadchodzącej “dobrej zmiany”, jeśli chodzi o motyw Divi – ma być szybciej, nowocześniej, lepiej i ogólniej fajniej. Jednym z elementów tej zmiany jest program Shortcodes Minus, czyli odejście Divi Buildera (wizualnego edytora w Divi) od krótkich kodów, a przejście na bardziej nowoczesny i wydajny format, znany choćby z Gutenberga. I właśnie w Divi 5 dev-beta 3 można już sprawdzić, jak to wygląda i działa…

Divi AI, czyli jakby ChatGPT i Midjourney zintegrowane bezpośrednio z edytorem stron Divi, dla generowania przez AI tekstów i grafik

Jeszcze chwilę i będę mógł napisać, że dzień bez wpisu (artykułu) o AI, to dzień stracony. Ale co poradzić, jak dookoła pełno tego, i nawet jeśli o większości rozwiązań za chwilę nie będzie pamiętał nawet twórca, to są takie, które mają szanse przetrwać. Jednym z tych rozwiązań może być Divi AI, czyli całkiem solidna integracja AI (pewnie GPT od OpenAI po API) z Divi Bulderem, czyli edytorem stron w Divi. A co jak co, ale podczas tworzenia strony, możliwość szybkiego wygenerowania tekstu czy grafiki to jest coś, co na pewno spodoba się wielu.

W ramach usługi Divi Cloud pojawiła się możliwość zapisywania i wczytywania ustawień motywu Divi (Theme Option Presets)

W wielu projektach stron internetowych (w większości?) korzystam z bazowego zbioru rozwiązań, takich jak np. WordPress, konkretny zestaw wtyczek i odpowiedni motyw. Często tym motywem jest Divi od Elegant Themes. Nie jest to motyw idealny, ale wiem, jak działa, a do tego dość łatwo przekazać taką stronę pod zarządzanie – przynajmniej jeśli chodzi szeroko rozumiane “treści” – nawet “mniej technicznym” użytkownikom. Dlatego też staram się zautomatyzować co tylko się da – dodawanie domeny do serwera, aktywacja certyfikatu SSL (Let’s Encrypt), instalacja i bazowa konfiguracja WordPressa, wraz ze startowym zestawem wtyczek. Mógłbym do tego dodać jeszcze jakąś bazową bazę danych, z podstawową konfiguracją, ale jest z tym więcej problemów, niż potencjalnych zysków. Stąd wiele czynności konfiguracyjnych każdorazowo wykonuję “ręcznie”. Na szczęście dzięki ostatniej aktualizacji motywu Divi, z tej listy mogę skreślić podstawową konfigurację tego motywu.

Zmiana kolejności wyświetlania kolumn w widoku mobilnym za pomocą CSSa na przykładzie WordPressa, WooCommerce i Divi

Trafiłem dziś na pytanie na temat zmiany kolejności wyświetlania paska bocznego (sidebar) i listy produktów w widoku archiwum WooCommerce (sklep internetowy na WordPressie) dla urządzeń mobilnych, gdzie w standardzie wyświetlają się najpierw produkty, a potem zawartość paska bocznego (widżety), niezależnie od tego, czy będzie on standardowo po lewej, czy prawej stronie. Co ma zresztą sens, bo nawet jeśli w bocznej sekcji – tak jak w tym przypadku było – są filtry produktów, to jednak produktami będą zainteresowani raczej wszyscy odwiedzający sklep, a filtrami tylko niektórzy.

Full Site Editing (FSE) w WordPressie na przykładzie Twenty Twenty-Two, czyli wirus Gutenbergiozy zaatakował edycję menu na stronie

Niedawno miała miejsce premiera WordPressa 5.9, i jak to od dawna już bywa, premiera właściwie dla mnie obojętna, bo większość nowości to kolejne usprawnienia i nowości w edytorze blokowym (Gutenberg), z którego nie korzystam. Właściwie, bo pojawiło się “małe zamieszanie” w połączeniu z wtyczką Tutor LMS i PHP 8.0, o czym niedawno pisałem. Ale jest jeszcze jedna nowość, z która w ostatnich dniach miałem wątpliwą przyjemność się zmierzyć. Na szczęście tylko w ramach eksperymentu.

Jednokolumnowy widok archiwum produktów w WooCommerce na urządzeniach mobilnych, przy korzystaniu z Divi Buildera

Strona na WordPressie, do tego wtyczka WooCoommerce dla funkcji sklepu internetowego, oraz motyw Divi od Elegant Themes, a więc i Divi Builder nie tylko dla standardowych stron, ale też – korzystając ze wsparcia Divi dla WooCommerce – dla stron związanych ze sklepem. Można by rzec, że kwartet całkiem udany, całkiem dopasowany, ale… No właśnie – jak to bywa w życiu, zawsze bywa jakieś “ale”. Zwłaszcza gdy do działającego układu dołożyć “piąte koło u wozu”. Problem tylko w tym, że tym piątym kołem w tym przypadku jest mobile, a konkretnie mobilne urządzenia. A tego zignorować nie można, nawet jeśli  nie w każdej branży obowiązuje “mobile first”.

Black Friday (Czarny Piątek) / Cyber Monday (Cyber Poniedziałek) AD 2021, czyli subiektywny mini przegląd (najlepszych ;-)) ofert

Właśnie trwa kolejna – po Dniu Singla, którego jednak w tym roku do udanych pod względem zakupowym zaliczyć raczej nie mogę – gorączka zakupowa. I jak właściwie co roku, tak i w tym roku postanowiłem opublikować małe subiektywne zestawienie ofert. Nie będzie to przegląd najlepszych promocji, bo nie mam takich zasobów, by sprawdzić wszystkie promocje we wszystkich sklepach. Ale przypuszczam, że większość sklepów czy platform usługowych jakieś promocje przygotowała na ten okres. W tym artykule tylko to, z czego sam skorzystałem, lub sam bym skorzystał, gdybym nie skorzystał wcześniej. Czyli wąsko i bardzo subiektywnie.

Dzięki Divi Global Color System możesz zmieniać kolory na stronie internetowej szybko i łatwo, czyli globalnie

Elegant Themes, czyli ekipa (firma) odpowiedzialna za rozwój m.in. motywu Divi widać, że złapała w żagle wiatr, który jakby chcieć nazwać, to wyraz “global” zdecydowanie w jego nazwie musiałby się znaleźć. Wraz z premierą Divi w wersji 4.0 pojawił się Divi Theme Builder, dzięki któremu w prosty sposób można zmienić wygląd dosłownie każdej (pod)strony na stronie WWW. Chwilę wcześniej mieliśmy premierę Divi Library Global Modules, czyli modułów globalnych, do wykorzystania na wielu stronach, oraz coś, co wiem, że zwłaszcza chwalą sobie m.in. koleżanki próbujące swoich sił w eCommerce, czyli Divi WooCommerce Builder, czyli graficzny edytor (page builder) stron produktowych w sklepie internetowym na WooCommerce. Kilka dni temu swoją premierę miał kolejny “global”, i choć pozornie mniej przełomowy, to są to tylko pozory…

Czat z YouTube (topczat) na stronie internetowej na przykładzie WordPressa oraz wtyczki Tutor LMS (np. w ramach lekcji)

Zagadała do mnie koleżanka, że jutro będzie robiła webinar na żywo (live) dla kursantów swojego kursu internetowego. Webinar będzie nagrywany za pomocą StreamYard i udostępniany na YouTube. Cel jest taki, by umieścić zarówno wideo jak i czat (topczat) na stronie internetowej, najlepiej bezpośrednio w Tutor LMS (wtyczka do kursów), w ramach dedykowanej lekcji.

Brak punktorów w opisie kursów i lekcji we wtyczce Tutor LMS (WordPress), czyli prawdopodobny konflikt z… motywem Divi

Wczoraj, podczas jakby się zdawało w pewnym sensie już rutynowego wdrożenia wtyczki Tutor LMS (platforma kursowa do WordPressa), pojawił się problem, którego do tej pory nie byłem świadom. Problem objawił się przy próbie stworzenia listy wypunktowanej w opisie kursu. Konkretnie to samą listę udało się stworzyć, bo to nic specjalnie trudnego, ale zdecydowanie nie wyświetlała się prawidłowo. Właściwie to w ogóle jako lista się nie wyświetlała…

Black Friday (Czarny Piątek) / Cyber Monday (Cyber Poniedziałek) AD 2020, czyli subiektywny mini przegląd (najlepszych ;-)) ofert

Zbliża się Black Friday (Czarny Piątek) i Cyber Monday (Cyber Poniedziałek), a więc czeka nas wysyp promocji i specjalnych ofert. I choć część takich ofert to farbowane lisy, to nie da się ukryć, że w wielu przypadkach jest to realna szansa na zaoszczędzenie pieniędzy, często niemałych. Typowego katalogu ofert nie będę robił, bo nie tylko nie bardzo mam w tym momencie czas, ale też – jak już kiedyś piałem – jest to marketingowo tak ważne “wydarzenie”, że właściwie w ciemno można założyć, że jeśli czegoś szukamy – czy to produktu, czy zwłaszcza usługi – to jest bardzo duża szansa, że będzie jakaś promocja na to, a do tego jest dużo serwisów specjalizujących się a agregowaniu przeróżnych promocji. Ale brak (tworzenia) katalogu nie oznacza, że nic się nie pojawi…

Divi Sticky Options to prawdopodobnie najwszechstronniejszy system typu “sticky” wśród kreatorów stron dla WordPressa

W środę napisała do mnie pewna “kulinarna szafiarka”, która korzysta z motywu Divi od Elegant Themes, a która trafiła do mnie zapewne przez wyszukiwarkę, bo na łamach Webinsider.pl o Divi zdarza mi się od czasu do czasu pisać (co nie powinno dziwić, bo sam Webinsider.pl działa na motywie Extra od Elegant Themes, który jest “magazynową” wersją Divi, a do tego od dość dawna sporo stron dla swoich klientów stawiam właśnie na Divi). Napisała z pytaniem, czy mam pomysł jak na jej stronie “przypiąć” formularz kontaktowy, który znajduje się w nagłówku, tak by poruszał się wraz z przewijaniem strony w oknie przeglądarki (sticky).

Languages remover for Divi Builder, czyli pozbywamy się “kiepskich” tłumaczeń z Divi Buildera (również w motywach Divi i Extra)

Kilka miesięcy temu napisałem o problemach ze zmianą domyślnego języka w WordPressie, gdy wyłączone są tłumaczenia w ustawieniach motywu Divi i Extra. Z racji tego, że wyłączenie takie przy obecnie dystrybuowanych tłumaczeniach wydaje się wręcz niezbędne (komputerowe tłumaczenie kontekstowe to nadal komputerowe, nieważne, ile by tam “sztucznej inteligencji” marketing wpompował), ale zarazem jego wyłączenie wpływało na język samego WordPressa i innych wtyczek (język angielski zamiast polskiego) postanowiłem, że muszę coś z tym zrobić… Zwłaszcza że ekipa z Elegant Themes jakby uparła się na to maszynowe tłumaczenie, pomimo “sugestii” użytkowników.

Poznaj Divi 4.0 z Divi Theme Builder, i w prosty sposób zmień wygląd dosłownie każdej (pod)strony na swojej stronie WWW

I stało się, motyw Divi 4.0 do WordPresa oficjalnie został zaprezentowany, a wraz z nim Divi Theme Builder, czyli kreator motywów (konstruktor motywów), dzięki czemu w prosty sposób – z wykorzystaniem m.in. Divi Buildera – można nadać właściwie dowolny wygląd właściwie dowolnemu elementowi strony. I to globalnie.

Divi WooCommerce Builder, czyli graficzny edytor (page builder) stron produktowych w sklepie internetowym na WooCommerce

Tak jak WordPress dominuje, jeśli chodzi o strony internetowe, tak WooCommerce – wtyczka do WordPressa, dodające opcję sklepu internetowego – rozpycha się coraz mocniej, jeśli chodzi o sklepy internetowe. Nie dziwi mnie to, bo tak jak WordPress przez ostatnie lata przeszedł drogę od platformy blogowej do pełnoprawnego CMSa, tak samo WooCommerce z każdą kolejną odsłoną dojrzewa, stając się coraz lepszą doskonalszą platformą do prowadzenia tego typu biznesu.
O popularności tego rozwiązania może świadczyć choćby… wygląd stron produktów w sklepach, które odwiedzamy. Jak każde tego typu rozwiązanie, tak samo WooCommerce ma pewne stałe elementy, które sprawiają, że sprawne oko od razu rozpozna, na jakiej platformie działa sklep. Ale powoli i to zaczyna się zmieniać. Ekipa z Elegant Themes właśnie zaprezentowała rozwiązanie, które pozwala właściwie dowolnie modyfikować stronę produktu w sklepie działającym pod kontrolą WordPressa i wtyczki WooCommerce…

Divi Library Global Modules, czyli elementy globalne (wspólne) przy tworzeniu zawartości strony za pomocą edytora Divi (Divi Builder)

Kilka dni temu skontaktowała się ze mną Magdalena, z pytaniem, czy moglibyśmy chwilę porozmawiać przez telefon, na temat strony, którą na motywie Divi (WordPress) robi dla firmy jej koleżanki pewien freelancer. Po krótkiej wymianie wiadomości zgodziłem się i tak otworzyłem worek problemów. Nie tyle z motywem, co bardziej z wdrożeniem i samym freelancerem (akurat taki się trafił ;-)), który na prawie każde pytanie o… odpowiadał, że się nie da, że ten motyw tak ma i się nie da nic z tym zrobić. I choć Divi nie jest motywem idealnym, tak samo, jak sam WordPress, to ten duet pozwala na wiele, a już na pewno na wszystko to, co zostało mi przedstawione, a wspomniany freelancer negował.

Divi Builder (Elegant Themes) z bezpośrednim zarządzaniem zawartością modułów zależnie od urządzenia (+hover, +SRCSET)

Właśnie jestem po aktualizacji Divi Buildera (a więc i motywów Divi i Extra) na stronach, którymi zarządzam, a na których działają te motywy. Nie byłoby w tym nic nadzwyczajnego, gdyby nie to, że przy okazji aktualizacji motywów dokonałem kilku zmian w graficznej strukturze stron. I choć była to dodatkowa praca, to wykonałem ją z przyjemnością, bo wreszcie w edytorze graficznym Divi (Divi Builder) pojawiły się 2 moim zdaniem ważne opcje, dzięki czemu nie trzeba będzie się bawić w bajpasy, by dopasować zawartość poszczególnych modułów do typu urządzenia (telefon, tablet, komputer).

Loading

Pin It on Pinterest