Ana İçeriğe Geç

Divi öğreticisi: Tam ekran menü modülünün kullanımı

Divi: Kullanılacak en kolay WordPress teması

Divi: Tüm zamanların en iyi WordPress teması!

daha fazla 901.000 indirmeler, Divi, dünyanın en popüler WordPress teması. Tamamen, kullanımı kolay ve 62 ücretsiz şablonlardan daha fazlasını sunuyor. [Önerilen]

Divi'deki Tam Ekran Menü modülü, sayfalarınızın üst kısmına (veya isterseniz web sitenizin herhangi bir yerine) güzel renkli başlıklar eklemeyi kolaylaştırır. Bu modüller yalnızca tam genişlikteki bölümlere yerleştirilebilir.

tam genişlikte başlık modülü divi.png

Divi Tam Ekran Menü modülü nasıl eklenir

Sayfanıza tam ekran Menü modülü eklemeden önce Divi Builder'a geçmelisiniz. Divi teması web sitenize yüklendikten sonra 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 Görsel Oluşturucu'yu etkinleştir WordPress panonuza bağlıysanız, web sitenizi ön planda tuttuğunuzda.

divi oluşturucu kullanın

Visual Builder'a girdikten sonra, sayfanıza yeni bir modül eklemek için gri artı düğmesini tıklayabilirsiniz. Yeni Tam Ekran Menü modülleri yalnızca tam genişlikli bölümlerin içine eklenebilir. Yeni bir sayfaya başlıyorsanız, önce sayfanıza tam genişlikte bir bölüm eklemeyi unutmayın.

full menu Instagram Hesabındaki Resim ve Videoları divi.png

Modüller listesinde tam ekran başlık modülünü bulun ve sayfanıza eklemek için üzerine tıklayın. Modüllerin listesi aranabilir, yani "tam ekran başlık" kelimesini yazıp ardından tam ekran başlık modülünü otomatik olarak bulmak ve eklemek için "Giriş"e tıklayabilirsiniz! Modül eklendiğinde, modül seçenekleri listesi ile karşılaşacaksınız. Bu seçenekler üç ana gruba ayrılır: içindekiler , Gebe kalma et gelişmiş .

Örnek kullanım örneği: Hakkında sayfasına tam ekran üstbilgisi ekleme

Bu örnek için size Fullwidth başlık modülünü özel metin ve arka plan görüntüsü içeren bir başlık eklemek için nasıl kullanacağınızı göstereceğim.

Tüm tam ekran modülleri yalnızca tam ekran bölümleri kullanılırken kullanılabilir. Visual Builder'ı kullanarak yeni bir tam ekran bölümü ekleyin. Ardından bölüme bir Kişi modülü ekleyin.

Tam ekran başlık ayarlarını aşağıdaki şekilde güncelleyin:

İçerik seçenekleri

Başlık: Hakkımızda Alt Başlık Metni: Farklı Şeyler Yapıyoruz ... Arka Plan Resmi URL: [1920 x 800 resim ekleyin] Bindirme arka plan Renk: rgba (0,0,0,0.2 , XNUMX)

Tasarım seçenekleri

Metin ve logo yönü: Orta düğme Aşağı Kaydırma Düğmesi: EVET Simge: [simge seç] Aşağı kaydırma simgesi Renk: # fcbf00 Kaydırma simgesi: 50px Metin rengi: Açık Metin rengi: # fcbf00 Yazı Tipi Başlık: Olmadan Aç, kalın, büyük harf Başlık Yazı tipi boyutu: 60px (masaüstü), 40px (tablet), 30px (telefon) Altyazı Yazı tipi boyutu: 25px

Gelişmiş seçenekler (özel CSS)

Ana eleman:
döşeme: 100px 0;

bölüm içeriği divi modülü full screen.png

İşte bu kadar!

örnek başlık divi.jpg

Tam ekran başlık içerik 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.

içerik bölümü divi.png

Başlık

Sayfanızın başlığını buraya girin.

Altyazı metni

Bir altyazı kullanmak istiyorsanız buraya ekleyin. Başlığınız, küçük bir yazı tipinde başlığınızın altında görünecektir.

Düğme # 1 Metni

Düğme için metni girin.

Düğme # 2 Metni

Düğme için metni girin.

içindekiler

Burada başlığın altına yerleştirilecek içeriği ve başlık metnini tanımlayabilirsiniz.

Düğme URL'si 1

Düğmenin URL'sini girin.

Düğme URL'si 2

Düğmenin URL'sini girin.

Logo resmi url'si

İstediğiniz resmi yükleyin veya görüntülemek istediğiniz resmin URL'sini yazın.

Başlık Resmi URL'si

İstediğiniz resmi yükleyin veya görüntülemek istediğiniz resmin URL'sini yazın.

Arka plan resmi url'si

Ayarlanırsa, bu görüntü bu modül için arka plan olarak kullanılacaktır. Bir arka plan resmini kaldırmak için, URL'yi ayarlar alanından kaldırmanız yeterlidir. Arka plan resimleri, arka plan renklerinin üstünde görünecektir; bu, bir arka plan görüntüsü uygulandığında arka plan renginin görünmeyeceği anlamına gelir.

Arka plan rengi

Modülünüz için özel bir arka plan rengi tanımlayın veya varsayılan rengi kullanmak için boş bırakın.

Elementor ile web sitenizi kolayca oluşturun

Elementor, profesyonel bir görünüme sahip herhangi bir web sitesi tasarımını kolayca oluşturmanıza olanak sağlar. Kendin yapabileceğin için pahalı ödemeyi kes. [Ücretsiz]

Arka plan kaplama rengi

Arka plan resminin üzerine yerleştirilecek bir arka plan kaplama rengi seçin. Yarı saydam kaplama görüntüleri, arka plan görüntülerinin üzerine yerleştirildiğinde bazı harika efektler oluşturabilir.

Yönetim 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.

Tam genişlikte başlık 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, herhangi bir şeyi değiştirmek için kullanabileceğiniz uzun bir tasarım ayarları listesi vardır.

bölüm tasarım modülü tam genişlikte divi.png

Metin ve Logo Yönlendirme

Bu, metninizin modülde nasıl hizalanacağını kontrol eder.

Tam ekran yap

Burada, başlığın tam ekran boyutuna genişletilip genişletilmeyeceğini seçebilirsiniz.

Paralaks efektini kullanın

Etkinleştirilirse, arka plan resimleriniz kaydırmanız gibi sabit bir konuma sahip olacak ve eğlenceli bir paralaks efekti oluşturacaktır.

Paralaks yöntemi

Paralaks etkisi için kullanılan yöntemi tanımlayın.

Aşağı kaydır düğmesini göster

Burada aşağı kaydırma düğmesinin görüntülenip görüntülenmeyeceğini seçebilirsiniz.

ikon

Aşağı kaydırma düğmesi için görüntülenecek bir simge seçin.

Aşağı kaydırın Renk simgesi

Varsayılan olarak, açılır simge, başlık metninizin rengini (beyaz veya gri) devralır. Bu rengi, renk seçiciyi kullanarak bu seçenekteki rengi ayarlayarak değiştirebilirsiniz.

Aşağı kaydır Simge boyutu

Başlığınızın altında görünen aşağı kaydırma simgesinin boyutunu artırmak veya azaltmak için bu ayarı kullanın.

head.png içinde hizalama divi modülü tam genişlik

Dikey görüntü hizalama

Bu, modüldeki görüntünün yönünü kontrol eder.

Metin rengi

Burada metninizin değerini seçebilirsiniz. Koyu bir arka plan üzerinde çalışıyorsanız, metniniz açık olmalıdır. Açık renkli bir arka planla çalışıyorsanız, metniniz koyu olmalıdır.

Metnin dikey hizalanması

Bu ayar, içeriğinizin dikey hizalamasını belirler. İçeriğiniz dikey olarak ortalanabilir veya aşağıya hizalanabilir.

Başlık yazı tipi

Açılır menüden istediğiniz yazı tipini seçerek başlık metninizin yazı tipini değiştirebilirsiniz. Divi, Google Yazı Tipleri tarafından desteklenen düzinelerce harika yazı tipiyle birlikte gelir. Varsayılan olarak Divi, sayfanızdaki tüm metinler için Open Sans yazı tipini kullanır. Kalın, italik, büyük harf ve altı çizili seçenekleri kullanarak metninizin stilini de özelleştirebilirsiniz.

Başlık Yazı Tipi Boyutu

Burada başlık metninizin boyutunu ayarlayabilirsiniz. Metninizin boyutunu artırmak veya azaltmak için aralık kaydırıcısını sürükleyebilir veya kaydırıcının sağındaki giriş alanına istediğiniz metin boyutu değerini doğrudan girebilirsiniz. Giriş alanları farklı ölçü birimlerini destekler; bu, birim türünü değiştirmek için boyut değerinize bağlı olarak "px" veya "em" girebileceğiniz anlamına gelir.

Başlık metni rengi

Varsayılan olarak, Divi'deki tüm metin renkleri beyaz veya koyu gri olarak görünür. Başlığınızın metin rengini değiştirmek istiyorsanız, bu seçeneği kullanarak renk seçiciden istediğiniz rengi seçin.

Başlık harflerinin aralığı

Harf aralığı, her harf arasındaki boşluğu etkiler. Başlık metninizdeki her harf arasındaki boşluğu artırmak istiyorsanız, boşluğu ayarlamak için aralık kaydırıcısını kullanın veya kaydırıcının sağındaki giriş alanına istediğiniz boşluk boyutunu girin. Giriş alanları farklı ölçü birimlerini destekler; bu, birim türünü değiştirmek için boyut değerinize bağlı olarak "px" veya "em" girebileceğiniz anlamına gelir.

baş tam ekran divi.png başlık sectio tasarım modülü

Başlık satırının yüksekliği

Satır yüksekliği, başlık metninizin her satırı arasındaki boşluğu etkiler. Her satır arasındaki boşluğu artırmak istiyorsanız, boşluğu ayarlamak için aralık kaydırıcısını kullanın veya imlecin sağındaki giriş alanına istediğiniz boşluk boyutunu girin. Giriş alanları farklı ölçü birimlerini destekler; bu, birim türünü değiştirmek için boyut değerinize bağlı olarak "px" veya "em" girebileceğiniz anlamına gelir.

İçerik yazı tipi

Açılır menüden istediğiniz yazı tipini seçerek içerik metninizin yazı tipini değiştirebilirsiniz. Divi, Google Yazı Tipleri tarafından desteklenen düzinelerce harika yazı tipiyle birlikte gelir. Varsayılan olarak Divi, sayfanızdaki tüm metinler için Open Sans yazı tipini kullanır. Kalın, italik, büyük harf ve altı çizili seçenekleri kullanarak metninizin stilini de özelleştirebilirsiniz.

En iyi WordPress temalarını ve eklentilerini mi arıyorsunuz?

Envato'daki en iyi eklentileri ve WordPress temalarını indirin ve web sitenizi kolayca oluşturun. 49.720.000 indirme işleminden daha fazla. [ÖZEL]

İçeriğin yazı tipi boyutu

Burada içerik metninizin boyutunu ayarlayabilirsiniz. Metninizin boyutunu artırmak veya azaltmak için aralık kaydırıcısını sürükleyebilir veya kaydırıcının sağındaki giriş alanına istediğiniz metin boyutu değerini doğrudan girebilirsiniz. Giriş alanları farklı ölçü birimlerini destekler; bu, birim türünü değiştirmek için boyut değerinize bağlı olarak "px" veya "em" girebileceğiniz anlamına gelir.

İçerik metni rengi

Varsayılan olarak, Divi'deki tüm metin renkleri beyaz veya koyu gri olarak görünür. İçerik metninizin rengini değiştirmek istiyorsanız, bu seçeneği kullanarak renk seçiciden istediğiniz rengi seçin.

Boşluk içeriği harfleri

Harf aralığı, her harf arasındaki boşluğu etkiler. İçerik metninizdeki her harf arasındaki boşluğu artırmak istiyorsanız, boşluğu ayarlamak için aralık kaydırıcısını kullanın veya kaydırıcının sağındaki giriş alanına istediğiniz boşluk boyutunu girin. Giriş alanları farklı ölçü birimlerini destekler; bu, birim türünü değiştirmek için boyut değerinize bağlı olarak "px" veya "em" girebileceğiniz anlamına gelir.

İçerik satırının yüksekliği

Satır yüksekliği, içerik metninizin her satırı arasındaki boşluğu etkiler. Her satır arasındaki boşluğu artırmak istiyorsanız, boşluğu ayarlamak için aralık kaydırıcısını kullanın veya imlecin sağındaki giriş alanına istediğiniz boşluk boyutunu girin. Giriş alanları farklı ölçü birimlerini destekler; bu, birim türünü değiştirmek için boyut değerinize bağlı olarak "px" veya "em" girebileceğiniz anlamına gelir.

Altyazı Yazı Tipi

Açılır menüden istediğiniz yazı tipini seçerek başlık metninizin yazı tipini değiştirebilirsiniz. Divi, Google Yazı Tipleri tarafından desteklenen düzinelerce harika yazı tipiyle birlikte gelir. Varsayılan olarak Divi, sayfanızdaki tüm metinler için Open Sans yazı tipini kullanır. Kalın, italik, büyük harf ve altı çizili seçenekleri kullanarak metninizin stilini de özelleştirebilirsiniz.

Altyazı yazı tipinin boyutu

Burada altyazı metninizin boyutunu ayarlayabilirsiniz. Metninizin boyutunu artırmak veya azaltmak için aralık kaydırıcısını sürükleyebilir veya kaydırıcının sağındaki giriş alanına istediğiniz metin boyutu değerini doğrudan girebilirsiniz. Giriş alanları farklı ölçü birimlerini destekler; bu, birim türünü değiştirmek için boyut değerinize bağlı olarak "px" veya "em" girebileceğiniz anlamına gelir.

Altyazı metni rengi

Varsayılan olarak, Divi'deki tüm metin renkleri beyaz veya koyu gri görünür. Başlığınızın metin rengini değiştirmek istiyorsanız, bu seçeneği kullanarak renk seçiciden istediğiniz rengi seçin.

Altyazı harflerinin aralığı

Harf aralığı, her harf arasındaki boşluğu etkiler. Altyazı metninizdeki her harf arasındaki boşluğu artırmak istiyorsanız, boşluğu ayarlamak için aralık kaydırıcısını kullanın veya kaydırıcının sağındaki giriş alanına istediğiniz boşluk boyutunu girin. Giriş alanları farklı ölçü birimlerini destekler; bu, birim türünü değiştirmek için boyut değerinize bağlı olarak "px" veya "em" girebileceğiniz anlamına gelir.

Altyazı satırının yüksekliği

Satır yüksekliği, başlık metninizin her satırı arasındaki boşluğu etkiler. Her satır arasındaki boşluğu artırmak istiyorsanız, boşluğu ayarlamak için aralık kaydırıcısını kullanın veya kaydırıcının sağındaki giriş alanına istediğiniz boşluk boyutunu girin. Giriş alanları farklı ölçü birimlerini destekler; bu, birim türünü değiştirmek için boyut değerinize bağlı olarak "px" veya "em" girebileceğiniz anlamına gelir.

Maksimum metin genişliği

Başlık modülündeki metnin maksimum genişliğini azaltmak için bu ayarı kullanın. Örneğin,% 50 değeri, metnin hiçbir zaman genel başlık modülünün genişliğinin% 50'sini aşmamasını sağlar.

bölüm tasarım modülü divi kafası full width.png

Düğme için özel stiller kullan

Bu seçeneğin etkinleştirilmesi, modülünüzün düğmesinin görünümünü değiştirmek için kullanabileceğiniz çeşitli düğme özelleştirme ayarlarını ortaya çıkarır.

Düğme metni boyutu

Bu ayar, düğmedeki metnin boyutunu artırmak veya azaltmak için kullanılabilir. Düğme, metin boyutu büyüdükçe ve küçüldükçe uyum sağlar.

Düğme metni rengi

Varsayılan olarak düğmeler, Tema Özelleştiricide tanımlanan temanızın vurgu rengini kullanır. Bu seçenek, bu modülün düğmesine özel bir metin rengi atamanıza olanak tanır. Düğme rengini değiştirmek için renk seçiciyi kullanarak özel renginizi seçin.

Düğme arka plan rengi

Varsayılan olarak, düğmelerin şeffaf bir arka plan rengi vardır. Bu, renk seçiciden istenen arka plan rengi seçilerek değiştirilebilir.

Kenarlık Genişliği düğmesi

Tüm Divi düğmelerinin varsayılan olarak 2px sınırı vardır. Bu sınır, bu ayar kullanılarak artırılabilir veya azaltılabilir. Sınırlar 0 değeri girilerek kaldırılabilir.

Düğme kenarlığı rengi

Varsayılan olarak düğme kenarlıkları, Tema Özelleştiricide tanımlandığı gibi temanızın vurgu rengini benimser. Bu seçenek, bu modülün düğmesine özel bir kenar rengi atamanıza olanak tanır. Düğme kenarlığının rengini değiştirmek için renk seçiciyi kullanarak özel renginizi seçin.

Düğme sınır yarıçapı

Kenarlığın yarıçapı, düğmelerinizin köşelerinin yuvarlaklığını etkiler. Varsayılan olarak, Divi'deki düğmelerin köşeleri 3 piksel yuvarlayan küçük bir kenarlık yarıçapı vardır. Kare düğme oluşturmak için bu değeri 0'a düşürebilir veya yuvarlak kenarlı düğmeler oluşturmak için önemli ölçüde artırabilirsiniz.

Düğme harflerinin aralığı

Harf aralığı, her harf arasındaki boşluğu etkiler. Düğme metninizdeki her harf arasındaki boşluğu artırmak istiyorsanız, boşluğu ayarlamak için aralık kaydırıcısını kullanın veya kaydırıcının sağındaki giriş alanına istediğiniz boşluk boyutunu girin. Giriş alanları farklı ölçü birimlerini destekler; bu, birim türünü değiştirmek için boyut değerinize bağlı olarak "px" veya "em" girebileceğiniz anlamına gelir.

Düğme Yazı Tipi

Açılır menüden istediğiniz yazı tipini seçerek düğme metninizin yazı tipini değiştirebilirsiniz. Divi, Google Yazı Tipleri tarafından desteklenen düzinelerce harika yazı tipiyle birlikte gelir. Varsayılan olarak Divi, sayfanızdaki tüm metinler için Open Sans yazı tipini kullanır. Kalın, italik, büyük harf ve altı çizili seçenekleri kullanarak metninizin stilini de özelleştirebilirsiniz.

Düğme simgesi ekle

Devre dışı bırakıldığında, bu ayar düğmenizden simgeleri kaldırır. Varsayılan olarak, tüm Divi düğmeleri, fareyle üzerine gelindiğinde bir ok simgesi görüntüler.

Düğme simgesi

Simgeler etkinleştirilirse, düğmenizde hangi simgenin kullanılacağını seçmek için bu ayarı kullanabilirsiniz. Divi, aralarından seçim yapabileceğiniz farklı simgelere sahiptir.

Renk simgesi düğmesi

Bu ayarı yapmak, düğmenizde görünen simgenin rengini değiştirecektir. Varsayılan olarak, simge rengi düğme metin renginizle aynıdır, ancak bu ayar rengi bağımsız olarak ayarlamanıza izin verir.

Simge yerleştirme düğmesi

Düğmenizin simgesini düğmenin solunda veya sağında görüntülemeyi seçebilirsiniz.

Simgeyi yalnızca düğmenin üzerine geldiğinizde göster

Varsayılan olarak, düğme simgeleri yalnızca gezinirken görüntülenir. Simgenin her zaman görünmesini istiyorsanız, bu ayarı kapatın.

Düğme Vurgusu Metin Rengi

Bir ziyaretçinin faresi düğme üzerine geldiğinde, bu renk kullanılacaktır. Renk, önceki ayarlarda tanımlanan temel renkten değişecektir.

Vurgulu düğme arka plan rengi (vurgulu düğme rengi)

Bir ziyaretçinin faresi düğme üzerine geldiğinde, bu renk kullanılacaktır. Renk, önceki ayarlarda tanımlanan temel renkten değişecektir.

Vurgulu Kenarlık Rengi düğmesi (vurgulu kenarlık rengi)

Bir ziyaretçinin faresi düğme üzerine geldiğinde, bu renk kullanılacaktır. Renk, önceki ayarlarda tanımlanan temel renkten değişecektir.

Hover Sınır Yarıçapı Düğmesi

Bir ziyaretçinin faresi düğme üzerine geldiğinde bu değer kullanılacaktır. Değer, önceki ayarlarda tanımlanan temel değerden değişecektir.

İşaretli not aralığı düğmesi

Bir ziyaretçinin faresi düğme üzerine geldiğinde bu değer kullanılacaktır. Değer, önceki ayarlarda tanımlanan temel değerden değişecektir.

Gelişmiş tam genişlikte başlık 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.

modül başlığı divi bölümü advance.png

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 Divi tema seçeneklerini veya Divi Builder sayfa ayarlarını kullanarak sayfanıza veya web sitenize eklediğiniz özel CSS stil sayfasında kullanılabilir.

Ö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.

Diğer Divi öğreticiler

Bu makale yorumları 2 içeriyor

YORUM BIRAKIN

E-posta hesabınız yayımlanmayacak. Doldurulması zorunlu alanlar * ile işaretlenmiştir *

Bu site, istenmeyenleri azaltmak için Akismet'i kullanıyor. Yorum verilerinizin nasıl kullanıldığı hakkında daha fazla bilgi edinin..

Başa dönüş
8 hisseleri
hisse3
cıvıltı1
Enregistrer4