#1. Jak zainstalować Motyw Divi – instrukcja krok po kroku

#1. Jak zainstalować Motyw Divi – instrukcja krok po kroku

 

Krok 1. Założenie konta w Elegant Themes i pobranie motywu.

Przechodzisz na stronę Elegant Themes i wybierasz najlepsza dla siebie licencje. Korzystając z tego linku otrzymujesz zniżkę 20% także warto z tego skorzystać.

Instalacja motywu Divi WordPress Krok 1 rejestracja konta

 

Po założeniu konta i wykupieniu motywu otrzymasz dostęp do panelu gdzie będziesz mógł pobrać motyw. Aby zalogować się i pobrać motyw wybierz z menu „Login”. Podaj swoje dane do logowania, które podałeś podczas rejestracji i kliknij „Member login”.

 

instalacja motywu divi wordpress krok 2

 

Po zalogowaniu klikasz na przycisk „Dowload” i plik z motywem zostanie pobrany na dysk Twojego komputera.

 

Pobieranie motywu Divi z panelu Elegant Themes

 

Krok 2. Instalacja motywu Divi w panelu administracyjnym WordPress.

Aby zainstalować motyw musisz go przesłać do kokpitu WordPress. W tym celu logujesz się do panelu administracyjnego WordPress.

Logowanie do panelu administracyjnego WordPress

Po zalogowaniu wybierz z lewego menu opcje „Wygląd” -> „Motywy” i Kliknij przycisk „Dodaj nowy” u góry ekranu.

Dodawanie motywu Divi w panelu administracyjnym WordPress

Następnie kliknij na przycisk „Wyślij motyw na serwer”.

Instalacja motywu Divi

 

Kliknij „Wybierz plik”. Otworzy się okno z folderami na Twoim komputerze. Wyszukaj plik Divi.zip, który przed chwilą pobrałeś z panelu Elegant Themes i wybierz go.

Po chwili motyw zostanie zainstalowany. Postęp przesyłania będzie widoczny w lewym dolnym rogu okna przeglądarki (Chrome). Ostatnim krokiem jest włączenie tego motywu.

Włączenie motywu Divi

Jak zrobić formularz zapisu wyskakujący po kliknięciu na przycisk?

Jak zrobić formularz zapisu wyskakujący po kliknięciu na przycisk?

W Internecie możemy znaleźć wiele sposobów na tworzenie formularzy zapisu. Mogą to być darmowe wtyczki do WordPressa lub gotowy kod, który trzeba przystosować pod siebie. Jednak takie rozwiązania nie do końca rozwiązywały mój problem z jakim się spotkałem.

Mianowicie, chciałem posiadać taką metodę, takie narządzie, które z automatu będzie mi tworzyć formularz w krótkim czasie, bez pisania styli CSS, uzyskując  profesjonalny wygląd i skuteczne zapisy.

Darmowe wtyczki posiadają podstawowe funkcje, które pozwolą na zbieranie subskrybentów do newsletteru. Jednak bardzo szybko przekonałem się, że aby przystosować ich wygląd już trzeba znać się na języku CSS, aby przystosować wygląd taki jaki oczekujemy co zajmuje czas oraz potrzebna jest wiedza na ten temat.

Podobnie jest gdy mamy gotowy kod. Najczęściej jest to ogólny szablon z domyślnym wyglądem, a jak chcemy go ulepszyć to wtedy sami musimy dostosować go za pomocą niestandardowych styli CSS.

Rozwiązaniem mojego problemu jest wtyczka Bloom, którą otrzymałem w pakiecie przy zakupie motywy Divi na licencji deweloper.

Bloom to świetna wtyczka do tworzenia różnego rodzaju formularzy zapisu na stronie od grupy Elegant Themes. Z pewnością jeśli posiadasz motyw Divi lub interesowałeś się nim to słyszałeś o niej.

Co możesz zrobić dzięki wtyczce Bloom?

Za pomocą wtyczki dodasz z łatwością różne rodzaje formularze zapisu na swojej stronie internetowej lub blogu. Pozwala tworzyć listę mailingową przy użyciu kilku metod.

  • Automatycznie wyskakujące okienko z formularzem zapisu po wejściu na stronę, z możliwością ustawienia po jakim czasie ma się wyświetlić (automatyczne Opt-In Pop-up).
  • Automatycznie wysuwany formularz zapisu w prawym dolnym rogu strony. W zależności od preferencji możemy ostawić aby pojawił się po określonym czasie lub gdy czytelnik przejdzie na sam dół strony. (automatyczny Opt-In Fly-Ins).
  • Proste i szybkie umieszczanie formularza zapisu w treści wpisu lub artykułu. (formularz Inline Opt-In)
  • Automatyczne dodawanie formularza zapisu na końcu blogowego postu (Below Content Opt-In Forms)
  • Widżet formularza zapisu, który możesz umieścić w pasu bocznym lub stopce ( Widget Area Opt-In Forms)
  • Formularz wymagający wpisania adresu email, aby odblokować dostęp do zawartości na stronie (Require Opt-In To Unlock Content)

Dodatkowo wtyczka pokazuje statystyki danego formularza. Pozwala to na ocenę skuteczności zapisów. Jeśli widzisz, że zapisy są niewielkie to masz informacje aby coś zmienić w tym formularzu.

Jak zrobić formularz, który wyskakuje po kliknięciu w przycisk?

W tym wpisie pokażę Ci jak zrobić formularz pop-up, który pojawia się po kliknięciu w przycisk. Swoją drogą polecam Ci, abyś tworzył takie formularze, ponieważ marketerzy robili testy, który rodzaj formularza najlepiej konwertuje (daje największa liczbę zapisów) i wygrał właśnie formularz pop-up po kliknięciu w przycisk. Dlatego też chce pokazać Ci jak zrobić na własnej stronie lub  tzw. stronie przechwytującej (landing page) taki formularz, który pozwoli Ci na zwiększenie zapisów oraz zbuduje większą listę mailingową.

 

Krok 1. Stwórz stronę i przycisk, który uaktywni formularz pop-up

W celu demonstracji pokażę Ci bardzo prosty przykład. Pierwsze co robisz to tworzysz nową stronę na platformie WordPress, a następnie uruchamiasz Divi Builder i dodajesz standardową sekcje z dwoma modułami na całą szerokość sekcji. Pierwszy moduł to moduł tekst, gdzie wpisujesz nagłówek, który ma zachęcić do wpisania adresu email. Drugim modułem jest moduł Przycisk, gdzie po kliknięciu w niego zostanie wyświetlone okienko z formularzem.

Aby zrobić to:

formularz zapisu po kliknieciu w przycisk

Tworzysz w builderze taki układ:

formularz zzapisu bloom one-click popup

Do modułu Tekst wpisujesz nagłówek. Następnie przechodzisz do ustawień moduły „Przycisk”. W ustawieniach ogólnych w polu URL wpisujesz „#1. Poniżej w polu Tekst przycisku wpisujesz: „Zobacz Wideo”, dajesz wyrównanie do środka. Dalej przechodzisz do zaawansowanych ustawień projektu i zmieniasz tło przycisku na pomarańczowy, a kolor tekstu na biały.

formularz zapisu trigger pop-up

Teraz bardzo ważne. W ustawieniach Niestandardowe CSS i w polu Klasa CSS wpisujesz nazwę klasy: „popup. Może to być dowolna nazwa, do której odniesiesz się przy konfigurowaniu formularza pop-up.

formularz zapisu triger po-up onclick

Zapisujesz i zamykasz okno ustawień modułu przycisk. Ustawiasz szablon strony na: „Blank page” i publikujesz stronę.

 

Krok 2. Tworzenie formularza za pomocą wtyczki Bloom

Teraz tworzysz formularz. Do tego celu wykorzystujesz wtyczkę Bloom, w której tworzysz nowy formularz. Tutaj po wyborze rodzaju formularza „pop-up” integrujesz wtyczkę z Twoim autoresponderem po przez wpisanie nazwy konta oraz API Key. W kolejnym kroku wybierasz szablon wyglądu. Potem decydujesz jaki tekst ma się pojawić na formularzu oraz o kolorystyce poszczególnych elementów.

W końcowych ustawieniach zaznaczasz Trigger on-click i w pole CSS Selector (string) wpisujesz „*.” (gwiazdkę, kropkę) oraz nazwę klasy przycisku, w tym przypadku jest to: „popup”. Czyli w pole wpisujesz:*.popup.

forlmularz zapisu bloom onclick pop-up

Czas na prezentacje działania formularza

Jeśli wszystko udało Ci się ustawić poprawnie. Przejdź do strony, którą wcześniej stworzyłeś, następnie kliknij w przycisk, a zboczysz formularz zapisu. Gotowe 🙂

Jak Załadować Gotowe Szablony Stron Do Divi? + 3 Gotowe Szablony Stron

Jak Załadować Gotowe Szablony Stron Do Divi? + 3 Gotowe Szablony Stron

Nie da się ukryć, że każdy z nas szuka rozwiązań ułatwiających nam prace. Chcemy, aby tworzenie stron było szybkie, przyjemne i łatwe.

Tutaj mam dla Ciebie dobrą nowinę. Podczas ewolucji motywu Divi wprowadzone zostały szablony stron, które możesz spotkać w internecie pod nazwą Divi Layout. Takie gotowe układy stron możesz szybko importować na swoją stronę, razem z całą zawartością (wygląd strony, zdjęcia, niestandardowe ustawienia) w zaledwie kilka minut. Może kojarzyć Ci się to z motywami pochodnymi (Child Theme), jednak jest to coś innego. Jest to bardzo łatwe do zrobienia i bardzo łatwo z tego się korzysta.

Dzisiaj pokażę Ci jak możesz takie gotowe szablony stron głównych zaimportować na swoja stronę z motywem Divi.

Na blogu elegantheme.net jest udostępniona zupełnie za darmo paczka z trzema szablonami. Znajdują się one pod tym adresem: https://www.elegantthemes.com/blog/divi-resources/download-our-free-divi-layout-pack-for-modern-homepages-and-single-page-websites

Pobierasz paczkę, a następnie wypakowujesz zawartość. Pliki szablonów mają rozszerzenie .json. Takie pliki mogą być importowane do Twojej Biblioteki Divi. Dokładną instrukcje masz w wideo wyżej. Po prostu logujesz się do kokpitu WordPressa Twojej strony i wybierasz z lewego menu zakładkę Divi -> Biblioteka Divi. U góry będziesz miał przycisk „Importowanie/Eksportowanie”, kliknij na niego, wybierz zakładkę „importuj” i wybierz plik .json z Twojego komputera, wciśnij zaimportuj.

Strona główna dla biznesu

Pierwszy szablon jest przeznaczony dla przedsiębiorstw korporacyjnych. Kolor przewodni to niebieski i szary, które mają na celu wnieść biznesowy klimat. Jest to szablon zawierający wezwania do działania, klasyczną strukturę bloków ikon z opisami. Poniżej również jest sekcja „o nas” w postaci wideo. Dalej są statystyki przedsiębiorstwa oraz loga klientów budujące dowód społeczny.

Drugi szablon przeznaczony jest dla agencji projektowej, fotografów lub innych pracowni artystycznych. Na samej górze strony jest wezwanie do działania z formularzem kontaktowym co pozwoli na łatwiejszy kontakt klienta z agencją. Niżej mamy blok z ikonami, wideo prezentacje, galerie, sekcja z wezwanie do akcji i loga firm.

Trzeci szablon znajdzie zastosowanie w lokalnym biznesie. Mamy tutaj ciepłą kolorystykę koloru pomarańczowego. Podobnie jak w poprzednich szablonach na samej górze jest wezwanie do akcji. Poniżej znajdziemy siatkę bloków z ikonami i tekstem, sekcje z wideo, sekcje z odpowiedziami na najczęściej zadawane pytania, sekcje kontakt z mapą, telefonem kontaktowym i adresem siedziby firmy.

Jeśli potrzebujesz więcej wskazówek jak zainstalować WordPress, jak zainstalować motyw, jak Zbudować stronę internetową w 3 godziny bez kodowania używając Motywu Divi, zapraszam na bezpłatny kurs.

sekreet-webdesignera-bannerr

Jak Zacząć Budować Strony Internetowe z Motywem Divi?

Jak Zacząć Budować Strony Internetowe z Motywem Divi?

Pin It on Pinterest