Divi'de Benzersiz Düğme Düzenleri Oluşturmak için Düğmeleri Kesinlikle Konumlandırma

Divi'nin yerleşik konum seçenekleri, düğmeler de dahil olmak üzere herhangi bir Divi öğesinin hassas konumlandırılması için uygun bir tasarım aracıdır. Çoğu zaman, belgenin (veya sayfanın) akışını koruyan bir düğmenin varsayılan statik konumuna güveniriz. Ancak butonları kesinlikle nasıl konumlandıracağımızı bilirsek Divi içeriğimiz için bazı benzersiz ve pratik buton düzenleri oluşturabiliriz.

Bu eğitimde, Divi's Blurb modülünü benzersiz bir şekilde vurgulayacak 4 farklı düğme düzeninin nasıl oluşturulacağını göstereceğiz. Bu, web sitenizde tanıtım yazısı kullanırken kullanışlı olacaktır.

Başlayalım.

Gizlice Bakış

Bu eğitimde oluşturacağımız dört düğme düzenine bu hızlı bakışa göz atın.

ÜCRETSİZ Divi Düğme Düzenlerini İndirin

Bu öğreticideki düğme düzeni tasarımlarına el koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekir. İndirmeye erişmek için aşağıdaki formu kullanarak Divi Daily e-posta listemize abone olmanız gerekir. Yeni bir abone olarak, her Pazartesi daha da fazla Divi iyiliği ve ücretsiz bir Divi Düzen paketi alacaksınız! Zaten listedeyseniz, aşağıya e-posta adresinizi girin ve indir'i tıklayın. "Yeniden abone olmayacaksınız" veya fazladan e-posta almayacaksınız.

Dosyaları İndirin

Ücretsiz İndir

Divi Bültenine katılın ve size nihai Divi Açılış Sayfası Düzen Paketinin bir kopyasını ve ayrıca tonlarca başka şaşırtıcı ve ücretsiz Divi kaynağı, ipucu ve püf noktası e-posta ile gönderelim. Takip edin ve kısa sürede bir Divi ustası olacaksınız. Zaten aboneyseniz, e-posta adresinizi aşağıya yazın ve düzen paketine erişmek için indir'i tıklayın.

İNDİRMEK

Başarıyla abone oldunuz. Aboneliğinizi onaylamak ve haftalık ücretsiz Divi düzen paketlerine erişmek için lütfen e-posta adresinizi kontrol edin!

Düzeni sayfanıza aktarmak için zip dosyasını çıkarmanız ve JSON dosyasını Divi Builder'a sürüklemeniz yeterlidir.

Hadi öğreticiye geçelim, olur mu?

Başlamak için Gerekenler

Başlamak için aşağıdakileri yapmanız gerekir:

1. Henüz yapmadıysanız Divi Temasını kurun ve etkinleştirin.
2. WordPress'te yeni bir sayfa oluşturun ve sayfayı ön uçta düzenlemek için Divi Builder'ı kullanın (görsel oluşturucu).
3. “Sıfırdan Oluştur” seçeneğini seçin.

Bundan sonra Divi'de tasarlamaya başlamak için boş bir tuvaliniz olacak.

Düğme Düzeni Oluşturma #1: İkili Alt Düğmeler

Dört düğme düzenimizden ilki için, bir tanıtıcı modül altında ikili alt düğmeler oluşturacağız. Bu, iki CTA gerektiren içeriği (hizmetler gibi) öne çıkarmak için harika bir seçenektir. Ayrıca, bu, düğmelerinizi eşit yükseklikteki sütunların altında sıkışmış halde tutmanın harika bir yoludur.

Başlamak için bölüme iki sütunlu (0 bir buçuk yarım) satır ekleyin.

Satır Ayarları

• Özel Oluk Genişliğini Kullan: EVET
• Oluk Genişliği: 2
• Sütun Yüksekliklerini Eşitle: EVET
• Genişlik: %100
• Kenar boşluğu: 50 piksel alt
• Dolgu: 0 piksel üst, 0 piksel alt

Sütun 1 Ayarları

• Arka Plan Rengi: #2e3858
• Dolgu: 50 piksel alt

Bu alt dolgu, kesinlikle konumlandırılmış düğmeleri eklediğimizde gerekli alanı yaratacaktır.

Blurb Modülü Tasarımı

Ardından, sütun 1'e bir tanıtıcı modül ekleyin.

Ardından, tanıtım yazısı modülüne aşağıdaki gibi bir resim yükleyin:

Tasarım ayarlarına gidin ve aşağıdakileri güncelleyin:

• Görüntü/Simge Hizalama: Sol
• Başlık Yazı Tipi: PT Sans
• Başlık Yazı Tipi Ağırlığı: Kalın
• Başlık Metin Rengi: #ffffff
• Başlık Metin Boyutu: 38px
• Başlık Harf Aralığı: 2px
• Gövde Metni Rengi: #ffffff
• Görüntü Genişliği: %40
• İçerik Genişliği: %100
• Genişlik: %100
• Dolgu: 50 piksel, üst, 50 piksel alt, 30 piksel sol, 30 piksel sağ

Çift Alt Düğmeleri Ekleme

Düğme #1 Tasarım

Tanımlama modülünün altına yeni bir düğme modülü ekleyin.

Ardından düğme ayarlarını aşağıdaki gibi güncelleyin:

• Düğme Metin Boyutu: 16px
• Düğme Metin Rengi: #ffffff
• Düğme Arka Plan Rengi: #2dc3a3
• Düğme Kenar Genişliği: 0px
• Düğme Sınır Yarıçapı: 0px
• Düğme Harf Aralığı: 2px
• Düğme Yazı Tipi: PT Sans
• Düğme Yazı Ağırlığı: Kalın
• Düğme Yazı Tipi Stili: TT
• Kenar boşluğu: 0 piksel alt
• Dolgu: 1em üst, 1em alt, 1.5em sol, 2.5em sağ

Düğme #1 Mutlak Konumlandırma

Düğmeyi kesinlikle sütunun sol alt kısmına yerleştirmek için aşağıdakileri güncelleyin:

• Pozisyon: Mutlak
• Konum: sol alt

Divi, yerleşik tıklanabilir konum kılavuzuyla bunu kolaylaştırır. Düğmenin sütunun altına aynı hizada oturmasını istediğimiz için ofset değerlerine gerek yoktur.

Düğme #2 Tasarım ve Konum

2 numaralı düğmeyi oluşturmak için önceki düğme modülünü çoğaltın.

Kopya, doğrudan önceki düğmenin üzerine yığılacaktır, bu nedenle görsel oluşturucuyu kullanıyorsanız hiçbir şey olmamış gibi görünebilir. Düğme modülünün ayarlarını açmak ve aşağıdakileri güncellemek için tıklayın:

• Arka Plan Rengi: #df4570

• Konum Konum: Sağ Alt

Şimdi, sağ sütunda da tam bir yinelenen tasarım elde etmek için şu anda boş olan sütun 2'yi ve yinelenen sütun 1'i silin.

Düğme Düzeni #1 Sonuç

Sonucu kontrol edin. Sağ sütundaki içeriğin sütunu sayfanın daha aşağılarına ittiğine dikkat edin, ancak butonlarımız mutlak olarak konumlandırıldığından, güzel bir simetrik tasarım için alta sarılmaya devam ediyorlar.

Düğme Düzeni Oluşturma #2: Üç Yan Düğme

Bir sonraki düğme düzeni için, bir tanıtım modülünün sağına üç düğmeyi tek bir sütunda konumlandıracağız.

Bu sonraki düğme düzeni tasarımını hızlı bir şekilde başlatmak için önceki satırı çoğaltın.

Bulanıklık Ayarları

Tanımlama bilgilerini aşağıdaki gibi güncelleyin:

• Arka Plan Rengi: #df4570
• Görüntü Genişliği: %60
• Genişlik: %56 (masaüstü ve tablet), %100 (telefon)

Bu, üç düğmeli düzenimizi eklemek için tanıtım yazısının sağında ihtiyacımız olan odayı yaratacaktır.

Konumlandırma Düğmesi #1

Düğme 1'i konumlandırmak için, sol alt köşedeki yeşil düğmenin düğme ayarlarını açın ve aşağıdakileri güncelleyin:

• Konum: Mutlak (masaüstü ve tablet), Akraba (telefon)
• Konum: Sağ Üst
• Dikey Ofset: %20 (masaüstü ve tablet), %0 (telefon)
• Yatay Ofset: %5 (masaüstü ve tablet), %0 (telefon)

Konumlandırma Düğmesi #2

2 numaralı düğmeyi konumlandırmak için, az önce yerleştirdiğiniz düğmeyi çoğaltın. İhtiyacımız olmayacağı için sağ alttaki kırmızı butonu silebilirsiniz.

Ardından, çoğalt düğmesinin ayarlarını açın ve aşağıdakileri güncelleyin:

• Arka Plan Rengi: #df4570

Ardından dikey ofseti artırarak düğmeyi biraz aşağı hareket ettirin.

• Dikey Ofset: %35

Konumlandırma Düğmesi #3

Son olarak, önceki düğmeyi çoğaltarak ve aşağıdakileri güncelleyerek işlemi bir kez daha tekrarlayın:

• Arka Plan Rengi: #3599e5
• Dikey Ofset: %50

Düğme Düzeni #2 Sonuç

Üç düğmeli düzenin nihai sonucunu kontrol edin.

Düğme Düzeni #3 Oluşturma: Dağınık ve Ölçekli Düğmeler

Bu sonraki düzen için, düğmeleri biraz daha düzensiz konumlandıracağız ve ardından dönüştürme ölçeğini kullanarak birkaç düğmenin boyutunu ayarlayacağız.

Başlamak için, üç düğmeli düzeni içeren önceki satırı çoğaltın.

Bulanıklık Ayarları

Ardından, 1. sütundaki tanıtım yazısı modülünün ayarlarını açın ve aşağıdakileri güncelleyin:

• Genişlik: %60

• Arka Plan Rengi: Şeffaf
• Genişlik: %60
• Modül Hizalaması: Merkez

• Metin Hizalama: orta
• Modül Hizalaması: merkez

• Kenar Genişliği: 2px
• Kenar Rengi: rgba(255,255,255,0.15)

• Metin Metin Boyutu: 20px

• Kenar boşluğu: 50 piksel üst

Düğme #1 Konumlandırma

• Dikey Ofset: %8
• Yatay Ofset: -7%

Düğme #2 Konumlandırma

• Konum Konum: Sağ üst
• Dikey Ofset: %34
• Yatay Ofset: -%10

• Dönüşüm Ölçeği: %80

Düğme #3 Konumlandırma

• Konum Konum: sağ alt
• Dikey Ofset: -3%
• Yatay Ofset: %5

• Dönüşüm Ölçeği: %138

Satır Ayarları

• Oluk Genişliği: 4
• Genişlik: %80 (masaüstü)

Düğme Düzeni #3 Sonuç

Nihai sonucu kontrol edin.

Düğme Düzeni #4 Oluşturma: Çekme Sekmesi Düğmeleri

Bu son düğme düzeni için, tanıtım yazısının sağ üst kısmında bazı çekme sekmeleri oluşturacağız.

Tasarımı hızlı başlatmak için, 2 numaralı düğme düzeni satırını çoğaltın.

Sütun Ayarları

Ardından, 1. sütun için arka plan ayarlarını aşağıdaki gibi güncelleyin:

• Arka Plan Rengi (masaüstü): yok (varsayılan)
• Arka Plan Rengi (telefon): #2e3858

Gelişmiş sekmesi altında, görünürlük seçeneğini, taşmanın telefon ekranında gizlenmesi için güncelleyin.

• Yatay Taşma (telefon): Gizli
• Dikey Taşma (telefon): Gizli

Konum Çekme Dili Düğmesi #1

Şimdi şu anda sütunda bulunan üç düğmeyi çekme sekmesi düğmelerimiz olarak kullanabiliriz. Üst düğmenin ayarlarını açın ve aşağıdakileri güncelleyin:

• Dikey Ofset: 0px
• Yatay Ofset: 0px

Bir sekme için düğmeyi kullanacağımızdan, sağdaki simgeye yer açmamız gerekiyor, böylece tanıtım modülünün arkasından dışarı çıktığında ortalanmış görünecek. Devam edin ve düğme dolgusunu aşağıdaki gibi güncelleyin:

• Dolgu: 2em sol, 3em sağ

Ardından, After öğesine aşağıdaki özel CSS'yi ekleyin:

padding-left: 10px;

Ardından telefondaki yatay ofseti aşağıdaki gibi güncelleyin:

• Yatay Ofset (telefon): -134 piksel

Bu, düğmenin sol tarafını telefon ekranındaki sütunun dışında gizler, böylece tam düğme üzerine gelindiğinde/tıklandığında gösterilecektir.

Konumlandırma Çekme Dili Düğmesi #2

İkinci çekme düğmesini konumlandırmak için önceki düğmeyi çoğaltın ve kopyanın arka plan rengini güncelleyin.

• Arka Plan Rengi: #df4570

Ardından, konumu aşağıdaki gibi güncelleyin:

• Dikey Ofset: 63px

Ardından telefon ekranı için aşağıdaki konum seçeneklerini güncelleyin:

• Pozisyon (telefon): Göreceli
• Dikey Ofset (telefon): %0

Konumlandırma çekme tırnağı Düğme #3

Son olarak, üçüncü çekme tırnağı düğmesini konumlandırmak için önceki düğme modülünü çoğaltın. Ardından, yinelenen düğme modülünün ayarlarını açın ve aşağıdakileri güncelleyin:

• Arka Plan Rengi: #3599e5
• Dikey Ofset: 126px

Üçüncü düğme yerine yerleştirildiğinde, Cmd (veya Ctrl) tuşunu basılı tutup düğme modüllerinin her birine tıklayarak Divi'nin çoklu seçim özelliğini kullanın.

Ardından, düğme modüllerinden birinin ayarlarını açın ve fareyle üzerine gelindiğinde aşağıdaki dönüşüm çevirisini ekleyin.

• Dönüştürme X Eksenini Çevir (fareyle üzerine gelme): %68

Bu, üç düğmeyi de, fareyle üzerine gelindiğinde %68 oranında sağa hareket ettirerek çekme sekmesi işleviyle güncelleyecektir.

Blurb Modülü Konumlandırma

Bu düğme düzeni, tanıtım yazısı modülünün üç düğmeyi kısmen gizlemesini gerektirir. Bu nedenle, tanıtım yazısına %100 genişlik vereceğiz ve ardından düğme sekmelerinin gerekli parçasını ortaya çıkarmak için sağ kenar boşluğunu kullanacağız. O zaman tek yapmamız gereken, düğmelerin üzerinde oturduğundan emin olmak için tanıtım yazısına yüksek bir Z İndeksi vermek.

Tanımlama modülü ayarlarını açın ve aşağıdakileri güncelleyin:

• Genişlik: otomatik
• Kenar boşluğu: 50 piksel sağ
• pozisyon: akraba
• Z İndeksi: 11

Ardından arka plan rengini güncelleyin.

• Arka Plan Rengi: #2e3858

Satır Ayarları

Açıklama ve çekme sekmesi düğmeleri tamamlandıktan sonra, satır ayarlarını açın ve bu sekmelere hareket edebilecekleri bir alan sağlamak için genişliği güncelleyin.

• Genişlik: %80

2. sütunu silin ve ardından 1. sütunu çoğaltın, böylece her birinde aynı tasarıma sahip olursunuz.

Ardından, sütun 1 için ayarları açın ve ona aşağıdaki Z İndeksini verin:

• Z İndeksi: 12

Bu, birinci sütundaki düğmelerin, fareyle üzerine gelindiğinde sütun 2'deki içeriğin arkasına gizlenmemesini sağlayacaktır.

İsterseniz, her bir düğmenin simgelerini ihtiyaçlarınıza göre güncelleyebilirsiniz.

Düğme Düzeni #4 Sonuç

Çekme tırnağı düğmesi düzeninin nihai sonucunu kontrol edin.

Nihai sonuçlar

Son düşünceler

Konumlandırma düğmeleri, Divi'deki sonsuz düğme düzenlerinin kapısını kesinlikle açar. Umarım bu eğitim, Divi'deki mutlak konumu en iyi nasıl kullanacağınızı anlamanıza yardımcı olur. Dönüştürme seçenekleri ve Z indeksi gibi diğer kullanışlı yerleşik özellikler, tasarımın kesinlikle konumlandırılmış düğmeler olmasını sağlar.

Yorumlarda sizden haber bekliyorum.

Şerefe!