Strona główna
- 12 sierpnia 2022 Nasza wtyczka Beaver Builder pomaga budować kompletne strony internetowe z szablonami i modułami. Może się jednak zdarzyć, że zechcesz jeszcze bardziej dostosować witrynę. Dzięki skrótom Beaver Builder możesz dodawać dodatkowe treści do modułów, nagłówków, stopek i pasków bocznych.
W tym poście przedstawimy skróty Beaver Builder i pokażemy, jak wstawić je do treści. Omówimy również kilka przykładów, które mogą ulepszyć projekt Twojej witryny. Wskoczmy!
Spis treści
Jeśli pracowałeś wcześniej z witrynami WordPress, być może znasz już skróty. Są to małe fragmenty kodu, które zwiększają funkcjonalność Twojej witryny.
Zamiast pisać wszystko w HTML za pomocą edytora kodu, możesz po prostu wstawić krótki kod na swoją stronę. Będzie to miało slug lub identyfikator, który odpowiada elementowi Beaver Builder, takiemu jak moduł, wiersz lub kolumna. Możesz także używać skrótów do postów, stron lub szablonów układu.
W tym przykładzie dodajemy zapisany wiersz do modułu HTML:
Kiedy klikniemy Zapisz , Beaver Builder automatycznie konwertuje krótki kod na zapisany wiersz, któremu odpowiada:
W dalszej części postu pokażemy, jak dodawać skróty w edytorze. Na razie omówmy korzyści płynące z używania skrótów Beaver Builder.
Skróty mogą być przydatne do dodawania elementów wizualnych do obszarów tekstowych. Na przykład możesz utworzyć moduł cenowy i użyć krótkiego kodu, aby dodać zdjęcie produktu. W ten sposób nie będziesz musiał pracować z dwoma oddzielnymi modułami (Cennik i Zdjęcie), ponieważ zostaną one połączone:
Skróty umożliwiają również wstawianie elementów Beaver Builder do treści podczas pracy z edytorem bloków WordPress. Oznacza to, że nie musisz przełączać się do edytora Beaver Builder, aby dodać moduł, wiersz lub kolumnę.
Możesz dodać skróty do dowolnego modułu Beaver Builder z polem tekstowym, w tym:
Jednak dodanie zbyt wielu krótkich kodów może nie być rozsądne. Może to wydłużyć czas ładowania, ponieważ serwer musi żądać plików CSS i JavaScript dla każdego shortcode. Zalecamy użycie najwyżej dwóch na stronę.
Istnieje wiele przypadków użycia skrótów Beaver Builder. Spójrzmy na kilka pomocnych przykładów.
Załóżmy, że masz tabelę cen z wieloma opcjami produktu na stronie docelowej lub stronie sprzedaży. Możesz po prostu podać ceny, a następnie skierować klientów do kasy za pomocą przycisku na dole strony. Jednak użytkownicy będą musieli przewinąć dalej, co może potencjalnie zaszkodzić doświadczeniu użytkownika (UX).
Zamiast tego możesz utworzyć przycisk wezwania do działania (CTA), który zachęca klientów do zakupu produktu. Spowoduje to bezpośredni link do strony kasy, dzięki czemu klienci nie będą musieli dalej nawigować. Następnie możesz dodać ten przycisk do tabeli cen z krótkim kodem:
Pamiętaj, aby dostosować przycisk CTA do swojej wizualnej marki.
Jeśli masz witrynę firmy, możesz dodać kilka kart do sekcji Informacje. W ten sposób użytkownicy mogą dowiedzieć się więcej o Twojej firmie bez konieczności przewijania strony.
Załóżmy, że chcesz również, aby potencjalni klienci kontaktowali się z Tobą w sprawie Twoich usług, gdy tylko skończą czytać. Użytkownicy spędzają już czas na przełączaniu się między kartami. Skierowanie ich gdzie indziej może dać im kilka dodatkowych sekund na przemyślenie swojej decyzji o nawiązaniu kontaktu.
Zamiast tego możesz dodać formularz kontaktowy do jednej z zakładek, używając skróconego kodu:
To takie proste! Teraz klienci mogą kontaktować się z Tobą bez konieczności opuszczania strony.
Podczas tworzenia stron możesz chcieć dodać obrazy i tekst do jednego modułu. Chociaż można by użyć dwóch oddzielnych modułów, treść byłaby podzielona i nie można by umieścić obrazu w środku tekstu.
Łączenie tekstu i obrazów to skuteczny sposób na wyeksponowanie produktów w Twoim sklepie internetowym. Na przykład, możesz dodać zdjęcia do modułu Cennik, aby zaprezentować różne cechy produktu:
Teoretycznie można by połączyć ten sam układ z różnymi modułami ułożonymi jeden na drugim. Jednak użycie shortcode obrazu może przyspieszyć proces projektowania.
Podczas pracy z Edytorem bloku można również używać skrótów Beaver Builder. Może to być szczególnie przydatne, jeśli piszesz post na blogu i chcesz dodać do artykułu elementy interaktywne.
Możesz łatwo upuścić moduł Beaver Builder na stronę bez opuszczania Edytora bloku. Po prostu wstaw blok Shortcode i wklej do niego swój kod:
Gdy opublikujesz post, krótki kod wyświetli zawartość w interfejsie:
Na przykład możesz wstawić moduł Formularz kontaktowy. Możesz również dodać wezwanie do działania, które kieruje klientów do Twojego sklepu, lub wbudowaną mapę lokalizacji Twojego sklepu.
Nasz motyw Beaver Builder zawiera niestandardowy krótki kod daty. Spowoduje to wyświetlenie bieżącej daty w dowolnej części strony, w tym w nagłówkach, stopkach i paskach bocznych:
Ten skrót może być przydatny, jeśli prowadzisz witrynę z wiadomościami. Możesz dodać datę, używając dowolnego z następujących skrótów:
| Krótki kod | Format |
| 2022 | 2022 |
| 22 | 22 |
| 14 sierpnia 2022 | 28 lipca 2022 |
| Niedziela, 14 sierpnia 2022 | Czwartek, 28 lipca 2022 |
| 08-14-2022 | 07-28-2022 |
| „8-14-22” | 7-28-22 |
| „14.08.22” | 07.28.22 |
Możesz również użyć tego skrótu obok wiadomości o prawach autorskich w stopce. W ten sposób możesz mieć pewność, że jest zawsze aktualny.
Właśnie omówiliśmy kilka scenariuszy, w których skróty Beaver Builder mogą przyspieszyć i uprościć proces projektowania. Zobaczmy teraz, jak dodać je do swojej witryny:
Skróty nie są łatwo dostępne w Twojej witrynie. Najpierw musisz zapisać elementy Beaver Builder, zanim będziesz mógł je wstawić jako skróty. Te elementy mogą obejmować:
Załóżmy na przykład, że chcesz zaprojektować niestandardowy moduł formularza kontaktowego. Możesz to zrobić, przechodząc do Beaver Builder > Zapisane moduły > Dodaj nowy :
Zostaniesz poproszony o nazwanie swojego modułu i wybranie jego typu:
Kliknij Dodaj zapisany moduł . Na następnej stronie wybierz Uruchom Beaver Builder , aby uzyskać dostęp do edytora. Tutaj możesz dostosować formularz kontaktowy do swoich upodobań:
Kiedy będziesz gotowy, opublikuj swój moduł. Teraz pojawi się na stronie Zapisane moduły . Jeśli korzystasz z najnowszej wersji Beaver Builder, będziesz mógł zobaczyć automatycznie generowane skróty:
Jeśli nie widzisz kolumny ShortCode , musisz utworzyć kod ręcznie. Aby to zrobić, potrzebujesz ślimaka modułu.
Jeśli klikniesz przycisk Edytuj pod modułem, powinieneś być w stanie zobaczyć jego ślimak. Jeśli go nie widzisz, otwórz menu Opcje ekranu i zaznacz pole obok opcji Slug :
Teraz możesz użyć poniższego kodu, aby utworzyć krótki kod dla tego modułu:
[fl_builder_insert_layout slug="my-post-slug"]Pamiętaj, aby zastąpić „my-post-slug” ślimakiem modułu Beaver Builder. W naszym przykładzie będzie to wyglądać tak:
[fl_builder_insert_layout slug="contact-form"]To wszystko – teraz wiesz, jak tworzyć skróty dla modułów Beaver Builder.
Ostatnim krokiem jest dodanie shortcode do swojej strony. W większości przypadków ten proces będzie polegał na wklejeniu fragmentu kodu w polu tekstowym modułu.
Oto nasza wcześniejsza tabela cenowa. Jak widać, dodaliśmy skrót do przycisku CTA w polu tekstowym Feature 5 :
Ponieważ Beaver Builder korzysta z edytora front-end, będziesz mógł natychmiast zobaczyć zapisany moduł. W niektórych przypadkach (np. podczas korzystania z modułu HTML) może być konieczne zapisanie zmian, zanim shortcode przekształci się w element wizualny.
Skróty Beaver Builder umożliwiają szybkie dodawanie zapisanych modułów, wierszy, kolumn lub układów do różnych części stron. Możesz ich użyć, aby przyspieszyć proces projektowania i tworzyć piękne strony WordPress.
Podsumowując, możesz użyć skrótów Beaver Builder, wykonując te proste kroki:
Czy jesteś gotowy, aby zacząć tworzyć wspaniałe strony dla swojej witryny? Sprawdź pełną listę przyjaznych dla użytkownika funkcji Beaver Builder!
Beaver Builder zapewnia skróty dla zapisanych elementów, takich jak moduły, wiersze, kolumny i szablony. Następnie możesz dodać te fragmenty do pól i modułów tekstowych. Jest to możliwe zarówno w edytorze frontonu Beaver Builder, jak i edytorze bloków WordPress. Ponadto skróty umożliwiają korzystanie z innych ulubionych wtyczek wraz z Beaver Builder.
Nie potrzebujesz oficjalnego motywu Beaver Builder, aby używać skrótów. Możesz tworzyć strony i dodawać skróty z większością motywów za pomocą wtyczki do tworzenia stron. Jednak niektóre skróty, takie jak skrót Data, działają tylko z motywem Beaver Builder.
Beaver Builder to narzędzie do tworzenia stron, które umożliwia edycję obszaru zawartości stron i postów za pomocą modułów i szablonów. Z kolei Beaver Themer to dodatkowa wtyczka, która umożliwia edycję obszarów witryny, które są zwykle kontrolowane przez Twój motyw, takich jak nagłówki, stopki i paski boczne. Ta zawartość obejmuje szablony motywów, części szablonów i siatki postów.