Divi ile düz bir web tasarımı oluşturmak için 6 divi teknik
Düz web tasarımı temel değeri nedeniyle popülerdir. Önce kullanıcı deneyimine ve önceliklendirmeye odaklanır. Bu, düzgün ve modern bir tasarımla kombinasyon halinde, iyi bir düz web sitesi yapar. Düz bir web sitesindeki her tasarım öğesi, sayfaya eklenmeden önce düzgün bir şekilde dikkate alınmalıdır. Aynı zamanda basit ama güzel ve çekici olmaya odaklanmalıdır. Unutmayın, ziyaretçilerinizin dikkatini çekmeli ve şirketinizi öğrenmek için onları merak etmelidir. Bu yazıda, Divi ile düz bir web tasarımı yapmak için bazı teknikleri paylaşacağız. Bu, 4 farklı web sitesi stilini ele aldığımız ve Divi’yi kullanarak nasıl başaracağımız olan gönderi dizisindeki üçüncü gönderidir:
Temiz ve Soyut
Asgari
Düz
Kalın ve renkli
Haydi Yapalım şunu! 1. Temiz ve anlaşılabilir bir kahramanı koruyun Bu giriş direğinde belirtildiği gibi, kullanım düz bir web tasarım stilinin çok önemli bir yönüdür. Bu, doğrudan çekirdeğine gitmenizi ve ziyaretçilerle yüklenmeden ilgili bilgileri paylaşmanızı sağlar. Aynı zamanda, şirketinizin markasına uygun güzel bir düzen kullanıyorsunuz. Düz bir web tasarımı yapmanın birçok yolu var, ancak neredeyse her yere dikkat ettiğim şey kahramanın sadeliği. Ve basit bir tasarım sıkıcı anlamına gelmez. Bu, uzun soluklu olmanıza gerek olmadığı anlamına gelir. Ziyaretçileri etkilemeye çalışmak için yaptığınız tasarımı abartmak zorunda kalmadan doğrudan noktaya gidebilirsiniz.
Gradyan Türü: Doğrusal
Gradyan yönü: 146deg
Başlangıç Pozisyonu:% 30
Mesafemiz de bölümümüze üst ve alt dolgu ekliyor:
Üst dolgu: 55px Dolgu Alt: 130 piksel
1 numaralı satır ekleyin Sütun yapısı satırını ayarlayın İlk satırınızı ekleyerek devam edin. Bu bölüm toplamda üç farklı çizgiden oluşacaktır. İlk satır için, aşağıdaki sütun yapısını kullanırız: Yapıştırıcı Sıra ayarlarını hemen açın ve boyut ayarlarında ‘Bu Sıra Fullwidth Olun’ seçeneğini etkinleştirin.
Metin Modülü Başlık Başlığı H1 Metin Ayarları Ekleyin Bu satıra yalnızca bir H1 metin modülü eklememiz gerekir. İçeriğinizi ekledikten sonra (ve H1 olduğundan emin olun), H1 metin ayarlarınızı açın ve aşağıdaki değişiklikleri uygulayın: Yazı Tip Başlığı: Arial Tesisat Metin Başlığı: Sol Başlık metin rengi: #ffffff
Başlık Metin Boyutu: 86px (masaüstü), 65px (tablet), 45px (telefon)
Hat yüksekliği: 1.2em
Sütun yapısının yapısının 2 #2 ayarlarını ekleyin Bir sonraki satıra geçelim. Bir kez daha, sadece bir sütunlu bir satır kullanıyoruz.
Herhangi bir modül eklemeden önce yapıştırıcı, satır ayarlarınızı açın ve aşağıdaki boyut ayarlarını uygulayın:
Bu çizgiyi tamamen genişletin: evet Özel Talang genişliği kullanın: evet Talang genişliği: 1
Renk bölücü modülünü ekleyin, bölücü modülünü sütununuza ekleyerek devam edin. Bir bölücü rengi olarak ‘#EDF000’ kullanıyoruz.
Yapıştırıcımız bir sonraki bölücü modülü boyutumuzun ayarlarını ayarlayacaktır:
Bölücü ağırlığı: 10 piksel Genişlik:% 64 Modül hizalaması: doğru
Son fakat en az değil sütun yapısının 3 numaralı ayarları ekleyin, iki sütunlu bir satır ekleyin.
Yapıştırıcı Satır ayarlarını açın ve boyut ayarlarında ‘Bu satır tam genişliği yap’ seçeneğini etkinleştirin.
Üst ve alt dolguya ‘0px’ ekleyerek satırın özel dolgu mesafesini çıkarın. Açıklama Metin Modülünü Ekle Sütun 2 Metin Ayarları Aşağıdaki metin ayarlarını kullanarak ikinci sütuna metin açıklama modülünü ekleyerek devam edin: Metin Yazı Tipi: Georgia Metin rengi: #ffffff Metin boyutu: 27px (masaüstü), 22px (tablet), 18px (telefon) Yüksek çizgi metin: 1.9em
Hizalama Metni: Doğru
Düğme modülünü satır düğmenizin 2 sütununa metin hizalama ayarlarınızda sağa doğru ekleyin.
Kahraman bölümümüze eklememiz gereken son ve son modül düğmesini ayarlama düğmesi modülüdür. Bir kopya ekledikten sonra, aşağıdaki düğme ayarlarını uygulayın:
Düğmeler için özel bir stil kullanın: evet
Metin Boyutu Düğmesi: 27px Metin Renk Düğmesi: #303030 Arka Plan Renk Düğmesi: #EDF000
Düğmenin sınır genişliği: 0px
Sınır sınır yarıçapı: 0px
Yazı tipi düğmesi: Gürcistan
Standart Bölüm #2’yi ekleyin Mesafe parçasını ayarlayabiliriz İkinci bölüme geçebiliriz! Bölüm ayarlarını açın ve aşağıdaki dolguyu kullanın:
Üst dolgu: 155px
Dolgu Alt: 200px
Sıra #1 ekle ekleyeceğimiz ilk satır sütun yapısını ayarlayın Kırmızı dairemizi içerecektir. Satırınız için aşağıdaki sütun yapısını seçin: Sütun 1 Arka Plan Yasası Görüntü modülünü yüklemek yerine, radyal gradyan sütununun arka planını kullanacağız.
Renk 1: #FF3233
Renk 2: RGBA (255,255,255.0)
Sütun 1:% 45’in son konumu
Yapıştırıcı Boyut ayarlarınızı değiştirerek devam edin:
Bu çizgiyi tamamen genişletin: evet
Özel Talang genişliği kullanın: evet
Talang genişliği: 1 Bölme Bölme Modülünü ekleyin Sütunumuzun arka planının göründüğünden emin olmak için bölücü modülünü ilk sütuna ekleyeceğiz. Ancak, bölenin görünmesini istemiyoruz. Bu yüzden ‘Ekran’ seçeneğini devre dışı bırakacağız.
Üst: 150 piksel (masaüstü), 200px (tablet ve cep telefonu)
Aşağıda: 150 piksel (masaüstü), 200px (tablet ve cep telefonu)
Satır Ayarlarına Dönüş Alanımızı eklemek, bu kırmızı dairenin sayfamızdaki iki parça ile örtüşmesini sağlayacaktır. Bunu yapmak için çizgi ayarlarını yeniden açacağız ve bazı olumsuz marjlar ekleyeceğiz: Üst kenar: -350px (masaüstü), -400 piksel (tablet ve cep telefonu) Sol kenar boşluğu: -250px (masaüstü ve cep telefonu), -400 piksel (tablet)
Sütun yapısının yapısının 2 #2 ayarlarını ekleyin. İkinci satıra geçelim. Bu satır metin ve bölücü modülünün başlığını içerecektir. Aşağıdaki sütun yapısını seçin:
Üst dolgu için ‘0px’ kullanarak bu satır tarafından yapılan alanı azaltın. Metin Modülü Başlık Başlık H2 Metin Ayarları Ekleyin Şimdi modülümüzü ekleyebiliriz. Aşağıdaki metin ayarlarıyla yeni bir H2 metin modülü ekleyerek başlayın:
Başlık 2 yazı tipi: Arial
Başlık 2 Metin Seviyesi: Orta Başlık Metin Rengi: #303030 Başlık 2 Metin Boyutu: 50px (masaüstü), 45px (tablet), 32 piksel (cep telefonu) Post 2 hat yüksekliği: 1.3em
Metin modülünün hemen altına renk bölücü modülünü ekleyin, bölücü modülünü ekleyin. Bu kez, bölücünün görüntülenmesini istiyoruz. ‘#5214ff’ renk kodunu verin.
Yapışkan Değişiklik Ayarları Daha da Fazla Modül Bölme:
Bölücü ağırlığı: 10 piksel
Genişlik:% 30
Modül hizalaması: merkez 3 numaralı satır ekleyin Sütun yapısı satırını ayarlamak Son satırı yapmak için dört sütun kullanıyoruz. Salin Gradyanın arka planı kahraman için yaptığımızla aynı gradyan arka planını kullanacağız. Bu nedenle, zamandan tasarruf etmek için yalnızca bu ayarları kopyalayacağız. Gradent Arka Planı Sütun 1 ve 3’te macun ve bir ve üçlü sütunlara yapıştırın.
Yapıştırıcı Bir sonraki boyut ayarlarını açın ve satırınızın tüm ekran genişliğini doldurmasını sağlayın.
Bu çizgiyi tamamen genişletin: evet
Özel Talang genişliği kullanın: evet Talang genişliği: 1 Mesafemiz de alan ayarlarını değiştirecektir: Üst kenar boşluğu: 100 piksel Üst ve Alt Dolgu: 0px
Blurb Modülünü ekleyin, Satır Ayarları ile bitirdikten sonra geçerli simgeyi seçin, modülümüzü eklemeye başlayabiliriz! Her sütun için bir tane olmak üzere dört bulanık modüle ihtiyacımız var. Ayrı ayrı yapmak yerine, bir tane yapacağız ve daha sonra ikiye katlayacağız. Açıklamanızın içeriğini ekledikten sonra, devam edin ve istediğiniz simgeyi seçin.
Bir sonraki simge ayarlarınız için simge ayarlarını açın ve ‘#EDF000’ simgesinin rengini kullanın.
Aşağıdaki metin ayarlarını kullanarak metin ayarlarına devam edin: Metin Oryantasyonu: Orta
Metin Rengi: Işık
Başlık Metin Ayarları Bir sonraki başlık metin ayarlarını açın ve bazı değişiklikler yapın: Yazı Tip Başlığı: Arial Başlık Metin Boyutu: 31px Hat yüksekliği başlığı: 2.6em
Vücut metnini de ayarlayarak, içeriği yaptığımız düzene göre yapacağız:
Body Font: Gürcistan Vücut Metin Boyutu: 18px
Vücut Hattı Yüksekliği: 2.2em
Mesafe ve son, bulanık modülünüzü nefes almak için vermek için aşağıdaki özel rulmanları ekleyin:
Padding Atas & Bawah: 50pxPadding Kiri & Kanan: 20px Kloning & Ubah Modul Blurb Clone Blurb Module & Tempatkan di Kolom 2 Kloning Modul Blurb yang baru saja Anda buat dan tempatkan duplikatnya di kolom kedua.
Ubah Ikon Hal pertama yang perlu Anda ubah adalah ikonnya.
Ubah Warna Ikon Ubah warna ikon menjadi ‘#ff3233’ juga.
Ubah Warna Teks Karena kita berurusan dengan warna latar belakang putih, Anda harus mengubah warna teks menjadi ‘Gelap’ dalam pengaturan teks. Jarak Kami bermain-main dengan ketinggian Modul Blurb untuk membuat semuanya lebih menonjol. Untuk melakukannya, buka pengaturan spasi dan gunakan nilai margin atas berikut:
Margin Atas: 100px (Desktop), 0px (Tablet & Ponsel)
Bayangan Kotak Untuk melengkapinya, kami juga akan menambahkan bayangan yang sangat halus: Bulanık Güç Gölgesi Kutusu: 80px Kutunun gölgesinin dağılımının gücü: -10px Gölge Rengi: RGBA (0.0,0,0.11) Klon Kedua Modul Blurb & Tempatkan di Kolom Tersisa Modul Klon Kami sekarang memiliki dua Modul Blurb kami yang akan kami gunakan kembali untuk kolom yang tersisa. Kloning masing-masing dari mereka sekali. Tempatkan di Kolom 3 & 4 Tempatkan Modul Blurb duplikat di kolom yang sesuai dan selesai!
Önizleme Şimdi tüm adımlardan geçtik, nihai sonuçlara farklı ekran boyutlarında bakalım. Pikiran Akhir Dalam posting ini, kami telah membagikan beberapa tips dan teknik membuat desain web datar dengan Divi. Desain web datar sangat populer saat ini karena memungkinkan pengunjung untuk dengan mudah menavigasi halaman dan memproses informasi lebih cepat. Sorularınız veya önerileriniz varsa, aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun!
