Duyarlı Akışkan Divi Modülü Nasıl Oluşturulur

Bir Divi modülü için tutarlı duyarlı tasarım uygulama sürecini daha da basitleştirmek için akışkan web tasarımı uygulamalarını uygulayabiliriz. Duyarlı tasarımın daha geleneksel yöntemlerinden farklı olarak, Akışkan web tasarımı kırılmaz veya farklı kesme noktalarında aniden farklı bir boyuta/stillere atlamaz. Tasarımın tüm cihazlarda tutarlı olmasını sağlayarak tasarımın akıcı bir şekilde ayarlanması (veya ölçeklenmesi) için görünüm alanı genişliğine göre duyarlı uzunluk birimleri içerir.

Bu eğitimde, size bir akışkan Divi modülünün nasıl oluşturulacağını göstereceğiz. Akışkan tipografisi ve/veya akışkan düğmeleri oluşturmak için benzer akışkan tasarım uygulamalarını kullanarak, tarayıcı görünüm penceresiyle sorunsuz bir şekilde ölçeklenecek bir akışkan Divi modülü oluşturacağız. Göreceğimiz gibi, gizli kombinasyon, modüle göreli (veya değişken) uzunluk birimine sahip bir kök gövde yazı tipi boyutu eklemek ve ardından modülün tamamına em uzunluk birimini (kök gövde yazı tipi boyutuna göredir) dahil etmektir. gerektiğinde ayarlar.

Başlayalım!

Gizlice Bakış

İşte bu eğitimde oluşturacağımız tasarıma hızlı bir bakış.

Ve işte bu akışkan modülü işlevselliğini gösteren bir kod kalemi.

Düzeni ÜCRETSİZ İndirin

Bu eğitimdeki tasarımlara el koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekecek. İ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!

Bölüm düzenini Divi Kitaplığınıza aktarmak için Divi Kitaplığına gidin.

İçe Aktar düğmesini tıklayın.

Taşınabilirlik açılır penceresinde, içe aktarma sekmesini seçin ve bilgisayarınızdan indirme dosyasını seçin.

Ardından içe aktar düğmesini tıklayın.

Tamamlandığında, bölüm düzeni Divi Builder'da mevcut olacaktır.

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.

Duyarlı Akışkan Divi Modülü Nasıl Oluşturulur

Sıra

Başlamak için, varsayılan normal bölümde yeni bir tek sütunlu satır oluşturun.

Satır ayarlarını açın ve aşağıdakileri güncelleyin:

• Özel Oluk Genişliğini Kullan: EVET
• Oluk Genişliği: 1
• Genişlik: otomatik
• Maksimum Genişlik: %100
• Dolgu: 5vw üst, 5vw alt

Bir Akışkan Harekete Geçirici Mesaj Modülü Tasarlama

Hemen hemen her Divi modülüne aynı akışkan tasarım teknikleri eklenebilse de, bu eğitim için Divi'nin eylem çağrı modüllerinden birine gidiyoruz.

Sütun/satır içine yeni bir eylem çağrısı modülü ekleyin.

İçerik ayarları

İçerik ayarları altında bir sahte düğme bağlantı URL'si ekleyin ve arka plan rengini aşağıdaki gibi güncelleyin:

• Düğme Bağlantı URL'si: #
• Arka Plan Rengi: #5e6472

Modüle Akışkan Köklü Yazı Tipi Boyutu Ekleme

Bir akışkan modülü tasarlarken, modüle bir akışkan kökü yazı tipi boyutu eklememiz gerekiyor. Modüle eklendikten sonra, bu kök yazı tipi boyutu, em uzunluk birimi kullanılarak modül tasarım ayarlarımızın geri kalanına dinamik olarak dahil edilecektir.

Modüle değişken kök yazı tipi boyutunu eklemek için gelişmiş sekmeye gidin ve Ana Öğeye aşağıdaki özel CSS'yi ekleyin:

font-size: clamp(16px, 2vw, 24px);

Bu yazı tipi boyutu için, minimum yazı tipi boyutunu, değişken yazı tipi boyutunu (gerektiğinde) ve maksimum yazı tipi boyutunu ayarlamak için CSS Clamp() işlevini kullanıyoruz.

Herhangi Bir Öğeyi Öntanımlı Aralıklı Em Uzunluk Birim Değerleriyle Geçersiz Kılma

Kesinlikle gerekli olmasa da, modül için gerçek bir akışkan tasarımı elde etmek için, modülün şu anda kullanmakta olduğu herhangi bir varsayılan (perde arkası) aralığı, o özellik için bir em uzunluk birim değeriyle geçersiz kılmamız gerekir. Bunları, tarayıcı geliştirme araçlarını kullanarak öğenizi inceleyerek tanımlayabilirsiniz. Bu durumda, harekete geçirici mesaj modülünün hem promosyon açıklamasında hem de promosyon başlığı öğesinde bir alt dolgusu vardır. Alt dolgu özelliği bir piksel (px) uzunluk birimi kullandığından, her birini ana öğeye yeni eklediğimiz kök gövde yazı tipi boyutunu içerecek bir em uzunluk birimiyle geçersiz kılmamız gerekiyor.

Tasarımın em Uzunluk Birimleri ile Güncellenmesi

Artık modül için değişken kök yazı tipi boyutumuz yerinde olduğuna göre, tek yapmamız gereken, em uzunluk birimlerini kullanarak modülün tasarımını güncellemek. em uzunluk birimi, kök yazı tipi boyutuna göre olduğundan, em uzunluk birimini kullanan herhangi bir tasarım, yazı tipi boyutunun akışkanlığını devralır ve gerektiğinde yazı tipi boyutuyla akıcı bir şekilde ölçeklenir.

Gövde metni

Daha önce eklediğimiz özel kök yazı tipi boyutu, gövde metni düşünülerek bilerek oluşturulmuştur. Bu nedenle gövde metnine, kök yazı tipi boyutunun tam değerini miras alan 1em değeri atayabiliriz. Ayrıca bir gövde çizgisi yüksekliği de ekleyebiliriz. Bunu yapmak için aşağıdakileri güncelleyin:

• Gövde Metni Boyutu: 1em
• Gövde Çizgisi Yüksekliği: 1.8em

Başlık Metni

Modülün başlık metni öğesi için, em uzunluk birimini kullanarak daha büyük bir boyut verebiliriz. Aşağıdakileri güncelleyin:

• Başlık Metin Boyutu: 1.7em
• Başlık Satırı Yüksekliği: 1.3em

Başlık metni boyutunun gerçekte ne olacağı hakkında size bir fikir vermek için, em uzunluk değerini kök yazı tipi değeriyle çarpmamız yeterlidir. Unutmayın, kök yazı tipi boyutu, bir min (16 piksel), değişken (2vw) ve maksimum (24 piksel) yazı tipi boyutu oluşturmak için kelepçe() kullanır. Bu nedenle, minimum başlık metni boyutu 27.2 piksele yakın olan 1,7 çarpı 16 piksel olacaktır. Değişken yazı tipi boyutu 1,7 kez 2vw (görüntü alanı genişliğinin %2'si) olacaktır. Ve maksimum yazı tipi boyutu, 69.36 piksele yakın olan 1,7 kez 24 piksel olacaktır.

Düğme Tasarımı

Modülün üçüncü elemanı butondur. Akışkan tasarımı da dahil etmek için em uzunluk birim değerlerini kullanarak düğmenin tasarım ayarlarını güncelleyebiliriz.
Aşağıdaki düğme ayarlarını güncelleyin:

• Düğme Metin Boyutu: 1.3em
• Düğme Kenar Genişliği: 0.12em
• Düğme Sınır Yarıçapı: 1.5em
• Düğme Harf Aralığı: 0.1em
• Düğme Dolgusu: 0.1em üst, 0.1em alt, 2em sol, 2em sağ

Boyut ve Aralık

Modülün bir akışkan boyutuna ve akışkan aralığına sahip olduğundan emin olmak için bu değerler için de em uzunluk birimleri kullanmamız gerekir.

Aşağıdaki boyutlandırma ve aralık ayarlarını güncelleyin:

• Maksimum Genişlik: 40em
• Minimum Yükseklik: 0vw
• Kenar boşluğu: 0,5em üst, 0,5em alt, otomatik sol, otomatik sağ
• Dolgu: 2.5em üst, 2.5em alt, 2em sol, 2em sağ

Sonuç

Şimdi canlı bir sayfada tarayıcı genişliğini ayarlarken akışkan modülümüzün sonucunu görelim.

CSS Izgarası ile Bir Satırda Birden Çok Akışkan Modülü Ekleme

Bir sıraya birden fazla bitişik akışkan modülü eklemek için akışkan modülü tasarımımızın herhangi bir ana kap genişliği ile sınırlandırılmadığından veya durdurulmadığından emin olmamız gerekir. Başka bir deyişle, modüllerimizin (sütun) ana kapsayıcısının, modülün boyutuna göre ölçeklenebilmesi için otomatik olarak ayarlanmasını istiyoruz. Bunu, her bir sütunun otomatik genişliğe sahip olduğu bir ızgaradaki modüllerin her birini ayarlamak için sütun düzeyinde CSS Izgarası kullanarak yapabiliriz.

Modül Boyutunu ve Aralığını Ayarlayın

Modüller için CSS Izgarası oluşturmadan önce, modülümüz için maksimum genişlik ve kenar boşluğunu iki modüllü iki sütunlu bir düzen için daha uygun bir boyuta ayarlamamız gerekiyor.

Modül için ayarları açın ve aşağıdakileri güncelleyin:

• Metin Hizalama: Sol
• Maksimum Genişlik: 24em
• Kenar boşluğu: 0,5em sol, 0,5em sağ

Modülü Çoğalt

Şimdi aynı sütunda başka bir modül oluşturmak için modülü çoğaltın.

Sütuna CSS Izgarası Ekle

Artık modüller için CSS Izgarası oluşturmak için sütuna özel CSS ekleyebiliriz.

Gelişmiş sekmesi altında, masaüstü görünümündeki Ana Öğeye aşağıdaki CSS'yi ekleyin:

display:grid;
grid-template-columns: auto auto;
justify-content:center;

Ardından, telefon görünümündeki Ana Öğeye aşağıdaki CSS'yi ekleyin:

display:grid;
grid-template-columns: auto;
justify-content:center;

Bu, iki modülü masaüstünde iki sütunlu bir ızgarada (her biri otomatik genişliğe sahip) ayarlayacaktır. Ardından telefonda modüller tek sütunlu (otomatik genişlik) bir ızgaraya dönecektir.

Sonuç

Şimdi sonucu kontrol edin.

Nihai sonuçlar

Akışkan modülü/modülleri tamamlandıktan sonra, yerleşik tasarım ayarlarını kullanarak modül stillerini özel yazı tipleri, renkler vb. vermek için güncelleyebilirsiniz.

İşte farklı bir yazı tipi, yazı tipi rengi, düğme rengi ve arka plan rengi kullanarak nihai sonuca bir bakış.

Son düşünceler

Bu öğreticide gördüğümüz gibi, bir Divi Modülüne akışkan tasarımı dahil etmek, belirli kesme noktalarında tasarımı güncelleme zahmetine girmeden modülün tüm tarayıcı boyutlarında güzel ve tutarlı görünmesini sağlamak için uygun bir yol olabilir.

Akışkan tipografi ve akışkan Divi düğmeleri oluşturma kılavuzumuz da dahil olmak üzere akışkan tasarımı hakkındaki diğer makalelerimize göz atmayı unutmayın.

Yorumlarda sizden haber bekliyorum.

Şerefe!