Divi öğreticisi: Sosyal Medya modülünün kullanımı

Divi'nin Sosyal Medya modülü, Facebook, Twitter ve Google+ gibi çevrimiçi sosyal profillerinize işaret eden simgelere dayalı bağlantılar oluşturmanıza olanak tanır. Bu simgeler, Divi'nin kendi tarzında, şık simgelerini kullanarak temaya entegre edilmiştir ve bu da onları üçüncü taraf eklentileri kullanmaya tercih edilir kılar. Her modülde birden çok sosyal profile bağlantı ekleyebilir ve modülü sayfanın herhangi bir yerine ekleyebilirsiniz.

Sayfanıza sosyal medya modülü nasıl eklenir

Sayfanıza bir sosyal medya modülü eklemeden önce Divi Builder'a atlamanız gerekir. Bir kere Divi teması web sitenize yüklediğinizde bir düğme göreceksiniz Divi Builder'ı Kullan yeni bir sayfa oluşturduğunuzda yayın düzenleyicisinin üzerinde. Divi Builder'ı etkinleştirmek ve tüm Divi Builder modüllerine erişmek için bu düğmeye tıklayın. Ardından düğmeye tıklayın Visual Builder'ı kullan Jeneratörü görsel modda başlatmak için. Düğmeye de tıklayabilirsiniz Visual Builder'ı kullan WordPress panonuza bağlıysanız, web sitenizi ön planda tuttuğunuzda.

Visual Builder'a girdikten sonra, sayfanıza yeni bir modül eklemek için gri artı düğmesini tıklayabilirsiniz. Yeni modüller yalnızca satırların içine eklenebilir. Yeni bir sayfaya başlıyorsanız, önce sayfanıza bir satır eklemeyi unutmayın.

Modüller listesinde sosyal medya modülünü bulun ve sayfanıza eklemek için üzerine tıklayın. Modların listesi aranabilir, yani "Bizi sosyal medyada takip edin" kelimesini yazabilir ve ardından sosyal medya modunu otomatik olarak bulup eklemek için "enter" tuşuna tıklayabilirsiniz! Modül eklendiğinde, modül seçenekleri listesi tarafından karşılanacaksınız. Bu seçenekler üç ana gruba ayrılmıştır: içindekiler , Gebe kalma et gelişmiş .

Örnek kullanım örneği: İlgili sosyal medya simgelerini bir iletişim sayfasına ekleme

Bir web sitesinin iletişim sayfası, çevrimiçi sosyal profillerinizi sergilemek için mükemmel bir yerdir. Bu, kullanıcıların bağlantıda kalması için daha fazla fırsat sağlar ve desteklemek blogunuzun veya işiniz. Bu örnek için, bir iletişim sayfasının mevcut tasarımına uyması için sosyal medya simgelerini nasıl ekleyeceğinizi göstereceğim.

Görsel oluşturucuyu kullanarak, bir sütunun tam genişliğinde bir satıra sahip yeni bir normal bölüm ekleyin. Sütununuza bir sosyal medya modülü ekleyin.

Modül ayarlarının İçerik sekmesinde, modülünüze yeni bir sosyal ağ eklemek için "Yeni öğe ekle" düğmesini tıklayın. Belirli sosyal ağ ayarları altında aşağıdakileri güncelleyin:

İçerik seçenekleri

Sosyal ağ:
Facebook hesabı URL'si: [Facebook hesabı URL'nizi girin]

Tasarım seçenekleri

Simge Rengi: # d94b6a (çeşitli renk)

Ardından, diğer dört ağı (Twitter, Google+, LinkedIn ve Instagram) eklemek için bu sosyal ağı kopyalayın. Ağı kopyaladığınızdan beri, özel simgenin rengi aktarıldı. Yani her bir ağ URL'sini ve hesabını güncellemeniz yeterlidir.

Artık iletişim sayfasının tasarımına uygun sosyal medya simgelerine sahipsiniz.

Sosyal Medya İçeriği Seçenekleri

İçerik sekmesinde, modülün metin, resimler ve simgeler gibi tüm içerik öğelerini bulacaksınız. Tüm kontroller ce qui modülünüzde beliren her zaman bu sekmede bulunur.

Yeni bir nesne ekle

Modülünüze yeni ağlar eklediğiniz yer burasıdır. "Yeni bir öğe ekle" yi tıkladığınızda, yeni ağınıza özgü yepyeni bir seçenekler penceresi açacaksınız ("İçerik", "Tasarım" ve "Gelişmiş" sekmelerinin altında). Bireysel sosyal medya ağı ayarları için aşağıya bakın.

İlk ağınızı ekledikten sonra, ağ başlığınızın etiket olarak görüntülendiği gri bir çubuk göreceksiniz. Gri çubukta ayrıca ağı düzenlemenize, çoğaltmanıza veya silmenize olanak tanıyan üç düğme vardır.

Bağlantı formu

Burada, sosyal ağ simgelerinizin şeklini yuvarlatılmış dikdörtgen veya daire şeklinde seçebilirsiniz.

URL açılır

Ağ URL'nizi yeni bir sekmede veya aynı pencerede açmayı seçin.

Takip düğmesi

Burada, simgenin yanındaki sonraki düğmeyi dahil edip etmeyeceğinizi seçebilirsiniz.

Yönetici Etiketi

Bu, kolay tanımlama için yapıcıdaki modül etiketini değiştirecektir. WireFrame görünümünü Visual Builder'da kullandığınızda, bu etiketler Divi Builder arayüzünün modül bloğunda görünür.

Sosyal Medya Tasarım Seçenekleri

Tasarım sekmesinde yazı tipleri, renkler, boyutlandırma ve aralık gibi tüm modül stil seçeneklerini bulacaksınız. Bu, modülünüzün görünümünü değiştirmek için kullanacağınız sekmedir. Her Divi modülünde, görünümü değiştirmek için kullanabileceğiniz uzun bir tasarım ayarları listesi vardır.

Bu modül için tasarım seçenekleri tek bir öğeden oluşur - Metin Rengi.

Metin rengi

Burada metninizin açık mı yoksa koyu mu olacağını seçebilirsiniz. Koyu bir arka plan üzerinde çalışıyorsanız, metniniz açık olmalıdır. Arka planınız açıksa, metniniz koyu olmalıdır.

Gelişmiş sosyal medya seçenekleri

Gelişmiş sekmesinde, özel CSS ve HTML özellikleri gibi daha deneyimli web tasarımcılarının yararlı bulabileceği seçenekler bulacaksınız. Burada, modülün birçok öğesinden herhangi birine özel CSS uygulayabilirsiniz. Ayrıca, alt temanızın style.css dosyasında modülü özelleştirmek için kullanılabilen modüle özel CSS sınıfları ve kimlikleri de uygulayabilirsiniz.

CSS Kimliği

Bu modül için kullanmak üzere isteğe bağlı bir CSS Kimliği girin. Kimlik, özel bir CSS stili oluşturmak veya sayfanızın belirli bölümlerine bağlanmak için kullanılabilir.

CSS sınıfı

Bu modül için kullanmak üzere isteğe bağlı CSS sınıflarını girin. Özel CSS stili oluşturmak için bir CSS sınıfı kullanılabilir. Bir boşlukla ayırarak birden çok sınıf ekleyebilirsiniz. Bu sınıflar, Divi alt temanızda veya sayfanıza veya web sitenize eklediğiniz özel CSS stil sayfasında kullanılabilir. tema seçenekleri Divi veya Divi Builder sayfasının parametreleri.

Özel CSS

Özel CSS, modüle ve modülün herhangi bir dahili bileşenine de uygulanabilir. Özel CSS bölümünde, her öğeye doğrudan özel CSS stil sayfaları ekleyebileceğiniz bir metin alanı bulacaksınız. Bu ayarlardaki CSS girişleri zaten stil etiketlerine sarılmıştır. Bu yüzden CSS kurallarını noktalı virgülle ayırarak girin.

görünürlük

Bu seçenek, modülünüzün göründüğü cihazları kontrol etmenizi sağlar. Modülünüzü tabletlerde, akıllı telefonlarda veya masaüstlerinde ayrı ayrı devre dışı bırakmayı seçebilirsiniz. Bu, farklı cihazlarda farklı modlar kullanmak istiyorsanız veya sayfadan belirli öğeleri kaldırarak mobil tasarımı basitleştirmek istiyorsanız kullanışlıdır.

Bireysel sosyal medya içerik seçenekleri

Sosyal ağ

Buradan görüntülemek istediğiniz sosyal ağı seçebilirsiniz.

Hesap URL'si

Bu sosyal ağ bağlantısının URL'sini girdiğiniz yer burasıdır. Ağınız olarak Facebook'u seçerseniz, Facebook sayfanızın URL'sini koyacağınız yer burasıdır.

Bireysel sosyal medya tasarım seçenekleri

Simge rengi

Divi, varsayılan olarak tanımlanan her sosyal ağ için standart renkler sunar. Burada bu simge rengini istediğiniz gibi kolayca değiştirebilirsiniz.

Gelişmiş sosyal medya seçenekleri

Özel CSS

[vc_row center_row = "yes"] [vc_column width = "1/2 ″] [vcex_button target =" boş "layout =" genişletilmiş "align =" center "font_family =" Raleway "font_weight =" 700 ″ stil = "düz" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-download"] DIVI TEMAINI İNDİRİN [/ vcex_button] [/ width_column] [»vc_column » 1/2 ″] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials" target = "boş" düzen = "genişletilmiş" hizalama = "orta" font_family = "Raleway" font_weight = "700 ″ stil =" flat "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_right =" fa fa-indirme "] ŞABLONLARI İNDİR DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

Divi öğreticisi: Sosyal Medya modülünün kullanımı

Sayfanıza sosyal medya modülü nasıl eklenir