Jak utworzyć pasek kontaktowy Divi Mobile z linkami typu „kliknij, aby połączyć”, e-mailem, SMS-em i linkiem kierunkowym?

W świecie żyjącym na urządzeniach mobilnych sensowne jest udostępnianie klikalnych linków kontaktowych w Twojej witrynie, które wykorzystują możliwości mobilne. Te linki kontaktowe, podobnie jak link typu „kliknij, aby połączyć”, mogą jednym kliknięciem rozpocząć połączenie na telefonie komórkowym. Inne, takie jak link do wskazówek, mogą otwierać wskazówki dojazdu do adresu firmy w Mapach Google. Są one naprawdę wygodne dla użytkowników i niezbędne dla niektórych firm.

W tym samouczku pokażemy, jak utworzyć mobilny pasek kontaktowy Divi z linkami typu „kliknij, aby połączyć”, e-mailem, SMS-em i wskazówkami dojazdu. Aby to zrobić, użyjemy konstruktora Divi do zaprojektowania paska i przycisków w globalnej stopce. Następnie dodamy niestandardowe adresy URL do każdego linku kontaktowego, aby zapewnić potrzebną funkcjonalność.

Zacznijmy!

zapowiedź

Oto krótkie spojrzenie na projekt, który zbudujemy w tym samouczku.

Pobierz układ za DARMO

Aby położyć swoje ręce na projektach z tego samouczka, najpierw musisz go pobrać za pomocą przycisku poniżej. Aby uzyskać dostęp do pobrania, musisz zapisać się na naszą listę e-mailową Divi Daily, korzystając z poniższego formularza. Jako nowy subskrybent otrzymasz jeszcze więcej dobroci Divi i darmowy pakiet Divi Layout w każdy poniedziałek! Jeśli jesteś już na liście, po prostu wpisz poniżej swój adres e-mail i kliknij pobierz. Nie będziesz „ponownie subskrybować” ani otrzymywać dodatkowych wiadomości e-mail.

Pobierz pliki

Pobierz za darmo

Dołącz do biuletynu Divi, a wyślemy Ci e-mailem kopię najlepszego pakietu układu strony docelowej Divi, a także mnóstwo innych niesamowitych i bezpłatnych zasobów, wskazówek i sztuczek Divi. Idź dalej, a w mgnieniu oka zostaniesz mistrzem Divi. Jeśli masz już subskrypcję, wpisz poniżej swój adres e-mail i kliknij Pobierz, aby uzyskać dostęp do pakietu układów.

POBIERANIE

Udało Ci się zasubskrybować. Sprawdź swój adres e-mail, aby potwierdzić subskrypcję i uzyskać dostęp do bezpłatnych cotygodniowych pakietów układów Divi!

Jak dodać pobrany szablon stałego paska kontaktowego do swojej witryny Divi?

OSTRZEŻENIE!: Dodanie tego szablonu zastąpi domyślny szablon strony internetowej (jeśli taki masz) w Twojej witrynie Divi. Sugerujemy dodanie tego do witryny testowej, aby nie zepsuć niczego w działającej witrynie.

Aby zaimportować szablon stałego paska stopki do własnej witryny, rozpakuj pobrany plik zip, aby uzyskać dostęp do pliku JSON.

Następnie przejdź do pulpitu nawigacyjnego WordPress i przejdź do Divi> Theme Builder.

Następnie kliknij ikonę przenoszenia w prawym górnym rogu strony.

W wyskakującym okienku przenośności wybierz właśnie rozpakowany plik JSON i wybierz opcję „Pobierz kopię zapasową przed importowaniem”, na wypadek, gdybyś wcześniej miał w domyślnym szablonie witryny coś, czego nie chcesz zastąpić.

Następnie kliknij przycisk Importuj.

Na koniec zapisz zmiany w Kreatorze motywów i wyświetl stronę na żywo, aby zobaczyć stały pasek stopki.

Przejdźmy teraz do samouczka, dobrze?

Część 1: Tworzenie globalnej stopki

W tym samouczku dodamy mobilny pasek kontaktowy do globalnej stopki za pomocą Divi Theme Builder. Zacznij od przejścia do Divi > Kreator motywów. Następnie kliknij Globalny obszar stopki w domyślnym szablonie witryny. Z menu wybierz Utwórz globalną stopkę.

UWAGA: Jeśli masz już globalną stopkę, możesz otworzyć edycję globalnej stopki i dodać pasek kontaktowy oprócz bieżącej stopki.

Wybierz opcję „Buduj od podstaw”.

Część 2: Tworzenie stałego paska treści

W Globalnym edytorze układu stopki rozpocznij proces projektowania, dodając jednokolumnowy wiersz do sekcji domyślnej.

Ustawienia sekcji

Zanim zaczniemy dodawać moduły, otwórz ustawienia sekcji, nadaj mu ustawioną wysokość w następujący sposób:

• Wysokość: 80px

Jest to ważne, aby utworzyć miejsce na dole strony, w którym ustalony wiersz ostatecznie się zatrzyma. Usuniemy również domyślną górną i dolną wyściółkę.

• Padding: 0px na górze, 0px na dole

Ustawienia wiersza

Teraz, gdy nasza sekcja jest gotowa, jesteśmy gotowi, aby dostosować wiersz, aby służył jako stały pasek kontaktowy. Otwórz ustawienia wiersza, a następnie zaktualizuj następujące elementy:

Tło

• Kolor tła: #751136

Rozmiar

• Szerokość rynny: 1
• Szerokość: 100%
• Maksymalna szerokość: 100%
• Wzrost: dziedziczy

Chociaż wiersz będzie stały, chcemy, aby jego wysokość odpowiadała wysokości sekcji nadrzędnej, tak aby przestrzeń na dole strony odpowiednio zawierała wiersz. Aby to zrobić, musimy wpisać tekst „dziedzicz” jako wysokość.

Rozstaw

• Padding: 0px góra, 0px dół, 15% po lewej, 15% po prawej

niestandardowe CSS

Chcemy mieć pewność, że treść w wierszu pozostaje wyrównana w pionie, a kolumny nie są dzielone na urządzeniach mobilnych. Aby to zrobić, dodaj następujący niestandardowy kod CSS do głównego elementu wiersza:

display:flex;
flex-wrap:nowrap;
align-items:center;

Naprawiono pozycjonowanie

Aby wiersz był stały i unosił się na dole ekranu, musimy nadać mu stałą pozycję w lewym dolnym rogu w następujący sposób:

• Pozycja: Naprawiono
• Lokalizacja: dolny lewy
• Indeks Z: 99999

Część 3: Tworzenie linków typu Call-to-Click, e-mail, SMS i kierunku

Teraz, gdy nasz pasek kontaktowy jest gotowy, jesteśmy gotowi do dodania klikalnych przycisków kontaktowych wraz z niestandardowymi adresami URL.

Projektowanie przycisku „kliknij, aby połączyć”

Pierwszym przyciskiem kontaktu, który stworzymy, jest przycisk „kliknij, aby połączyć”. Aby go utworzyć, dodaj do kolumny nowy moduł notki.

Zadowolony

Na karcie treści dodaj tytuł i ikonę do notki w następujący sposób:

• Tytuł: Zadzwoń
• Użyj ikony: TAK
• Ikona: telefon

Tło

Daj mu biały kolor tła:

• Kolor tła: #ffffff

Ustawienia projektowe

Przejdź do karty projektu i zaktualizuj ustawienia w następujący sposób:

Ikona

• Kolor ikony: #751136
• Użyj rozmiaru czcionki ikony: TAK
• Rozmiar czcionki ikony: 2em

Czcionka tytułu

• Styl czcionki tytułu: TT
• Wyrównanie tekstu tytułu: do środka
• Kolor tekstu tytułu: #751136
• Rozmiar tekstu tytułu: 1em

Rozmiar tekstu treści

Jeśli zauważyłeś, wymiarowaliśmy elementy notki za pomocą jednostki długości „em”. Odnosi się to do rozmiaru tekstu podstawowego. W związku z tym dostosowanie rozmiaru tekstu podstawowego notatek (nawet jeśli nie ma wyświetlanego tekstu podstawowego) spowoduje dostosowanie rozmiaru wszystkich elementów notatek za pomocą jednostki długości em. Jest to po prostu wygodny sposób zmiany rozmiaru przycisku do przodu bez konieczności indywidualnego dostosowywania każdego elementu.

Zaktualizuj treść w następujący sposób:

• Rozmiar tekstu ciała: 12px

Rozmiar

Nadaj notce ustaloną wysokość i szerokość w następujący sposób:

• Szerokość: 4.5em
• Wyrównanie modułu: środek
• Wysokość: 4,5 em

Dopełnienie i narożniki

• Wyściółka: góra 0,5 em

Cień Pudełka

• Cień pudełka: patrz zrzut ekranu
• Pozycja pozioma cienia pudełka: 0px
• Pozycja pionowa cienia pudełka: 2px
• Kolor cienia: rgba (255,255,255,0,55)

niestandardowe CSS

Aby zawartość modułu blurb była wyśrodkowana w pionie, dodaj następujący niestandardowy kod CSS do elementu głównego:

display:flex;
align-items:center;

I usuń odstępy pod ikoną rozmycia, dodając następujący obraz rozmycia:

margin-bottom: 0.3em;

Dodawanie adresu URL łącza połączenia

Aby dodać link do połączenia, który zainicjuje połączenie na telefonie komórkowym, dodaj numer po prefiksie „tel:”.

• Adres URL łącza modułu: tel: 555-555-5555

Projektowanie przycisku e-mail

Aby utworzyć przycisk e-mail, zduplikuj całą kolumnę.

Dodawanie ikony e-mail i adresu URL łącza

Następnie zaktualizuj duplikat notki w kolumnie 2 o nowy tytuł i ikonę.

Aby dodać link do połączenia, który zainicjuje wiadomość e-mail w aplikacji mobilnej, dodaj adres e-mail po prefiksie „mailto:”.

• Adres URL łącza modułu: mailto:[email chroniony]

Projektowanie przycisku SMS (wiadomość tekstowa)

Aby utworzyć przycisk SMS, zduplikuj kolumnę 2.

Dodawanie ikony SMS i adresu URL linku

Następnie zaktualizuj duplikat notki w kolumnie 2 o nowy tytuł i ikonę.

Aby dodać link do połączenia, który zainicjuje wiadomość e-mail w aplikacji mobilnej, dodaj adres e-mail po prefiksie „sms:”.

• Adres URL łącza modułu: sms:+15555555555

Projektowanie przycisku wskazówek

Aby utworzyć przycisk SMS, zduplikuj kolumnę 3.

Dodawanie ikony wskazówek dojazdu i adresu URL łącza

Następnie zaktualizuj duplikat notki w kolumnie 3 o nowy tytuł i ikonę.

Aby dodać adres URL linku do połączenia, który będzie inicjował wskazówki dojazdu przez Mapy Google, użyj tych struktur adresu URL kierunku.

W tym samouczku dodamy link do wskazówek dojazdu, który będzie generował wskazówki dojazdu z bieżącej lokalizacji użytkownika do GooglePlex w Mountain View w Kalifornii.

• Adres URL łącza modułu:

  https://www.google.com/maps/dir/?api=1&destination=1600+amphitheatre+pkwy+mountain+view+CA

Aby dodać własny adres do adresu URL, zastąp tekst po „destination=” w adresie URL, upewniając się, że słowa są oddzielone symbolami plus („+”).

Kliknięcie przycisku powinno dać ci coś podobnego do tego…

Ukryj sekcję na pulpicie

Ponieważ chcemy, aby pasek kontaktowy wyświetlał się tylko na urządzeniach mobilnych, możemy wyłączyć całą sekcję na komputerze. Aby to zrobić, otwórz ustawienia sekcji i zaktualizuj następujące elementy:

• Wyłącz na: Pulpit

Ostateczne rezultaty

Więcej linków kontaktowych

Dzięki HTML5 nie ograniczasz się do numerów telefonów. Możesz dodać inne wezwania do działania, takie jak e-mail, wiadomości, faks itp. Protokoły HTML5 obejmują:

tel: – zadzwoń
mailto: – otwórz aplikację e-mail
callto: otwórz Skype
sms: – wyślij sms
fax: – wyślij fax

A jeśli chcesz, możesz również dodać ukierunkowany link Waze do adresu URL dojazdu.

Końcowe przemyślenia

Wygląda na to, że pasek kontaktowy byłby świetnym dodatkiem do każdej witryny firmowej, która chce ułatwić użytkownikom kontaktowanie się z nimi z urządzenia mobilnego. A kiedy już zapoznasz się ze strukturą adresów URL linków, możesz wybrać dowolny rodzaj linku kontaktowego.

Więcej informacji znajdziesz w naszym poście na Linki telefoniczne.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!