Divis Divis’i dolaylı olarak tasarımınıza nasıl uygulanır (Bölüm 1: Hat)
Divi’nin yeni bölümlerini bölme gelişiyle, ek CSS kodu olmadan şaşırtıcı web siteleri çok kolay. Varsayılan olarak, bölücü bölümü sizin tarafınız için zarif bir geçiş yapmak için kullanılır. Ancak parçaları başka amaçlar için de kullanabilirsiniz. Önceki yazıda, divis bölücü ile bir arka plan dokusu nasıl yapılacağı, örneğin, bölümü diğer parçalara geçişe odaklanmak yerine parçanın tasarımını geliştirmek için kullandık. Bu iki bölümlü yazıda, herhangi bir ek CSS kodu kullanmak zorunda kalmadan bölücüyü kullanmak için size başka harika yaklaşımlar göstereceğiz. Bu ilk bölümde, bölücüyü dolaylı olarak çizgiye uygulamaya odaklanacağız. İkinci bölümde, modüle bir bölücü ekleyeceğiz.
Haydi Yapalım şunu! Önizleme Eğiticiye girmeden önce, farklı ekran boyutlarında bu blog gönderme öğreticisinden görsel olarak neler bekleyebileceğinize bir göz atalım:
Bu tasarıma uygulayabileceğiniz üç farklı bölücü stili kullanacağız
Tüm tasarımları başından beri yaparak başlayacağız, bundan sonra seçtiğiniz stili seçebilir ve uygulayabilirsiniz.
Başlık ve girişte belirtildiği gibi, bu bölümün bölücüsünü dolaylı olarak çizgimize uyguluyoruz
Bu, bölücünün satır ayarlarının değil, ayarların bir parçası olarak kalacağı anlamına gelir
Bununla birlikte, çizginin bir parçası gibi görünmesini sağlamak için, bölücü ve arka plan rengi için aynı rengi kullanacağız.
Bu şekilde, bölücü arka plan rengiyle entegre olacak ve yalnızca başka bir arka plan rengiyle temas halinde bir kez görünecek. Ayrıca bölücünün bölümün içeriği altında görünmesini sağlayacağız.
Bu, bölücülerinizin yüksekliğinin, hattınıza eklediğiniz modülle örtüşmemesini sağlayacaktır.
Yeni bir sayfa için arka plan renginin yeni bir bölümünü ekleyin veya mevcut sayfayı açın. Ardından, olağan kısmı ekleyin, ayarları açın ve arka plan rengi olarak ‘#3C3163’ ekleyin.
Üst Bölücü #1 Bir sonraki tasarım sekmesini açın ve üst bölücüyü bölümünüze ekleyin. Bu yazının ‘Yaklaşım’ bölümünde belirtildiği gibi, bölücü ve arka plan parçaları için kesinlikle aynı rengi kullanmalısınız. Bu şekilde, bölücü o parçanın kendisinde görünmeyecek: Bölme Stili: Listede bulun
Ekran Yüksekliği: 600 piksel (masaüstü), 400 piksel (tablet ve cep telefonu)
Bölme Ayarları: Altını doldurun
Mesafemiz, bu dolgu seçeneğine ’80px’ ekleyerek parçamızın üstüne ve altına bazı ek alanlar ekleyecektir. Ayarları değiştirmeyi bitirdikten sonra sütun yapısının yeni bir satırı ekleyin, satırı aşağıdaki sütun yapısıyla ekleyin: Herhangi bir modül eklemeden önce arka plan rengi, satır ayarlarını açın ve arka plan rengi olarak ‘#00CEF7’ kullanın. Yapıştırıcı Bir sonraki tasarım sekmesini açın ve aşağıdaki değişiklikleri alt kategori boyutuna uygulayın: Bu çizgiyi tamamen genişletin: evet
Yüksek sütunu eşitleyin: evet
Mesafemiz ayrıca ’28 piksel’ üzerinde dolgu gerektirir. Kutunun Gölgesi ve son olarak, varsayılan ayarları değiştirmeden ilk kutu gölge seçeneğini etkinleştireceğiz (ancak elbette, isterseniz). Bir daire için boş bir metin modülü ekleyin, 1’e 1’e, boş içeriğe izin verin Kutu Şimdi Başlar Modülümüzü eklemeye başlayabiliriz. Sütun 1 ile başlayacağız. Eklememiz gereken ilk modül boş bir metin modülü. Arka plan rengi Arka plan alt kategorisini açın ve bu modülün arka plan rengi olarak ‘RGBA (134,89,248,067)’ kullanın. Mesafemiz, bu boş metin modülünün bazı özel marjlar kullanarak çizgilerimiz ve parçalarımızla örtüşmesini sağlayacaktır. Üst dolguyu kullanarak şekiller de yapacağız: Üst Marj: -200 piksel Sağ kenar boşluğu: 300 piksel
Sol kenar boşluğu: -300px
Üst Dolgu: 600 piksel
Bu formdan bir daire yapmak için sınırda, sınır alt kategorisindeki her köşeye ‘500 piksel’ eklememiz gerekiyor.
Son kutu resmi ve tamamen tercihlerinize bağlı olarak, bu forma kutunun gölgesi de ekleyebilirsiniz. Başlık Metin Modülünü Sütun 1 Metin Ayarları’na Boş metin modülünün hemen altına ekleyin, başlığınızı içeren başka bir metin modülü ekleyin. Tasarım sekmesini açın ve aşağıdaki metin ayarlarını uygulayın:
Metin yazı tipi ağırlığı: çok kalın
Metin yazı tipi stili: büyük harfMetin rengi: #ffffff
Metin boyutu: 82px (masaüstü), 60px (tablet), 45px (telefon)
Hat yüksekliği metni: 1em
Metin Oryantasyonu: Orta
Mesafemiz, metin modülünün başlığının kenarına ‘-300px’ ekleyerek bu modülün ve önceki boş metin modülünü üst üste getirecektir.
Metin Açıklama Modülünü Metin Ayarlarının Sütun 1’e ekleyin Metin modülünün başlığının hemen altındaki metin modülünün bir açıklamasını ekleyeceğiz, aşağıdaki metin ayarlarını da içeriyor: Metin Font Ağırlığı: Işık Metin rengi: #ffffff Metin Oryantasyonu: Orta
Yapıştırıcımız bu açıklama modülünün genişliğini ‘%60’ olarak ayarlayacak ve ayrıca orta modülün hizalamasını kullanacaktır.
Son mesafe, metin modülünün başlığı, satır ve metin açıklaması modülü arasındaki boşluk yapmak için aşağıdaki özel marjı ekleyeceğiz:
Üst kenar boşluğu: 50 piksel Alt kenar boşluğu: 100 piksel (masaüstü), 0px (tablet ve cep telefonu) Resim Modülünü Sütun 2’ye Ekleyin Resmi Yükle İlk sütunda ihtiyacımız olan tüm modüllere sahibiz. İkinci modülde ihtiyacımız olan tek modül görüntü modülüdür. Dijital ödeme düzeni paketinin gönderilmesini açarak, aşağı ve resim varlıklarını indirerek indirebileceğiniz ücretsiz bir örnek yükledik.
Mesafemiz bu görüntü modülüne de bir üst dolgu ekleyecektir:
Üst kenar: 100 piksel (masaüstü), 50px (tablet ve cep telefonu) Bölücü Bölüm #2 Bölücü stilini değiştirin Bölücünün herhangi bir bölümünü bu tasarıma uygulayabilirsiniz. Önizlemede, bu tasarımda iyi görünen ilk üç böceğini paylaştık. Birincisi, bu yazının genel adımları sırasında uygulanır, ancak bunu aşağıdaki bölücü stiline kolayca değiştirebilirsiniz: Bölücünün yüksekliğini değiştir, ancak bölücünün yüksekliği farklı ekran boyutları için biraz değişti:
Böcek Yüksekliği: 600 piksel (masaüstü), 500 piksel (tablet), 400 piksel (telefon) Sonuçlar Bölücü Bölüm #3 Bölücü stilini değiştirin Önizleme bölümünde görüntülenen üçüncü bölücü stilini mi tercih edersiniz? Bölücü stilinizde bulun: Bu bölücünün yüksekliğini değiştirin, bölücünün farklı ekran boyutlarında aşağıdaki yüksekliğini içerir:
Böcek Yüksekliği: 600 piksel (masaüstü), 500 piksel (tablet), 400 piksel (telefon) Sonuçlar Tüm adımları geçtikten ve bölücü stilinin farklı bir kısmını uyguladıktan sonra önizleme, sonuçlara farklı ekran boyutlarında bakalım: Bu yazının ilk kısmı için sadece son zihin! Divisor’u dolaylı olarak kullanarak inanılmaz sonuçlar verdik. Bu yazı hakkında hatırlanması gereken en önemli şey, parçanızın bölücü ve arka planı için aynı rengi kullanmanız gerektiğidir. Bu yazının ikinci bölümünde, bölücüyü modüle nasıl dolaylı olarak uygulayarak göstereceğiz. Sorularınız veya önerileriniz varsa, aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun!
