Divi ile mobil cihazlarda güzel hizmetler nasıl görüntülenir (ücretsiz indirin!)
Hücresel öncelik veren bir tasarıma odaklanırsanız, bu yazı size yardımcı olabilir. Daha küçük ekran boyutlarında iyi görünen iki iyi hizmet ekranı örneği yaptık. Dahası, masaüstünde iyi bir tasarım sürdürürken hücreselde en iyi görünmek için özel olarak tasarlanmıştır. Bu yazıda, baştan nasıl nasıl geri döneceğinizi adım adım göstereceğiz. Bu öğreticinin, yaptığınız herhangi bir web sitesi için hizmet bölümünü tasarlarken yaratıcılığınızı yayınlamanıza ilham vereceğini umuyoruz. Öğreticinin sonunda, JSON dosyalarını her iki parçadan da indirebilirsiniz.
Haydi Yapalım şunu! Önizleme Eğiticiye girmeden önce, yeniden yapacağımız iki cep telefonu örneğine bakalım. örnek 1
Renk 1: #FF0F83
Renk 2: RGBA (255,255,255.0)
Gradyan Türü: Radyal
Radyal Yön: Sol
Başlangıç Pozisyonu:% 20
Son pozisyon:% 20 Aşağıdaki sütun yapısını kullanarak bölüme yeni satırlar ekleyerek 1 numaralı Sütun Yapısı Ekle: Metin Modülü Ekle #1 İhtiyacımız olan ilk modülün içeriğini ekleyin Metin modülü. İçerik kutusuna biraz içerik ekleyin. Ardından metin ayarları, tasarım sekmesini açın ve metin ayarlarını değiştirin.
Metin Yazı Tipi: Poppins
Metin yazı tipi: Ağırlık
Metin rengi: #ffffff
Metin Boyutu: 20VW
Hat yüksekliği metni: 1em Plepen Mukavemeti Metin Gölgesi: 0.95EM
Metin Gölgesi Renk: RGBA (0.0,0,0.13)
Metin Oryantasyonu: Orta Metin Modülü Ekle #2 H2 içeriği ekleyin, bir öncekinin hemen altına başka bir metin modülü ekleyin. İstediğiniz bazı H2 içeriğini girin. Metin ayar H2, Tasarım sekmesini açın ve H2 metin ayarlarını değiştirin. Başlık 2 Yazı Tipi: Poppins
Başlık 2 yazı tipi ağırlığı: kalın
Başlık 2 Metin Seviyesi: Orta
Başlık 2 Renk Metni: #000000
Başlık 2 Metin Boyutu: 10VW (Telefon ve Tablet), 10VW (Masaüstü)
İki metin modülü arasında örtüşme mesafesi birkaç negatif üst kenar boşluğu kullanır. Üst kenar: -12vw (telefon), -10vw (tablet), -8vw (masaüstü)
Aşağıdaki sütun yapısını kullanarak diğer satırlar ekleyerek #2 sütun yapısı ekleyin: Herhangi bir modül eklemeden gradyan arka planı, satır ayarlarını açın ve gradyanın arka planını ekleyin. Renk 1: #3239ff
Renk 2: RGBA (255,255,255.0)
Gradyan Türü: Radyal
Radyal yön: doğru
Başlangıç Pozisyonu:% 30
Son pozisyon:% 30
Yapıştırıcı bir sonraki boyut ayarlarını açar ve satırın tüm ekran genişliğini karşılamasına izin verir. Bu çizgiyi tamamen genişletin: evet
Özel Talang genişliği kullanın: evet
Talang genişliği: 1
Mesafe Bazı boşluk değerleri de ekleyin. Bu değerler, tüm ekran boyutlarında her şeyin iyi görünmesini sağlayacaktır. Sol dolgu: 0VW (cep telefonu ve tablet), 15VW (masaüstü)
Sağ dolgu: 0VW (cep telefonu ve tablet), 15VW (masaüstü)
Özel CS’lerimiz ayrıca Gelişmiş sekmesine bir satır CSS kodu ekleyerek birbirinin yanına iki sütun yerleştirdi. Ekran: Flex; Metin Modülünü Sütun 1’e Ekleyin H3 İçerik ve Bağlantılar Ekle Şimdi Modül eklemeye başlayabiliriz! Metin modülünü birkaç kopya H3 ve bağlantılarla ilk sütuna ekleyin. Arka plan rengi O zaman, modülün arka plan ayarını açın ve arka plan rengini ekleyin. Arka plan rengi: RGBA (255,255,255,0,95) Modül metin ayarlarında metin yönünü değiştirerek metin ayarlarına devam edin.
Metin Oryantasyonu: Orta Bağlantı metin ayarlarının yanı sıra bağlantının metin ayarlarını da değiştirin.
Bağlantı yazı tipi: Poppins Yazı Tipi Linke Ağırlığı: Kalınlık
Bağlantı yazı tipi stili: alt çizgiler
Alt çizgi renk bağlantısı: #000000
Bağlantı metninin rengi: #000000
Bağlantı Metin Boyutu: 3VW (Telefon), 2VW (Tablet), 1VW (Masaüstü)
H3 metin ayarları H3 metin ayarlarıyla çakışır.
Başlık 3 Yazı Tipi: Poppins Başlık 3 Font Ağırlığı: Ultra Işık
Başlık 3 Renk Metni: #000000
Başlık 3 Metin Boyutu: 4VW (Telefon), 3VW (Tablet), 2VW (Masaüstü)
Başlık 3 metin çizgisi yüksekliği: bir daire için 1.9em veya oval şekil için 3em
Bu modülün şeklini oluşturmak için mesafe, boşluk ayarlarına bazı özel kenar boşlukları ve dolgu değerleri ekleyeceğiz.
Sol kenar boşluğu: 5VW Sağ kenar boşluğu: -5vw
Üst Dolgu: 17VW (Telefon), 20VW (tablet), 15VW (Masaüstü)
Aşağıda dolgu: 17VW (telefon), 20VW (tablet), 15VW (masaüstü)
Sınırımız, her köşeye ‘100VW’ ekleyerek yuvarlak bir açı kullanarak kareyi bir daire haline getirir.
Gölge kutusu ve bazı derinlikler yapmak için pürüzsüz bir kutu gölgesi ekleyeceğiz. Bulanık Güç Gölgesi Kutusu: 100 PX Gölge Rengi: RGBA (0.0,0,0.12)
Klon metin modülü 4 kez ilk metin modülünü değiştirmeyi bitirdikten sonra dört kez devam edebilir ve klonlayabiliriz. İkinci sütuna iki kopya yerleştirin.
İlk yinelenen boşluk ayarlarını değiştirerek yinelenen #1 devam eden mesafeyi değiştirin. Üst Marj: 20VW Sol kenar boşluğu: -5vw
Doğru marj: 5VW
Değiştirme #2 Arka Plan Rengi Bir sonraki ikinci kopyayı açın ve arka plan rengini değiştirin. Arka plan rengi: RGBA (255.248.209.092)
Mesafe ayrıca boşluk ayarlarını değiştirin. Üst kenar boşluğu: -5vw
Yinelenen #3 arka plan renklerini değiştirin, üçüncü kopyayı açın ve arka plan rengini değiştirin. Arka plan rengi: RGBA (219.255.223.0.95)
Bir sonraki alan ayarlarını değiştirmek için mesafe. Üst kenar boşluğu: -5vw
Sol kenar boşluğu: -5vw Doğru marj: 5VW
Çoğaltma #4 son yinelenen açık mesafeyi de değiştirin ve tasarımı tamamlamak için bazı negatif marjlar ekleyin.
Üst kenar boşluğu: -5vw
Bir örnek #2 yapmaya başlayalım İkinci örneğe yeni bir parça ekleyin! Sayfanıza yeni bir parça ekleyin.
Sıra #1 sütun yapısı ekleyin Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin: Metin modülünü ekleyin, ihtiyacımız olan ilk modülün H2 içeriğini ekleyin. H2 içerik seçiminizden bir miktar girin. H2 Metin Ayarları Ardından, Tasarım sekmesini açın ve H2 metin ayarlarını değiştirin. Başlık 2 Yazı Tipi: Poppins Başlık 2 Metin Seviyesi: Orta Başlık 2 Renk Metni: #333333
Başlık 2 Metin Boyutu: 7VW (Telefon ve Tablet), 4VW (Masaüstü)
Görünürlük Bölme Modülünü Ekleyin Bölme modülünü metin modülünün hemen altına ekleyin. ‘Ekran göster’ seçeneğinin etkinleştirildiğinden emin olun.
O zaman renk tasarım sekmesini açın ve bölücünün rengini değiştirin.
Renk: #333333 Yapıştırıcılar da boyut ayarlarıyla oynar. Bölücü ağırlığı: 5px
Genişlik:% 12 Modül hizalaması: merkez
Aşağıdaki sütun yapısını kullanarak bölüme yeni satırlar ekleyerek #2 sütun yapısı ekleyin:
Herhangi bir modül eklemeden arka plan rengi, satır ayarlarını açın ve beyaz arka plan rengini ekleyin.
Arka plan rengi: #ffffffff Bir sonraki boyut ayarlarını açar ve satırın ekranın tüm genişliğini karşılamasına izin verin. Bu çizgiyi tamamen genişletin: evet Özel Talang genişliği kullanın: evet
Talang genişliği: 1 Mesafe Tüm ekran boyutları için tasarımı optimize etmenin yanı sıra bazı özel marj ve dolgu değerleri ekleyin.
Üst Marj: 2VW
Alt marj: 2VW
Üst Dolgu: 10VW (Cep Telefonu ve Tablet), 5VW (Masaüstü) Dolgu Alt: 10VW (Cep Telefonu ve Tablet), 5VW (Masaüstü)
Sol dolgu: 2VW (cep telefonu ve tablet), 20VW (masaüstü)
Sağ dolgu: 2VW (cep telefonu ve tablet), 20VW (masaüstü)
Kutumuzun gölgesi de pürüzsüz bir kutu gölgesi kullanır.
Bulanık Güç Gölgesi Kutusu: 50px
Gölge Rengi: RGBA (0.0,0,0.07)
Özel CSS son olarak, ancak en az değil, Gelişmiş sekmesindeki ana öğeye bir satır CSS kodu ekleyerek birbirine ek olarak iki sütunu yerleştirin. Ekran: Flex;
Gradyan Arka Plan Daha sonra, gradyanın arka planını ekleyin.
Renk 1: #7B28EF Renk 2: #29b6e5 Gradyan yönü: 142 derece Ayarlar simgesi bir sonraki simge ayarlarını değiştirin.
Ikon Color: #ffffff
Simge Yerleştirme: Üst
Simge yazı tipi boyutu kullanın: evet Yazı tipi boyutu simgesi: 5VW (cep telefonu ve tablet), 4VW (masaüstü)
Yapıştırıcı ve boyut ayarları etrafında değişin.
Genişlik:% 48 (cep telefonu ve tablet),% 78 (masaüstü)
Mesafemiz ayrıca tasarımı tüm ekran boyutlarında optimize etmek için bazı özel marj ve dolgu değerleri ekler.
Üst Marj: 2VW (Telefon) Üst Dolgu: 8.5VW (Telefon), 9VW (Tablet), 6VW (Masaüstü)
Alt dolgu: 3VW (telefon), 5VW (tablet), 4VW (Masaüstü) Sınırları Sınır ayarlarındaki her köşeye ‘100VW’ ekleyerek modülü bir sonraki daireye değiştirin. Kutumuzun gölgesi de kutunun gölgesini ekledi.
Dikey Konum Gölge Kutusu: 10px
Kutunun gölgesinin dağılımının gücü: 5px
Gölge Renk: RGBA (2.185.252.0.35) Sütun 2’ye Metin Modülü #1 ekleyin İkinci sütuna H3 içeriği ekleyin! İhtiyacımız olan ilk modül metin modülünün başlığıdır. Biraz H3 içeriği ekleyin. H3 Metin Ayarları Ardından, Tasarım sekmesini açın ve H3 metin ayarlarını değiştirin.
Başlık 3 Yazı Tipi: Poppins
Başlık 3 Metin Boyutu: 4VW (Telefon), 3VW (Tablet), 2VW (Masaüstü)
Mesafe Bir sonraki özel alan değerleri ekleyin. Üst kenar: 0VW (telefon), 3VW (tablet ve masaüstü) Sol kenar boşluğu: -20vw (telefon ve tablet), 0vw (masaüstü)
Doğru marj: 0vw
Aşağıda dolgu: 2VW (cep telefonu ve tablet), 1VW (masaüstü) Sol dolgu: 5VW (cep telefonu ve tablet), 2VW (masaüstü)
Sol sınır ile birlikte.
Sol sınır genişliği: 5px
Sol sınır rengi: #f4f4f4
Sol sınır kuvveti: çift
Bölücü modülünü Sütun 2’ye ekleyin İhtiyacımız olan ikinci modül bölücüsü, bölücü modülü. ‘Ekran göster’ seçeneğinin etkinleştirildiğinden emin olun. Divisor göster: evet
O zaman renk tasarım sekmesini açın ve bölücünün rengini değiştirin.
Renk: #f4f4f4
Bir sonraki kuvvet ortamında bölücü kuvvetinin değişen kuvveti. Bölme Stili: Çift
Yapıştırıcı, boyut ayarında farklı seçenekleri değiştirerek devam edin. Bölücü ağırlığı: 5px
Yükseklik: 0px Mesafe ve uzay değerleri ile oynamak.
Sol kenar boşluğu: -20vw (telefon ve tablet), 0vw (masaüstü) Metin Modülü #2 Sütun 2’ye Ekle İkinci sütunda ihtiyacımız olan bir sonraki modülün içeriğini ekleyin başka bir metin modülü. Bazı gövde içeriği ekleyin. Metin ayarları Ardından, tasarım sekmesini açın ve metin ayarlarını değiştirin.
Metin Boyutu: 2VW (Telefon), 1.7VW (Tablet), 0.8VW (Masaüstü)
Metin Oryantasyonu: Sol Uzay değerleriyle de mesafe.
Üst kenar boşluğu: 0vw Sol kenar boşluğu: -20vw (telefon ve tablet), 0vw (masaüstü) Doğru marj: 0vw
Üst Dolgu: 3VW (Cep Telefonu ve Tablet), 2VW (Masaüstü)
Sol dolgu: 5VW (cep telefonu ve tablet), 2VW (masaüstü) Sınır ve sol sınırı ekleyin.
Sol sınır genişliği: 5px
Sol sınır rengi: #f4f4f4
Sol sınır kuvveti: çift
Düğme modülünü sütun 2’ye ekleyin Bir sonraki bölümün bir kopyasını ekleyin ve son olarak ikinci sütunda ihtiyacımız olan şey düğme modülüdür. Bazı kopyalar ekleyin.
Düğmeyi ayarlayın Ardından, Tasarım sekmesini açın ve düğme ayarlarını değiştirin. Düğmeler için özel bir stil kullanın: evet
Metin Boyutu Düğmesi: 2.5VW (Telefon), 2VW (Tablet), 1VW (Masaüstü)
Metin Renk Düğmesi: #4F77E8
Sınır sınır genişliği: 1px Düğme Sınır Rengi: #4F77E8 Sınır sınır yarıçapı: 1px
Yazı tipi düğmesi: Poppins
Mesafe ayrıca boşluk değerini değiştirir.
Üst kenar: 4VW (cep telefonu ve tablet), 2VW (masaüstü)
Sol kenar boşluğu: -20vw (telefon ve tablet), 0vw (masaüstü)
Klon satırı, çizgiyi ve tüm modülleri değiştirmeyi bitirdikten sonra iki kez iki kez, iki kez klonlayabiliriz. Simgeyi değiştirin Her iki bulanıklık modülü için simgeyi değiştirdiğinizden emin olun.
Gradyan Arka Plan Değiştir de gradyanın arka planını değiştirin. Renk 1: #FF2885
Renk 2: #D6AC24
Renk 1: #70ff1e Renk 2: #2699ff Kutunun gölge rengini değiştirin Kutunun gölgesinin rengini yeni bir gradyan arka planla eşleştirin. Gölge Renk: RGBA (255,208,2,0.37) Gölge Renk: RGBA (42,255,0,0,0,37)
Metnin düğmesini ve renk sınırını değiştirin ve düğme sınırını ve metin rengini değiştirerek tasarımı tamamlayın.
Metin Renk Düğmesi: #E96C54 Düğme Sınır Rengi: #E96C54
Metin Renk Düğmesi: #4DCB93 Düğme Sınır Rengi: #4DCB93
Ücretsiz hücresel hizmet bölümünü almak için hücresel hizmet bölümünü ücretsiz indirin, önce aşağıdaki düğmeyi kullanarak indirmeniz gerekir. İndirmelere erişmek için, aşağıdaki formu kullanarak Divi Daily E -posta listemize abone olmanız gerekir. Yeni bir müşteri olarak, her Pazartesi daha fazla Divi’nin iyi ve ücretsiz Divi düzen paketleri alacaksınız! Zaten listede iseniz, e -posta adresinizi aşağıya girin ve İndir’i tıklayın. “Abone olmayacak” veya ek e -postalar almayacaksınız. 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 ÜCRETSİZ DIVI Düzen Paketine erişin!
Önizleme Şimdi tüm adımlardan geçtikten sonra, iki örneğin hücresel sonuçlarına bakalım. örnek 1 Örnek #2
