Ana İçeriğe Geç

Divi öğreticisi: Bağlantı modülünü kullanma (Giriş)

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]

Oturum açma modülü (oturum açma), sayfanızın herhangi bir yerinde bir WordPress oturum açma formu, Divi stili görüntüler. WordPress'i bir üye alanıyla kullanıyorsanız, doğrudan bir sayfaya bir giriş formu eklemek çok yararlı olabilir (insanları temanızın farklı bir stilini kullanan WordPress giriş formuna yönlendirmek yerine).

giriş sayfası divi wordpress.png öğretici

Sayfanıza giriş modülü nasıl eklenir

Sayfanıza bir bağlantı 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 Visual Builder'ı kullan WordPress panonuza bağlıysanız, web sitenizi ön planda tuttuğunuzda.

divi oluşturucu

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ül divi.png bağlamak

Modül listesinde oturum açma modülünü bulun ve sayfanıza eklemek için üzerine tıklayın. Modül listesi aranabilir, bu da bağlantı modülünü otomatik olarak bulup eklemek için "Bağlan" kelimesini yazıp ardından "Gir" düğmesini tıklayabileceğiniz anlamına gelir! 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: Bir üyenin alan oturum açma sayfasına özel bir oturum açma formu ekleyin

Üyelik siteleri, kullanıcının içeriğin bir kısmına veya tamamına giriş yapmasını gerektirdiğinden, oturum açma modülü, kendi oturum açma sayfanıza bir oturum açma formu eklemeyi kolaylaştırır. Ayrıca, kullanıcıları varsayılan WordPress giriş sayfası yerine bu forma yönlendirmeyi seçebilirsiniz.

Giriş modülü ile basit bir giriş sayfası İşte size nasıl oluşturulacağını göstereceğim:

blogpascher.png adresine bağlan

Visual Builder'ı kullanarak üyelik oturum açma sayfasına tam genişlikte bir satır (1 sütun) içeren yeni bir standart bölüm ekleyin. Ardından bağlantı modülünü hatta takın.

modül divi.png bağlamak

Bağlantı ayarlarını aşağıdaki gibi güncelleyin:

İçerik seçenekleri

Başlık: Bağlantı
İçerik: [kısa bir kurs açıklaması veya giriş yapmak için talimatlar girin] Mevcut sayfaya yönlendir:

Tasarım seçenekleri

Alan arka plan rengi: # f0f0f0 Metin rengi: Koyu Başlık yazı tipi: 35px Başlık rengi: # 888888 Gövde yazı tipi boyutu: 16px Kenarlık: Evet Kenarlık rengi: # 0c71c3 Kenarlık genişliği: 1px Özel dolgu: 50px Üst, 50px Sağ, 50px Alt, 50px sol Düğme için özel stilleri kullan: EVET Düğme metni boyutu: 26px Düğme metni rengi: #ffffff Düğme rengi: # 0c71c3 düğmesi: 0px Yazı tipi düğmesi: varsayılan, büyük harf Düğme ekle simgesi: EVET Düğme simgesi: Düğmenin üzerine geldiğinizde yalnızca simgeyi görüntüleyin: HAYIR

giriş sayfası örneği divi.jpg

Bu kadar. Üyenin alan sitesi artık, kullanıcıların kursa giriş yapmaları gerektiğinde yeniden yönlendirilecekleri kişiselleştirilmiş bir giriş formuna sahiptir. Varsayılan WordPress giriş formu ile yetinmenize gerek yok.

blogpascher giriş sayfası.png

Bağlantı modülü 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 seçenek modülü connection.png

Başlık

Başlık, giriş formunun üstünde, giriş kutusunda görünecektir.

içindekiler

İçerik, başlığın altındaki giriş kutusunda görüntülenecektir. Ek bir açıklama eklemek isterseniz alanı kullanabilirsiniz. Aksi takdirde boş bırakın.

Geçerli sayfaya yönlendir

Burada, kullanıcının mevcut sayfaya yeniden yönlendirilip yönlendirilmeyeceğini seçebilirsiniz.

Arka plan rengini kullan

Giriş formunuza düz bir arka plan rengi vermek istiyorsanız, bu seçenek için “evet” seçeneğini seçin ve bir sonraki seçenekte seçtiğiniz arka plan rengi kullanılacaktır.

Arka plan rengi

Oturum açma kutunuzun arka planı olarak görüntülenecek bir arka plan rengi seçin. Önceki seçenekte arka plan renklerini kapatmayı seçerseniz, bu rengin hiçbir etkisi olmayacaktır.

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.

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]

Giriş modülü için stil 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.

seçenek tasarım modülü connection.png

Form alanı arka plan rengi

Giriş formu, kullanıcı adı ve şifre için iki giriş alanı içerir. Bu alanların arka plan rengini ayarlamak için bu ayarı kullanabilirsiniz.

Form alanının metin rengi

Giriş formu, kullanıcı adı ve şifre için iki giriş alanı içerir. Bu alanların metin rengini ayarlamak için bu ayarı kullanabilirsiniz. Form alanının arka plan rengini ayarladıysanız, düzgün bir renk ilişkisi sağlamak için metin rengini de ayarlayabilirsiniz.

Arka plan rengi

Bir giriş alanı ziyaretçinin faresiyle odaklandığında, renkler hangi alanın etkin olduğunu açıkça belirtmek için değişir. Burada odaklanmış alanların arka plan rengini tanımlayabilirsiniz.

Odak rengi

Bir giriş alanı ziyaretçinin faresiyle odaklandığında, renkler hangi alanın etkin olduğunu açıkça belirtmek için değişir. Burada odaklanmış alanların metin rengini tanımlayabilirsiniz.

Odak kenarlık rengini kullan

Odaklandıklarında giriş alanlarına kenarlık eklemek istiyorsanız, bu seçeneği etkinleştirebilirsiniz.

Odak sınırın rengi

Bu ayarı kullanarak, odaklanmış giriş alanlarında görünen kenarlığın rengini değiştirebilirsiniz.

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.

Metin oryantasyonu

Burada metninizin hizalamasını ayarlayabilirsiniz.

Üstbilgi 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.

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

Üstbilgi 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.

Üstbilgi Metin Rengi

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

Başlık harf 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şlık Satır 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.

Vücut yazı tipi

Açılır menüden istediğiniz yazı tipini seçerek gövde yazı tipinizi 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.

Vücut yazı tipi boyutu

Burada gövde metin 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.

Gövde metni rengi

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

Vücut harflerinin aralığı

Harf aralığı, her harf arasındaki boşluğu etkiler. 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.

Vücut hattı yüksekliği

Satır yüksekliği, vücudunuzdaki her metin 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.

Sınırı kullan

Bu seçeneğin etkinleştirilmesi, modülünüzün etrafına bir sınır koyacaktır. Bu sınır, aşağıdaki koşullu parametreler kullanılarak özelleştirilebilir.

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]

sınır alan modülü divi.png

Sınırın rengi

Bu seçenek, kenarlığınızın rengini etkiler. Kenarlığınıza uygulamak için renk seçiciden özel bir renk seçin.

Sınırın genişliği

Varsayılan olarak kenarlıklar 1 piksel genişliğindedir. Aralık kaydırıcısını sürükleyerek veya kaydırıcının sağındaki giriş alanına özel bir değer girerek bu değeri artırabilirsiniz. Özel ölçü birimleri desteklenir; bu, varsayılan birimi "px" yerine em, vh, vw vb. gibi başka bir şeye değiştirebileceğiniz anlamına gelir.

Sınır tarzı

Kenarlıklar sekiz farklı stili destekler: düz, noktalı, noktalı, çift, oluk, sırt, kaplama ve başlangıç. Kenarlığınıza uygulamak için açılır menüden istediğiniz stili seçin.

Özel marj

Kenar boşluğu, modülünüzün dışına, modül ile üstündeki, altındaki veya solundaki ve sağındaki sonraki öğe arasına eklenen boşluktur. Modülün dört kenarından herhangi birine özel kenar boşluğu değerleri ekleyebilirsiniz. Özel marjı kaldırmak için, giriş alanından katma değeri kaldırın. Varsayılan olarak, bu değerler piksel cinsinden ölçülür, ancak giriş alanlarına özel ölçü birimleri girebilirsiniz.

özel margin.png

Özel dolgu

Dolgu, modülünüzün içine, modülün kenarı ile iç öğeleri arasına eklenen boşluktur. Modülün dört kenarından herhangi birine özel dolgu değerleri ekleyebilirsiniz. Özel marjı kaldırmak için, giriş alanından katma değeri kaldırın. Varsayılan olarak, bu değerler piksel cinsinden ölçülür, ancak giriş alanlarına özel ölçü birimleri girebilirsiniz.

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.

divi module connection.png düğmelerini kullanarak

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

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

Renk Vurgulu Kenarlık Düğmesi

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.

Login modülünün gelişmiş 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.

giriş modülü

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

  1. Bonjour.

    Mükemmel bir makale.
    Ancak, giriş formumda, resminizde gördüğüm gibi bir sorun var: "Kullanıcı adı" ve bu alanı kişiselleştirmek istiyorum çünkü her şeyi berbat ettiğini düşünüyorum. Nasıl yapabilirim ?

    sağol

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üş
12 hisseleri
hisse6
cıvıltı1
Enregistrer5