Divi’de dairesel öğeler tasarlamak için yararlı rehber
Arada sırada web sitesi tasarımı birkaç dairesel öğe gerektirir. Bu, bir web sayfasında Monotous Standart Box Tasarımından çıkmanın iyi bir yoludur. Dairesel bir eleman yapmak basit (ve böylece!) Kulağa gelebilir, ancak bazı temel kurallara alışık değilseniz, çok sinirli olabilecek bazı gereksiz engeller yaşayabilirsiniz. Örneğin, bazen doğru mesafeye sahip daire şekilli bir elementte paralel yapmak ve içeriği sığdırmak zordur. Veya mobil cihazlar için duyarlı çevreler yapmayı zor bulabilirsiniz. Bu nedenle bazıları bunun yerine içerik için dairesel bir görüntü arka planı kullanmıştır. Ancak özel bir görüntü arka planı kullanmak istemiyorsanız, bir sonraki en iyi yol CSS kullanmaktır. İyi haber şu ki, Divi dairesel bir element yapmak için kendi özel CSS’nizi yapma ihtiyacını ortadan kaldırarak süreci kolaylaştırıyor. Yani, Divi’de bir daire şekli öğesi vermek istiyorsanız, bu sizin için bir gönderidir.
Bu öğreticide, Divi’de (bölümler, çizgiler ve modüller dahil) dairesel bir elemanın nasıl yapılacağı temelleri konusunda size rehberlik edeceğim. O zaman size bu teknikleri hazır düzene uygulamanın ne kadar kolay olduğunu göstereceğim. Bir bakayım! Gizlice göz atma
Divi bültenine katılmak için ücretsiz indirin ve en iyi divi düzen paketinin kopyasına bir e -posta göndereceğiz, ayrıca birçok kaynak, ipucu ve olağanüstü ve ücretsiz divi hileleri. Takip et ve kısa sürede bir divi ustası olacaksınız. Abone olduysanız, e -posta adresinizi aşağıya yazın ve Düzen Paketine erişmek için İndir’i tıklayın.
Abone olmayı başardınız. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve ÜCRETSİZ DIVI Düzen Paketine erişin!
Düzeni sayfanıza aktarmak için, ZIP dosyasını çıkarın ve JSON dosyasını Divi Builder’a sürükleyin.
Doğrudan öğreticiye mi gidiyorsunuz? Başlamak için neye ihtiyacınız var, Divi’de yeni bir sayfa oluşturun. Ardından size bir sayfa başlığı verin ve ön uçta bir divi üreticisi kullanın. “Başından Uyan” seçeneğini seçin. Ayrıca biraz sonra sayfamıza önceden hazırlanmış düzen ekleyeceğiz, ancak şimdilik başlangıçtan itibaren inşa etmeye başlayabiliriz. Şimdi ayrılmaya hazırsın! Dairesel bir eleman yapmak için üç temel adım aslında dairesel bir eleman yapmak için üç basit adıma sahiptir. Bu adımları açıklamak için, bu adımları Divi Builder’ı kullanarak harekete geçirmek için davet modülüne uygulayacağım. Temel olarak, mükemmel bir daire haline getirmeden önce mükemmel bir kare element yapmak istiyoruz. Bu örnekte, davet modülünü 10VW yüksekliği ve genişliği ile hareket ettirelim.
Adım 2: Dört açı için% 50 sınır yarıçapı ekleyin İkinci adım, eleman limit yarıçapını (veya modülü) dört açının hepsinde% 50’ye ayarlamaktır. Divi’de, “Yuvarlak Köşeler” etiketli seçeneğin altındaki eleman limit yarıçapını değiştirebilirsiniz.
Adım 3: Dairesel elemandaki içeriği hizalayın Üçüncü adım, dairesel elemanın içeriğini uyumlu hale getirmektir. Bunu dolgu elemanını ayarlayarak yapabiliriz. (Ayrıca, içeriği bu yazıda dikey olarak odaklamak için Flex’i nasıl kullanacağımı tartıştım) Bu örnekte, içeriğimizi dairesel bir elemanın merkezine yaklaştırmak için aşağıdaki dolguyu ekleyebiliriz: özel dolgu: 18VW üst, 3VW sol, 3vw sağ Tabii ki, metnin/içeriğin cep telefonundaki dairesel öğeye sığmasını sağlamak için hala yapılabilecek ayarlamalar vardır, ancak bu temel ayarları içerir. Dairesel elemanımı ölçmek ve yer vermek için uzun bir VW ünitesi kullandığımı fark edebilirsiniz. Bu, daha tutarlı bir duyarlı tasarım yapmak için kullanışlıdır. Açıklayacağım. Tüm nispi uzunluk birimlerinin yüksekliği ve genişliği için VW uzunluk birimi kullanarak duyarlı dairesel elemanlar yapmak için göreceli bir uzun birim kullanan VW uzun birimi, duyarlı tasarım için favorilerimden biridir. VW uzunluk birimi, tarayıcı penceresinin genişliğine göre (üst öğe değil) olduğu için, tarayıcı penceresinin boyutuna sorunsuz bir şekilde ayarlanan tutarlı bir tasarım alabilirsiniz. Tarayıcının genişliğini küçülttüğümde.
Dairesel element içeriği için uzun bir VW ünitesi kullanmak, dairesel bir elemanın boyutu ve içeriği için VW uzun birimi kullanmak, duyarlı tasarım için iyi bir kombinasyondur. Temel olarak, bu, içeriğin (metin veya resimler gibi) tüm tarayıcılarda tutarlı bir tasarım için bir daire öğesinin boyutuna doğru düzgün bir şekilde ayarlamasına olanak tanır. Bununla birlikte, metin cep telefonunda çok küçük olabileceğinden, içerik için VW uzun ünitesini kullanmaya dikkat etmelisiniz. Başlık için VW Long ünitesini kullanmayı ve daha sonra içeriğin boyutunu gerektiğinde pikselle ayarlamayı seviyorum. Ayrıca, cep telefonu ekranında dairesel bir eleman tasarımı sürdürmeyi planlıyorsanız, içeriğinizi minimumda tutmalı ve maksimum alan için dairesel elemanın boyutunu ayarlamanız gerekir. Mevcut örneğimizi kullanarak, başlık metninizi VW uzunluk değeri verebilir ve ardından mobil cihazdaki modül boyutunu aşağıdaki gibi değiştirebilirsiniz: Başlık Metin Boyutu: 4VW Genişlik (Telefon): 70VW Yüksek (Telefon: 70VW Gördüğünüz gibi, tüm içerik şimdi Mobil ekranda da dairesel elemanda oturmak. Tarayıcı penceresine dairesel bir elemanın oturmasını sağlamak için tabletler ve cep telefonları görüntüle. Bazı durumlarda, bir piksel kullanmak, tablette doğru boyutta (veya daha doğrusu) daha kolay olabilir. ve cep telefonu ekranı.
Örneğin, aynı harekete geçme ve modüllerimiz için yer sağlamak için piksel (VW değil) kullanma davetinin modülünü alalım. Yükseklik, genişliği ve rulmanları aşağıdaki gibi güncelleyebilirsiniz: Genişlik: 500 piksel yüksek: 500 piksel dolgu özel: 200px üst, 20px sol, 20px sağ Bu tasarım masaüstünde benzer görünecektir, ancak cep telefonu ekranında her dairesel bir öğe gördüğünüzde sorun görünür. Daire öğesinin boyutu bir piksel (mutlak uzunluk birimi) kullandığından, daire öğesi mobil ekrandaki kabın ve tarayıcının dışına uzanır.
Bu nedenle dolgu pikselinin genişliğini ve değerini hücresel ekrana ayarlamak önemlidir. Örneğin, genişliği ve yüksekliği 300 piksel olarak değiştirmeniz gerekebilir. Birim, dairesel bir elemanı ölçmek için neden gerçekten düzgün çalışmaz, dairesel bir eleman için daha duyarlı bir çözüm istiyorsanız, yüzdeyi kullanmanın kullanmanın cevap. Ancak, web sayfasındaki öğeleri ölçerken, yükseklik için uzun yüzde birimi genişlik için uzunluk yüzdesi birimi ile aynı şekilde çalışmaz. Bunun nedeni, varsayılan öğenin yüksekliğinin genellikle varsayılan olarak bırakılmasıdır (yüksek: otomatik). Örneğin,% 100 yüksekliği Divi modülüne ayarlamaya çalışırsanız, üst kaplama (sütun, satır, parça vb.) Nedeniyle modül ayarlanmaz. Tarayıcı temel olarak% 100 modülü ayarlamaya çalışmaz (ki bu yapamaz). Bu genişlik için geçerli değildir. Her blok elemanın (veya div) varsayılan genişliği%100’dür. Dolayısıyla, tüm parçalar, satırlar ve modüller, ayarlara göre değiştirilmedikçe bu varsayılanın% 100 genişliğine sahiptir. Bu nedenle, ünitenin uzunluğu, duyarlı dairesel elemanlar oluşturmaya çalışırken kullanılacak en iyi seçim değildir. Dairesel eleman, tüm tarayıcı boyutlarında aynı yüksekliğe ve genişliğe sahip olmalıdır, bu nedenle yükseklik için uzun bir yüzde birim kullanarak bunu yapmak zordur. Bununla birlikte, ana öğeye uygulanan daha özel CSS ile% 100 fonksiyonun yüksekliğini ve genişliğini oluşturmanın yolları vardır. Ancak Divi’de dairesel bir eleman yapmak için, uzun bir VW ünitesinin kullanımı daha kolay bulabilirsiniz. İçeriği dairesel bir öğede hizalamak, içeriği dairesel bir öğede hizalamak istiyorsanız, divi kullanırken basit olduğunu düşündüğüm iki seçeneğiniz var. İçeriğin bir daire öğesinde görüntülenmesini istediğiniz yerde daha fazla kontrol sağlayan içeriği uyumlu hale getirmek için dolgu kullanabilirsiniz. Veya içeriğin doğrudan dairenin ortasında görüntülenmesini sağlamak için Flex özelliğini (dolgu ile) kullanabilirsiniz. Dairesel bir eleman içeriğini dolgu kullanılarak daire elemanındaki içeriği hizalamak için dolgu ile hizalayın, nispeten uzunluk birimi ( % veya VW gibi) kullanmanızı öneririm, böylece dolgu kabının boyutu veya tarayıcının genişliği ile azalır veya azalır. Boyutu göreceli bir ünite kullanan dairesel bir elemanın iç kısmını doldurmak için mutlak uzunluk birimini kullanmak istemezsiniz. Sonuçlar tutarsız olacak ve tasarım cep telefonunda hasar görecek. Örneğin, 10VW ve 10VW genişliğine sahip bir daire öğeniz varsa. Tarayıcı genişliğini daralttığında eleman boyutu küçülür. Elementin üstüne 100px ped eklerseniz, tarayıcının genişliğini her ayarladığınızda ve tasarıma zarar verdiğinizde 100 piksel hala orada olacaktır. Ancak, 3VW rulmanları eklerseniz, bu yatak elemanlara iyi ayarlanır. Bu yüzden VW Palding’i Eylem Çağrı Modülümüz örneğinde kullanmanızı öneririm.
Dairesel elemanların içeriğini Flex Property ile hizalamak, içeriğin dikey olarak ortada olduğundan emin olmak için üst ve alt dolgu alma konusunda çok fazla endişelenmek istemiyorsanız, Flex özelliğini kullanabilirsiniz.Ana (dairesel eleman) birkaç CSS parçası ekleyerek, tüm içeriğin dikey olarak ortada kalmasını sağlayabilirsiniz.Ardından, içeriğin yatay olarak da ortada kalmasını sağlamak için tesviye, dolgu veya marj kullanabilirsiniz.Demek istediğim bu.Örneğimizi kullanarak, dava için davet modülü ayarlarını açın.Ardından üst ve alt dolguyu 0px’e yerleştirin.Ardından devam eden sekmeyi açın ve aşağıdaki CSS parçalarını ana öğeye ekleyin: Ekran: Flex; Hizalama-öğeler: Merkez; Bu özel modül için, promosyon açıklamasının altında biraz uyumdan kurtulacak birkaç ek ped vardır.Böylece, promosyona aşağıdaki CSS ekleyerek ortadan kaldırabilirsiniz: Pilding-Alt: 0px Daha fazla bilgi için içeriği dikey olarak nasıl uyumlu hale getireceğinizle ilgili bu gönderiye bakın. Uygulamak: Divi’de dairesel bir elementin nasıl yapılacağını daha iyi anladıktan sonra, daha önce yapılan düzene dairesel bir eleman ekleyin, bunun gerçek düzen tasarımında nasıl çalışabileceğine bakalım. Bu örnek için, Divi Farmer’ın Yön Bahçesini Çiftçi Düzen Paketinden kullanacağım. Başlamak için çiftçilerin bahçenize düzenini buldum, önce çiftçinin yön bahçesinin düzenini avluya ekleyin. Bunu yapmak için Ayarlar menüsünü ve Divi Builder’ın altını açın ve kitaplıktan Yükle düğmesini tıklayın. Sembulan’da kütüphanenin yükü, bir çiftçi düzeni paketi bulun ve seçin. Ardından Çiftçinin Direktifi sayfasını kullanmak için tıklayın. Bu, düzeni sayfaya yükler. İlk örnek için dairesel bir başlık oluşturma, düzen üzerindeki başlığı dairesel bir öğeye dönüştüreceğiz. Bunu yapmak için üç temel kural kullanacağız: 1: aynı yükseklik ve genişlik değerine sahip boyut elemanı 2: Dört açı için% 50 sınır yarıçapı ekleyin 3: Dairesel öğede içeriği hizalayın Aşağıdaki bölüm ayarlarını açın ve güncelleyin ve güncelleyin Aşağıdakiler: Genişlik: 70VW (masaüstü), 70VW (tablet), 80VW (Cep Telefonu) Maksimum Genişlik: 1080px Tesisat Bölümü: Orta Yükseklik: 70VW (masaüstü), 70VW (tablet), 80VW (Mobil) Maksimum Yükseklik: 1080px Tabletlere ve cep telefonlarına ek olarak yükseklik ve genişlik değerleri ekleyin, ayrıca maksimum yükseklik ve maksimum genişlik de ekliyorum. Önemli olan, tüm değerlerin yüksek ve tüm genişlik değerlerinin aynı olduğundan emin olmanızdır.
Şimdi dört açının hepsine% 50 sınır yarıçapı eklememiz gerekiyor. Yuvarlak açı:% 50 (dört açı) Bu bir parça olduğundan, içerik birkaç modül içeren iki sütun satırı içerir. Bu kadar içerikle, içeriği bölüme göre sağlamak için modülde bazı boyut ayarlamaları yapmamız gerekir. İlk olarak, bölümün başlığını içeren Sütun 1’deki üst metin modülünün ayarını açın. Ardından başlığın metin boyutunu şu şekilde güncelleyin: Başlık Metin Boyutu: 4VW
Çemberin şeklini daha görünür hale getirmek için üst bölücüyü ekleyebilir ve arka plan görüntüsünün konumunu sol üste taşıyabiliriz.
Şimdi sonuçlara bakalım. Dairesel Bir Blurb Modülü Yapma Şimdi bu düzende bazı dairesel açıklamalar yapmaya çalışalım. Bu örnek için, “Ürünlerimiz” başlıklı bölümün altında dört modül kullanalım. Bulduktan sonra, Modül ayarlarını sütun 2’nin üst kısmındaki açın. Ardından modül boyutunu aşağıdaki gibi güncelleyin: Genişlik Görüntü: 7VW Genişlik: 50VW (Masaüstü), 80VW (Telefon) Maksimum Genişlik: 400px Modül Hizalama: Orta Yüksek: Orta Yüksek: 50VW (Masaüstü), 80VW (Telefon) Maksimum Yüksek: 400 piksel Ardından, sınır yarıçapınızı veya yuvarlak açınızı ekleyin: Yuvarlak açı:% 50 Bundan sonra, içerik tasarımını ve alanı aşağıdaki gibi güncelleyelim: Görüntünün Yerleştirilmesi/Ikon: Başlık Metni Başlık Boyutu: 2VW (Masaüstü), 20px (Tablet) Metin Oryantasyonu: Orta Pilding Custom: 0vw üst, daha düşük 0VW, 4VW sol, 4VW Kananter Son olarak, ana öğelere aşağıdaki özel CSS ekleyerek Flex özelliğini kullanarak içeriği dikey olarak hizalayalım: Ekran: Flex; Hizalama-öğeler: merkez; Bu bölümdeki tüm bulanıklıklara dairesel stili genişletin, ilk modülümüz için dairesel bir tasarımı işler. Şimdi yapmamız gereken, modül açıklamasının tasarım ayarlarını o bölümde kalan üç açıklamaya genişletmektir. Bunu yapmak için, “Bluhb stillerini genişletin” i tasarladığımız ve seçtiğimiz bulanıklık modülünü sağlayın. Pop-up stili genişletirken, kuvveti tüm parçalara genişletmeyi seçin. Nihai sonuç şimdi sonucuna bakalım. Son zihin Umarım Divi’de dairesel bir elementin nasıl yapılacağına dair bazı yararlı ipuçları öğrenirsiniz. Üç temel adımı ve üniteyi öğelerinizi ölçmek ve sağlamak için bir üniteyi nasıl doğru kullanacağınızı anlayarak, oldukça kolay aradığınız dairesel bir tasarım yapabilirsiniz. Ve mevcut veya yapılan divi düzenindeki birkaç dairesel elemanı birleştirmek çok hoş olabilir. Dairesel bir modül, satır ve hatta tüm parçalar yapmayı keşfetmekten çekinmeyin! Yorumlarda sizden haber almayı umuyorum. Kızarmış ekmek!
Düzeni sayfanıza aktarmak için, ZIP dosyasını çıkarın ve JSON dosyasını Divi Builder’a sürükleyin.
Doğrudan öğreticiye mi gidiyorsunuz? Başlamak için neye ihtiyacınız var, Divi’de yeni bir sayfa oluşturun. Ardından size bir sayfa başlığı verin ve ön uçta bir divi üreticisi kullanın. “Başından Uyan” seçeneğini seçin. Ayrıca biraz sonra sayfamıza önceden hazırlanmış düzen ekleyeceğiz, ancak şimdilik başlangıçtan itibaren inşa etmeye başlayabiliriz. Şimdi ayrılmaya hazırsın! Dairesel bir eleman yapmak için üç temel adım aslında dairesel bir eleman yapmak için üç basit adıma sahiptir. Bu adımları açıklamak için, bu adımları Divi Builder’ı kullanarak harekete geçirmek için davet modülüne uygulayacağım. Temel olarak, mükemmel bir daire haline getirmeden önce mükemmel bir kare element yapmak istiyoruz. Bu örnekte, davet modülünü 10VW yüksekliği ve genişliği ile hareket ettirelim.
Adım 2: Dört açı için% 50 sınır yarıçapı ekleyin İkinci adım, eleman limit yarıçapını (veya modülü) dört açının hepsinde% 50’ye ayarlamaktır. Divi’de, “Yuvarlak Köşeler” etiketli seçeneğin altındaki eleman limit yarıçapını değiştirebilirsiniz.
Adım 3: Dairesel elemandaki içeriği hizalayın Üçüncü adım, dairesel elemanın içeriğini uyumlu hale getirmektir. Bunu dolgu elemanını ayarlayarak yapabiliriz. (Ayrıca, içeriği bu yazıda dikey olarak odaklamak için Flex’i nasıl kullanacağımı tartıştım) Bu örnekte, içeriğimizi dairesel bir elemanın merkezine yaklaştırmak için aşağıdaki dolguyu ekleyebiliriz: özel dolgu: 18VW üst, 3VW sol, 3vw sağ Tabii ki, metnin/içeriğin cep telefonundaki dairesel öğeye sığmasını sağlamak için hala yapılabilecek ayarlamalar vardır, ancak bu temel ayarları içerir. Dairesel elemanımı ölçmek ve yer vermek için uzun bir VW ünitesi kullandığımı fark edebilirsiniz. Bu, daha tutarlı bir duyarlı tasarım yapmak için kullanışlıdır. Açıklayacağım. Tüm nispi uzunluk birimlerinin yüksekliği ve genişliği için VW uzunluk birimi kullanarak duyarlı dairesel elemanlar yapmak için göreceli bir uzun birim kullanan VW uzun birimi, duyarlı tasarım için favorilerimden biridir. VW uzunluk birimi, tarayıcı penceresinin genişliğine göre (üst öğe değil) olduğu için, tarayıcı penceresinin boyutuna sorunsuz bir şekilde ayarlanan tutarlı bir tasarım alabilirsiniz. Tarayıcının genişliğini küçülttüğümde.
Dairesel element içeriği için uzun bir VW ünitesi kullanmak, dairesel bir elemanın boyutu ve içeriği için VW uzun birimi kullanmak, duyarlı tasarım için iyi bir kombinasyondur. Temel olarak, bu, içeriğin (metin veya resimler gibi) tüm tarayıcılarda tutarlı bir tasarım için bir daire öğesinin boyutuna doğru düzgün bir şekilde ayarlamasına olanak tanır. Bununla birlikte, metin cep telefonunda çok küçük olabileceğinden, içerik için VW uzun ünitesini kullanmaya dikkat etmelisiniz. Başlık için VW Long ünitesini kullanmayı ve daha sonra içeriğin boyutunu gerektiğinde pikselle ayarlamayı seviyorum. Ayrıca, cep telefonu ekranında dairesel bir eleman tasarımı sürdürmeyi planlıyorsanız, içeriğinizi minimumda tutmalı ve maksimum alan için dairesel elemanın boyutunu ayarlamanız gerekir. Mevcut örneğimizi kullanarak, başlık metninizi VW uzunluk değeri verebilir ve ardından mobil cihazdaki modül boyutunu aşağıdaki gibi değiştirebilirsiniz: Başlık Metin Boyutu: 4VW Genişlik (Telefon): 70VW Yüksek (Telefon: 70VW Gördüğünüz gibi, tüm içerik şimdi Mobil ekranda da dairesel elemanda oturmak. Tarayıcı penceresine dairesel bir elemanın oturmasını sağlamak için tabletler ve cep telefonları görüntüle. Bazı durumlarda, bir piksel kullanmak, tablette doğru boyutta (veya daha doğrusu) daha kolay olabilir. ve cep telefonu ekranı.
Örneğin, aynı harekete geçme ve modüllerimiz için yer sağlamak için piksel (VW değil) kullanma davetinin modülünü alalım. Yükseklik, genişliği ve rulmanları aşağıdaki gibi güncelleyebilirsiniz: Genişlik: 500 piksel yüksek: 500 piksel dolgu özel: 200px üst, 20px sol, 20px sağ Bu tasarım masaüstünde benzer görünecektir, ancak cep telefonu ekranında her dairesel bir öğe gördüğünüzde sorun görünür. Daire öğesinin boyutu bir piksel (mutlak uzunluk birimi) kullandığından, daire öğesi mobil ekrandaki kabın ve tarayıcının dışına uzanır.
Bu nedenle dolgu pikselinin genişliğini ve değerini hücresel ekrana ayarlamak önemlidir. Örneğin, genişliği ve yüksekliği 300 piksel olarak değiştirmeniz gerekebilir. Birim, dairesel bir elemanı ölçmek için neden gerçekten düzgün çalışmaz, dairesel bir eleman için daha duyarlı bir çözüm istiyorsanız, yüzdeyi kullanmanın kullanmanın cevap. Ancak, web sayfasındaki öğeleri ölçerken, yükseklik için uzun yüzde birimi genişlik için uzunluk yüzdesi birimi ile aynı şekilde çalışmaz. Bunun nedeni, varsayılan öğenin yüksekliğinin genellikle varsayılan olarak bırakılmasıdır (yüksek: otomatik). Örneğin,% 100 yüksekliği Divi modülüne ayarlamaya çalışırsanız, üst kaplama (sütun, satır, parça vb.) Nedeniyle modül ayarlanmaz. Tarayıcı temel olarak% 100 modülü ayarlamaya çalışmaz (ki bu yapamaz). Bu genişlik için geçerli değildir. Her blok elemanın (veya div) varsayılan genişliği%100’dür. Dolayısıyla, tüm parçalar, satırlar ve modüller, ayarlara göre değiştirilmedikçe bu varsayılanın% 100 genişliğine sahiptir. Bu nedenle, ünitenin uzunluğu, duyarlı dairesel elemanlar oluşturmaya çalışırken kullanılacak en iyi seçim değildir. Dairesel eleman, tüm tarayıcı boyutlarında aynı yüksekliğe ve genişliğe sahip olmalıdır, bu nedenle yükseklik için uzun bir yüzde birim kullanarak bunu yapmak zordur. Bununla birlikte, ana öğeye uygulanan daha özel CSS ile% 100 fonksiyonun yüksekliğini ve genişliğini oluşturmanın yolları vardır. Ancak Divi’de dairesel bir eleman yapmak için, uzun bir VW ünitesinin kullanımı daha kolay bulabilirsiniz. İçeriği dairesel bir öğede hizalamak, içeriği dairesel bir öğede hizalamak istiyorsanız, divi kullanırken basit olduğunu düşündüğüm iki seçeneğiniz var. İçeriğin bir daire öğesinde görüntülenmesini istediğiniz yerde daha fazla kontrol sağlayan içeriği uyumlu hale getirmek için dolgu kullanabilirsiniz. Veya içeriğin doğrudan dairenin ortasında görüntülenmesini sağlamak için Flex özelliğini (dolgu ile) kullanabilirsiniz. Dairesel bir eleman içeriğini dolgu kullanılarak daire elemanındaki içeriği hizalamak için dolgu ile hizalayın, nispeten uzunluk birimi ( % veya VW gibi) kullanmanızı öneririm, böylece dolgu kabının boyutu veya tarayıcının genişliği ile azalır veya azalır. Boyutu göreceli bir ünite kullanan dairesel bir elemanın iç kısmını doldurmak için mutlak uzunluk birimini kullanmak istemezsiniz. Sonuçlar tutarsız olacak ve tasarım cep telefonunda hasar görecek. Örneğin, 10VW ve 10VW genişliğine sahip bir daire öğeniz varsa. Tarayıcı genişliğini daralttığında eleman boyutu küçülür. Elementin üstüne 100px ped eklerseniz, tarayıcının genişliğini her ayarladığınızda ve tasarıma zarar verdiğinizde 100 piksel hala orada olacaktır. Ancak, 3VW rulmanları eklerseniz, bu yatak elemanlara iyi ayarlanır. Bu yüzden VW Palding’i Eylem Çağrı Modülümüz örneğinde kullanmanızı öneririm.
Dairesel elemanların içeriğini Flex Property ile hizalamak, içeriğin dikey olarak ortada olduğundan emin olmak için üst ve alt dolgu alma konusunda çok fazla endişelenmek istemiyorsanız, Flex özelliğini kullanabilirsiniz.Ana (dairesel eleman) birkaç CSS parçası ekleyerek, tüm içeriğin dikey olarak ortada kalmasını sağlayabilirsiniz.Ardından, içeriğin yatay olarak da ortada kalmasını sağlamak için tesviye, dolgu veya marj kullanabilirsiniz.Demek istediğim bu.Örneğimizi kullanarak, dava için davet modülü ayarlarını açın.Ardından üst ve alt dolguyu 0px’e yerleştirin.Ardından devam eden sekmeyi açın ve aşağıdaki CSS parçalarını ana öğeye ekleyin: Ekran: Flex; Hizalama-öğeler: Merkez; Bu özel modül için, promosyon açıklamasının altında biraz uyumdan kurtulacak birkaç ek ped vardır.Böylece, promosyona aşağıdaki CSS ekleyerek ortadan kaldırabilirsiniz: Pilding-Alt: 0px Daha fazla bilgi için içeriği dikey olarak nasıl uyumlu hale getireceğinizle ilgili bu gönderiye bakın. Uygulamak: Divi’de dairesel bir elementin nasıl yapılacağını daha iyi anladıktan sonra, daha önce yapılan düzene dairesel bir eleman ekleyin, bunun gerçek düzen tasarımında nasıl çalışabileceğine bakalım. Bu örnek için, Divi Farmer’ın Yön Bahçesini Çiftçi Düzen Paketinden kullanacağım. Başlamak için çiftçilerin bahçenize düzenini buldum, önce çiftçinin yön bahçesinin düzenini avluya ekleyin. Bunu yapmak için Ayarlar menüsünü ve Divi Builder’ın altını açın ve kitaplıktan Yükle düğmesini tıklayın. Sembulan’da kütüphanenin yükü, bir çiftçi düzeni paketi bulun ve seçin. Ardından Çiftçinin Direktifi sayfasını kullanmak için tıklayın. Bu, düzeni sayfaya yükler. İlk örnek için dairesel bir başlık oluşturma, düzen üzerindeki başlığı dairesel bir öğeye dönüştüreceğiz. Bunu yapmak için üç temel kural kullanacağız: 1: aynı yükseklik ve genişlik değerine sahip boyut elemanı 2: Dört açı için% 50 sınır yarıçapı ekleyin 3: Dairesel öğede içeriği hizalayın Aşağıdaki bölüm ayarlarını açın ve güncelleyin ve güncelleyin Aşağıdakiler: Genişlik: 70VW (masaüstü), 70VW (tablet), 80VW (Cep Telefonu) Maksimum Genişlik: 1080px Tesisat Bölümü: Orta Yükseklik: 70VW (masaüstü), 70VW (tablet), 80VW (Mobil) Maksimum Yükseklik: 1080px Tabletlere ve cep telefonlarına ek olarak yükseklik ve genişlik değerleri ekleyin, ayrıca maksimum yükseklik ve maksimum genişlik de ekliyorum. Önemli olan, tüm değerlerin yüksek ve tüm genişlik değerlerinin aynı olduğundan emin olmanızdır.
Şimdi dört açının hepsine% 50 sınır yarıçapı eklememiz gerekiyor. Yuvarlak açı:% 50 (dört açı) Bu bir parça olduğundan, içerik birkaç modül içeren iki sütun satırı içerir. Bu kadar içerikle, içeriği bölüme göre sağlamak için modülde bazı boyut ayarlamaları yapmamız gerekir. İlk olarak, bölümün başlığını içeren Sütun 1’deki üst metin modülünün ayarını açın. Ardından başlığın metin boyutunu şu şekilde güncelleyin: Başlık Metin Boyutu: 4VW
Ardından, başlığı içeren metin modülünün hemen altındaki metin modülündeki içerik sayısını azaltın.
Şimdi satırın mesafesini ayarlayarak içeriği hizalayabiliriz. Aşağıdaki satır ve güncelleme ayarlarını açın: Özel kenar boşluğu: 10vw üst (masaüstü), 5VW (tablet), 0vw (telefon) dolgu özel: 3VW sol, 3VW sağ 3VWÇemberin şeklini daha görünür hale getirmek için üst bölücüyü ekleyebilir ve arka plan görüntüsünün konumunu sol üste taşıyabiliriz.
Şimdi sonuçlara bakalım. Dairesel Bir Blurb Modülü Yapma Şimdi bu düzende bazı dairesel açıklamalar yapmaya çalışalım. Bu örnek için, “Ürünlerimiz” başlıklı bölümün altında dört modül kullanalım. Bulduktan sonra, Modül ayarlarını sütun 2’nin üst kısmındaki açın. Ardından modül boyutunu aşağıdaki gibi güncelleyin: Genişlik Görüntü: 7VW Genişlik: 50VW (Masaüstü), 80VW (Telefon) Maksimum Genişlik: 400px Modül Hizalama: Orta Yüksek: Orta Yüksek: 50VW (Masaüstü), 80VW (Telefon) Maksimum Yüksek: 400 piksel Ardından, sınır yarıçapınızı veya yuvarlak açınızı ekleyin: Yuvarlak açı:% 50 Bundan sonra, içerik tasarımını ve alanı aşağıdaki gibi güncelleyelim: Görüntünün Yerleştirilmesi/Ikon: Başlık Metni Başlık Boyutu: 2VW (Masaüstü), 20px (Tablet) Metin Oryantasyonu: Orta Pilding Custom: 0vw üst, daha düşük 0VW, 4VW sol, 4VW Kananter Son olarak, ana öğelere aşağıdaki özel CSS ekleyerek Flex özelliğini kullanarak içeriği dikey olarak hizalayalım: Ekran: Flex; Hizalama-öğeler: merkez; Bu bölümdeki tüm bulanıklıklara dairesel stili genişletin, ilk modülümüz için dairesel bir tasarımı işler. Şimdi yapmamız gereken, modül açıklamasının tasarım ayarlarını o bölümde kalan üç açıklamaya genişletmektir. Bunu yapmak için, “Bluhb stillerini genişletin” i tasarladığımız ve seçtiğimiz bulanıklık modülünü sağlayın. Pop-up stili genişletirken, kuvveti tüm parçalara genişletmeyi seçin. Nihai sonuç şimdi sonucuna bakalım. Son zihin Umarım Divi’de dairesel bir elementin nasıl yapılacağına dair bazı yararlı ipuçları öğrenirsiniz. Üç temel adımı ve üniteyi öğelerinizi ölçmek ve sağlamak için bir üniteyi nasıl doğru kullanacağınızı anlayarak, oldukça kolay aradığınız dairesel bir tasarım yapabilirsiniz. Ve mevcut veya yapılan divi düzenindeki birkaç dairesel elemanı birleştirmek çok hoş olabilir. Dairesel bir modül, satır ve hatta tüm parçalar yapmayı keşfetmekten çekinmeyin! Yorumlarda sizden haber almayı umuyorum. Kızarmış ekmek!
