Divi kullanarak çarpıcı web siteleri oluşturmaya aşina mısınız? Izgara düzeninin Divi Builder'ın temel bir özelliği olduğunu muhtemelen bilmelisiniz. Genellikle, bir satır oluşturarak başlarsınız ve bu satır için birden çok sütun oluşturmayı seçersiniz. Sütun yerindeyken, modülleri ekleyeceğiniz yer orasıdır. Bu modüller için daha fazla ızgara ekleyerek işleri daha da ileriye gidebiliriz.
Bu öğretici boyunca, divi modülleri için tek bir sütunla CSS ızgara düzenleri oluşturarak Divi'nin ızgara düzenini nasıl genişletebileceğimizi keşfedeceğiz. CSS ızgarası (CSS Flex kullanarak) yalnızca birkaç CSS satırına sahip içerik için duyarlı ızgaralar oluşturmak için çok popülerdir. Daha sonra tüm modüllerimizi duyarlı olacak şekilde düzenleyebiliriz. Bunu, Divi sütununa ekleyebileceğiniz modüller için ek bir düzen olarak düşünün. Buradaki iyi nokta, tüm iç içe modüllerimizin dolgu ve yükseklik değerlerini ayarlamaya gerek kalmadan aynı yüksekliğe ve genişliğe sahip olmasıdır.
Nihai Sonuç Önizlemesi
Başlamadan önce, bu öğreticinin sonunda neler başarabileceğinizi görelim.
Divi Modülleri için Özel CSS Izgara Düzeni Oluşturma
Bölüm 1: Modülleri Divi Sütununa Ekleme
Yapmamız gereken ilk şeylerden biri, modüllerimizi ızgara düzenleri halinde düzenlemektir. Kullanmak istediğimiz tüm modülleri köşemize ekleyeceğiz. Varsayılan normal bölüme yeni bir tek sütunlu satır oluşturarak başlayalım.
Harika Web Siteleri Oluşturun
En iyi ücretsiz sayfa oluşturucu Elementor ile
Şimdi başla
Modülleri Oluşturma
Sütunların içine metin modülini ekler. Daha sonra içerik ayarlarını aşağıdaki gibi değiştireceğiz:
- Paragraf metninin üstüne H2 başlığı ekleme
- Arka Plan Rengi: #444444
Tasarım ayarlarını da aşağıdaki gibi güncelleyeceğiz:
- Metin Yazı Tipi: Poppins
- Metin Rengi: Açık
- Başlık Metni altında H2 sekmesini seçme
- Başlık 2 Yazı Tipi Stili: TT
- Doldurma: %10 üst, %10 alt, %10 sol %10 sağ
NOT: Çok basit hale getirmek için, her modül arasında bir ayrım göstermek için çeşitli arka plan renklerine sahip birden fazla metin modülü kullanmaya devam edeceğiz.
Katmanlar görünümüne geçin ve bir sonraki metin modülini aşağıdaki gibi oluşturun:
- Metin modülini çoğaltın.
- Yinelenen modülün metin ayarlarını açın.
- Arka Plan ColorBackground Rengini Güncelleştirme: #4c6085
Üçüncü metin modülini aşağıdaki gibi oluşturmak için bu işlemi yineleyebilirsiniz:
- Önceki metin modülini çoğaltın.
- Yinelenen modülün metin ayarlarını açın.
- Arka Plan ColorBackground Rengini Güncelleştirme: #39a0ed
Dördüncü metin modülini oluşturmak için işlemi bir kez daha tekrarlayacağız:
- Önceki metin modülini çoğaltın.
- Yinelenen modülün metin ayarlarını açın.
- Arka Plan ColorBackground Rengini Güncelleştirme: #13c4a3
Sonraki dört modülü oluşturmak için, dört modülü de seçmek üzere çok seçimli özelliği kullanın. Ardından, toplam sekiz metin modülü oluşturmak için modülleri kopyalayıp aynı sütuna yapıştırın.
Bölüm 2: Modüller için CSS Izgara Düzeni oluşturalım
Şimdi tüm modüllerimiz eklendi, bunlar için bir ızgara oluşturalım.
Satır Ayarları
Bu örnekte, modül ızgaramızı tam genişlikte bir düzende görüntüleyebilmemiz için tek sütunlu bir düzen kullanıyoruz. Şimdi, satırın sayfanın tüm genişliğini aldığından emin olmak için satır ayarlarını güncellememiz gerekir. Ayrıca, modüllerimize ek kenar boşlukları eklenmemesi için varsayılan oluk genişliğini de çıkarmamız gerekir.
Satır ayarlarını açın ve aşağıdakileri güncelleştirin:
- Oluk Genişliği: 1
- Genişlik: 100%
- Maksimum genişlik: 100%
Modüller için Kılavuz Düzenini Oluşturmak üzere Sütuna CSS Kılavuzu Ekleme
Bu, CSS Grid özelliğini kullanarak modüller için düzen oluşturan öğreticide önemli bir adımdır.
Bunu yapmak için, Modüllerimizin düzenini belirleyecek sütuna üç satır CSS ekleyeceğiz.
Sütun ayarlarını açın ve gelişmiş sekmenin altına aşağıdaki CSS'yi Ana Öğenin içine yapıştırın:
display:grid;grid-template-columns: 25% 25% 25% 25%;grid-auto-rows: auto;
CSS'nin ilk satırı, içeriği (veya modülleri) CSS ızgara modülü'e göre sıralar.
Görüntüleme:ızgara
CSS'nin ikinci satırında, kılavuzun sütun şablonunu tanımlayacağız. Bu durumda, ızgaramız% 25 genişliğe sahip dört sütuna sahip olacaktır.
Kılavuz şablonu sütunları: %25 %25 %25 %25
Üçüncü satır otomatik olarak oluşturulacak satırlardan bahseder. Bu, her satırın yüksekliğinin satır içindeki içeriğin (veya modüllerin) dikey yüksekliğine göre belirleneceği anlamına gelir.
Kılavuz otomatik satırları: otomatik
Adjust Grid Layout on Mobile
Şimdi, mobil cihazlardaki ızgara düzenini de gerektiği gibi ayarlamamız gerekecek.
Bunu yapabilmek için, hem tablete hem de mobile sütun sayısını ve her sütunun genişliğini değiştiren bazı CSS'ler eklememiz yeterlidir.
Bu örnekte, tabletlerdeki modüllerin ızgara düzenini, her biri% 50 genişliğinde iki sütun olacak şekilde değiştireceğiz.
Duyarlı seçenekleri açalım ve ana öğenin altındaki tablet sekmesini seçelim ve aşağıdaki CSS'yi yapıştıralım:
display:grid;grid-template-columns: 50% 50%;grid-auto-rows: auto;
Telefon ekranı için tek sütunlu bir düzen istiyoruz. Bunu oluşturmak için, aşağıdaki CSS'yi Telefon sekmesi Ana Öğesi'nin altına yapıştırın:
display:grid;grid-template-columns: 100%;grid-auto-rows: auto;
Bölüm 3: Izgara Modüllerinde Değişiklik Yapma
Izgala Yeni Modül Ekleme ve Nasıl Tepki Veriyor?
Artık her modül Grid'e sahip olduğumuza göre, daha fazla modül eklersek, diğeri sağa itilecek ve yeni satırlar oluşturulacaktır. Yine de bu düzen için bir modüle daha ihtiyacımız olduğundan, diğer modüllerin ızgara içinde nasıl ayarlandırılacağını görmek için ilk metin modülini çoğaltın.
Grid, Farklı İçerik Miktarlarına Sahip Modüllere Nasıl Yanıt Verir?
Bu arada, tüm modüller aynı miktarda içeriğe sahiptir, bu nedenle ızgaranın çeşitli yüksekliklere sahip modülleri nasıl işleyeceğini gerçekten göremeyiz. Bunun nasıl çalıştığını görmek için her modüldeki paragraf metni miktarını değiştirin. Modüllerin, çoğu içeriği aynı satırda olan modülle aynı yükseklikte kalacağına dikkat edin. Şu andan itibaren satırın yüksekliği de en fazla içeriğe (veya dikey yüksekliğe) sahip modül tarafından belirlenecektir.
Modüllerin Izgaradaki Konumunu Değiştirme
CSS ızgarasının öğeleri, ızgara modülündeki yerleşik numaralandırma sistemi kullanılarak konumlandırılabilir. Kılavuzdaki her satır bir sayıyı temsil eder. Sütunlar için satır numaraları 1'den başlar ve yatay olarak devam eder. Her satır numarası her sütunun başına ve sonuna oturur. Bu nedenle, sütun yapımız için satır numarası ilk sütunun solunda 1'den başlar ve dördüncü sütunun sağında 5'te biter. Ve üç satırımız olduğundan, satırların satır numaraları ilk satırın en üstünde 1'den ve üçüncü satırın altında 4'e kadar başlar.
CSS Grid'deki bir modülün (veya ızgara öğesinin) konumunu değiştirmek istiyorsak, belirli bir modülün ızgaraya nereye yerleştirilmesini istediğimizi tanımlayabiliriz. Bunu yapmak, modülün kılavuzdaki varsayılan yerleşimini geçersiz kılar.
Bu örnekte, ilk metin modülunu farklı bir konuma taşıyacağız. Bunun için modüle iki satır CSS eklememiz yeterlidir.
İlk metin modülünün ayarlarını açın ve aşağıdaki özel CSS'yi ana öğeye yapıştırın:
grid-column: 2/4;grid-row: 2/3;
CSS'nin ilk satırı, modüle sütun satırı 2'den başlamasını ve sütun satırı 4'te bitini söyleyerek modülün konumunu yatay olarak tanımlar.
Kılavuz sütunu: 2/4
CSS'nin ikinci satırı, modüle satır satırı 2'de başlamasını ve satır satırı 3'te bitini söyleyerek modülün (veya ızgara öğesinin) konumunu dikey olarak tanımlar.
Kılavuz satırı: 2/3
Tablet ve telefon ekranı için modülü orijinal konuma geri getireceğiz. Bu, ana başlığınızı sayfanın üst kısmında tutmak için yararlıdır.
Bunun için, ana öğe için duyarlı seçeneğin altındaki tablet sekmesini seçin ve aşağıdaki CSS'yi yapıştırın:
grid-column: auto;grid-row: auto;
Şimdi modülün konumu ızgara öğelerinin orijinal (otomatik) akışına geri dönecektir.
Devam edelim ve bu yöntemi kullanarak birkaç modül daha (veya ızgara öğesi) konumlandıralım.
Şimdi üçüncü metin modülunu (şimdi üst satırın ikinci sütununda) kılavuz içinde yeni bir ayarlanan konuma konumlandıracağız. Bu yeni konum sütun satırı 1'den başlayacak ve sütun satırı 2'de sona erecek ve ayrıca satır satırı 2'den başlayacak ve satır satırı 4'te sona erecektir.
Bunu yapmak için, üçüncü metin modülünün ayarlarını açın ve aşağıdaki özel CSS'yi ana öğeye yapıştırın:
grid-column: 1/2;grid-row: 2/4;
Artık tablet için aşağıdaki CSS'leri ekleyerek mobilin konumunu değiştirebiliriz:
grid-column: auto;grid-row: auto;
Son modifikasyonumuz için yedinci modülü şebeke içinde yeni bir set konumuna yerceğiz. Bu yeni konum sütun satırı 4'te başlayacak ve sütun satırı 5'te sona erecek ve ayrıca satır satırı 2'den başlayacak ve satır satırı 4'te sona erecektir.
Bunun için, yedinci metin modülünün ayarlarını açalım ve aşağıdaki özel CSS'yi ana öğeye yapıştıralım:
grid-column: 4/5;grid-row: 2/4;
Şimdi tablet ekranı için aşağıdaki CSS'yi yapıştırın.
grid-column: auto;grid-row: auto;Modül (veya Izgara Öğesi) İçeriğini Ortaya Hizalama
Muhtemelen talimattan bıktınız, ancak burada durursak, modül içeriğimizi dikey olarak hizalamak (veya merkeze almak) için yararlı bir yolu kaçıracağız. Modül içeriğinin dikey olarak ortalanmış olması, ızgara düzeninin güzel bir özelliğidir, çünkü her şeyi daha simetrik ve estetik olarak hoş hale getirir.
Bu nedenle, içeriği ortaya hizalamak ve haklı çıkarmak için esnek CSS özelliğini kullanan bir CSS parçası ekleyebiliriz. Bu snippet'i modüllerin her birine eklemeliyiz. Ana öğeye özel CSS'ye sahip olmayan tüm modülleri (veya ızgara öğelerini) seçmek için çoklu seçimi kullanabiliriz (çünkü bu modülleri özel konumlarla geçersiz kılmak istemiyoruz). Ardından, seçili modüllerden birinin ayarlarını açarak öğe ayarlarını açın. Gelişmiş sekmesinin altında, ana öğeye aşağıdaki CSS'yi yapıştırın:
display:flex;flex-direction:column;align-items:center;justify-content:center;
Artık diğer üç modülümüze (modül #1, #3 ve #7) tek tek geri dönebilir ve modüle ızgarada özel bir konum vermek için kullanılan CSS'ye ek olarak aynı CSS snippet'ini ekleyebiliriz. CSS snippet'ini hem masaüstü hem de tablet için varolan CSS'nin altına eklediğinizden emin olun.
Nihai Sonuç
Şimdiye kadar yaptıklarımız şöyle görünüyor.
Güzel ve duyarlı bir tasarım için modüllerin (veya ızgara öğelerinin) farklı tarayıcı genişliklerinde nasıl sorunsuz bir şekilde ayarlandıklarına dikkat edebilir misiniz?
Farklı Modüller ve Tasarımlar Kullanarak Gerçek Örnek
Bu ızgara sistemini kullanarak gerçek bir örnek görmek istiyorsanız, farklı modüller kullanabilirsiniz. İşte bu tekniği kullanarak oluşturabileceğiniz şey. Bu, Fitness Gym Layout Pack'te mevcuttur.
Şimdi Tamamen Senin
Bu öğreticide, Divi modülleri için bir CSS ızgara düzeni oluşturmaya çalışıyoruz. süreç bazı özel CSS'lere dayansa da, ondan elde edebileceğimiz güçlü sonuçları göz önünde bulundurarak şaşırtıcı bir şekilde o kadar da fazla değil. Daha benzersiz Divi düzenleri için gerektiğinde tüm modüllerinizin düzenini sütun düzeyinde kontrol edebilmek güzel. Bir CSS bağımlısıysanız ve daha fazla dalmak istiyorsanız, daha fazla olasılık düşünmek için Bu eksiksiz kılavuz'ye göz atmalısınız.
Memnun olacağız, bu yüzden yorumlar bölümünde ne kadar başarılı olduğunuzu görün.
