Recenzja Breakdance: kompletne rozwiązanie do tworzenia strony internetowej w WordPress

Opublikowany: 2022-11-04

Szukasz nowej wtyczki do tworzenia stron do tworzenia stron internetowych w WordPressie? Jeśli tak, możesz rzucić okiem na Breakdance.

Breakdance to nowość w segmencie wtyczek do tworzenia stron WordPress. Jego początkowa stabilna wersja (Breakdance 1.0) została właśnie wydana we wrześniu 2022 roku. Mimo to ludzie stojący za Breakdance nie są tak naprawdę nowi w świecie kreatorów stron. Breakdance jest rozwijany przez Soflyy, firmę programistyczną, która opracowuje również Oxygen, kolejną wtyczkę do tworzenia stron dla WordPressa.

Podobnie jak jego starszy brat, Breakdance jest również skierowany do agencji lub freelancerów budujących strony internetowe dla klientów. Oferuje jedną opcję cenową, dzięki której możesz korzystać z licencji subskrypcyjnej na nieograniczonej liczbie witryn WordPress.

Jeśli chcesz dowiedzieć się więcej o Breakdance, czytaj dalej.

Uwaga: ten artykuł nie będzie porównywał Breakdance i Oxygen. Zamiast tego skupi się na omówieniu funkcji Breakdance.

Krótkie wprowadzenie o breakdance

Polub to lub nie. Elementor jest nadal pierwszą nazwą, która przychodzi na myśl, jeśli chodzi o wtyczkę do tworzenia stron dla WordPress. Popularny nie znaczy jednak najlepszy. Specjalnie dla agencji chcących tworzyć nieograniczone strony internetowe. Elementor nie ma planu, który pozwala na korzystanie z licencji na nieograniczonej liczbie stron internetowych.

Z drugiej strony Breakdance jest skierowany konkretnie do agencji lub każdego, kto chce tworzyć nieograniczone strony internetowe. Możesz używać swojej licencji subskrypcyjnej na dowolnej liczbie witryn WordPress, tak jak w Divi. Biorąc to pod uwagę, Breakdance jest świetną alternatywą dla Elementora, jeśli chcesz tworzyć nieograniczoną liczbę witryn WordPress z wtyczką do tworzenia stron.

Dowiedz się więcej o cenach breakdance

Pod względem technicznym Breakdance niewiele różni się od innych istniejących kreatorów stron. Jest wyposażony w edytor wizualny oferujący responsywną funkcję edycji, która pozwala zoptymalizować projekt na wszystkich rozmiarach ekranu (komputer stacjonarny, tablet, smartfon). Edytor Breakdance jest zbudowany z Vue.js. Możesz monitorować plany rozwoju Breakdance na stronie mapy drogowej.

Jest wyjątkowa rzecz, którą musisz wiedzieć o Breakdance. Ma opcję ustawienia, aby wyłączyć motyw WordPress . Gdy użyjesz tej opcji ustawienia, aktywny motyw w Twojej witrynie nie zostanie załadowany i nie ma wpływu na wydajność ani wygląd Twojej witryny. Możesz zastąpić swoje części motywu, takie jak nagłówek, stopka i strony archiwum, korzystając z funkcji kreatora motywów Breakdance (omówimy to później). Dzięki tej opcji ustawień możesz kontrolować każdą część swojej witryny WordPress za pomocą Breakdance.


Edycja doświadczenia

Interfejs edytora Breakdance

Jak widać na powyższym zrzucie ekranu, Breakdance ma wystarczająco czysty edytor — który jest domyślnie dostępny w trybie światła. Możesz włączyć tryb ciemny, jeśli Ci wygodniej. W stanie początkowym edytor Breakdance składa się z trzech części:

  • Panel elementów po prawej stronie. Ten panel zmieni się w panel ustawień, gdy klikniesz element na obszarze płótna
  • Obszar płótna po środku, którego można użyć do umieszczenia elementów projektu
  • Obszar górnego paska, za pomocą którego można uzyskać dostęp do niektórych menu, takich jak edycja całej witryny, nawigator itp.

Dodatkowy panel otworzy się po prawej stronie, gdy uzyskasz dostęp do menu na górnym pasku.

W przeciwieństwie do np. Elementora, Breakdance nie oferuje opcji ustawienia układu strony. Podczas edycji nowej strony za pomocą Breakdance zawsze będziesz mieć puste płótno (bez paska bocznego).

Edytor lub Breakdance zawiera następujące funkcje:

— Nawigacja

Większość kreatorów stron ma funkcję nawigacji, która ułatwia użytkownikom poznanie struktury projektu. Ta funkcja jest szczególnie przydatna podczas edycji długiej strony składającej się z wielu elementów. W Breakdance funkcja ta nazywa się Struktura. Możesz uzyskać do niego dostęp, klikając ikonę układania po prawej stronie górnego paska.

Funkcja nawigacji breakdance

Jest kilka rzeczy, które możesz zrobić w Strukturze, poza badaniem elementów projektu i struktury. Można go również użyć do zmiany kolejności elementów projektu, powielenia elementu projektu i usunięcia elementu projektu.

— Edytowanie responsywne

W dzisiejszych czasach stworzenie zachwycającej strony nie wystarczy. Musisz również upewnić się, że tworzona strona wygląda dobrze na wszystkich rozmiarach ekranu urządzenia (komputer, tablet i smartfon). Edytowanie responsywne to powszechna funkcja dostępna we wszystkich wtyczkach do tworzenia stron dla WordPress. Breakdance nie jest wyjątkiem.

Podczas edytowania strony w Breakdance możesz przełączyć się na inny typ urządzenia, klikając ikonę urządzenia w środkowej części górnego paska. Do wyboru jest pięć opcji punktów przerwania:

  • Pulpit
  • Tablet (tryb poziomy)
  • Tablet (tryb portretowy)
  • Telefon (tryb poziomy)
  • Telefon (tryb portretowy)

Aby zoptymalizować projekt na wszystkich rozmiarach ekranu, możesz użyć innej wartości w określonych ustawieniach. Na przykład możesz ustawić inną wartość dopełnienia na komputerze, tablecie i smartfonie. Możesz najechać kursorem na etykietę ustawienia i kliknąć ikonę urządzenia, aby wyświetlić opcje urządzenia.

- Historia wersji

Historia wersji to kolejna kluczowa funkcja, którą mają prawie wszystkie wtyczki do tworzenia stron. Dzięki tej funkcji możesz bez wysiłku nauczyć się zmian, które wprowadziłeś w swoim projekcie od początku jego edycji. Ta funkcja jest również bardzo przydatna, jeśli przypadkowo dokonałeś zmiany, której nie chciałeś. Możesz po prostu sprawdzić poprzednią wersję i przywrócić ją.

W Breakdance możesz uzyskać dostęp do funkcji historii wersji, klikając ikonę z trzema kropkami na górnym pasku i wybierając Historia .

Funkcja historii wersji w Breakdance

— Edycja całej witryny

Edycja całej witryny to nowe podejście w WordPressie, które umożliwia edycję wielu części witryny bez opuszczania edytora. W większości wtyczek do tworzenia stron — w tym Divi Builder i Elementor — pełna edycja witryny obsługuje tylko trzy części: bieżącą stronę, szablon nagłówka i szablon stopki.

W Breakdance możesz edytować wszystkie części i strony witryny bez opuszczania edytora. Jeśli strona lub część była wcześniej edytowana za pomocą Breakdance, będzie dostępna na liście edycji pełnej witryny. Możesz go po prostu kliknąć, aby go edytować

Funkcja edycji całej witryny w Breakdance

— Podgląd i publikowanie Twojej pracy

Ogólnie rzecz biorąc, doświadczenie edycji oferowane przez Breakdance jest świetne. Posiada przejrzysty, intuicyjny edytor. Jednak gdy nadszedł czas na podgląd i opublikowanie strony lub szablonu niestandardowego, proces nie przebiega tak płynnie. Musisz poruszać się tam iz powrotem między frontendem a backendem.

Breakdance nie oferuje przycisku w obszarze edytora, aby bezpośrednio wyświetlić podgląd lub opublikować swoją stronę, taką jak Elementor i Brizy. Aby wyświetlić podgląd swojej pracy na aktywnej stronie, musisz wyjść z edytora i ponownie wejść, aby ponownie go edytować. Aby opublikować stronę, musisz wyjść z edytora i przejść do backendu (Gutenberg), aby ją opublikować.


Elementy wystroju

Dostępność elementów projektu określa, co możesz zrobić za pomocą kreatora stron. Breakdance zawiera wiele elementów designu. Od podstawowych elementów, takich jak przycisk i obraz, po zaawansowane elementy Loop Builder i Advanced Tabs.

Przed dodaniem określonego elementu możesz dodać kontener, aby umieścić i uporządkować układ elementów. Masz dwie opcje kontenera: sekcję i kolumnę.

Elementy designu Breakdance są pogrupowane w 7 kategoriach.

  • Podstawowy
  • Bloki
  • Strona
  • Zaawansowany
  • Dynamiczny
  • Formularze
  • WooCommerce

— Kategoria podstawowa

Sekcja
Kolumny
Div
Nagłówek
Tekst
Tekst sformatowany
Link tekstowy
Przycisk
Obraz
Wideo
Ikona

— Kategoria bloków

Pole ikon Podstawowy pasek Pasek powiadomień
Pole obrazu Suwak podstawowy Wizytówka z obrazem
Lista podstawowa Licznik okręgu Obraz z powiększeniem
Lista znaczników wyboru Prosty licznik Masker
Lista ikon Karty Mapa Google
Tabela cen Odliczanie czasu Komentarze na Facebooku
Zablokować cytat Animacja Lottie Przycisk „Lubię to” na Facebooku
Tabela statystyk Przewijanie obrazu Wtyczka strony na Facebooku
Godziny pracy Akordeon obrazu Post na Facebooku
FAQ Lista logo Przycisk udostępniania na Facebooku
Galeria Podwójny kurs Filmy na Facebooku
Ikony społecznościowe Animowany nagłówek Przycisk Twittera
Ocena w skali gwiazdkowej Prosta opinia Tweet osadzony na Twitterze
Fantazyjny rozdzielacz Fantazyjne referencje Oś czasu na Twitterze
Pasek postępu Porównanie obrazów Przyciski udostępniania społecznościowego

- Kategoria strony

Konstruktor nagłówków
Menu WP
Konstruktor menu
Formularz wyszukiwania

— Kategoria zaawansowana

Link do opakowania
Blok kodu
Zaawansowane karty
Globalny blok
Krótki kod
Opakowanie krótkich kodów
HTML IMG

— Kategoria dynamiczna

Formularz komentarza
Lista komentarzy
Opublikuj meta
Obszar zawartości szablonu
Tytuł posta
Fragment posta
Treść postu
Opublikuj polecany obraz
Autor
sąsiednie posty
Tytuł archiwum
Lista postów
Konstruktor pętli post
Widżet

— Kategoria formularzy

Formularz zapomnianego hasła
Kreator formularzy
Forma loginu
Formularz rejestracyjny
Lista produktów
Produkt
Konstruktor produktów
Produkty powiązane
Sprzedaż dodatkowa produktów
Strona sklepu
Strona koszyka
Strona kasy
Strona konta
Strona śledzenia zamówień
Mini wózek
Kupuj filtry
Widżet Woo
Woo bułka tarta

Główne cechy

— Kreator motywów

Kreator motywów pozwala przejść dalej od samego tworzenia stron. Możesz go użyć do tworzenia niestandardowych szablonów dla części witryny, takich jak nagłówek, stopka, strony archiwum, szablon pojedynczego posta i tak dalej.

W Breakdance możesz użyć narzędzia do tworzenia motywów, aby utworzyć następujące części witryny:

  • nagłówek
  • Stopka
  • Strony archiwum (tagi, kategorie, autor, data)
  • Pojedynczy post
  • Pojedyncza strona
  • Strona 404
  • Wyniki wyszukiwania
  • Niestandardowy szablon typu posta

Jeśli korzystasz z WooCommerce, możesz również użyć funkcji kreatora motywów Breakdance, aby utworzyć niestandardowe szablony dla następujących części:

  • Strona pojedynczego produktu
  • Strona archiwum produktów
  • Strona sklepu

W Breakdance możesz ustawić, gdzie i jak zastosować niestandardowy szablon. Na przykład możesz ustawić niestandardowy szablon nagłówka, który będzie stosowany do postów na blogu tylko dla zalogowanych użytkowników, jak poniżej.

Stan wyświetlania Breakdance

W sekcji wprowadzającej wspomnieliśmy, że Breakdance oferuje opcję ustawienia wyłączania aktywnego motywu WordPress w Twojej witrynie. Korzystanie z tej opcji ustawień pozwala zbudować witrynę WordPress całkowicie z Breakdance . Najlepsze jest to, że nadal będziesz mógł dodać niestandardową funkcję za pomocą edytora plików motywu, ponieważ Breakdance utworzy nowy plik functions.php po wyłączeniu motywu.

Możesz także robić rzeczy, które zwykle używasz w dostosowywaniu motywów, takie jak ustawianie ikony witryny, dodawanie niestandardowego CSS, ustawianie strony głównej i tak dalej.

Ponadto Breakdance umożliwia również tworzenie zaawansowanego menu w nagłówku za pomocą elementu Menu Builder.

— Kreator formularzy

W panelu elementów edytora Breakdance znajdziesz kategorię o nazwie Formy . W tej kategorii można znaleźć cztery elementy formularza:

  • Zapomniałeś hasła
  • Kreator formularzy
  • Forma loginu
  • Formularz rejestracyjny

Podczas gdy inne elementy formularzy mają określone zastosowanie zgodnie z ich nazwami, element Form Builder może służyć do tworzenia kilku typów formularzy. Jest to element potrzebny do stworzenia formularza zapisu e-mail, formularza kontaktowego, formularza ankiety.

Widżet Kreator formularzy obsługuje następujące typy pól:

  • Tekst
  • E-mail
  • Obszar tekstowy
  • URL
  • Numer telefonu
  • Radio
  • Pole wyboru
  • Wybierz
  • Numer
  • Data
  • Czas
  • Hasło
  • HTML
  • Ukryty

W przypadku akcji formularza możesz wybrać następujące akcje:

  • Wyślij do ActiveCampaign
  • Uruchom kod JavaScript
  • Wyślij do ConverKit
  • Wyślij do kroplówki
  • Wyślij na Discord
  • Wyślij do Slacka
  • Wyślij na e-mail
  • Wyślij do GetResponse
  • Wyślij do MailChimp
  • Wyślij do MailerLite
  • Otwórz wyskakujące okienko
  • Wyślij do wbudowanego menedżera przesyłania formularzy Breakdance

Co ciekawe, możesz zastosować warunek wyświetlania do pola. Oznacza to, że pole pojawi się tylko wtedy, gdy warunek zostanie spełniony. Na przykład możesz ustawić, aby określone pole pojawiało się tylko wtedy, gdy poprzednie pole jest wypełnione.

Aby dodać zabezpieczenie do Twojego formularza, Breakdance oferuje integrację z reCAPTCHA. Możesz też włączyć Honeypot.

— Kreator wyskakujących okienek

Jeśli często tworzysz wyskakujące okienka w swojej witrynie, nie musisz instalować dodatkowej wtyczki do Breakdance, ponieważ ma ona wbudowany kreator wyskakujących okienek.

Dzięki funkcji kreatora wyskakujących okienek Breakdance możesz stworzyć przyciągające wzrok wyskakujące okienka z własnym projektem. Proces tworzenia wyskakujących okienek odbywa się za pośrednictwem Breakdance. Oznacza to, że możesz dodać dowolny element, którego potrzebujesz, w tym element Kreatora formularzy — który możesz wykorzystać do utworzenia mniej irytującego wyskakującego okienka subskrypcji e-mail. Możesz po prostu wyłączyć nakładkę, aby utworzyć mniej irytujące wyskakujące okienko subskrypcji.

Kreator wyskakujących okienek Breakdance obsługuje warunki wyświetlania, podobnie jak kreator motywów. Innymi słowy, możesz ustawić lokalizację lub dwie, w których pojawi się wyskakujące okienko. Ponadto stan wyświetlania pozwala ustawić wyskakujące okienko tak, aby było wyświetlane na podstawie określonych parametrów, takich jak:

  • Typ posta
  • przeglądarka internetowa
  • System operacyjny
  • Punkt przerwania
  • Status logowania
  • Rola użytkownika
  • Data

Jeśli chodzi o wyzwalacz, możesz ustawić wyświetlanie wyskakującego okienka na podstawie następujących parametrów:

  • Po załadowaniu strony
  • Przewijanie strony
  • Przewiń stronę w górę
  • Brak aktywności użytkownika
  • Zamiar wyjścia
  • Na kliknięcie

Co więcej, możesz także ustawić częstotliwość wyświetlania wyskakującego okienka na podstawie numeru ładowania strony i sesji.

Limit wyskakujących okienek na Breakdance

— Treść dynamiczna

Wspomnieliśmy powyżej, że Breakdance zawiera funkcję kreatora motywów, której można użyć do tworzenia niestandardowych szablonów dla części witryny. Oczywiście możesz dodać dynamiczną zawartość do niestandardowych szablonów, taką jak tytuł posta, meta posta, polecany obraz i tak dalej.

Oto lista dynamicznych treści obsługiwanych przez Breakdance:

Tekst Obraz URL
Treść postu Opublikuj polecany obraz Opublikuj bezpośredni link
Tytuł posta Opublikuj załącznik obrazu Polecany adres URL obrazu
Fragment posta Logo witryny Strona URL
Warunki postu Obraz autora (awatar)
Czas posta Strona produktu WooCommerce
Data wysłania Galeria produktów WooCommerce
Liczba komentarzy
Teksty polecanych obrazów (tekst alternatywny, podpis, tytuł)
Tytuł archiwum
Opis archiwum
Nazwa strony
Slogan witryny
Imię autora
biografia autora
Tytuł produktu WooCommerce
Opis produktu WooCommerce
Warunki produktu WooCommerce
Ocena produktu WooCommerce
Cena produktu WooCommerce
SKU produktu WooCommerce
Magazyn produktów WooCommerce
Sprzedaż produktów WooCommerce

Ponadto możesz również dodawać dynamiczną zawartość za pomocą wtyczki pól niestandardowych (np. ACF).

— Konstruktor pętli

Breakdance został zaprojektowany jako wielofunkcyjna wtyczka do tworzenia stron. Możesz go użyć do stworzenia dowolnego rodzaju strony internetowej. Loop Builder jest przydatny, jeśli chcesz użyć Breakdance do tworzenia złożonej, dynamicznej witryny internetowej, takiej jak witryna z listami.

Loop Builder umożliwia utworzenie szablonu przedmiotu aukcji i użycie go na stronie aukcji lub stronie archiwum. Do szablonu przedmiotu aukcji możesz dodać zawartość dynamiczną. Od domyślnej dynamicznej zawartości WordPressa (polecany obraz, tytuł posta, meta posta itp.) do dynamicznej zawartości tworzonej za pomocą ACF lub innej wtyczki pól niestandardowych.

— Menedżer dostępu

Dawanie swoim klientom dostępu do projektu strony jest nieco ryzykowne, ponieważ mogą niestrudzenie zepsuć projekt, który stworzyłeś. Ale co, jeśli klienci sami chcą zmienić treść projektu?

Breakdance ma przydatną funkcję, która sprawi, że praca z klientami będzie bardziej bezproblemowa. Możesz dać swoim klientom dostęp do edytora Breakdance, ale tylko w celu zmiany treści — bez możliwości zmiany projektu. Spójrz na poniższy screencast.

Jak widać, w panelu ustawień Breakdance nie ma zakładki projektowania i zakładki ustawień. Ponadto nie ma przycisku Dodaj, aby dodać nowy element.

Normalnie panel ustawień powinien wyglądać tak:

Normalny stan panelu ustawień Breakdance

Aby Twoi klienci mogli zmieniać tylko treść, możesz przejść do strony ustawień Breakdance ( Breakdance -> Ustawienia ). Tutaj możesz ustawić dostęp na podstawie roli użytkownika. Można ustawić trzy rodzaje dostępu:

  • Pełny dostęp
  • Edytuj treść
  • Brak dostępu

— Wkrótce i tryb konserwacji

Gdy Twoja witryna jest nadal w fazie rozwoju, możesz włączyć tryb „Już wkrótce”. Breakdance ma wbudowaną funkcję, która umożliwia włączenie trybu wkrótce lub trybu konserwacji, dzięki czemu nie musisz instalować dodatkowej wtyczki.

Możesz utworzyć stronę wkrótce za pomocą edytora Breakdance i po prostu ją wybrać. Gdy Twoja witryna jest w trybie wkrótce, możesz ustawić, kto może uzyskać do niej dostęp na podstawie roli użytkownika i statusu logowania.

— Wbudowane opcje optymalizacji

Na stronie ustawień Breakdance możesz również uzyskać dostęp do niektórych ustawień związanych z wydajnością witryny. Niektóre ustawienia, które możesz ustawić, to:

  • Usuń bloki Gutenberga CSS
  • Wyłącz emoji WordPress
  • Wyłącz WordPress Oembed
  • Wyłącz metatag generatora WordPress

Oprócz powyższych ustawień Breakdance obsługuje również leniwe ładowanie elementów graficznych i wideo.

— Wprowadzacz kodu

Kolejną przydatną funkcją oferowaną przez Breakdance jest wstawianie kodu. Możesz użyć tej funkcji, aby wstawić kod (np. kod śledzenia Google Analytics) w obszarze nagłówka i stopki swojej witryny.

— Logika warunkowa

Niektóre wtyczki do tworzenia stron, takie jak Brizy i Divi Builder, mają wbudowaną funkcję ustawiania logiki warunkowej (określanej również jako warunek wyświetlania). Logika warunkowa to stan, w którym element jest wyświetlany tylko wtedy, gdy spełnia określony warunek.

Jak wspomniano powyżej, możesz ustawić warunek wyświetlania (logikę warunkową) w konstruktorze motywów i konstruktorze wyskakujących okienek. Ponadto możesz również ustawić warunek wyświetlania elementu na zwykłej stronie.

Logika warunkowa jest przydatna do tworzenia witryny internetowej członkostwa, dzięki której można wyświetlać zawartość tylko dla zalogowanych użytkowników. Lub odwrotnie, możesz ukryć treści (np. reklamy) przed zalogowanymi użytkownikami.

Funkcja logiki warunkowej Breakdance obsługuje następujące parametry:

  • Strona
  • Identyfikator posta
  • Stan postu
  • Liczba komentarzy
  • Autor
  • Obraz funkcji
  • Status logowania użytkownika
  • Rola użytkownika
  • Data rejestracji użytkownika
  • Dane dynamiczne
  • Niestandardowy PHP
  • przeglądarka internetowa
  • System operacyjny
  • Data i godzina
  • Pochodzące z wyszukiwarki
  • Liczba wyświetleń strony
  • Liczba sesji

— Linki akcji

Breakdance sprawdza się również bardzo dobrze jako wtyczka do tworzenia stron docelowych. Po pierwsze, zawiera element Form Builder, jak omówiliśmy powyżej. Po drugie, możesz utworzyć przycisk wezwania do działania za pomocą elementu Przycisk i bezpośrednio otworzyć czat WhatsApp, wysłać e-mail, nawiązać połączenie i wysłać wiadomość tekstową.


Cechy konstrukcyjne

- Układ

# Wyrównanie Flexbox

Flexbox to funkcja CSS, która pozwala wyrównywać i dystrybuować elementy w kontenerze. Czy w pionie czy w poziomie. Obecnie większość kreatorów stron ma już tę funkcję, aby ułatwić użytkownikom rozmieszczenie układu elementów. W kontekście konstruktora stron kontenerem może być opakowanie sekcji, kolumny lub elementu.

W Breakdance możesz łatwo ustawić wyrównanie flexboxa bez zajmowania się kodem CSS. Możesz zastosować wyrównanie flexbox do sekcji, kolumny lub elementu (przycisk, obraz itp.).

Wyrównanie Flexbox w Breakdance

# Pozycjonowanie w linii

Pozycjonowanie w linii jest przydatne, jeśli często umieszczasz w projekcie dwa lub więcej elementów obok siebie. Oto przykład:

W Breakdance możesz również ustawić pozycjonowanie w linii do elementu bez zajmowania się kodem CSS, co jest świetne, aby usprawnić przepływ pracy. Możesz przejść do zakładki zaawansowanej w panelu ustawień i otworzyć menu Wrapper . Zobaczysz tutaj opcję ustawień, aby ustawić pozycjonowanie w linii.

# Niestandardowe pozycjonowanie

Dzięki niestandardowemu pozycjonowaniu możesz umieścić element w dowolnym miejscu swojego projektu. Dzięki tej funkcji możesz uzyskać unikalny układ, taki jak ten poniżej:

Dostęp do niestandardowego pozycjonowania można również uzyskać za pośrednictwem menu Wrapper w panelu Advanced (Zaawansowane) panelu ustawień.

# Margines i dopełnienie

Margines i dopełnienie to podstawowe ustawienia w kreatorze stron. Możesz ich użyć, aby dodać tabulator między elementem a innymi elementami wokół niego. Breakdance pozwala bez wysiłku ustawić margines i wypełnienie elementu. Istnieje 8 typów jednostek, których możesz użyć dla marginesów i dopełnienia: piksel (px), procent, emphemeral (em), root em (rem), wysokość widocznego obszaru (vh), szerokość widocznego obszaru (vw), auto i niestandardowe.

# Indeks Z

Indeks Z to właściwość CSS, która określa kolejność stosu elementu. Element o wyższym porządku stosu zawsze znajduje się przed elementem o niższym porządku stosu. Breakdance pozwala ustawić wartość właściwości Z-index dla określonego elementu bez zajmowania się kodem CSS. Indeks Z jest przydatny, jeśli chcesz, aby określony element był zawsze na wierzchu.

— Media i aktywa

# Biblioteka ikon

Ikona jest jednym z elementów powszechnie występujących na stronie internetowej, innym niż obraz i tekst. Sam Breakdance ma kilka elementów, dzięki którym możesz dodać ikony do swojego projektu. Taka ikona, Icon Box, do listy ikon. Do przycisku można również dodać ikonę.

Aby ułatwić dodawanie ikon, Breakdance jest zintegrowany z FontAwesome i IconMoom (obie wersje są bezpłatne). Do wyboru jest ponad 2000 ikon. Jeśli potrzebujesz więcej, możesz przesłać własne zestawy ikon. Breakdance obsługuje niestandardowe ikony w formacie SVG.

# Media

Breakdance pozwala dodawać pliki multimedialne do projektu i bawić się nim. Na przykład możesz dodać wideo w tle do sekcji. Możesz też dodać obraz do swojego projektu i zastosować niektóre style, takie jak maskowanie obrazu, filtry CSS i tak dalej.

Oto funkcje, które można znaleźć na Breakdance związane z mediami:

  • Filmy w tle (obsługuje źródła zewnętrzne — YouTube i Vimeo)
  • Pokaz slajdów w tle
  • Dzielnik kształtu
  • Maskowanie obrazu

— Kolor i efekty wizualne

Breakdance jest wyposażony w funkcje, które pozwalają bawić się kolorami i efektami wizualnymi. Jednym z nich jest zaawansowany kreator gradientów. Możesz także bez wysiłku dodać filtr CSS do obrazu bez samodzielnego dodawania niestandardowego kodu CSS.

# Zaawansowany konstruktor gradientów

Jeśli lubisz dodawać gradient do swojego projektu, ta funkcja jest czymś, co tak bardzo pokochasz. W Breakdance możesz dodać gradient składający się z wielu kolorów (więcej niż dwóch). Breakdance obsługuje dwa typy gradientów: liniowy i radialny.

Zaawansowany kreator gradientów Breakdance

W Breakdance możesz dodać gradient do tła sekcji, tła kolumny, nakładki i przycisku.

# Efekty wizualne

Oprócz zaawansowanego kreatora gradientów powyżej, Breakdance oferuje również następujące funkcje do dekoracji twoich elementów:

  • Filtry CSS
  • Tryby mieszania
  • Cień Pudełka
  • Nakładka tła

— Ruchy i interakcje

Chcesz dodać efekty animacji do swojego projektu, aby go ożywić?

Breakdance oferuje kilka efektów animacji, które możesz zastosować do swojego projektu. Od prostego efektu animacji, takiego jak animacja wejścia, po efekt animacji, który obejmuje interakcję użytkownika, jak efekty przewijania, po efekt lepki.

Oto efekty animacji oferowane przez Breakdance:

  • Efekty przewijania
  • Animacja wejścia
  • Lepki efekt
  • Efekt najechania

Możesz uzyskać dostęp do powyższych efektów animacji z zakładki Zaawansowane w panelu ustawień Breakdance.

— Globalne ustawienia i elementy

Ustawienia globalne to powszechna funkcja oferowana przez większość wtyczek do tworzenia stron. Ustawienie globalne pozwala pracować wydajniej. Prosty przykład. Możesz użyć globalnego ustawienia koloru ikony. Używając globalnego koloru na ikonach, wystarczy dokonać zmiany tylko raz, jeśli chcesz zmienić kolor na ikonach używających koloru globalnego.

Ten sam przypadek dotyczy również typografii.

Oprócz koloru i typografii Breakdance pozwala również na ustawienie elementu globalnego. Dostęp do ustawień globalnych i elementów globalnych można uzyskać, klikając ikonę z trzema kropkami w menu na górnym pasku i wybierając opcję Ustawienia globalne .

Aby dodać nowy kolor globalny, możesz kliknąć ikonę ołówka w opcji Paleta w bloku Ustawienia kolorów .

Aby dodać nową globalną typografię, możesz kliknąć ikonę ołówka w opcji Presets w bloku Ustawienia typografii .

- Niestandardowe CSS

Breakdance oferuje już wiele opcji stylizacji, które możesz zastosować do kreatywnej strony. Jeśli nie możesz znaleźć określonej opcji stylizacji, możesz to osiągnąć za pomocą niestandardowego CSS.

Dodanie niestandardowego CSS w Breakdance to naprawdę proste. Możesz po prostu dodać selektor elementów, a następnie deklarację CSS — podobnie jak w Elementorze. Każdy element Breakdance ma unikalny selektor klas. Selektor elementu można znaleźć, sprawdzając go na aktywnej stronie.

Aby dodać niestandardowy CSS do elementu, możesz przejść do zakładki Zaawansowane w panelu ustawień. Możesz wpisać swój kod CSS w polu Custom CSS .

Możesz użyć powyższej metody, aby dodać niestandardowy CSS do pojedynczego elementu.

Alternatywnie możesz również dodać niestandardowy kod CSS za pomocą dostosowywania motywu lub nawet pliku style.css motywu. Aby zastosować niestandardowy CSS, możesz dodać identyfikator CSS lub klasę CSS do elementu, do którego chcesz dodać niestandardowy CSS.


Dolna linia

Breakdance to wtyczka do tworzenia stron przeznaczona dla agencji lub freelancerów, którzy chcą tworzyć nieograniczoną liczbę stron internetowych w WordPress. W chwili pisania tego tekstu (4 listopada 2022 r.) Breakdance oferuje tylko jedną opcję cenową za 149 USD. Breakdance jest budowany przez tę samą firmę, która opracowuje Oxygen, ale jest łatwiejszy w użyciu.

Breakdance umożliwia tworzenie za jego pomocą całych części witryny poprzez wyłączenie aktywnego motywu w witrynie WordPress, a następnie tworzenie niestandardowych szablonów dla nagłówka, stopki, pojedynczego posta itd. za pomocą funkcji kreatora motywów. Breakdance ma również wbudowaną funkcję budowania pętli, która jest bardzo przydatna do tworzenia złożonej dynamicznej witryny internetowej, zwłaszcza witryny z listami. Jego funkcja tworzenia formularzy — w połączeniu z kreatorem wyskakujących okienek — umożliwia tworzenie potężnego wyskakującego okienka subskrypcji e-mail w celu zbierania potencjalnych klientów.

Edytor Breakdance — zbudowany za pomocą Vue.js — jest niezwykle łatwy w użyciu. Obsługuje edycję responsywną i ma prosty interfejs, z którym wygodnie się pracuje.

Najważniejsze cechy Breakdance:

  • Edytowanie responsywne
  • Obszerne kolekcje elementów projektu
  • Kreator motywów
  • Kreator formularzy
  • Kreator wyskakujących okienek
  • Konstruktor pętli
  • Menedżer dostępu
  • Logika warunkowa
  • Wbudowane opcje optymalizacji
  • Wiele opcji układu (obsługuje flex)
  • Ustawienia ogólne
  • Efekty animacji
  • niestandardowe CSS

W chwili pisania tego tekstu Breakdance nie obsługuje jeszcze dodatków innych firm, takich jak Elementor i Divi.

Pobierz Breakdance