Divi’de görüntüleri kullanmak için ana kılavuz
Divi, web sitenize resim eklemeyi kolaylaştırır.Bununla birlikte, bazı insanlar için zorluk, her örnekte kullanılacak doğru görüntü boyutunu bilmektir.Her web sitesi farklı olduğu için tüm web siteleri için standart bir “mükemmel” yoktur.Ancak, görüntüsünüzü Divi sitenize göre sağlamak için bir web tasarımcısı olarak yapabileceğiniz bazı şeyler vardır.Bu gönderi buraya giriyor!Bu makalede, Divi’de görüntülerin kullanımını tahmin edeceğim ve size her seferinde divi web siteniz için mükemmel görüntü boyutunu nasıl bulacağınızı (veya oluşturacağınızı) öğreteceğim.
Büyük görüntüler, üç ana faktöre bağlı olarak divi web siteniz için mükemmel görüntü boyutunu bulur:
Boyun oranı: Görüntünüzün yüksekliği ve genişliği.
Sütun Düzeni: Görüntünüzün maksimum genişliği.
Duyarlılık: Görüntünüzün boyutlarında farklı ekran boyutlarında yapılan değişiklikler.
Aşağıdaki bölümde, bu üç faktörün anlaşılmasının divi boyunca nasıl kullanılabileceğini ayrıntılı olarak göstereceğim ve herhangi bir kullanım durumu için mükemmel görüntü boyutunu üreteceğim.Divi Görüntü Optimizasyon Yönergeleri Divi Görüntü Boyu Oranı Kullanımı (16: 9, 4: 3, 3: 4) En boy oranı, görüntünün veya ekranın genişliğinin ve yüksekliğinin orantılı boyutunu belirtir.İkinci noktanın solundaki sayı genişliği (eksen x) temsil eder ve iki noktanın sağındaki sayı yüksekliği (y ekseni) temsil eder.En popüler iki özellik oranı 4: 3 ve 16: 9’dur.TV ekranınızı veya önceki monitör ayarlarınızı ayarlarsanız bu size tanıdık gelecektir.4: 3 en boy oranı TV ve eski monitörler için standart bir ekran boyutudur ve bir kutu gibi daha fazla ekrana sahiptir.Televizyon ve daha yeni olan yüksek tanımları izlemek artık daha geniş bir görünüme sahip 16: 9 en boy oranına sahiptir.En boy oranı 3: 4, portreleri görüntülemek için divi’de yararlıdır.
Divi, düşüncelerde oranın üç yönü ile inşa edilmiştir – 16: 9, 4: 3 ve 3: 4. Bu yazı için, önerilen tüm görüntü boyutlarını bu en boy oranına dayandıracağım. Bunu henüz yapmadıysanız, görüntünüz için standart boyutu ve önerilen yönler oranını görmek için Divi’nin görüntü şablonunu görebilirsiniz. Not: Görüntünün doğru boyutlarını da bulmanıza yardımcı olabilecek yararlı bir en boy oranı hesap makinesi vardır. Görüntüyü yüklemeden önce optimize edin, WordPress’e yüklemeden önce görüntünüzü optimize etmek (boyutu değiştirmek, sıkıştırmayı, kesmeyi vb.) Her zaman en iyisidir. Ayrıca, 60KB ve 200KB arasında görüntü dosyanızın tüm boyutlarını korumak için en iyisini deneyin. Bu şekilde sayfanızı açık zamanınızı gerçekten yavaşlatmazsınız. Görüntünüzü nasıl optimize edeceğinize dair tam yönergeler için burada açın. Görüntüleri okurken SEO unutmayın, arama motorları görüntü dosyasının adına, ‘alt’ metnine, bilgi, dosya türü, dosya boyutu vb. Bu bilgi IMG etiketine yerleştirilmiştir. Medya galerinize her yeni resim yüklediğinizde bu bilgileri resminize eklediğinizden emin olun.
Buna ek olarak, Divi Builder, belirli modüllerden ‘Alt’ ve başlık metnini eklemenize olanak tanır. Belirli bir Divi modülünü kullanırken buna dikkat edin.
Bu, görüntünüzün ihtiyaç duyduğu yüksekliği tartışmaz. İşte, 4: 3 ve 16: 9 yönlerinin oranına göre boyutların bir listesi. Bu, görüntünüzü tam olarak hücresel için gözden düşmüş genişlik ve yükseklikte tutmak için kullanışlıdır.
Boyutlar Aşağıdaki görüntü, standart en boy oranını takip eder 16: 9 1 Sütun: 1080 x 608 3/4 Sütun: 795 x 447 Sütun: 700 x 394 1/2 Sütun: 510 x 287 Sütunlar: 320 x 181 1/4 Sütun: 225 x 128 Boyutlar Aşağıdaki görüntü, standart en boy oranını takip eder 4: 3 1 Sütun: 1080 x 810 3/4 Sütun: 795 x 597 Sütun: 700 x 526 1/2 Sütun: 510 x 384 Sütunlar: 320 x 241 1/4 Sütun: 225 x 170
Görüntü Boyutları Farklı Divi Modülleri Modülü Görüntüler Görüntü modülünü kullanırken, her sütun düzeni için ihtiyacınız olan görüntünün boyutunu seçmek için 16: 9 ve 4: 3 düzenindeki düzeni takip edersiniz. Örneğin, 4: 3 en boy oranına sahip 4 sütun düzeni kullanıyorsanız, her sütun için 225px kez 170px ölçen bir görüntü ekleyeceksiniz. Her sütun için özel bir boyut kullanmanın avantajı size doğru görüntü boyutunu vermektir. Sayfa açık saatinizi yavaşlatabilecek görüntü dosyasının boyutunu kaldırmadan ihtiyacınız vardır. Dezavantaj, tablet gibi daha küçük bir ekranda sütun genişliğini doldurmak değildir. Ekran boyutu geçici durdurma noktasının 1080px’in altına düştüğünde, 4 sütun düzeni 2 sütuna dönüşür. Bu 2 sütunun düzeni, 370 piksel genişliğe sahip görüntü boyutu için alana sahiptir. Dolayısıyla, tablet ekranındaki sütun genişliğini doldurmak için bir görüntü istiyorsanız, 225 piksel genişlikte değil, 370px genişliğinde bir görüntü boyutuyla başlamak isteyebilirsiniz. Aşağıda, 2 sütun tablet ekranında Şekil 225px kez 170px ile 4 sütun düzeni ekranı: Oldukça iyi görünüyor, ancak 370 piksel genişliğe sahip bir resimle başlarsanız, 2 sütun tablet ekranındaki sütunun genişliğini dolduran bir görüntü alacaksınız:
Yani, görüntünüzün tüm cihazlarda sütunun maksimum genişliğini karşılamasını istiyorsanız, görüntü modülünü kullanırken her sütun düzeni için aşağıdaki boyutu öneririm. Boyu Oranı 4: 3: 1 Sütun: 1080 x 810 Sütun: 770 x 578 3/4 Sütun: 770 x 578 1/2 Sütun: 770 X 578 Sütun: 770 x 578 1/4 Sütun: 370 x 278 Boyut oranı için 16: 9:
1 Sütun: 1080 x 608 Sütunlar: 770 x 433 3/4 Sütun: 770 x 433 1/2 Sütun: 770 x 433 Sütunlar: 770 x 433 1/4 Sütun: 370 x 208 kaydırıcı ve Post Arka Plan Görüntü Kaydırma Görüntüleri Arka plan görüntüleri kaydırıcı en azından olduğu kadar geniş olmalıdır. Bu nedenle, görüntünün boyutunun belirlenmesi oldukça kolaydır. Her sütun genişliği için görüntünün boyutu için yönergeleri kullanın. Sürücünüzün arka plan görüntüsünün yüksekliği slayt içeriği ile belirlenecektir, bu nedenle arka plan görüntüsünüzün yüksekliğini ayarlamanız gerekebilir. Boyutlar Aşağıdaki görüntü, standart en boy oranını takip eder 16: 9: 1 sütun: 1080 x 608 3/4 Sütun: 795 x 447 Sütun: 700 x 394 1/2 Sütun: 510 x 287 Sütunlar: 320 x 181 1/4 Sütun: 225 x 128 Boyutlar Aşağıdaki görüntü, standart en boy oranını takip eder 4: 3: 1 sütun: 1080 x 810 3/4 Sütun: 795 x 597 Sütun: 700 x 526 1/2 Sütun: 510 x 384 Sütunlar: 320 x 241 1/4 Sütun: 225 x 170 ve mobil cihazdaki sütunun genişliğini germek için bir kayar çubuk istiyorsanız, şu kılavuzu kullanın: 4: 3: 1 Sütun Oranı: 1080 x 810 Sütun: 770 x 578 3/4 Sütunlar : 770 x 578 1/2 Sütun: 770 x 578 Sütun: 770 x 578 1/4 Sütun: 370 X 278 Boyu Oranı 16: 9: 1 Sütun: 1080 x 608 Sütunlar: 770 X 433 3/4 Sütunlar: 770 x 433 1/2 Sütun: 770 x 433 Sütun: 770 x 433 1/4 Sütun: 370 x 208 Tam Genişlik Kaydırıcı Arka Plan Görüntüsü Önerilen minimum genişlik: 1920px Fullwidth kaydırıcı görüntü genişliğiniz her zaman tarayıcının genişliği ile belirlenir. Standart ekran boyutuna dayanarak, görüntünüzün minimum 1280 piksel genişliğine sahip olduğunu öneriyoruz. Ancak daha büyük bir monitör için, daha güvenli bahisler 1920 piksel genişliğe sahip görüntüler kullanıyor. Bir kez daha, bir vardiya ile yükseklik her zaman içerik miktarına göre belirlenir, bu nedenle yüksekliği ihtiyaçlarınıza göre ayarlamanız gerekebilir. Kaydırıcı Üstün Görüntüler ve Kaydırıcı Gönderme Üstün Görüntüler Slaytı yalnızca sütundaki kaydırıcıda, 3/4 sütun veya 1 sütun genişliğinde görünür. Slayt görüntüsünüzün en azından masaüstlerine ve mobil cihazlara ayarlamak için bu kadar geniş olduğunu öneriyoruz. 1 Sütun: 450 3/4 Sütun: 330 Sütun: 320 NOT: Tarayıcının 768px’ten küçük genişliği resmi gizleyecek ve yalnızca gönderim teklifini görüntüler. LightBox ekranındaki resim
LightBox özelliğini resminizle kullanırsanız, daha büyük bir resim kullanmak isteyebilirsiniz. Genellikle, 1500 x 844, büyük monitörler için bir ışık kutusu ekranında iyi bir tam ekran görüntüsü için iyi çalışır. Ses modülü kapak genişliği genişliği: en az 780px İlk görüntü küçük olmasına rağmen (230 x 130), bu görüntü 780 pikselden daha az ekran boyutundaki içeriğin tam genişliğini içerir. Blog modülünün tam geniş bir düzen görüntüsü olan üstün görüntüsü: Sütunun genişliği ile aynı blog modülü kullanılarak görüntülenecek yayınınıza üstün görüntüler ekler. Üstün görüntü, bulunduğu sütun kadar geniş olmalıdır. Örneğin, sağ taraf çubuğa sahip iki üçlü sütunda bir blog modülü kullanıyorsanız, Divi’deki iki üçlü sütunun genişliği olduğu için minimum 700 piksel genişliğe sahip üstün bir görüntü kullanmalısınız. Don ‘ t Üstün görüntünün tek yazı şablonunuzda da kullanılacağını unutun (gönderi alıntısını tıkladıktan sonra tam yayınınızı görüntüleyen sayfa). Bu nedenle, tek sayfalık şablonunuzun üstün görüntünüzü görüntülemek için üçüncü iki sütunu da kullandığından emin olun.
1 Sütun: 1080 3/4 Sütun: 795 Sütun: 700 1/2 Sütun: 510 Sütun: 320 1/4 Sütun: 225 Kutu Düzenli Blog Modüllerinin Üstün Görüntüleri Genişlik: Tek yazı sütununun genişliği (varsayılan 795px) ve tıpkı blog modülünün tam genişlik düzeni gibi, tek yazı ekranınız için üstün görüntünün büyük olması gerekir. Blogun ızgara düzeni hakkında harika olan, Divi’nin medya galerisine yüklenen üstün görüntünün daha küçük bir sürümünü kullanmasıdır (400 piksel genişliğe sahip). Bu daha küçük görüntü otomatik olarak oluşturulduğundan ve görüntülendiğinden, sayfanızın ızgara sütunu için çok büyük olan görüntü dosyasının boyutunu yükleme konusunda endişelenmenize gerek yoktur. Porföy modülünün üstün görüntüsü (tam genişlik ve kutu düzeni; standart ve filtrelenebilir) Genişlik: Portföy öğenizi kafes düzeninden görmek için tıkladığınızda tek yazı sütun genişliğiniz (varsayılan: 795px) ile aynı, üstün görüntü içerik bölümünün genişliğine ulaşacaktır. Tıpkı bir blog modülü gibi, tıpkı bir blog modülü gibi, Divi, portföy modülü ızgarasının düzeni için kullanılacak portföyün üstün görüntüsünden daha küçük bir sürüm (400 piksel genişlik) yapar. Bu, dosya boyutunu azaltmak ve sayfanızın açık süresini düşük tutmak için kullanışlıdır. Bu nedenle, yeni bir portföy öğesi oluştururken, üstün görüntünüz en azından tek portföy gönderim sütununuz kadar geniş olması önemlidir. Maksimum Bluckbar Modülü Görüntü: 550px Görüntü Açıklama Aynı kurallara uyuyor, görüntünün genişliği ile eşleşecek aynı kurallara uyacak şekilde, maksimum 550 piksel genişliğe sahip, normal 1080 piksel değil, 1,550 piksel değil. Bu nedenle, güvenli bir bahis maksimum 550 piksel genişliğe sahip görüntüler eklemektir. İşte her sütun düzeninde bulanıklık modülü için görüntünün genişliği. 1 Sütun: 550px 1/2 Sütun: 510px Sütun: 320px 1/4 Sütun: 225px Galeri Modül Görüntüsü (kaydırıcı ve kutu düzeni) Önerilen Boyutlar: 1500 x 844 Galeri modülü görüntüsü LightBox ekranında açıldığından, Işık kutusundaki görüntüyü görüntülerken (büyük monitörler için yaklaşık 1500 piksel genişliğinde) tarayıcı penceresini doldurmak için yeterince büyük bir görüntü kullanmanızı öneririm. Kafes düzeni için Divi daha küçük bir galeri versiyonu yapar (400 piksel genişliği). Bu nedenle, LightBox için sağlanan büyük görüntü dosyasının boyutu Galeri Izgarasında görüntülenmeyecektir. Bu, dosya boyutunu azaltmak ve sayfanızın açık süresini düşük tutmak için kullanışlıdır. Kaydırıcı ekranı için, tüm görüntülerinizi aynı genişlik ve yükseklikle denemek ve tutmanız önemlidir, çünkü slayttan geçtiğinizde görüntünün yüksekliği değişecektir. Boyutlu Modül Görüntüsü Önerilen Genişlik: Modüller için 600 piksel, portreler için iyi bir önlem olan 3: 4 yönü oranı getirme süresi. Aşağıda, her en boy oranı için önerilen görüntü modülünün boyutu: 3: 4 – 600 x 800 (portreler için önerilir) 16: 9 – 600×338 4: 3 – 600 x 400 Düzenlemedeki kişilerin duyarlı işlevsellik modülü görüntüleri 1 sütunun içeriğin sol tarafında 320 pikselde görüntülenecektir. Ekran boyutu 767 pikselden az olduğunda, görüntü içerik alanının genişliğini maksimum 600 piksel genişliğe kadar uzatır. Aşağıdaki GIF, farklı ekran boyutlarında Şekil 600 x 800 (özellik oranı 3: 4 kullanarak) kullanan kişilerin modülünü göstermektedir. Genişlik: Gönderi başlığının post -direk genişliği ile aynı, mevcut yayınınızın başlığını ve isteğe bağlı olarak öne çıkan yayınları görüntüler. Üstün görüntü yerleşiminizi başlığın üstünde, başlık altında veya başlığın bir arka planı olarak seçebilirsiniz. Seçiminiz ne olursa olsun, resim yine de içeriğin genişliğine ulaşacaktır. Dolayısıyla, yayın başlığı modülünüz için 1 sütun düzeni kullanıyorsanız, 1080px genişlik üstün görüntünüz için idealdir. Ürün Görüntüsü Tokorer Önerileri Genişlik Önerilen: 330px Önerilen sütun sayısı: 3 veya daha fazla mağaza modülü, ürününüzü bir sütunun düzeninde altı sütun düzenine göstermenizi sağlar. Her sütun düzeninde görüntülenen bir ürün görüntü genişliği aşağıdadır: 6 sütun: 150px 5 sütun: 183px 4 sütun: 332px 2 sütunlar: 520px 1 sütun: 1080px divi kullanımı daha küçük bir ürün görüntü versiyonu üretir Maksimum genişlik 400 piksel) çünkü mağaza modülü aslında ürünleri sütunlarda veya daha küçük olarak görüntülemek için yapılmıştır. Bu, iki sütunun düzeni ve bir sütunun, ürün resminizin bulanık sürümünü görüntüleyebileceğiniz anlamına gelir. Ayrıca, mağaza modülündeki ürünü tıkladıktan sonra, tek bir ürün sayfası ürün görüntüsünüzü 300 piksel olarak görüntüler. 3 sütun ve bir ürün sayfasının düzenini barındırmak için, ürün görüntü boyutunu minimum 330 piksel genişliğe sahip kullanmaya devam etmenizi öneririm. Tanıklık portresi
Görüntü boyutu Modül ayarlarına dayalı olarak varsayılan olarak Divi, portre görüntüsünüzü 90 x 90 boyutuna ve onu bir daire olarak görüntüleyen 90 sınır genişliğine dönüştürür.Bu nedenle, varsayılan ayarları korursanız, görüntünüzün boyutlarını tam olarak 90 x 90 önereceğim. 1: 1’in oranı olmadan çok büyük bir görüntüye sahip olarak kaçabilirsiniz, ancak bu çok fazla boşa harcanan dosya boyutu olacaktır. sayfa açma saatini düşürerek yavaşlar.Portre görüntü sınırının boyutlarını ve yarıçapını referans modülünün gelişmiş ayarlarından ayarlayabilirsiniz.
Bu ayarı değiştirirken, daire içine alınmış bir görüntünün hala iyi görünmesini istiyorsanız, genişliği ve yüksekliği aynı ve sınır yarıçapını 100’de tuttuğunuzdan emin olun. Arka plan görüntüleri için genel yönergeler Modülünüz için bir arka plan görüntüsü kullanırken, arka plan görüntüsü her zaman en azından olduğu gibi geniş olmalıdır. Sadece Divi sütun genişliği için kılavuzu izleyin: 1 Sütun: 1080 3/4 Sütun: 795 Sütun: 700 1/2 Sütun: 510 Sütun: 320 1/4 Sütun: 225 Aşağıdakiler, arka plan görüntüleri gerektiren bazı modüllerdir. Kolonun Genişliği: Portföy Modülü Portföy Modülü, Davetiye Modülü Modül Kaydırıcı Modülü Modül Modül Modülü Modül Genel Kılavuzu Tam Arka Arka Arka Arka Arka Arka Arka Arka Arka Arka Arka Arka Arka Arka Arka Arka Arka Arka Arka Arka Plan Görüntüleri Kullanıyorsa, bu görüntü tam genişliğinize genişletilecektir. Bu, bu görüntüyü en azından 1920px civarında olan en büyük monitör ekranı yapmanız gerektiği anlamına gelir. Aşağıdaki modül, 1920 piksel genişliğe sahip bir arka plan görüntüsü gerektirecektir: Tam genişliğin tam genişliği tam genişliğinin tam genişliği Tam genişlik tam genişliği tam genişlik tam genişliği tam görüntüsü, tüm bu modüller için, yüksekliğinin yüksekliği önemlidir. Arka plan görüntüsü, modüldeki içerik miktarı ile belirlenir, böylece görüntünün yüksekliğini gerektiği gibi ayarlamanız gerekebilir. Tam geniş başlık modülü tam ekran arka plan görüntüsü tam geniş bir arka plan görüntüsü ile karıştırılmış, tam ekran arka plan görüntüsü, editoryalinizin tarayıcı pencerenize tam boyutuna (geniş ve yükseklik) ulaşmasını sağlayan tam geniş başlık modülünüzdeki ayarları ifade eder. Çoğu monitör, 4: 3 ve 16: 9 numaralarını ve genişlik sadece 1280 piksel veya 1920 piksel olduğundan, tam ekran arka plan görüntüleri için aşağıdaki boyutları önerdiğinden: 4: 3 – 1280 x 960 (portreler için önerilir) 16 : 9 – 1920×1080 Tam Geniş Geniş Başlık Başlığı Modülü Logo Görüntüleri Tam Geniş Başlık Modülü, logoyu başlık içerik alanına yerleştirmenizi sağlar. Logo için standart görüntü boyutu yoktur. Genel bir kılavuz olarak, logonun büyük bir masaüstünde net bir şekilde görülebilecek kadar büyük, ancak akıllı telefon gibi daha küçük bir cihaz yükleyecek kadar küçük kalmasını öneriyorum. Divi tema logosu size iyi bir fikir veren 93 x 43’tür. Tam Genişlik Başlık Görüntü Boyutları Önerilen: 510 x 288 Logoya ek olarak, tam geniş başlık modülü, başlık görüntünün başlık içeriği alanında görüntülenmesine izin verir. Varsayılan olarak, başlık görüntüsü 2 sütun düzeninin sağ sütununda görüntülenir. Görüntü 1/2 sütununda olduğundan, Şekil 510 x 288 çoğu durum için en mantıklıdır. Modülün genel ayarlarında Metin ve Logo Yönlendirme seçeneğini değiştirme, ayarları tercih ederseniz, başlık görüntünün sol sütunda veya ortada görüntülenmesine izin verecektir.