Samouczek Divi: Jak korzystać z modułu Social Media

Moduł mediów społecznościowych Divi umożliwia tworzenie łączy opartych na ikonach, które wskazują Twoje profile społecznościowe online, takie jak Facebook, Twitter i Google+. Te ikony są zintegrowane z motywem, we własnym stylu Divi, przy użyciu stylowych ikon, co sprawia, że są lepsze od wtyczek innych firm. Możesz dodać linki do wielu profili społecznościowych w każdym module i możesz dodać moduł w dowolnym miejscu na stronie.

Jak dodać moduł mediów społecznościowych do swojej strony

Zanim będziesz mógł dodać moduł mediów społecznościowych do swojej strony, musisz najpierw przejść do Divi Builder. Kiedyś Motyw Divi zainstalowany na Twojej stronie, zauważysz przycisk Użyj Divi Builder nad edytorem postów za każdym razem, gdy tworzysz nową stronę. Kliknij ten przycisk, aby aktywować Divi Builder i uzyskać dostęp do wszystkich modułów Divi Builder. Następnie kliknij przycisk Użyj Visual Builder aby uruchomić generator w trybie wizualnym. Możesz także kliknąć przycisk Użyj Visual Builder podczas przeglądania witryny na pierwszym planie, jeśli jesteś podłączony do pulpitu nawigacyjnego WordPress.

Po wejściu do programu Visual Builder możesz kliknąć szary przycisk plus, aby dodać nowy moduł do swojej strony. Nowe moduły można dodawać tylko w wierszach. Jeśli zaczynasz nową stronę, pamiętaj, aby najpierw dodać wiersz do swojej strony.

Znajdź moduł mediów społecznościowych na liście modułów i kliknij go, aby dodać go do swojej strony. Listę modów można przeszukiwać, co oznacza, że możesz także wpisać słowo „Obserwuj nas w mediach społecznościowych”, a następnie kliknąć „Enter”, aby automatycznie znaleźć i dodać mod do mediów społecznościowych! Po dodaniu modułu zostaniesz przywitany przez listę opcji modułu. Te opcje są podzielone na trzy główne grupy: Treść , Koncepcja et zaawansowany .

Przykład zastosowania: dodanie odpowiednich ikon mediów społecznościowych do strony kontaktowej

Strona kontaktowa witryny internetowej to idealne miejsce do zaprezentowania swoich profili społecznościowych online. Zapewnia to użytkownikom więcej możliwości pozostawania w kontakcie i promować Twój blog lub Twoja firma. W tym przykładzie pokażę, jak dodać ikony mediów społecznościowych, aby pasowały do obecnego wyglądu strony kontaktowej.

Korzystając z kreatora wizualnego, dodaj nową zwykłą sekcję z wierszem o pełnej szerokości jednej kolumny. Wstaw moduł mediów społecznościowych do swojej kolumny.

W zakładce Treść w ustawieniach modułu kliknij przycisk „Dodaj nowy element”, aby dodać nową sieć społecznościową do swojego modułu. W określonych ustawieniach sieci społecznościowej zaktualizuj następujące elementy:

Opcje zawartości

Sieć społecznościowa:
Adres URL konta na Facebooku: [wprowadź adres URL swojego konta na Facebooku]

Opcje projektowania

Kolor ikony: # d94b6a (różne kolory)

Następnie skopiuj tę sieć społecznościową, aby dodać cztery inne sieci (Twitter, Google+, LinkedIn i Instagram). Ponieważ zduplikowałeś sieć, kolor niestandardowej ikony został przeniesiony. Wystarczy więc zaktualizować każdy sieciowy adres URL i konto.

Teraz masz ikony mediów społecznościowych, które pasują do wyglądu strony kontaktowej.

Opcje treści w mediach społecznościowych

W zakładce Treść znajdziesz wszystkie elementy treści modułu, takie jak tekst, obrazy i ikony. Wszystko to kontroluje co pojawi się w module zawsze będzie można znaleźć w tej zakładce.

Dodaj nowy obiekt

Tutaj dodajesz nowe sieci do swojego modułu. Klikając „dodaj nowy element”, otworzysz zupełnie nowe okno opcji specyficznych dla Twojej nowej sieci (w zakładkach „Treść”, „Projekt” i „Zaawansowane”). Zobacz poniżej indywidualne ustawienia sieci mediów społecznościowych.

Po dodaniu pierwszej sieci zobaczysz szary pasek z tytułem sieci wyświetlonym jako etykieta. Na szarym pasku znajdują się również trzy przyciski umożliwiające edycję, kopiowanie lub usuwanie sieci.

Link do formularza

Tutaj możesz wybrać kształt ikon sieci społecznościowych w zaokrąglonym prostokącie lub w okręgu.

URL otwiera się

Wybierz otwarcie adresu URL sieci w nowej karcie lub w tym samym oknie.

Wykonaj przycisk

Tutaj możesz zdecydować, czy obok ikony ma być umieszczony następny przycisk.

Etykieta administratora

Spowoduje to zmianę etykiety modułu w konstruktorze w celu łatwej identyfikacji. Podczas korzystania z widoku WireFrame w programie Visual Builder etykiety te pojawiają się w bloku modułu interfejsu Divi Builder.

Opcje projektowania mediów społecznościowych

W zakładce Projekt znajdziesz wszystkie opcje stylizacji modułu, takie jak czcionki, kolory, rozmiary i odstępy. To jest zakładka, której użyjesz do zmiany wyglądu modułu. Każdy moduł Divi ma długą listę ustawień projektu, których możesz użyć do zmiany wyglądu.

W przypadku tego modułu opcje projektowania składają się z jednego elementu - koloru tekstu.

Kolor tekstu

Tutaj możesz wybrać, czy tekst ma być jasny, czy ciemny. Jeśli pracujesz na ciemnym tle, tekst powinien być jasny. Jeśli tło jest jasne, tekst powinien być ciemny.

Zaawansowane opcje mediów społecznościowych

Na karcie Zaawansowane znajdziesz opcje, które mogą być przydatne dla bardziej doświadczonych projektantów stron internetowych, takie jak niestandardowe atrybuty CSS i HTML. Tutaj możesz zastosować niestandardowy CSS do dowolnego z wielu elementów modułu. Możesz również zastosować niestandardowe klasy CSS i identyfikatory do modułu, których można użyć do dostosowania modułu w pliku style.css motywu potomnego.

Identyfikator CSS

Wprowadź opcjonalny identyfikator CSS do użycia w tym module. Identyfikator może służyć do tworzenia niestandardowego stylu CSS lub do łączenia z określonymi sekcjami strony.

Klasa CSS

Wprowadź opcjonalne klasy CSS do użycia w tym module. Do tworzenia niestandardowych stylów CSS można użyć klasy CSS. Możesz dodać wiele klas oddzielonych spacją. Klasy te mogą być używane w motywie potomnym Divi lub w niestandardowym arkuszu stylów CSS, który dodajesz do swojej strony lub witryny za pomocą opcje motywu Divi lub parametry strony Divi Builder.

Niestandardowy CSS

Niestandardowy CSS można również zastosować do modułu i dowolnych elementów wewnętrznych modułu. W sekcji Niestandardowe CSS znajdziesz pole tekstowe, w którym możesz dodać własne arkusze stylów CSS bezpośrednio do każdego elementu. Wpisy CSS w tych ustawieniach są już opakowane w znaczniki stylu. Po prostu wprowadź reguły CSS oddzielone średnikami.

widoczność

Ta opcja umożliwia sterowanie urządzeniami, na których pojawia się Twój moduł. Możesz indywidualnie dezaktywować swój moduł na tabletach, smartfonach lub komputerach stacjonarnych. Jest to przydatne, jeśli chcesz używać różnych modów na różnych urządzeniach lub jeśli chcesz uprościć projekt mobilny, usuwając określone elementy ze strony.

Indywidualne opcje treści w mediach społecznościowych

Sieć społecznościowa

Tutaj możesz wybrać sieć społecznościową, którą chcesz wyświetlić.

URL konta

Tutaj należy wpisać adres URL tego łącza do sieci społecznościowej. Jeśli wybrałeś Facebook jako swoją sieć, w tym miejscu możesz umieścić adres URL swojej strony na Facebooku.

Indywidualne opcje projektowania mediów społecznościowych

Kolor ikony

Divi oferuje standardowe kolory dla każdej sieci społecznościowej zdefiniowane domyślnie. Tutaj możesz łatwo zmienić kolor ikony na dowolny.

Zaawansowane opcje mediów społecznościowych

Niestandardowy CSS

[vc_row center_row = "tak"] [vc_column width = "1/2 ″] [vcex_button target =" blank "layout =" expand "align =" center "font_family =" Raleway "font_weight =" 700 ″ style = "flat" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-download"] POBIERZ TEMAT DIVI [/ vcex_button] [/ vc_column] »vc_column] =» vc_column] 1/2 ″] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials" target = "blank" layout = "expand" align = "center" font_family = "Raleway" font_weight = "700 ″ style =" flat "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_right =" fa fa-download "] POBIERZ SZABLONY DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

Samouczek Divi: Jak korzystać z modułu Social Media

Jak dodać moduł mediów społecznościowych do swojej strony