Divi ile bir sayfa için özel sütunun bir navigasyon tarafını yapın
Bir sayfa yapmaya karar verdiğinizde, navigasyon kullanıcıları deneyimi çok farklı hale gelir. İnsanlar sayfayı terk etmeyi amaçlamamasına rağmen, onları kullanıcı dostu tutmak istersiniz. Bu yüzden çoğu tek parayla sayfada çapa bağlantıları kullanır. Bu çapa bağlantısını geleneksel üst menüye yerleştirebilir veya bunun yerine yan gezinmeyi seçebilirsiniz. Bu öğreticide, yeni Divi sütun seçeneğini kullanarak sayfanız için nasıl güzel bir sütun tarafı navigasyon tasarımının oluşturulacağını göstereceğiz. Tam ekran deneyimi oluşturmak için tüm öğeleri 100 görüntüleme yüksekliğine gireceğiz. JSON dosyaları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. Başarılı bir şekilde abone oldunuz. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve ÜCRETSİZ DIVI Düzen Paketine erişin!
Yaratmaya başlayalım! YouTube kanalımıza abone olun Yeni bir boş sayfa oluşturun İlk yapmanız gereken yeni bir boş sayfa oluşturmak. Bunu yaptıktan sonra görsel oluşturucuya geçin.
Arka plan renginin yeni bir bölümünü ekleyin Tüm sayfa içeriğimizi bir parçaya, bir satıra ve iki sütuna ekleyeceğiz. Beyaz arka plan rengi ile sayfanıza yeni bir normal parça ekleyin. Arka plan rengi: #ffffff
Bu bölümün varsayılanının üst ve alt dolgusunun mesafesini kaldırın. Üst dolgu: 0px
Aşağıda dolgu: 0px
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 uygun boyut ayarlarını değiştirin: Yüksek sütunu eşitleyin: evet
Genişlik:% 100
Maksimum genişlik:% 100
Yükseklik: 100vh
Uzaklık Alan ayarlarına geçin ve tüm dolguyu varsayılan olarak silin. Üst dolgu: 0px
Aşağıda dolgu: 0px
Sütun 1 Ayarları Genel satır ayarlarını tamamladıktan sonra sütun ayarlarını 1 açın. Arka plan rengi beyaz arka plan rengini ekler. Arka plan rengi: #ffffff
Kutunun gölgesi pürüzsüz kutunun gölgesi ile birlikte. Yatay konum gölge kutusu: 80px Bulanık Güç Gölgesi Kutusu: 75px
Gölge Rengi: RGBA (0.0,0,0.07)
Ölçek dönüşümümüz ayrıca masaüstündeki sütunun boyutunu da azaltır.
Aşağıda:% 75 (masaüstü),% 100 (tablet ve cep telefonu) Sağ:% 75 (masaüstü),% 100 (tablet ve cep telefonu)
Çeviriyi Değiştirme Bir sonraki gümrük dönüşümünün birkaç ayarını kullanarak sütunun konumunu değiştirin.
Aşağıda: -5vw (masaüstü), 0px (tablet ve cep telefonu) Doğru: 0px
Sütun 2 Ayarları Sütun Ayarları 2’yi açarak devam eder.
Mesafe Tasarım sekmesine geçin ve çeşitli ekran boyutlarında aşağıdaki sol ve sağ dolgu değerlerini ekleyin: Sol dolgu: 2VW (masaüstü), 4VW (tablet), 5VW (Telefon) Sağ dolgu: 2VW (masaüstü), 4VW (tablet), 5VW (Telefon)
CSS sınıfı daha sonra yazıda, düzgün bir kaydırma ekleyeceğiz ve kaydırma çubuğunu gizleyeceğiz. Bunu yapmak için sütuna özel bir CSS sınıfı eklememiz gerekir.
CSS Sınıfı: Kaydırma sütunu İkinci sütunda eklediğimiz modülün görünürlüğü sayfa içeriğimizi temsil edecektir. Rulolara izin vermek için taşma ayarlarını değiştireceğiz.
Yatay taşma: gizli Dikey Taşma: Kaydırma
Sütun 1’e Modül Metin Öğesi Menüsü Ekle Bir kopya ekleyin, modül eklemeye başlayalım! Metin modülünün ilk menü öğesini, içerik seçiminizle birlikte Sütun 1’e ekleyin.
Menü öğesine bir çapa bağlantısı eklemek için bir bağlantı ekleyin. URL bağlantı modülü: www.yourwebsite.com/yourpage/#home Metin Ayarları Tasarım sekmesine geçin ve uygun metin ayarlarını değiştirin:
Metin yazı tipi: Montserrat Hizalama Metni: Orta
Metin rengi: #383838
Metin Boyutu: 3VW
Metin mektubu alanı: -3px (masaüstü), -2px (tablet), -1px (telefon)
Mesafe Bazı üst marj değerleri ve alt gelenekler ekleyin.
Alt kenar boşluğu: 3VW (masaüstü), 2vw (tablet), 1VW (telefon) İlk menü öğesini bitirdikten sonra iki kez klon menü öğesi, iki kez klon.
İkinci yinelenen içeriği değiştirme Menü öğesi içeriğini iki kopyadan değiştirin.
Ankraj bağlantısı ile birlikte iki yinelenen bağlantıyı değiştirin. Çoğalt 1: /#Hakkında Yinelenen 2: /#hizmet Uygun alan değerini değiştirerek kopyayı tamamlamak için iki yinelenen boşluğu değiştirin:
Üst kenar: 3VW (masaüstü), 2vw (tablet), 1VW (telefon)
Alt kenar boşluğu: 3VW (masaüstü), 2vw (tablet), 1VW (telefon) Bölücü modülünü Sütun 1 görünürlüğüne ekleyin Bölüm 1’deki birinci ve ikinci metin modülleri arasına doğru bölücü modülünü ekleyin.
Divisor göster: evet
Hat bir sonraki satırı değiştirir. Çizgi rengi: #ffebc9
Yükseklik: 0px Kontrol Karşılaştırma Klonlama Klonlama Karşılaştırma Modülü ve ikinci metin modülü altında kopya.
Sosyal medyayı takip etmek için modülü ekleyin Sütun 1’e ekleyin ve son olarak 1 sütunda ihtiyacımız olan sosyal ağları Sosyal Medya Takip Modülü’dir. İstediğiniz sosyal ağı ekleyin.
Daha sonra hizalama, tasarım sekmesini açın ve modül seviyesini değiştirin. Modül hizalaması: merkez Mesafe bir sonraki marj değerini değiştirir. Üst kenar: 12VW (masaüstü), 5VW (tablet ve cep telefonu)
Alt kenar boşluğu: 3VW (tablet ve cep telefonu) Dairesel bir şekil yapmak için her köşeye sınırlama ve ’50vw’ ekleyin.
Resim modülünü Sütun 2’ye ekleyin İkinci sütuna resim yükleyin! İstediğiniz tüm modülleri ekleyin, ancak bir çapa bağlantısı tarafından yönlendirilmek istediğiniz her modüle CSS kimliği eklemeyi unutmayın. Tasarımı tam olarak bu yayının önizlemesinde gösterildiği gibi yeniden yapmak istiyorsanız, bir resim modülü ekleyerek ve görüntü seçiminizi yükleyerek başlayın. Tasarım sekmesine taşınmak ve sol görüntü seviyesini seçmek için soladon.
Görüntü Tesviye: Sol Yapıştırıcı Bir sonraki boyut ayarlarını değiştirin. Tam geniş zorla: Evet Mesafe ve bazı doğru yatak ekleyin.
Doğru dolgu: 20VW Son CSS kimliği, Gelişmiş sekmesini açın ve ilk CSS kimliğini ekleyin. Bunun ilk menü öğesi ankraj bağlantısıyla eşleştiğinden emin olun.
ID CSS: Ev Başlık Metin Modülünü Sütun 2’ye Ekleyin Bir sonraki modüle, metin modülüne H2 içeriği ekleyin. H2 içerik seçiminizden bir miktar girin.
H2 Metin Ayarları Tasarım sekmesine geçin ve uygun H2 metin ayarlarını değiştirin: Başlık 2 Yazı Tipi: Montserrat
Başlık 2 Metin Seviyesi: Sol Başlık 2 Renk Metni: #383838 Başlık 2 Metin Boyutu: 2VW (Masaüstü), 4VW (Tablet), 5VW (Telefon)
Başlık alanı 2 harf: -1px
Mesafe Bir sonraki özel marj değerleri ekleyin.
Üst kenar: 6VW (masaüstü), 10vw (tablet), 12vw (telefon)
Alt kenar boşluğu: 2VW (masaüstü), 4VW (tablet), 6VW (Telefon)
Bölücü modülünü, ihtiyacımız olan bir sonraki modülün Sütun 2 görünürlüğüne ekleyin. ‘Ekran göster’ seçeneğinin etkinleştirildiğinden emin olun. Divisor göster: evet
Çizgi Çizginin rengini değiştirin.
Çizgi rengi: #ffebc9 Yapıştırıcı ve uygun boyut ayarlarını değiştirin:
Bölücü ağırlığı: 15px Genişlik:% 16
Modül hizalaması: sol İçindekiler Metin Modülünü Sütun 2’ye Ekleyin İçindekiler Ekle Paragraf içeriği seçiminizle ikinci sütuna başka bir metin modülü ekleyin. Metin ayarları Tasarım sekmesine geçin ve uygun metin ayarlarını değiştirin:
Metin yazı tipi: Roboto
Hizalama metni: haklı çıkar
Metin rengi: #a8a8a8 Metin Boyutu: 1VW (masaüstü), 2VW (tablet), 3VW (telefon) Metin mektubu alanı: 1 piksel
Hat yüksekliği metni: 2VW (masaüstü), 3.5vw (tablet), 4.5vw (telefon)
Mesafe Bir sonraki özel alan değerleri ekleyin.
Üst kenar: 3VW (masaüstü), 5VW (tablet), 7vw (telefon)
Alt kenar boşluğu: 3VW (masaüstü), 5VW (tablet), 7VW (Telefon)
Sağ kenar boşluğu: 20VW (masaüstü ve tablet), 5VW (telefon)
Düğme modülünü Sütun 2’ye ekleyin Dolgu ekle, seçtiğiniz birkaç kopya içeren bir düğme modülü ekleyerek devam edin. Hizalama Tasarım sekmesindeki sol düğme seviyesini seçin.
Düğmenin Aydınlanması: Sol
Uygun Düğme Ayarları düğmesini değiştirin:
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: #fffffff
Arka Plan Renk Düğmesi: #0072FF Düğmenin sınır genişliği: 0px
Sınır sınır yarıçapı: 0px
Yazı tipi düğmesi: Montserrat
Mektup Ağırlığı Düğmesi: Yarı Kalın
Mesafe ve uzay değerleri ile oynamak.
Üst kenar: 4VW (masaüstü), 6VW (tablet), 8VW (Telefon)
Alt kenar boşluğu: 4VW (masaüstü), 6VW (tablet), 8VW (Telefon)
Üst Dolgu: 1.5VW (masaüstü), 3VW (tablet), 4VW (Telefon)
Aşağıda dolgu: 1.5vw (masaüstü), 3VW (tablet), 4VW (telefon) Sol dolgu: 3VW (masaüstü), 6VW (tablet), 8VW (Telefon)
Sağ dolgu: 3VW (masaüstü), 6VW (tablet), 8VW (Telefon)
Klonlar Sütun 2’deki tüm modülleri KLONE KONUCU 2, Sütun 2’deki tüm modülleri bitirdikten sonra, iki kez klonlayabilir ve doğru sırayla yerleştirebilirsiniz. Yinelenen görüntü modülünü değiştirin #1 CSS Kimliği Eid CSS’yi yinelenen görüntüden değiştirin Önce modül.
ID CSS: Hakkında
DEĞİŞTİRİLMİŞ Yinelenen Görüntü Modülünü Değiştir #2 ID CSS İkinci yinelenen görüntü modülü için de aynısını yapın.
ID CSS: Hizmet
Kaydırma Blade’i gizleyin ve ince bir kaydırma ekleyin Geçerli sayfa ayarlarını açın, düzgün bir kaydırma efekti oluşturmak ve sütun kaydırma çubuğunu gizlemek için birkaç sıra CSS kodu ekleyeceğiz. Sayfa ayarlarını açın. Özel CSS daha sonra ekleyin, devam eden sekmeyi açın ve bazı CSS kodunu ekleyin. Bu adımı bitirdikten sonra bitirdiniz! .scroll-column ::-WebKit-Scllolbar { Görüntü yok;
} .Scroll-Column {
Kaydırma-davranışları: pürüzsüz; } Ö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, Divi’nin yeni sütun seçeneğiyle bir sayfanız için nasıl güzel bir sütun yan navigasyon oluşturacağınızı gösterdik. Bu, sayfanıza web sitenizin kullanıcı deneyimini geliştirmeye yardımcı olacak bir çapa bağlantısı eklemenin iyi bir yoludur. 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.
Yaratmaya başlayalım! YouTube kanalımıza abone olun Yeni bir boş sayfa oluşturun İlk yapmanız gereken yeni bir boş sayfa oluşturmak. Bunu yaptıktan sonra görsel oluşturucuya geçin.
Arka plan renginin yeni bir bölümünü ekleyin Tüm sayfa içeriğimizi bir parçaya, bir satıra ve iki sütuna ekleyeceğiz. Beyaz arka plan rengi ile sayfanıza yeni bir normal parça ekleyin. Arka plan rengi: #ffffff
Bu bölümün varsayılanının üst ve alt dolgusunun mesafesini kaldırın. Üst dolgu: 0px
Aşağıda dolgu: 0px
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 uygun boyut ayarlarını değiştirin: Yüksek sütunu eşitleyin: evet
Genişlik:% 100
Maksimum genişlik:% 100
Yükseklik: 100vh
Uzaklık Alan ayarlarına geçin ve tüm dolguyu varsayılan olarak silin. Üst dolgu: 0px
Aşağıda dolgu: 0px
Sütun 1 Ayarları Genel satır ayarlarını tamamladıktan sonra sütun ayarlarını 1 açın. Arka plan rengi beyaz arka plan rengini ekler. Arka plan rengi: #ffffff
Kutunun gölgesi pürüzsüz kutunun gölgesi ile birlikte. Yatay konum gölge kutusu: 80px Bulanık Güç Gölgesi Kutusu: 75px
Gölge Rengi: RGBA (0.0,0,0.07)
Ölçek dönüşümümüz ayrıca masaüstündeki sütunun boyutunu da azaltır.
Aşağıda:% 75 (masaüstü),% 100 (tablet ve cep telefonu) Sağ:% 75 (masaüstü),% 100 (tablet ve cep telefonu)
Çeviriyi Değiştirme Bir sonraki gümrük dönüşümünün birkaç ayarını kullanarak sütunun konumunu değiştirin.
Aşağıda: -5vw (masaüstü), 0px (tablet ve cep telefonu) Doğru: 0px
Sütun 2 Ayarları Sütun Ayarları 2’yi açarak devam eder.
Mesafe Tasarım sekmesine geçin ve çeşitli ekran boyutlarında aşağıdaki sol ve sağ dolgu değerlerini ekleyin: Sol dolgu: 2VW (masaüstü), 4VW (tablet), 5VW (Telefon) Sağ dolgu: 2VW (masaüstü), 4VW (tablet), 5VW (Telefon)
CSS sınıfı daha sonra yazıda, düzgün bir kaydırma ekleyeceğiz ve kaydırma çubuğunu gizleyeceğiz. Bunu yapmak için sütuna özel bir CSS sınıfı eklememiz gerekir.
CSS Sınıfı: Kaydırma sütunu İkinci sütunda eklediğimiz modülün görünürlüğü sayfa içeriğimizi temsil edecektir. Rulolara izin vermek için taşma ayarlarını değiştireceğiz.
Yatay taşma: gizli Dikey Taşma: Kaydırma
Sütun 1’e Modül Metin Öğesi Menüsü Ekle Bir kopya ekleyin, modül eklemeye başlayalım! Metin modülünün ilk menü öğesini, içerik seçiminizle birlikte Sütun 1’e ekleyin.
Menü öğesine bir çapa bağlantısı eklemek için bir bağlantı ekleyin. URL bağlantı modülü: www.yourwebsite.com/yourpage/#home Metin Ayarları Tasarım sekmesine geçin ve uygun metin ayarlarını değiştirin:
Metin yazı tipi: Montserrat Hizalama Metni: Orta
Metin rengi: #383838
Metin Boyutu: 3VW
Metin mektubu alanı: -3px (masaüstü), -2px (tablet), -1px (telefon)
Mesafe Bazı üst marj değerleri ve alt gelenekler ekleyin.
Alt kenar boşluğu: 3VW (masaüstü), 2vw (tablet), 1VW (telefon) İlk menü öğesini bitirdikten sonra iki kez klon menü öğesi, iki kez klon.
İkinci yinelenen içeriği değiştirme Menü öğesi içeriğini iki kopyadan değiştirin.
Ankraj bağlantısı ile birlikte iki yinelenen bağlantıyı değiştirin. Çoğalt 1: /#Hakkında Yinelenen 2: /#hizmet Uygun alan değerini değiştirerek kopyayı tamamlamak için iki yinelenen boşluğu değiştirin:
Üst kenar: 3VW (masaüstü), 2vw (tablet), 1VW (telefon)
Alt kenar boşluğu: 3VW (masaüstü), 2vw (tablet), 1VW (telefon) Bölücü modülünü Sütun 1 görünürlüğüne ekleyin Bölüm 1’deki birinci ve ikinci metin modülleri arasına doğru bölücü modülünü ekleyin.
Divisor göster: evet
Hat bir sonraki satırı değiştirir. Çizgi rengi: #ffebc9
Boyut ayarları ile yapıştırıcı.
Bölücü Ağırlığı: 1VWYükseklik: 0px Kontrol Karşılaştırma Klonlama Klonlama Karşılaştırma Modülü ve ikinci metin modülü altında kopya.
Sosyal medyayı takip etmek için modülü ekleyin Sütun 1’e ekleyin ve son olarak 1 sütunda ihtiyacımız olan sosyal ağları Sosyal Medya Takip Modülü’dir. İstediğiniz sosyal ağı ekleyin.
Daha sonra hizalama, tasarım sekmesini açın ve modül seviyesini değiştirin. Modül hizalaması: merkez Mesafe bir sonraki marj değerini değiştirir. Üst kenar: 12VW (masaüstü), 5VW (tablet ve cep telefonu)
Alt kenar boşluğu: 3VW (tablet ve cep telefonu) Dairesel bir şekil yapmak için her köşeye sınırlama ve ’50vw’ ekleyin.
Resim modülünü Sütun 2’ye ekleyin İkinci sütuna resim yükleyin! İstediğiniz tüm modülleri ekleyin, ancak bir çapa bağlantısı tarafından yönlendirilmek istediğiniz her modüle CSS kimliği eklemeyi unutmayın. Tasarımı tam olarak bu yayının önizlemesinde gösterildiği gibi yeniden yapmak istiyorsanız, bir resim modülü ekleyerek ve görüntü seçiminizi yükleyerek başlayın. Tasarım sekmesine taşınmak ve sol görüntü seviyesini seçmek için soladon.
Görüntü Tesviye: Sol Yapıştırıcı Bir sonraki boyut ayarlarını değiştirin. Tam geniş zorla: Evet Mesafe ve bazı doğru yatak ekleyin.
Doğru dolgu: 20VW Son CSS kimliği, Gelişmiş sekmesini açın ve ilk CSS kimliğini ekleyin. Bunun ilk menü öğesi ankraj bağlantısıyla eşleştiğinden emin olun.
ID CSS: Ev Başlık Metin Modülünü Sütun 2’ye Ekleyin Bir sonraki modüle, metin modülüne H2 içeriği ekleyin. H2 içerik seçiminizden bir miktar girin.
H2 Metin Ayarları Tasarım sekmesine geçin ve uygun H2 metin ayarlarını değiştirin: Başlık 2 Yazı Tipi: Montserrat
Başlık 2 Metin Seviyesi: Sol Başlık 2 Renk Metni: #383838 Başlık 2 Metin Boyutu: 2VW (Masaüstü), 4VW (Tablet), 5VW (Telefon)
Başlık alanı 2 harf: -1px
Mesafe Bir sonraki özel marj değerleri ekleyin.
Üst kenar: 6VW (masaüstü), 10vw (tablet), 12vw (telefon)
Alt kenar boşluğu: 2VW (masaüstü), 4VW (tablet), 6VW (Telefon)
Bölücü modülünü, ihtiyacımız olan bir sonraki modülün Sütun 2 görünürlüğüne ekleyin. ‘Ekran göster’ seçeneğinin etkinleştirildiğinden emin olun. Divisor göster: evet
Çizgi Çizginin rengini değiştirin.
Çizgi rengi: #ffebc9 Yapıştırıcı ve uygun boyut ayarlarını değiştirin:
Bölücü ağırlığı: 15px Genişlik:% 16
Modül hizalaması: sol İçindekiler Metin Modülünü Sütun 2’ye Ekleyin İçindekiler Ekle Paragraf içeriği seçiminizle ikinci sütuna başka bir metin modülü ekleyin. Metin ayarları Tasarım sekmesine geçin ve uygun metin ayarlarını değiştirin:
Metin yazı tipi: Roboto
Hizalama metni: haklı çıkar
Metin rengi: #a8a8a8 Metin Boyutu: 1VW (masaüstü), 2VW (tablet), 3VW (telefon) Metin mektubu alanı: 1 piksel
Hat yüksekliği metni: 2VW (masaüstü), 3.5vw (tablet), 4.5vw (telefon)
Mesafe Bir sonraki özel alan değerleri ekleyin.
Üst kenar: 3VW (masaüstü), 5VW (tablet), 7vw (telefon)
Alt kenar boşluğu: 3VW (masaüstü), 5VW (tablet), 7VW (Telefon)
Sağ kenar boşluğu: 20VW (masaüstü ve tablet), 5VW (telefon)
Düğme modülünü Sütun 2’ye ekleyin Dolgu ekle, seçtiğiniz birkaç kopya içeren bir düğme modülü ekleyerek devam edin. Hizalama Tasarım sekmesindeki sol düğme seviyesini seçin.
Düğmenin Aydınlanması: Sol
Uygun Düğme Ayarları düğmesini değiştirin:
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: #fffffff
Arka Plan Renk Düğmesi: #0072FF Düğmenin sınır genişliği: 0px
Sınır sınır yarıçapı: 0px
Yazı tipi düğmesi: Montserrat
Mektup Ağırlığı Düğmesi: Yarı Kalın
Mesafe ve uzay değerleri ile oynamak.
Üst kenar: 4VW (masaüstü), 6VW (tablet), 8VW (Telefon)
Alt kenar boşluğu: 4VW (masaüstü), 6VW (tablet), 8VW (Telefon)
Üst Dolgu: 1.5VW (masaüstü), 3VW (tablet), 4VW (Telefon)
Aşağıda dolgu: 1.5vw (masaüstü), 3VW (tablet), 4VW (telefon) Sol dolgu: 3VW (masaüstü), 6VW (tablet), 8VW (Telefon)
Sağ dolgu: 3VW (masaüstü), 6VW (tablet), 8VW (Telefon)
Klonlar Sütun 2’deki tüm modülleri KLONE KONUCU 2, Sütun 2’deki tüm modülleri bitirdikten sonra, iki kez klonlayabilir ve doğru sırayla yerleştirebilirsiniz. Yinelenen görüntü modülünü değiştirin #1 CSS Kimliği Eid CSS’yi yinelenen görüntüden değiştirin Önce modül.
ID CSS: Hakkında
DEĞİŞTİRİLMİŞ Yinelenen Görüntü Modülünü Değiştir #2 ID CSS İkinci yinelenen görüntü modülü için de aynısını yapın.
ID CSS: Hizmet
Kaydırma Blade’i gizleyin ve ince bir kaydırma ekleyin Geçerli sayfa ayarlarını açın, düzgün bir kaydırma efekti oluşturmak ve sütun kaydırma çubuğunu gizlemek için birkaç sıra CSS kodu ekleyeceğiz. Sayfa ayarlarını açın. Özel CSS daha sonra ekleyin, devam eden sekmeyi açın ve bazı CSS kodunu ekleyin. Bu adımı bitirdikten sonra bitirdiniz! .scroll-column ::-WebKit-Scllolbar { Görüntü yok;
} .Scroll-Column {
Kaydırma-davranışları: pürüzsüz; } Ö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, Divi’nin yeni sütun seçeneğiyle bir sayfanız için nasıl güzel bir sütun yan navigasyon oluşturacağınızı gösterdik. Bu, sayfanıza web sitenizin kullanıcı deneyimini geliştirmeye yardımcı olacak bir çapa bağlantısı eklemenin iyi bir yoludur. 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.
