Benzersiz tasarım öğeleri oluşturmak için divi’de boş parçalar nasıl kullanılır
Her hafta size bir sonraki projeniz için kullanabileceğiniz yeni ve ücretsiz bir Divi düzen paketi veriyoruz. Bir düzen paketi için, web sitenizi bir sonraki seviyeye getirmenize yardımcı olacak kullanım durumlarını da paylaşıyoruz. Bu hafta, devam eden Divi Tasarım Girişimimizin bir parçası olarak, benzersiz tasarım öğeleri oluşturmak için Divi’deki boş parçaların nasıl kullanılacağını göstereceğiz. Bu boş bölümü kuyumcu düzen paketinde kullanacağız. Ancak, bu boş bölümü düzen paketine veya görsel yapımcı Divi’yi kullanarak yaptığınız herhangi bir web sitesine ekleyebilirsiniz.
Haydi Yapalım şunu! Önizleme Öğreticiye girmeden önce, yapacağımız tasarım öğelerine bakalım:
Diğer parçaların ayarlarını değiştirmek zorunda kalmadan benzersiz tasarım öğeleri oluşturmak için boş parçalar kullanıyoruz
Bölücümüze bir önceki parçanın arka plan rengi ile aynı rengi veriyoruz ve sonra bu durumda beyaz
Yeni bölümümüzün arka plan rengi olarak renk paletimizin rengini yeniden kullanıyoruz
Farklı bir tasarım oluşturmak için üst ve alt için farklı parçaları birleştiriyoruz
Bir modül olmadan, parça masaüstünde düzgün görünmeyecek ve tablet ve cep telefonunda hiç görünmeyecek
Bu yüzden boş bırakmak yerine boş bir bölüm yanılsaması yarattık
Görünmez karakterli bir metin modülü ekleyin
Yeni bölümümüz bağımsız olacak, bu da bir önceki bölümü veya sonraki bölümleri etkilemeden marjla da oynayabileceğimiz anlamına gelecektir.
Bu tasarımı, bu öğreticiye yeniden yapacağımız dört örneği yaptığınız herhangi bir sayfa veya düzen paketine uygulayabilirsiniz. Takı düzeni paketi için çok iyidir
Ancak, diğer parçaları kullanabilir ve diğer düzen paketleri ile deney yapabilirsiniz
Genel Adımlar Her örneği ayrı ayrı ele almadan önce yeni standart parçalar ekleyin, önce genel adımları tartışacağız. Bu, bir örnek başlatmadan önce bu adımlardan geçmeniz gerektiği anlamına gelir. Adımlar genellikle her örnek için aynıdır. Divi mücevher düzen paketini kullanarak sayfalarınızdan birine yeni bir standart parça ekleyerek başlayın. Örneğin, yön sayfasını kullandık.
Arka plan rengini sonraki bölüme ekleyin, bu bölümün arka plan rengi olarak ‘#f2e3de’ ekleyin. Bir satır bir sütun ekleyin, bir sonraki sütunla bir satır ekleyin. Görünmez karakterlere sahip bir metin modülü ekleyin ve görünmez bir karaktere sahip bir metin modülü ekleyerek bitirin. Bu yazı yaklaşımında belirtildiği gibi, tamamen boş kısmı bırakamayız. Bunu yapmak, tablet ve cep telefonunda parçanın kaybolmasına neden olacaktır. Bu yüzden görünmez bir karakter kullanarak içerik olduğunu düşünerek bu kısmı kandırmayı tercih ediyoruz. Alt düğmenizi basılı tutarak ve Numpad’ınızla 0160 yazarak görünmez bir karakter ekleyebilirsiniz. Ya da sadece alıntılar arasında aşağıdaki karakterleri klonlayın: ”. Bölüm #1 oluşturun Sol ve sağ kenar boşluğunu geçerli bölüme ekleyin, bölüme aşağıdaki özel marjı ekleyerek ilk örneği yapmaya başlayalım: üst kenar: 200px (masaüstü), 100 piksel (tablet), 50px (telefon) Alt kenar boşluğu: 200px (masaüstü), 100 (tablet), 50px (telefon)
Yuvarlak bir açı ekleyin Bir sonraki kenarlık ayarlarını açın ve sol üst ve üst köşeye ‘100px’ ekleyin.
Son alt bölücüyü ekleyin, bölümünüze aşağıdaki alt bölücüyü ekleyin: Bölme Stili: Listede bulun Renk Renk: Beyaz
Eşitsiz yükseklik: 180px (masaüstü), 150px (tablet), 120px (cep telefonu)
Yatay tekrar: 8x (masaüstü), 5x (tablet), 4x (cep telefonu)
Bölüm #2 oluşturun
Dolgu sırasını kaldırın İkinci bir örnek yapmak ister misiniz? Üst ve alt dolguya ‘0px’ ekleyerek tüm dolgu satırlarını kaldırarak başlayın. Üst kısımları ekle En üstteki bariyeri kendi tarafınıza ekleyerek devam edin:
Bölme Stili: Listede bulun
Renk Renk: BeyazAlt bölücüyü ekleyin Alt için aynı bölücüyü de kullanın:
Bölme Stili: Listede bulun Renk Renk: Beyaz
Bu bölümü istediğiniz kadar klonlayabilirsiniz. Örnekte gösterildiği gibi aynı sonuçları elde etmek için, o bölümün klonunu bir kez ve orada var!
Bölüm #3 oluşturun Aşağıdaki üst bölücüyü kullanarak üçüncü örnek için üst bölücüyü ekleyin: Bölme Stili: Listede bulun Renk Renk: Beyaz
Böcek Yüksekliği: 40 piksel (masaüstü), 30px (tablet), 20px (cep telefonu)
Üst bölücüye ekledikten sonra alt bölücüyü ekleyin, alt bölücüye geçin ve aşağıdaki ayarları uygulayın:
Bölme Stili: Listede bulun Renk Renk: Beyaz
Böcek Yüksekliği: 140px
Yatay Divisor Tekrar: 6x (masaüstü), 5x (tablet), 4x (Telefon) Bölüm #4 oluşturun
Üst bölücüyü ekleyin Sıradaki son örnek için yukarıdaki bölücüyü seçin:
Bölme Stili: Listede bulun Renk Renk: Beyaz Alt bölücüyü aşağıdaki alt bölücü ile birlikte ekleyin:
Bölme Stili: Listede bulun
Renk Renk: Beyaz Tasarım yüksekliğinizi artırmak istiyorsanız, hatta ekstra dolgu ekleyin, üst ve alt dolgunuza ’40px’ ekleyebilirsiniz.
Ekstra: Arka plan görüntüsü + gradyan genişliği
Gradyanın arka planını, arka plan görüntüleri ve gradyan genişletme ekleyerek her boş parçayı benzersiz hale getirebileceğiniz parçaya ekleyin. Arka Plan Gradyan ve arka plan görüntüsü tasarımınızı karşılayacak ve daha sofistike bir etkiye sahip olacaktır. Gradyanın arka planını kendi tarafınıza ekleyerek başlayın: İlk renk: #f2e3de İkinci renk: RGBA (255,255,255.0) Gradyan Türü: Doğrusal
Gradyan yönü: 130deg
Başlangıç Pozisyonu:% 25
Daha sonraki bölüme bir arka plan resmi ekleyin, aşağıdaki ayarlarla birlikte bir arka plan resmi ekleyin (Divi Takı Düzeni paketini yükledikten sonra medya kitaplığınızda kullandığımızı bulabilirsiniz):
Arka Plan Görüntü Pozisyonu: Üst Orta
Arka Plan Görüntü Karışımı: Geniş Önizleme Şimdi tüm adımlardan geçtik, sonuçlara bakalım:
