Divi ile muhteşem bir tasarımda kopyanızın altını zarif bir şekilde saklayın
Divi’nin varsayılan seçenekleri, çeşitli amaçlar için belirli bir tasarım ayarı kullanmanıza olanak tanır ve bu da yaratıcılığı tetiklemeye yardımcı olur. Bugün, Divisor’u web sitenizin kopyasını zarif bir şekilde gizlemek için benzersiz bir şekilde kullanacağız. Bu, özel bir kod gerektirmeden sayfanıza ekstra etkileşim eklemenin iyi bir yoludur. Başından beri güzel bir örnek oluşturacağız ve JSON örnek dosyasını ücretsiz olarak da indirebilirsiniz. Haydi Yapalım şunu! Önizleme Öğreticiyi girmeden önce sonuçlara çeşitli ekran boyutlarında bakalım.
Masaüstü
Dosyayı indir
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 Ücretsiz Haftalık Divi Düzen Paketine erişin! Yaratıcı başlayalım! Bölüm #1 ekleyin Yapmanız gereken ilk şey, üzerinde çalıştığınız sayfaya yeni bir düzenli bölüm eklemektir.
Sütun yapısının yeni bir satırı ekleyin. Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin: Metin modülünü sütuna ekle H2 içeriğini ekle Bu satırda ihtiyacımız olan ilk modül birkaç H2 içeriğine sahip metin modülüdür. H2 Metin Ayarları Tasarım sekmesine geçin ve H2 metin ayarlarını değiştirin. Başlık 2 yazı tipi: Playfair ekranı
Başlık 2 yazı tipi ağırlığı: normal
Başlık 2 Metin Seviyesi: Orta
Başlık 2 Metin Boyutu: 70 piksel (masaüstü), 40px (tablet), 30px (telefon)
Bölme modülünü bu satırda ihtiyacımız olan ikinci ve son görünürlük sütununa ekleyin. ‘Ekran göster’ seçeneğinin etkinleştirildiğinden emin olun. Divisor göster: evet
Çizgilerimiz ayrıca tasarım sekmesindeki çizginin rengini değiştirir. Çizgi rengi: #000000
Yapıştırıcı boyut ayarlarına geçer ve aşağıdaki ayarları uygulur: Bölücü ağırlığı: 5px
Genişlik:% 27
Modül hizalaması: merkez
Bölüm #2 Arka Plan Renkleri Ekleyin Sayfanıza ikinci normal parçayı ekleyin, ayarları açın ve arka plan rengini değiştirin. Arka plan rengi: #f7f7f7
Taşma Gelişmiş sekmedeki taşan parçaları da gizlediğinizden emin olun. Bu, hiçbir şeyin kabı aşmamasını sağlayacaktır. Yatay taşma: gizli
Dikey taşma: gizli
Geçiş Bu yazının ilerleyen saatlerinde bir kayma geçişi yapacağız. Bunun sorunsuz çalışmasını sağlamak için, Gelişmiş sekmesindeki geçiş süresini artıracağız. Geçiş süreleri: 800ms Sütun yapısının yeni bir satırı ekleyin. Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin:
Herhangi bir modül eklemeden yapıştırıcı, satır ayarlarını açın ve aşağıdaki ayarları uygulayarak satırın kabın tüm genişliğini karşılamasına izin verin: Özel Talang genişliği kullanın: evet Talang genişliği: 1
Genişlik:% 100
Maksimum genişlik:% 100
#1 metin modülünü sütuna ekleyin, H3 içeriğini ekleyin, metin modülünden başlayarak modülü eklemeye başlama zamanı. Seçtiğiniz bazı H3 içeriklerini girin.
H3 Metin Ayarları Tasarım sekmesine geçin ve H3 metin ayarlarını değiştirin. Başlık 3 yazı tipi: Playfair ekranı Başlık 3 Metin Seviyeleri: Orta
Başlık 3 Renk Metni: #000000
Başlık 3 Metin Boyutu: 3VW (Masaüstü), 6VW (Tablet), 7VW (Telefon)
Bölme modülünü bu hatta ihtiyacımız olan ikinci modülün görünürlük sütununa ekleyin. ‘Ekran göster’ seçeneğinin etkinleştirildiğinden emin olun.
Divisor göster: evet Böcek rengini de değiştirin.
Çizgi rengi: #000000 Uzaklık ve özellikle yer yaratmak için bazı üst ve alt kenar boşlukları ekleyin.
Üst Marj: 2VW Alt marj: 2VW
Metin modülünü sütuna ekle İhtiyacımız olan bir sonraki modülün içeriğini ekleyin Başka bir metin modülü. İstediğiniz bazı paragraf içeriği ekleyin.
Metin Ayarları Tasarım sekmesine geçer ve metin ayarlarını değiştirir.
Metin rengi: #777777
Metin Boyutu: 0.8VW (masaüstü), 1.7vw (tablet), 2.2vw (telefon)
Yüksek çizgi metin: 1.8em
Mesafe Bir sonraki özel marj değerleri ekleyin.
Sol kenar boşluğu: 3VW (masaüstü), 7vw (tablet), 10vw (telefon) Sağ kenar boşluğu: 3VW (masaüstü), 7vw (tablet ve cep telefonu) Düğme modülünü sütuna ekleyin Bir sonraki bir kopyayı ekleyin ve son olarak bu satırda ihtiyacımız olan düğme modülü. Seçtiğiniz bazı kopyaları girin.
Hizalama Tasarım sekmesindeki düğme seviyesini değiştirin.
Düğmenin hizalanması: orta Düğme ayarlarını düzenleyerek düğme ayarlarına devam edin. Düğmeler için özel bir stil kullanın: evet
Metin Boyutu Düğmesi: 1VW (Masaüstü), 2VW (Tablet), 3VW (Telefon) Metin Renk Düğmesi: #000000
Sınır sınır genişliği: 1px
Sınır sınır yarıçapı: 0px
Yazı tipi düğmesi: Playfair ekranı
Mesafe ve bazı özel alan değerleri de ekleyin.
Üst Marj: 2VW
Üst Dolgu: 1VW Dolgu Alt: 1VW
Sol dolgu: 3VW (masaüstü), 6VW (tablet), 8VW (Telefon)
Sağ dolgu: 3VW (masaüstü), 6VW (tablet), 8VW (Telefon)
Varsayılan bölücünün ek bölümlerini ayarlama Bölümüne tüm modülleri eklemeyi bitirdikten sonra, bazı ek bölüm ayarlarından geçme zamanı. Bölüm ayarlarını açın, tasarım sekmesini açın ve aşağıdaki üst bölücüyü ekleyin:
Bölme Stili: Listede bulun
Renk Renk: #E8E8E8 Böcek Yüksekliği: 7000 piksel
Flip bölücü: dikey
Bölme Ayarları: Yukarıdaki İçerik Bölümü
İmleçi yönlendirirken bölücünün bölücünün yüksekliğini değiştirme konusunda yönlendirin.
Böcek Yüksekliği: 0px
Alt bölücü alt bölücüyü de ekleyin. Bölme Stili: Listede bulun
Renk Renk: #5C26FF Böcek Yüksekliği: 600 piksel
Bölme Ayarları: Yukarıdaki İçerik Bölümü
Alt bölücüde gezinin ve yüzerken bölücünün yüksekliğini silin.
Böcek Yüksekliği: 0px
Bu yazının önizlemesinde görebileceğiniz mesafe, bu bölümü bir daireye dönüştürüyoruz. Bunu yapmak için önce çeşitli ekran boyutlarına bazı özel marj ve dolgu değerleri eklememiz gerekir: Sol kenar boşluğu: 10VW (masaüstü), 11VW (tablet), 0VW (Telefon) Sağ kenar boşluğu: 47VW (masaüstü), 11vw (tablet), 0vw (telefon)
Üst Dolgu: 8VW (masaüstü), 15VW (tablet), 16VW (Telefon) Dolgu Alt: 8VW (masaüstü), 15VW (tablet), 16VW (Telefon)
Sınır, parçayı bir daire haline getirmek için her köşeye ’50VW’ ekleyerek devam edin. Sınırı aşağıdaki ayarları kullanarak da ekledik:
Sınır Genişliği: 1 piksel
Sınır rengi: RGBA (255,255,255.0)
İmleci yönlendirirken sınır rengini değiştirin. Sınır rengi: #000000
Klon kısmı, bölümün tüm ayarlarını bitirdikten sonra, bölümü iki kez klonlayabilirsiniz.
Değiştirme #1 Üst bölücünün rengini değiştir. Birincisinden başlayarak ikinci kopya parçasını değiştireceğiz. Ayar ayarlarını açın ve üst bölücünün rengini değiştirin. Renk Renk: #5C26FF
Alt bölücünün rengini değiştirin, alt bölücünün rengini de değiştirin. Renk Renk: #FF3A5E Alanı değiştirin, o zaman boşluk ayarlarını açın ve aşağıdaki değerlerin geçerli olduğundan emin olun:
Üst kenar: -20vw (masaüstü), 0vw (tablet ve cep telefonu) Sol kenar boşluğu: 47VW (masaüstü), 11vw (tablet), 0vw (telefon)
Sağ kenar boşluğu: 10vw (masaüstü), 11vw (tablet), 0vw (telefon) DEĞİŞTİRİCİ #2 Üst bölücünün rengini değiştir, ikinci kopya ayarlarını açın ve üst bölücünün rengini değiştirin.
Renk Renk: #FF3A5E
Alt bölücü rengini değiştirin Alt bölücünün rengini de değiştirin.
Renk Renk: #E8E8E8 Alanı değiştirin ve ayrıca buradaki boşluk değerini değiştirin.
Üst kenar: -20vw (masaüstü), 0vw (tablet ve cep telefonu) Alt kenar boşluğu: 7VW Sol kenar boşluğu: 10vw (masaüstü), 11vw (tablet), 0vw (telefon)
Sağ kenar boşluğu: 47VW (masaüstü), 11vw (tablet), 0vw (telefon) Önizleme Şimdi tüm adımlardan geçtikten sonra, çeşitli ekran boyutlarındaki nihai sonuçlara bakalım. Masaüstü
Hücresel
Bu yazıdaki son zihin, kopyanızı bölücü bölümü altında zarif bir şekilde nasıl gizleyeceğinizi gösterdik. Bu, bazı sezgisel varsayılan Divi seçeneklerini normalden başka şekillerde kullanmanın iyi bir yoludur. Bu öğretici de bu tekniği kullanarak kendi alternatif tasarımınızı yaratmanıza ilham verir. Sorularınız veya önerileriniz varsa, aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun! Divi hakkında daha fazla bilgi edinmek ve daha fazla ücretsiz divi almak istiyorsanız, YouTube Bülteni ve YouTube kanalımıza abone olduğunuzdan emin olun, böylece her zaman bu ücretsiz içeriğin faydalarını bilen ve elde eden ilk kişilerden biri olacaksınız.
Abone olmayı başardınız. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve Ücretsiz Haftalık Divi Düzen Paketine erişin! Yaratıcı başlayalım! Bölüm #1 ekleyin Yapmanız gereken ilk şey, üzerinde çalıştığınız sayfaya yeni bir düzenli bölüm eklemektir.
Sütun yapısının yeni bir satırı ekleyin. Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin: Metin modülünü sütuna ekle H2 içeriğini ekle Bu satırda ihtiyacımız olan ilk modül birkaç H2 içeriğine sahip metin modülüdür. H2 Metin Ayarları Tasarım sekmesine geçin ve H2 metin ayarlarını değiştirin. Başlık 2 yazı tipi: Playfair ekranı
Başlık 2 yazı tipi ağırlığı: normal
Başlık 2 Metin Seviyesi: Orta
Başlık 2 Metin Boyutu: 70 piksel (masaüstü), 40px (tablet), 30px (telefon)
Bölme modülünü bu satırda ihtiyacımız olan ikinci ve son görünürlük sütununa ekleyin. ‘Ekran göster’ seçeneğinin etkinleştirildiğinden emin olun. Divisor göster: evet
Çizgilerimiz ayrıca tasarım sekmesindeki çizginin rengini değiştirir. Çizgi rengi: #000000
Yapıştırıcı boyut ayarlarına geçer ve aşağıdaki ayarları uygulur: Bölücü ağırlığı: 5px
Genişlik:% 27
Modül hizalaması: merkez
Bölüm #2 Arka Plan Renkleri Ekleyin Sayfanıza ikinci normal parçayı ekleyin, ayarları açın ve arka plan rengini değiştirin. Arka plan rengi: #f7f7f7
Taşma Gelişmiş sekmedeki taşan parçaları da gizlediğinizden emin olun. Bu, hiçbir şeyin kabı aşmamasını sağlayacaktır. Yatay taşma: gizli
Dikey taşma: gizli
Geçiş Bu yazının ilerleyen saatlerinde bir kayma geçişi yapacağız. Bunun sorunsuz çalışmasını sağlamak için, Gelişmiş sekmesindeki geçiş süresini artıracağız. Geçiş süreleri: 800ms Sütun yapısının yeni bir satırı ekleyin. Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin:
Herhangi bir modül eklemeden yapıştırıcı, satır ayarlarını açın ve aşağıdaki ayarları uygulayarak satırın kabın tüm genişliğini karşılamasına izin verin: Özel Talang genişliği kullanın: evet Talang genişliği: 1
Genişlik:% 100
Maksimum genişlik:% 100
#1 metin modülünü sütuna ekleyin, H3 içeriğini ekleyin, metin modülünden başlayarak modülü eklemeye başlama zamanı. Seçtiğiniz bazı H3 içeriklerini girin.
H3 Metin Ayarları Tasarım sekmesine geçin ve H3 metin ayarlarını değiştirin. Başlık 3 yazı tipi: Playfair ekranı Başlık 3 Metin Seviyeleri: Orta
Başlık 3 Renk Metni: #000000
Başlık 3 Metin Boyutu: 3VW (Masaüstü), 6VW (Tablet), 7VW (Telefon)
Bölme modülünü bu hatta ihtiyacımız olan ikinci modülün görünürlük sütununa ekleyin. ‘Ekran göster’ seçeneğinin etkinleştirildiğinden emin olun.
Divisor göster: evet Böcek rengini de değiştirin.
Çizgi rengi: #000000 Uzaklık ve özellikle yer yaratmak için bazı üst ve alt kenar boşlukları ekleyin.
Üst Marj: 2VW Alt marj: 2VW
Metin modülünü sütuna ekle İhtiyacımız olan bir sonraki modülün içeriğini ekleyin Başka bir metin modülü. İstediğiniz bazı paragraf içeriği ekleyin.
Metin Ayarları Tasarım sekmesine geçer ve metin ayarlarını değiştirir.
Metin yazı tipi: SANS’ı aç
Hizalama Metni: OrtaMetin rengi: #777777
Metin Boyutu: 0.8VW (masaüstü), 1.7vw (tablet), 2.2vw (telefon)
Yüksek çizgi metin: 1.8em
Mesafe Bir sonraki özel marj değerleri ekleyin.
Sol kenar boşluğu: 3VW (masaüstü), 7vw (tablet), 10vw (telefon) Sağ kenar boşluğu: 3VW (masaüstü), 7vw (tablet ve cep telefonu) Düğme modülünü sütuna ekleyin Bir sonraki bir kopyayı ekleyin ve son olarak bu satırda ihtiyacımız olan düğme modülü. Seçtiğiniz bazı kopyaları girin.
Hizalama Tasarım sekmesindeki düğme seviyesini değiştirin.
Düğmenin hizalanması: orta Düğme ayarlarını düzenleyerek düğme ayarlarına devam edin. Düğmeler için özel bir stil kullanın: evet
Metin Boyutu Düğmesi: 1VW (Masaüstü), 2VW (Tablet), 3VW (Telefon) Metin Renk Düğmesi: #000000
Sınır sınır genişliği: 1px
Sınır sınır yarıçapı: 0px
Yazı tipi düğmesi: Playfair ekranı
Mesafe ve bazı özel alan değerleri de ekleyin.
Üst Marj: 2VW
Üst Dolgu: 1VW Dolgu Alt: 1VW
Sol dolgu: 3VW (masaüstü), 6VW (tablet), 8VW (Telefon)
Sağ dolgu: 3VW (masaüstü), 6VW (tablet), 8VW (Telefon)
Varsayılan bölücünün ek bölümlerini ayarlama Bölümüne tüm modülleri eklemeyi bitirdikten sonra, bazı ek bölüm ayarlarından geçme zamanı. Bölüm ayarlarını açın, tasarım sekmesini açın ve aşağıdaki üst bölücüyü ekleyin:
Bölme Stili: Listede bulun
Renk Renk: #E8E8E8 Böcek Yüksekliği: 7000 piksel
Flip bölücü: dikey
Bölme Ayarları: Yukarıdaki İçerik Bölümü
İmleçi yönlendirirken bölücünün bölücünün yüksekliğini değiştirme konusunda yönlendirin.
Böcek Yüksekliği: 0px
Alt bölücü alt bölücüyü de ekleyin. Bölme Stili: Listede bulun
Renk Renk: #5C26FF Böcek Yüksekliği: 600 piksel
Bölme Ayarları: Yukarıdaki İçerik Bölümü
Alt bölücüde gezinin ve yüzerken bölücünün yüksekliğini silin.
Böcek Yüksekliği: 0px
Bu yazının önizlemesinde görebileceğiniz mesafe, bu bölümü bir daireye dönüştürüyoruz. Bunu yapmak için önce çeşitli ekran boyutlarına bazı özel marj ve dolgu değerleri eklememiz gerekir: Sol kenar boşluğu: 10VW (masaüstü), 11VW (tablet), 0VW (Telefon) Sağ kenar boşluğu: 47VW (masaüstü), 11vw (tablet), 0vw (telefon)
Üst Dolgu: 8VW (masaüstü), 15VW (tablet), 16VW (Telefon) Dolgu Alt: 8VW (masaüstü), 15VW (tablet), 16VW (Telefon)
Sınır, parçayı bir daire haline getirmek için her köşeye ’50VW’ ekleyerek devam edin. Sınırı aşağıdaki ayarları kullanarak da ekledik:
Sınır Genişliği: 1 piksel
Sınır rengi: RGBA (255,255,255.0)
İmleci yönlendirirken sınır rengini değiştirin. Sınır rengi: #000000
Klon kısmı, bölümün tüm ayarlarını bitirdikten sonra, bölümü iki kez klonlayabilirsiniz.
Değiştirme #1 Üst bölücünün rengini değiştir. Birincisinden başlayarak ikinci kopya parçasını değiştireceğiz. Ayar ayarlarını açın ve üst bölücünün rengini değiştirin. Renk Renk: #5C26FF
Alt bölücünün rengini değiştirin, alt bölücünün rengini de değiştirin. Renk Renk: #FF3A5E Alanı değiştirin, o zaman boşluk ayarlarını açın ve aşağıdaki değerlerin geçerli olduğundan emin olun:
Üst kenar: -20vw (masaüstü), 0vw (tablet ve cep telefonu) Sol kenar boşluğu: 47VW (masaüstü), 11vw (tablet), 0vw (telefon)
Sağ kenar boşluğu: 10vw (masaüstü), 11vw (tablet), 0vw (telefon) DEĞİŞTİRİCİ #2 Üst bölücünün rengini değiştir, ikinci kopya ayarlarını açın ve üst bölücünün rengini değiştirin.
Renk Renk: #FF3A5E
Alt bölücü rengini değiştirin Alt bölücünün rengini de değiştirin.
Renk Renk: #E8E8E8 Alanı değiştirin ve ayrıca buradaki boşluk değerini değiştirin.
Üst kenar: -20vw (masaüstü), 0vw (tablet ve cep telefonu) Alt kenar boşluğu: 7VW Sol kenar boşluğu: 10vw (masaüstü), 11vw (tablet), 0vw (telefon)
Sağ kenar boşluğu: 47VW (masaüstü), 11vw (tablet), 0vw (telefon) Önizleme Şimdi tüm adımlardan geçtikten sonra, çeşitli ekran boyutlarındaki nihai sonuçlara bakalım. Masaüstü
Hücresel
Bu yazıdaki son zihin, kopyanızı bölücü bölümü altında zarif bir şekilde nasıl gizleyeceğinizi gösterdik. Bu, bazı sezgisel varsayılan Divi seçeneklerini normalden başka şekillerde kullanmanın iyi bir yoludur. Bu öğretici de bu tekniği kullanarak kendi alternatif tasarımınızı yaratmanıza ilham verir. Sorularınız veya önerileriniz varsa, aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun! Divi hakkında daha fazla bilgi edinmek ve daha fazla ücretsiz divi almak istiyorsanız, YouTube Bülteni ve YouTube kanalımıza abone olduğunuzdan emin olun, böylece her zaman bu ücretsiz içeriğin faydalarını bilen ve elde eden ilk kişilerden biri olacaksınız.
