Divi 5'in özelleştirilebilir kesme noktaları hakkında bilmeniz gereken her şey

Web siteleri oluşturma şeklinizi büyük ölçüde geliştirmeye hazır olun. Divi 5, sitenizin duyarlılığı üzerinde inanılmaz bir kontrol sağlayan heyecan verici yeni bir özelliğe, özelleştirilebilir kesme noktalarına sahiptir. Divi 5'in yeni özelleştirilebilir kesme noktalarıyla, tüm cihazlarda kesintisiz bir deneyim yaratabilirsiniz. İster büyük bir masaüstü ekranı ister en küçük mobil ekran için tasarım yapıyor olun, Divi 5, web sitenizin her seferinde piksel mükemmel görünmesine yardımcı olur.

Bu yazıda, bu yeni özellik hakkında bilmeniz gereken her şeyi ele alacağız ve nasıl kullanılacağınızı göstereceğiz!

Yeni özelliği eylemde görmek için aşağıdaki videoya göz atın.

Divi 5'i özelleştirilebilir kesme noktalarıyla indirin

Özelleştirilebilir kesme noktalarıyla, farklı ekran boyutlarına daha iyi uyacak şekilde web sitenizin yanıt verebilirliğini ince ayarlayabilirsiniz. İster ultra geniş masaüstü veya geniş mobil ekranlar için tasarım yapıyor olun, Divi 5 kontrolü elinize koyar.

Divi 5'i web sitemde zaten kullanabilir miyim?

Divi 5'i web sitenizde kullanabilirsiniz, ancak kullanılabilirliği özel kullanım durumunuza bağlıdır. Divi 5 şu anda kamu alfa aşamasında, yani hala aktif olarak geliştiriliyor ve rafine ediliyor. Tüm üretim ortamları için henüz önerilmese de, sorunsuz bir şekilde kullanmaya başlayabileceğiniz belirli senaryolar vardır.

Yerel ve evreleme sitelerinde divi 5'i kullanın

Divi 5 şu anda yerel ve sahneleme ortamları için kullanılabilir ve kullanıcıların yeni özelliklerini canlı web sitelerini etkilemeden güvenli bir şekilde test etmelerini sağlar. Divi 5 hala kamu alfa aşamasında olduğundan, bu yaklaşım kullanıcıların Divi 5'in iyileştirmelerini deneyebilmelerini, hataları rapor edebilmelerini ve üretim sitelerinin istikrarını korurken geri bildirim sağlayabilmelerini sağlar.

Divi 5'i yeni üretim web sitelerinde güvenle kullanabilirsiniz

Divi 5 istikrarlı ve yepyeni web siteleri piyasaya sürmeye hazır. Sıfırdan başlıyorsanız, geriye dönük uyumluluk sorunları hakkında endişelenmeden hızlı performansından, modüler çerçevesinden ve geleceğe dayanıklı teknolojisinden tamamen yararlanabilirsiniz. Bununla birlikte, göç etmeden önce kapsamlı üçüncü taraf entegrasyonlara dayanan mevcut siteler için kapsamlı bir test aşaması gereklidir. Bu noktada, mevcut web sitelerini Divi 5'e dönüştürmenizi önermiyoruz.

Divi'nin özelleştirilebilir kesme noktalarını anlamak

Kesme noktaları duyarlı tasarımın temel bir yönüdür. Birinin akıllı telefonda, tablette veya masaüstüne göz atıyor olsun, sitenizin içeriğinin optimum kullanıcı deneyimini sağlamak için kendini yeniden düzenlediği eşikler görevi görürler.

Divi 5'in kesme noktaları önemli ölçüde geliştirildi, bu da Divi'nin önceki sürümlerinden daha fazla esneklik ve kontrol sunuyor. En fazla yedi kesme noktasını özelleştirmek, daha geniş bir cihaz ve ekran boyutuna uyum sağlamak için sitenizin yanıt verebilirliğine ince ayar yapmanızı sağlar.

Kesme noktası nedir?

Breakpoint, web sitenizin tasarımının farklı cihazlarda optimum bir görüntüleme deneyimi sağlamak için uyum sağladığı belirli bir ekran genişliğidir. Kesme noktaları, ekran boyutuna bakılmaksızın içeriğinizin okunabilir, görsel olarak çekici ve gezinmesi kolay kalmasını sağlar.

Duyarlı web siteleri, bir ekran belirli bir genişliğe ulaştığında farklı stillerin uygulanmasına izin veren CSS medya sorguları kullanılarak tasarlanmıştır. Bir ziyaretçinin ekran boyutu tanımlanmış bir kesme noktasını geçtiğinde, web sitesi kullanılabilirliği korumak için düzenini, yazı tiplerini, aralığını veya diğer tasarım öğelerini otomatik olarak ayarlar.

Divi 5'te daha fazla kesme noktasının tanıtılmasıyla, diğer cihazlar için kesme noktalarını tanımlamak için CSS medya sorgularına olan ihtiyacını sınırlayabilirsiniz.

Kaç tane kesme noktası kullanmalıyım?

Kesme noktası sayısı kitlenizin cihaz kullanımına bağlıdır. Kullanıcılar, küçük akıllı telefonlardan ultra genişlik masaüstü ekranlarına kadar çeşitli ekran boyutlarında web sitelerine erişir. Geleneksel olarak, web tasarımcıları masaüstü, tablet ve mobil olmak üzere üç standart kesme noktası kullandılar, ancak Divi 5 bu özelliği genişleterek daha fazla esneklik için 7'ye kadar özelleştirilebilir kesme noktasına izin veriyor.

Daha fazla kesme noktası etkinleştirme sitemi yavaşlatacak mı?

Hayır, Divi 5'teki daha fazla kesme noktası sağlamak web sitelerinizi yavaşlatmayacaktır. Duyarlı tasarımın eski yöntemlerinden farklı olarak, Divi 5'in yeni çerçevesi performans için optimize edilmiştir ve ek kesme noktalarının sitenize gereksiz yük eklememesini sağlar.

Breakpoints bir web sitesinde veya sayfa düzeyinde etkin mi?

Divi 5'teki kesme noktaları, sayfa başına değil, web sitesi düzeyinde etkinleştirilir ve uygulanır. Kesme noktalarını etkinleştirip özelleştirdikten sonra, tüm web sitesini etkileyerek tüm sayfalarda tutarlı ve duyarlı bir tasarım sağlayacaktır. Kesme noktalarında yaptığınız herhangi bir değişiklik, sitenizin tek tek sayfalarla sınırlı olmak yerine farklı ekran boyutlarına nasıl yanıt verdiğini evrensel olarak ayarlayacaktır.

Divi'de özelleştirilebilir kesme noktaları nasıl çalışır?

Divi 5'in son derece esnek ve sezgisel sistemi, kırılma noktalarını yönetmek için mükemmeldir ve web sitenizin duyarlı tasarımı üzerinde daha fazla kontrol sağlar. Önceki sürümlerden farklı olarak, Divi 5, sitenizin her cihazda mükemmel görünmesini sağlayarak 7'ye kadar kesme noktasını özelleştirmenizi sağlar. Bu sistem, ihtiyaç duyanlar için gelişmiş seçenekler sunarken kullanıcı dostu olacak şekilde tasarlanmıştır.

Kesme Noktaları Nerede Bulunur

Divi 5'te, kesme noktaları sayfa ayarlarınıza entegre edilir, bu da bunların bulunmasını ve özelleştirilmesini kolaylaştırır. Bunlara doğrudan görsel oluşturucu içinde erişebilirsiniz ve aerodinamik bir iş akışı sağlayabilirsiniz.

Kesme Noktaları Nasıl Etkinleştirilir

DIVI ile Düzenle'yi tıklayarak düzenlemek ve görsel oluşturucuyu etkinleştirmek istediğiniz sayfayı açın.

Visual Builder'ın ana görev çubuğunda bulunan Elipsis menüsünü (üç nokta) tıklayın.

Ayarların içinde, gerektiğinde kesme noktalarını etkinleştirmenize veya devre dışı bırakmanıza olanak tanıyan bir dizi geçiş anahtarı bulacaksınız.

Etkinleştirildikten sonra, her bir kırılma noktası görev çubuğunda görünür ve ayarları ayarlamak için tek tek satırlarda veya modüllerde duyarlı kontrolleri tıklamadan tasarımınız boyunca değişiklik yapmanızı sağlar.

Standart kesme noktalarını mı yoksa kendiniz mi kullanmalısınız?

Divi 5'in standart kesme noktaları, telefonlar, tabletler ve masaüstleri dahil olmak üzere en yaygın ekran boyutlarını kapsayacak şekilde tasarlanmıştır. Bu önceden tanımlanmış kesme noktaları, çoğu kullanıcı ve cihaza hitap ettikleri için birçok tasarımcı için yeterlidir.

Ancak, özel kesme noktaları oluşturmanın faydalı olabileceği senaryolar vardır. Örneğin, ultra çapında monitörleri, katlanabilir akıllı telefonları veya daha küçük tabletleri barındırmak istiyorsanız, özel kesme noktaları bu kullanım durumları için tasarımınızı değiştirmenize yardımcı olabilir.

Divi 5'te özel kesme noktalarını kullanma

Duyarlı kesme noktalarının özelleştirilmesi, daha az yaygın cihazlarda veya ekran çözünürlüklerinde tasarım tuhaflıklarını veya içerik ekran sorunlarını ele almak için kullanışlıdır. Ayrıca, belirli bir ekran boyutu için gerekli stilleri yükleyerek sayfa yükleme sürelerini azaltarak web sitesi performansını iyileştirmeye yardımcı olabilirler.

Neyse ki, Divi 5 bu duyarlı kesme noktalarını birkaç tıklamayla özelleştirmeyi inanılmaz derecede kolaylaştırıyor.

Duyarlı cihaz ayarları açıkken, telefon kesme noktasını istediğiniz genişliğe ayarlayın ve ardından diğer cihazlar için adımları tekrarlayın. Siteyi daha küçük cihazlar için erişilebilir hale getirmek istediğimiz için, numarayı telefonlar için 360 piksel olarak ayarlayacağız. İstenen pikselleri ekledikten sonra, devam etmek için Kaydet düğmesini tıklayın.

Divi 5, web sitenizin kesme noktalarını ayarlamak üzere olduğunuzu bildirecektir. Değişikliği onaylamak için güncelleme düğmesini tıklayın.

Kalan ekran boyutları için aşağıdaki kesim noktalarını ekleyeceğiz:

Bu kesme noktaları, web sitenizin çoğu ekran boyutunu ve kullanım durumlarını kapsadığından emin olmak için bir dizi cihaz kapsamaktadır:

• Telefon: 767px, iPhone 8 veya Samsung G7 gibi eski modeller de dahil olmak üzere çoğu akıllı telefon ekran boyutunu kapsıyor.
• Telefon çapında: 860px, iPhone 14 Pro (ve üstü) ve modern Android cihazlar dahil olmak üzere peyzaj modundaki çoğu telefon ekranını kapsar.
• Tablet: 980px, tüm iPad'ler de dahil olmak üzere portre modundaki çoğu tablet ekranı için iyidir.
• Tablet Geniş: 1024px çoğu iPad ve Samsung tabletlerinde peyzaj görünümü için standarttır.
• Geniş Ekran: 1280px, MacBook Air, MacBook Pro 13 ″ ve karşılaştırılabilir Windows cihazları dahil olmak üzere çoğu daha küçük dizüstü bilgisayar (Windows veya MacOS) için iyi bir genişliktir.
• Ultrawide: 2560px, MacBook Pro 15 ″ ve 16 ″ dizüstü bilgisayarlar, iMacs ve standart yüksek tanımlı monitörler gibi daha büyük masaüstü ekranlarını kapsar.

Duyarlı tasarımınızı ön ayarların içinde özelleştirme

Divi 5'in en güçlü yönlerinden biri, özelleştirilebilir kesme noktalarının ön ayarlarla nasıl sorunsuz bir şekilde entegre edildiğidir. Bu, minimum çaba ile tüm web sitenizde gerçekten duyarlı bir tasarım oluşturmanızı sağlar. Mükemmel bir örnek, tüm H1'lerin her ekran boyutunda mükemmel görünmesini sağlamak için bir başlangıç ​​sitesinin H1 ön ayarını değiştirmektir.

Ayarlarını gündeme getirmek için kahraman bölümündeki H1 içindeki herhangi bir yere tıklayarak başlayın.

Ardından, modülün başlığındaki Başlık Ön Ayarları alanını tıklayın.

Önceden ayarlanmış bir liste görünecektir. Yanında mavi onay işareti olan ön ayarları bulun.

Ayarlarını ortaya çıkarmak için aktif ön ayarın üzerine gelin. Düzenlemek için Ayarlar simgesini tıklayın.

Tasarım sekmesini tıklayın ve ardından Başlık Metni boyutunu istenen boyuta ayarlayın.

Önceden ayarlanmış ayarları açık tutun ve başlığın boyutunu ayarlamak için Divi 5 görev çubuğundaki sonraki ekran boyutunu tıklayın.

Kalan ekran boyutları için başlık ön ayarlarını ayarlamak için yukarıdaki adımları tekrarlayın. Bunu tamamladıktan sonra önceden ayarlanmış kaydet düğmesini tıklayın.

Kesme noktalarını değiştirdiğinizde, boyut değişiklikleri başlık ön ayarına yansıtılır.

Divi 4 vs divi 5'te duyarlı düzenleme

Divi her zaman duyarlı tasarımda lider olmuştur, ancak Divi 5 onu yepyeni bir seviyeye taşır. Divi 4, duyarlı web siteleri oluşturmak için sağlam bir temel sağlarken, Divi 5, duyarlı düzenlemeyi her zamankinden daha sezgisel, esnek ve güçlü hale getiren özellikler getiriyor. Divi 5'in Divi 4'ün yetenekleri üzerinde nasıl geliştiğine daha yakından bir bakış.

Kesme noktaları arasında zahmetsiz geçiş

Divi 4'te, kesme noktaları arasında geçiş oldukça basittir, ancak daha fazla zaman içerir ve Divi 5'te bulabileceğiniz geçiş kadar pürüzsüz değildir.

Divi 5, bu iş akışını daha pürüzsüz, daha sezgisel bir arayüzle geliştirir. Şimdi, kesme noktaları arasında anında geçiş yaparak, ayarladığınız gibi tasarımınızı gecikmeden önizleyebilirsiniz. Divi'nin bu yeni sürümü, hangi kırılma noktasını görüntülediğinize bağlı olarak anında tasarım değişiklikleri yapmanızı sağlar. Modlar veya sabit geçiş arasında artık geçiş yok. Bu kesintisiz deneyim zaman kazandırır ve her kırılma noktasında daha uyumlu ve cilalı bir tasarım sağlar.

3 ila 7 kesme noktası

Divi 4 3 farklı kesme noktasını destekler; Bunlar Divi 5'te de bulunabilir.

• Masaüstü: 981px ve üstü
• Tablet: <980px
• Mobil: <767px

Bu kesme noktaları temelleri kapsamakla birlikte, modern izleyiciler tarafından kullanılan çeşitli cihazları ve ekran boyutlarını barındırırken bazen yetersiz kalırlar. Tasarımcılar bazen farklı ekran boyutlarını hedeflemek için, özellikle ultra geniş monitörler veya daha küçük mobil cihazlar için CSS medya sorgularına ihtiyaç duyabilirler.

Divi 5, bu sınırlamayı, kesme noktası sayısını 7 özelleştirilebilir seçeneğe genişleterek ele alarak daha fazla sayıda cihazı hedeflemeyi kolaylaştırdı.

• Telefon: <767px
• Telefon Geniş: < 860px
• Tablet: <980px
• Tablet geniş: < 1024px
• Masaüstü: > 981px
• Geniş ekran: > 1280px
• Ultra geniş: > 1440px

Bu artan esneklik, tasarımınıza daha geniş bir cihaz yelpazesi için ince ayar yapmanıza olanak tanır, bu da sitenizin kompakt akıllı telefonlardan büyük, yüksek çözünürlüklü monitörlere kadar her şeyde mükemmel görünmesini sağlar. Örneğin, artık peyzaj modunda özel bir tablet kesme noktası oluşturabilir veya sitenizi profesyonel ayarlarda kullanılan ultra genişliğinde ekranlar için optimize edebilirsiniz.

Tam kontrol için tuval ölçeklendirme

Divi 5'in en heyecan verici yeni özelliklerinden biri, tasarımcılara web sitelerinin farklı çözünürlüklerde nasıl göründüğü konusunda benzeri görülmemiş bir kontrol sağlayan Canvas Scaling.

Divi 4'te tuval ölçeklendirme gibi görünen şey budur:

Divi 5'in tuval yeniden ölçeklendirme özelliği tüm deneyimi daha da sezgisel hale getiriyor. Sadece birkaç tıklamayla, tasarım tuvalini belirli ekran çözünürlüklerine uyacak şekilde ölçeklendirebilirsiniz ve sitenizin farklı cihazlarda tam olarak nasıl görüneceğini gösterir. Bu özellik, daha küçük mobil ekranları veya ultra geniş masaüstü monitörleri test etmek için kullanışlıdır, tasarımınızın kusursuz olmasını sağlamak için tahtaya yükselir.

Divi 5 sonsuza dek divi ömrü üyeliğinize dahildir

Divi 5'in özelleştirilebilir kesme noktaları, tasarımcıları daha fazla hassasiyetle duyarlı web siteleri oluşturmalarını sağlar. İster mevcut bir düzeni rafine ediyor olun, ister sıfırdan bir site oluşturun, bu yeni araçlar size her ekran boyutu için piksel mükemmel deneyimler oluşturma esnekliği sağlar.

Divi 5'in en iyi kısımlarından biri, Divi üyeliğinize sonsuza dek dahil edilmesidir (hiçbir ek ücret ödemeden). Bugün Divi Lifetime üyeliğine geçerseniz, bir kerelik bir ücret karşılığında Divi 5'e erişim (ve güncellemeler) ve önümüzdeki yıllar boyunca bu gelişen üründen yararlanacaksınız.