Divi'de Dairesel Öğeler Tasarlamak İçin Yararlı Bir Kılavuz
Yayınlanan: 2019-05-01Arada bir, bir web sitesi tasarımı bazı dairesel öğeler gerektirir. Bir web sayfasındaki standart kutu tasarımlarının monotonluğundan kurtulmanın güzel bir yolu. Dairesel öğeler oluşturmak kulağa basit gelebilir (ve aslında öyle!), ancak birkaç temel kurala aşina değilseniz, oldukça sinir bozucu olabilecek birkaç gereksiz engelle karşılaşabilirsiniz.
Örneğin, içeriği doğru boşlukla daire şeklindeki bir öğenin içine hizalamak ve sığdırmak bazen zordur. Veya çevreyi mobil cihazlar için duyarlı hale getirmeyi zor bulabilirsiniz. Bu nedenle bazıları bunun yerine içerik için dairesel bir görüntü arka planı kullanmaya başvurdu. Ancak özel bir görüntü arka planı kullanmak istemiyorsanız, bir sonraki en iyi seçeneğiniz CSS kullanmaktır. İyi haber şu ki Divi, dairesel öğeler yapmak için kendi özel CSS'nizi bulma ihtiyacını ortadan kaldırarak süreci çok daha kolay hale getiriyor. Yani, Divi'de bir öğeye daire şekli vermek istediyseniz, bu yazı tam size göre.
Bu öğreticide, Divi'de dairesel öğelerin (bölümler, satırlar ve modüller dahil) nasıl oluşturulacağının temelleri konusunda size yol göstereceğim. Sonra size bu teknikleri önceden hazırlanmış bir düzende uygulamanın ne kadar kolay olduğunu göstereceğim.
Bunu kontrol et!
Gizlice Bakış
Örnek Dairesel Eleman Düzenini ÜCRETSİZ olarak indirin
Bu öğreticide tasarlanan örnek dairesel öğelere el atmak 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.
Ü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.
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ı çıkarın ve json dosyasını Divi Builder'a sürükleyin.
Hadi öğreticiye geçelim mi?
Başlamak için Gerekenler
Başlamak için Divi'de yeni bir sayfa oluşturun. Ardından sayfanıza bir başlık verin ve Divi oluşturucuyu ön uçta dağıtın. "Sıfırdan inşa et" seçeneğini seçin.
Ayrıca biraz sonra sayfamıza önceden hazırlanmış bir düzen ekleyeceğiz, ancak şimdilik sıfırdan oluşturmaya başlayabiliriz.
Artık gitmeye hazırsınız!
Dairesel Bir Öğe Oluşturmanın Üç Temel Adımı
Dairesel bir öğe oluşturmak için gerçekten üç basit adım vardır. Bu adımları göstermek için, bu adımları Divi Builder'ı kullanarak bir Harekete Geçirici Mesaj Modülüne uygulayacağım.
Adım 1: Öğeyi eşit yükseklik ve genişlik değerleriyle boyutlandırın
İlk adım, yüksekliği ve genişliği aynı eşit değere ayarlamaktır. Temel olarak, elemanı mükemmel bir daire yapmadan önce tam kare yapmak istiyoruz. Bu örnekte, harekete geçirme modülüne 10vw yükseklik ve genişlik verelim.
Adım 2: Dört köşenin tümü için %50 Kenarlık yarıçapı ekleyin
İkinci adım, öğenin (veya modülün) kenar yarıçapını dört köşede de %50'ye ayarlamaktır. Divi'de "Yuvarlak Köşeler" seçeneği altında bir elemanın kenarlık yarıçapını değiştirebilirsiniz.
3. Adım: İçeriği dairesel öğe içinde hizalayın
Üçüncü adım, dairesel elemanın içeriğini hizalamaktır. Bunu, elemanın dolgusunu ayarlayarak yapabiliriz. (Ayrıca, bu yazının ilerleyen bölümlerinde içeriği dikey olarak ortalamak için esnek kullanmanın bir yolunu ele alıyorum)
Bu örnekte, içeriğimizi dairesel elemanın merkezine yaklaştırmak için aşağıdaki dolguyu ekleyebiliriz:
Özel Dolgu: 18vw üst, 3vw sol, 3vw sağ
Elbette, metnin/içeriğin mobil cihazlarda dairesel öğenin içine sığdığından emin olmak için yapılması gerekebilecek ayarlamalar var, ancak bu, temel kurulumu kapsıyor.
Dairesel öğemi boyutlandırmak ve boşluk bırakmak için vw uzunluk birimini kullandığımı fark edebilirsiniz. Bu, daha tutarlı bir duyarlı tasarım oluşturmak için yararlıdır. Açıklayacağım.
Dairesel Elemanları Duyarlı Hale Getirmek için Göreli Uzunluk Birimlerini Kullanma
Yükseklik ve genişlik için VW uzunluk birimini kullanma
Tüm göreli uzunluk birimleri arasında vw uzunluk birimi, duyarlı tasarım için favorilerimden biridir. vw uzunluk birimi, tarayıcı penceresinin genişliğine (ana öğeye değil) göreli olduğundan, tarayıcı penceresi boyutuyla sorunsuz bir şekilde uyum sağlayan tutarlı bir tasarım elde edebilirsiniz.
Tarayıcı genişliğini küçültürken örnek dairesel harekete geçirici mesaj modülümüzün nasıl göründüğüne bir göz atalım.
Dairesel eleman içeriği için VW uzunluk birimini kullanma
Dairesel öğe boyutu ve içeriği için vw uzunluk birimini kullanmak, duyarlı tasarım için iyi bir kombinasyondur. Temel olarak bu, tüm tarayıcılarda tutarlı bir tasarım için içeriğin (metin veya resimler gibi) daire öğesinin boyutuyla sorunsuz bir şekilde ayarlanmasını sağlar. Ancak, metin mobilde çok küçük olabileceğinden, gövde metni için vw uzunluk birimini kullanırken dikkatli olmanız gerekir. Başlıklar için vw uzunluk birimini kullanmayı ve ardından gövde metninin boyutunu gerektiği gibi piksellerle ayarlamayı seviyorum.
Ayrıca, telefon ekranında dairesel eleman tasarımını korumayı planlıyorsanız, içeriğinizi minimumda tutmanız ve maksimum alan için dairesel elemanın boyutunu ayarlamanız gerekecektir.
Mevcut örneğimizi kullanarak, Başlık metninize bir vw uzunluk değeri verebilir ve ardından modülü mobilde aşağıdaki gibi yeniden boyutlandırabilirsiniz:
Başlık Metin Boyutu: 4vw
Genişlik (telefon): 70vw
Yükseklik (telefon: 70vw
Gördüğünüz gibi, tüm içerik artık telefon ekranındaki dairesel öğenin içinde güzel bir şekilde oturuyor.
Pikseller ne olacak?
Dairenizi boyutlandırmak için mutlak uzunluk birimleri (piksel gibi) kullanmak istiyorsanız, bu gayet iyi. Dairesel öğenin tarayıcı penceresine sığdığından emin olmak için tablet ve telefon ekranı için her kesme noktasında gerekli boyut ayarlamalarını yapmanız ve yapmanız yeterlidir. Bazı durumlarda, tablet ve telefon ekranlarında boyutlandırmanızı tam olarak (veya daha kesin) elde etmek için pikselleri kullanmak daha kolay olabilir.
Örneğin, aynı eylem çağrısı modülünü alalım ve modülümüzü boyutlandırmak ve yerleştirmek için pikselleri (vw yerine) kullanalım.
Yüksekliği, genişliği ve dolguyu aşağıdaki gibi güncelleyebilirsiniz:
Genişlik: 500 piksel
Yükseklik: 500 piksel
Özel Dolgu: 200 piksel üst, 20 piksel sol, 20 piksel sağ
Bu tasarım masaüstünde benzer görünecek, ancak dairesel öğeyi telefon ekranında her görüntülediğinizde sorun ortaya çıkıyor. Dairesel eleman pikseller (mutlak uzunluk birimi) kullanılarak boyutlandırıldığından, dairesel eleman telefon ekranında kapsayıcının ve tarayıcının dışına taşacaktır.
Bu nedenle mobil ekranlarda genişlik ve dolgu piksel değerlerinin ayarlanması önemlidir. Örneğin, bunun yerine genişlik ve yüksekliği 300 piksel olarak değiştirmeniz gerekebilir.
% uzunluk birimi neden dairesel öğeleri boyutlandırmak için gerçekten iyi çalışmıyor?
Dairesel öğeler için daha duyarlı bir çözüm istiyorsanız, yüzde kullanmanın cevap olduğunu düşünebilirsiniz. Ancak, bir web sayfasındaki öğeleri boyutlandırırken, yükseklik için uzunluk yüzde birimi, genişlik için yüzde uzunluk birimiyle aynı şekilde çalışmaz. Bunun nedeni, öğelerin varsayılan yüksekliğinin genellikle varsayılana bırakılmasıdır (yükseklik: otomatik). Örneğin, bir Divi Modülüne %100 yükseklik vermeyi deniyorsanız, ana kapların (sütun, satır, bölüm, vb.) tümü yükseklik için tanımsız bir değere sahip olduğundan modül ayarlanmayacaktır. Tarayıcı temelde modülü hiçbir şeyin %100'üne ayarlamaya çalışmıyor (ki bunu yapamaz). Genişlik için durum böyle değil. Herhangi bir blok öğesinin (veya div) varsayılan genişliği %100'dür. Bu nedenle, ayarlar tarafından değiştirilmediği sürece tüm bölümler, satırlar ve modüller bu varsayılan %100 genişliğe sahiptir. Bu nedenle, duyarlı bir dairesel öğe oluşturmaya çalışırken % uzunluk birimi en iyi seçenek değildir. Dairesel öğenin tüm tarayıcı boyutlarında aynı yüksekliğe ve genişliğe sahip olması gerekir, bu nedenle yükseklik için bir yüzde uzunluk birimi kullanarak bunu başarmak zordur. Ancak, üst öğelere uygulanan daha özel CSS ile %100 yükseklik ve genişlik çalışması yapmanın yolları vardır. Ancak Divi'de dairesel öğeler yapmak için vw uzunluk birimiyle çalışmayı daha kolay bulabilirsiniz.
İçeriği Dairesel Bir Öğe İçinde Hizalama
İçeriği dairesel bir öğe içinde hizalamak istiyorsanız, Divi kullanırken gerçekten basit olduğunu düşündüğüm iki seçeneğiniz var. İçeriği hizalamak için dolguyu kullanabilirsiniz; bu, içeriğin daire öğesi içinde nerede görüntülenmesini istediğiniz konusunda size daha fazla kontrol sağlar. Veya içeriğin doğrudan dairenin merkezinde görüntülendiğinden emin olmak için flex özelliğini (dolgulu) kullanabilirsiniz.
Dairesel Öğe İçeriğini Dolgu ile Hizalama
Dolgu kullanarak bir daire öğesinin içindeki içeriği hizalamak için, göreceli bir uzunluk birimi (% veya vw gibi) kullanmanızı öneririm, böylece dolgu, kabın boyutu veya tarayıcı genişliği ile birlikte artar veya azalır. Göreceli birimler kullanılarak boyutlandırılmış dairesel bir öğenin içini doldurmak için mutlak uzunluk birimleri kullanmak istemezsiniz. Sonuç tutarsız olur ve tasarım mobilde bozulur. Örneğin, yüksekliği 10vw ve genişliği 10vw olan dairesel bir öğeniz varsa. Tarayıcı genişliği küçüldükçe bu öğenin boyutu küçülür. Öğenin üstüne 100 piksel dolgu eklediyseniz, tarayıcı genişliğini her ayarladığınızda ve tasarımı bozduğunuzda 100 piksel kalır. Ancak, bir 3vw dolgu eklediyseniz, bu dolgu öğeyle iyi uyum sağlar.
Bu nedenle, harekete geçirme modülü örneğimizde vw dolgusunu kullanmayı önerdim.
Dairesel Öğe İçeriğini Flex Özelliğiyle Hizalama
İçeriğin dikey olarak ortalandığından emin olmak için üst ve alt dolguyu yerleştirme konusunda çok fazla endişelenmek istemiyorsanız, flex özelliğini kullanabilirsiniz. Üst öğeye (dairesel öğe) birkaç css parçacığı ekleyerek, tüm içeriğin dikey olarak ortalandığından emin olabilirsiniz. Ardından, içeriğin de yatay olarak ortalandığından emin olmak için hizalama, dolgu veya kenar boşluğu kullanabilirsiniz.
İşte demek istediğim.
Örneğimizi kullanarak, harekete geçirici mesaj modülü ayarlarını açın.
Ardından üst ve alt dolguyu 0 piksele ayarlayın.
Ardından gelişmiş sekmeye gidin ve aşağıdaki CSS snippet'ini Ana Öğeye ekleyin:
display:flex; align-items: center;
Bu özel modül için, promosyon açıklamasının altında hizalamayı biraz bozacak bazı ekstra dolgular var. Böylece, Promosyon Açıklamasına aşağıdaki CSS'yi ekleyerek bundan kurtulabilirsiniz:
padding-bottom: 0px
Daha fazla bilgi için içeriği dikey olarak nasıl hizalayacağınızla ilgili bu gönderiye göz atın.
Uygulamaya Alma: Önceden Hazırlanmış Bir Düzene Dairesel Öğeler Ekleme
Artık Divi'de dairesel öğelerin nasıl oluşturulacağını daha iyi anladığınıza göre, bunun gerçek bir düzen tasarımında nasıl çalışabileceğini görelim. Bu örnek için, Çiftçi Düzen Paketinden Divi'nin Çiftçi Açılış Sayfasını kullanacağım.
Çiftçi Açılış Sayfası Düzenini Sayfanıza Yükleyin
Başlamak için öncelikle Farmer Landing Page Layout'u sayfaya ekleyelim. Bunu yapmak için Divi Builder'ın ayarlar menüsünü ve alt kısmını açın ve kitaplıktan yükle düğmesine tıklayın. Kütüphaneden yükle açılır penceresinde, Farmer Layout Pack'i bulun ve seçin. Ardından Çiftçi Açılış Sayfasını kullanmak için tıklayın.
Bu, düzeni sayfaya yükleyecektir.
Dairesel Bölüm Başlığı Yapma
İlk örnek için, mizanpajın üst başlık bölümünü dairesel bir öğeye dönüştüreceğiz. Bunu yapmak için üç temel kuralımızı kullanacağız:
1: Eşit yükseklik ve genişlik değerlerine sahip boyut öğesi
2: Dört köşenin tümü için %50 Kenarlık yarıçapı ekleyin
3: İçeriği Dairesel Öğe İçinde Hizala
Bölüm ayarlarını açın ve aşağıdakileri güncelleyin:
Genişlik: 70vw (masaüstü), 70vw (tablet), 80vw (telefon)
Maksimum genişlik: 1080 piksel
Bölüm Hizalama: merkez
Yükseklik: 70vw (masaüstü), 70vw (tablet), 80vw (telefon)
Maksimum yükseklik: 1080 piksel
Tablet ve telefon için ek yükseklik ve genişlik değerleri eklediğime ve ayrıca maksimum yükseklik ve maksimum genişlik eklediğime dikkat edin. Önemli olan, tüm yükseklik değerlerinin ve tüm genişlik değerlerinin eşit olduğundan emin olmanızdır.
Şimdi dört köşeye de %50 sınır yarıçapımızı eklememiz gerekiyor.
Yuvarlatılmış Köşeler: %50 (dört köşenin tamamı)
Bu bir bölüm olduğundan içerik, birden çok modül içeren iki sütunlu bir satır içerir. Bu kadar içerikle, içeriğin bölüme sığdığından emin olmak için modüllerde bazı boyut ayarlamaları yapmamız gerekiyor.
İlk olarak, bölüm başlığını içeren sütun 1'deki en üstteki metin modülünün ayarlarını açın. Ardından başlık metni boyutunu aşağıdaki gibi güncelleyin:
başlık Metin Boyutu: 4vw
Ardından, doğrudan başlığı içeren metin modülünün altındaki metin modülündeki gövde metni miktarını azaltın.
Artık satır aralığını ayarlayarak içeriği hizalayabiliriz. Satır ayarlarını açın ve aşağıdakileri güncelleyin:
Özel Marj: 10vw üst (masaüstü), 5vw (tablet), 0vw (telefon)
Özel Dolgu: 3vw sol, 3vw sağ
Daire şeklini daha belirgin hale getirmek için bir üst bölüm ayırıcı ekleyebilir ve arka plan görüntüsünün konumunu Sol Üst'e taşıyabiliriz.
Şimdi sonucu kontrol edelim.
Dairesel Blurb Modülleri Yapımı
Şimdi bu mizanpajda bazı dairesel tanıtımlar yapmaya bir göz atalım. Bu örnek için “Ürünlerimiz” başlığı altındaki dört tanıtım modülünü kullanalım. Bulduktan sonra, 2. sütunun üstündeki tanıtım modülünün ayarlarını açın.
Ardından modülün boyutunu aşağıdaki gibi güncelleyin:
Görüntü Genişliği: 7vw
Genişlik: 50vw (masaüstü), 80vw (telefon)
Maksimum Genişlik: 400 piksel
Modül Hizalaması: merkez
Yükseklik: 50vw (masaüstü), 80vw (telefon)
Maksimum Yükseklik: 400 piksel
Ardından, kenarlık yarıçapınızı veya yuvarlatılmış köşelerinizi ekleyin:
Yuvarlatılmış Köşeler: %50
Bundan sonra içerik tasarımını ve boşlukları aşağıdaki gibi güncelleyelim:
Resim/Simge Yerleşimi: Üst
Başlık Metin Boyutu: 2vw (masaüstü), 20px (tablet)
Metin yönü: orta
Özel Dolgu: 0vw Üst, 0vw alt, 4vw sol, 4vw sağ
Son olarak, Ana Öğeye aşağıdaki özel CSS'yi ekleyerek flex özelliğini kullanarak içeriği dikey olarak hizalayalım:
display: flex; align-items: center;
Dairesel Stili Bölümdeki tüm Blur'lara genişletin
Bu, ilk modülümüzün dairesel tasarımıyla ilgilenir. Şimdi tek yapmamız gereken, tanıtım yazısı modülü tasarım ayarlarını bölümdeki kalan üç tanıtım yazısına genişletmek. Bunu yapmak için yeni tasarladığımız tanıtım yazısı modülüne sağ tıklayın ve “Bulanıklık Stillerini Genişlet” seçeneğini seçin. Stilleri Genişlet açılır penceresinde, stili bölüm boyunca genişletmeyi seçin.
Son sonuç
Şimdi nihai sonucu kontrol edelim.
Son düşünceler
Umarım Divi'de dairesel öğelerin nasıl oluşturulacağına dair birkaç yararlı ipucu öğrenmişsinizdir. Üç temel adımı ve öğenizi boyutlandırmak ve yerleştirmek için uzunluk birimlerini nasıl doğru şekilde kullanacağınızı anlayarak, aradığınız dairesel tasarımı oldukça kolay bir şekilde oluşturabilirsiniz. Ve bazı dairesel öğeleri mevcut veya önceden hazırlanmış bir Divi düzenine dahil etmek gerçekten eğlenceli olabilir. Dairesel modüller, sıralar ve hatta tüm bölümler oluşturmayı keşfetmekten çekinmeyin!
Yorumlarda sizden haber bekliyorum.
Şerefe!