24 Önyükleme Sütun Düzeni (İçeriği Düzenle)

Bu en iyi Bootstrap sütun düzenleriyle farklı içerik türlerini web sitenizde çok rahat bir şekilde dağıtabilirsiniz.

Dolaşmak yerine (umutsuzca) tüm araştırmaları sizin yerinize biz yaptık.

Artık farklı sütun düzenleri kullanarak web sitenizi harika içerik vitriniyle zenginleştirebilirsiniz.

Yerleşim tasarımında sütun büyük önem taşır. Sayfa içindeki içeriği ve resimleri DÜZENLENİR. Birbiriyle çatışmıyor.

Bootstrap sütununun kalıbı, sitenize getirmek istediğiniz benzersizliğe göre DEĞİŞEBİLİR.

Ancak sütun düzeni tasarımı ile gerçekten ne demek istiyoruz?

Size daha iyi bir fikir vermek için, işte birkaç örnek:

• Bölünmüş ekran
• Asimetrik Düzen
• Tek kolon
• dergi
• Kartlar Izgarası
• Sabit Kenar Çubuğu
• kutular
• F-Şekil Düzeni

Mümkün olduğu kadar çok farklı tasarım eklemeye özen gösterdik – HERKES İÇİN BİR ŞEY.

En İyi Önyükleme Sütun Düzenleri

Önyükleme Altbilgisi V19

Altbilgilerden bahsederken bile, harika içerik dağıtımı için birden çok sütuna sahip olabilirler. İşte mor arka plan ile modern ve canlı bir çözüm olduğunu web sitenizde kesinlikle baharat şeyleri olacak.

Sayfanızın birinci sınıf kullanıcı deneyimi için ince ayar yapabileceğiniz ve etkinleştirebileceğiniz dört sütun vardır.

Tasarım aynı zamanda tüm popüler cihazlarla uyumludur ve ANINDA akıllı telefonlara, tabletlere ve masaüstü bilgisayarlara uyum sağlar.

Şablonu istediğiniz gibi değiştirebilseniz de, telif hakkı bölümünü olduğu gibi tutmanız gerektiğini unutmayın.

Daha fazla bilgi / Demo İndir

Önyükleme Altbilgisi V18

Bootstrap Footer V18, web sitenizde kıskanılacak bir alt bilgi alanı oluşturmak için birkaç sütun içeren temiz bir düzendir.

Hakkında bölümü ve sosyal medya simgelerinin yanı sıra, sayfalar ve kategoriler için farklı bağlantılar ve bir iletişim formu bulunmaktadır.

Tek sayfalık bir web sitesi oluşturuyorsanız bunu kullanabilirsiniz, ancak onu diğer site stillerine de entegre etmekte ÜCRETSİZDİR. Kendinizi herhangi bir şekilde, şekilde veya biçimde sınırlamanıza gerek yok.

Daha fazla bilgi / Demo İndir

Önyükleme Altbilgisi V10

Dört sütunlu temiz ve minimalist bir alt bilgi alanı arayışındaysanız, bu Bootstrap düzeni en iyi seçeneğinizdir. Sadece tasarımın güzel ve duyarlı olması değil, kod yapısı da oldukça kullanıcı dostu.

Bununla birlikte, ister acemi ister uzman olun, en başından itibaren güçlü altbilgi bölümünüz üzerinde çalışmaya başlayabilirsiniz.

İstediğiniz bağlantıyı EKLEYEBİLİR, kullanıcılarınızı bülteninize abone olmaya teşvik edebilir ve web sitenizi en sevdiğiniz sosyal medya platformlarına bağlayabilirsiniz.

Daha fazla bilgi / Demo İndir

İletişim Formu V14

İletişim Formu V14, web sitenizin iletişim bölümü veya sayfası için bir Bootstrap sütun düzenine yaratıcı bir yaklaşımdır.

İki bölüme ayrılmıştır ; biri işiniz, hizmetleriniz ve diğer her şey hakkında ek ve cesaret verici sözler içindir ve diğeri ise eksiksiz bir iletişim formu görüntüler.

Formda BİRDEN ÇOK alan, bir metin alanı vardır ve hatta bir açılır menü içerir. Marka düzenlemelerinizi özelleştirmek ve geliştirmek zahmetsiz olduğundan, üzerinde çalıştığınız herhangi bir proje için aracı kullanmaktan çekinmeyin.

Daha fazla bilgi / Demo İndir

İletişim Formu V13

Web sitenize veya blogunuza bir iletişim sayfası eklerken, sadece formla birlikte YAPMAYIN. Farklı ayrıntıları ve bilgileri görüntülemek için birkaç sütunu destekleyen temiz bir tasarımla her zaman işleri hızlandırabilirsiniz.

Bootstrap tabanı sayesinde, yerleşim düzeninin tamamen akıcı olduğunu ve farklı ekran boyutlarına sorunsuz bir şekilde uyum sağladığını biliyorsunuz. Hatta tam olarak taahhütte bulunmadan önce bazı şeyleri önceden test edebilirsiniz.

İletişim formuna gelince, ad, e-posta ve metin alanı içeren oldukça basittir.

Daha fazla bilgi / Demo İndir

3 Sütun Duyarlı Düzen

Üç sütunlu düzen, ziyaretçiye üç farklı seçenek sunmak için mükemmel bir tasarımdır. Resimden de görebileceğiniz gibi, yan yana görüntülenen üç sütun var.

Sütunun konumu sayfanızın boyutuna göre değişebilir. Örneğin, sayfanın genişliği daha küçük bir ölçeğe ayarlanırsa, birinci ve ikinci sütunun altında üçüncü sütun görünür.

Öte yandan, sayfanın yüksekliğini yeniden ayarlamak üç sütun yapar ve bunlar birbiri ardına istiflenir .

Bu, kullanıcıya üç farklı bilgi sağlayan bir web sitesi için MÜKEMMEL olabilir. Bu önyükleme sütunu hakkında seveceğiniz şey, diğer web sitesi yaratıcılarına sağladığı esnekliktir.

Güvenilir bir CSS tabanlı sütun çözümü bulmak oldukça zordur.

Daha fazla bilgi / Demo İndir

Saf CSS Pinterest Sütun Düzeni

Resimden de görebileceğiniz gibi, bu tip sütun, 'Kartların Izgarası' Yerleşimi olarak adlandırdığınız şeydir. Bu önyükleme sütun stilinin amacı nedir? Genellikle tek bir sayfada çok fazla bilgi göstermesi gereken web sitelerinde kullanılır.

Kart şeklindeki önizlemeler , içinde ne olduğuna dair bir resim ve kısa bir açıklama gösterir. İzleyicilerin beğendikleri öğeyi sadece karta tıklayarak bulmalarına yardımcı olur.

Boyutları, sütun sayısını, aralığı ve kartların stilini değiştirmek için değiştirebileceğiniz bu düzen türü esnektir.

Bu düzeni en çok YouTube ve Pinterest'te görebilirsiniz (bu resimde aynı düzendir). Bu Pinterest düzeni için kullanılan standart uygulama olan JavaScript yerine Dudley Storey CSS kullandı.

Ona göre, bunu yaratmak için Kushagra Agarwal'dan ilham aldı.

Programı hakkında daha ayrıntılı bir açıklama görmek isterseniz, bloguna buradan göz atabilirsiniz: http://thenewcode.com/825/Pinterest-Style-Column-Layout-In-Pure-CSS.

Daha fazla bilgi / Demo İndir

CSS Izgarası kullanarak İzometrik e-Ticaret Düzeni

Ürünlerinizi satmak için girişimci bir tip misiniz? Muhtemelen bu düzeni kullanmanız gerekir. Resimden de görebileceğiniz gibi, ürününüzü potansiyel alıcılarınıza sergilemenin harika bir yolu.

Andy Barefoot bu düzeni yaratan kişiydi. Resimde çok sayıda ayakkabı ürünü gösteriliyor, ancak aynısını e-ticaret web sitenize yapmak istiyorsanız, bu sizin için hazır bir tasarım.

Andy Barefoot, bu ızgara düzenini CSS kullanarak oluşturdu. Fare düğmesini öğenin üzerine getirdiğinizde, inanılmaz bir kayan efekt vardır . Her parçada fiyatlar ziyaretçi veya alıcı tarafından görülebilir.

Daha fazla bilgi / Demo İndir

Paralaks Etkisi

Önyükleme sütun düzeni oluşturan benzersiz bir stildir. Yukarıdaki örnekte, sayfayı aşağı kaydırdıkça sütun birinden diğerine değişir.

Tek bir sayfaya farklı içerik koymak istiyorsanız bu, sayfanız için ETKİLEYİCİ bir stildir. Adefful bunun için Javascript kullanmadı. Bu tasarımı oluşturmak için yalnızca HTML ve CSS kullandı.

Web sitesine daha fazla etki eklemek istiyorsanız, istediğiniz gibi daha fazlasını ekleyebilirsiniz.

Daha fazla bilgi / Demo İndir

Çoğunlukla Akışkan Brad Frost

Önyükleme sütun düzeni için kullandığı kalıp, çoğunlukla birkaç web sitesinde görebileceğiniz şeydir. Bu düzene Magazin de denir. Temel nedir? Resim örneğine tekrar bakın.

Kolonlar esas olarak modüler kavrama ile ayrılır. Bu tür çok sütunlu web sitesi, daha büyük bir sütun boyutu oluşturarak ana içeriğe öncelik vermek için tasarlanmıştır.

Son zamanlarda Yahoo sayfasına gittiniz mi? Aynı MULTI-COLUMN ilkesini kullanır. Başlık veya büyük haber ilk sütunda ve genellikle en büyük sütunda sunulur.

En kritik değeri veya içeriği göstererek okuyucunun dikkatini çeker . Brad Frost, bu düzeni Luke Wroblewski'nin deseninden esinlenerek yarattı.

Daha fazla bilgi / Demo İndir

4'lü Kavrama Bloğu

Bu düzen, çeşitli içeriği tek bir sayfada sergilemek için harikadır. Peki değerli bir şekilde nasıl kullanılır? Bir portföy yapmak istiyorsanız, bu kullanmak için harika bir tasarım olacaktır.

Örnek resimde, içeriğinize katlanmak için 12 kutu var. Bir kavrama bloğu kullanmak, resimleri birkaç kutuda görüntülemek için mükemmel bir yoldur. Bir cep telefonunda kullanıldığında, tabloları TEK SATIR'da dikey olarak görebilirsiniz.

Brad Frost bu düzen tasarımını yarattı. Bitirmek için HTML ve CSS programlarını kullandı. Fotoğraflarınızı blogunuzda sergilemeyi seviyorsanız, bu sizin en büyük kurtarıcınız olabilir!

Daha fazla bilgi / Demo İndir

3 Eşit Genişlikli Sütun

Bu eşit genişlikte sütunda içerik, akışkan bir ızgara kullanarak birbirinden ayrılır. Basit olmasına rağmen, sütunların içine birçok bilgi koyabilirsiniz.

Bu sütun stili, bloglar ve makale amaçlı olarak da tercih edilir. Minimalist görünümü sayesinde olduğu gibi özgürce kullanabilirsiniz.

Daha fazla bilgi / Demo İndir

Flexbox Izgarası

Bu düzen, başka bir web sitesinde görebileceğiniz tipik bir önyükleme sütunu stili içerebilir. Hiç şüphesiz blogunuzu sergilemenin dahice bir yoludur .

Kutuların üzerine geldiğinizde çeşitli animasyonlarla hareket eder. Bu tür sütun kutularını web sitenizde de kullanabilirsiniz.

Kuşkusuz, içerik bir web sitesinde ÖNEMLİ olan şeydir, ancak sevimli ve çekici tasarımlar da bir avantajdır.

Web sitenizin içeriği ne kadar iyi olsa da, çok fazla gecikme olması veya doğru düğmeler arasında gezinememesi ziyaretçiler için can sıkıcı olacaktır.

İyi bir şey, aynı anda sütununuza iyi içerik koyabilir ve benzersiz görseller oluşturabilirsiniz .

Daha fazla bilgi / Demo İndir

Sonsuz Duyarlı Izgara (Duvar/İzotop) + Gösterim Animasyonu

Goji (yaratıcının kullanıcı adı), bu mizanpaj tasarımını Tymphanus Codrops Makalesinden esinlenerek oluşturdu. Sütunlara birçok fikir koyabilirsiniz.

Bu, Google veya Bing resimlerinden görebileceklerinize benzer. Web sitenize ekleyebileceğiniz sonsuz ızgaralar vardır. Çoğu zaman fotoğraf sunumları için idealdir.

Daha fazla aşağı kaydırdıkça, çok daha fazla seçenek bulacaksınız. Ayrıca her ızgaraya ekleyebileceğiniz bir filtre efekti vardır.

Daha fazla bilgi / Demo İndir

Sütun Akışı

Colum Flow, web'de yaygın olarak kullanılan önyükleme sütunu düzenlerinden biridir. İçeriği daha erişilebilir ve daha hızlı taramak isteyen kullanıcılar için tamamen F-şekilli bir plan yapılmıştır.

Öyleyse merak edebilirsiniz, buna nasıl F-şekli denir? Genellikle, bir okuyucu bir materyali okuduğunda, sol üst köşeden sağa doğru başlar ve ardından bir sonraki satıra geçer.

Bu tür bir düzeni nerede kullanabilirsiniz? Öncelikle gazete ve online dergi siteleri. Bloglar da.

Yapımcı tarafından tasarlanan görselden görebileceğiniz gibi, daha organize ve içerik izleyiciye daha iyi görsel izlenimler veriyor.

Daha fazla bilgi / Demo İndir

Fantezi Görüntü Bölme (SplittingJS)

Düzeninize biraz benzersiz bir stil eklemek istiyorsanız, bu sizin için bir şey olabilir. Resimden de görebileceğiniz gibi üç farklı geçiş var : Slant and Slide, Slanted Perde, Show Border ve Slide Over.

Fare düğmesini görüntünün üzerine getirdiğinizde geçiş çalışmaya başlayacaktır.

Daha fazla gezinme gerektirse de, eğlenceli stiller site ziyaretçilerine DAHA FAZLA heyecan katabilir. İçerik oluşturucu, stili oluşturmak için splitting.js'yi kullandı.

Daha fazla bilgi / Demo İndir

e-Ticaret Kaydırıcısı v2.1

Bu düzenin yaratıcısı, girişimcilere web sitelerini nasıl daha etkileşimli hale getirebilecekleri konusunda daha iyi bir fikir vermektir.

Resimden de görebileceğiniz gibi, otomatik geçişli büyük bir resme sahip. Aradığınız içeriği bulmak istiyorsanız resmin yanındaki oka tıklayın.

Bu düzen, sınırlı sayıda veya sezonun temasını göstermek için yapılmıştır. Ziyaretçilerin öğeye kolayca tıklamasını sağlamak UYGUN stratejilerden biridir.

Web siteniz işle ilgili olmasa da bu düzen, galerilerini tek sayfada göstermek isteyen bloggerlar tarafından da kullanılabilir. Ayrıca daha hızlı navigasyon için yapılmıştır.

Bunun dışında, bu düzen yaratıcısı Pedro Castro, bu stili nasıl yaptığına dair fikirlerini paylaşmak istiyor.

Daha fazla bilgi / Demo İndir

Muhteşem Galeri

Magnific Gallery, görüntüleri tek bir sayfadan gösteren duyarlı ızgaraları göstermenin harika bir yoluna sahiptir. Fare düğmesini görüntünün üzerine getirdiğinizde, fotoğraf başlığı görünecektir.

Verdiği iyi görsellerin yanı sıra her bir öğeye daha kaliteli içerik sağlar.

Sütunlar ayrıca içine bir başlık yazmak için YETERİNCE BÜYÜK.

Bununla aynı prensibe sahip diğer sütun düzenlerinde gördüğüm bir sorun, başlığın ayrıntılı bilgi için yer kaplamasıdır. (Çok küçük gelebilir.)

Bunu bir işletme web sitesi için kullanacaksanız, her önyükleme sütununa bir resim koyabilirsiniz ve tüm ayrıntılar bunun içinde görünecektir. Alıcı için daha uygun olacaktır.

Daha fazla bilgi / Demo İndir

React ve CSS Grid Resim Galerisi

Görsel içeriğinizde gezinirken hoş bir deneyim yaratan bu resim galerisi düzeni .

Resme tıkladığınızda daha belirgin hale gelecek ve ortada görünecektir. Galeride daha fazla fotoğraf görmek istiyorsanız, sonraki düğmesine tıklayın.

Öte yandan, bir önceki görüntüye geri dönmek istiyorsanız, dönüş okunu tıklayın. Bu genellikle Instagram profillerinde görebileceğiniz düzendir.

Bloglarınız varsa ve seyahat fotoğraflarınızı okuyucunuza göstermek istiyorsanız, bu tam size göre. Görüntüleri sunmak, ziyaretçilerinizle daha fazla iletişim kurmanın EN İYİ YOLLARINDAN biridir.

Daha fazla bilgi / Demo İndir

Mobil Menü ile Flexbox Izgara Düzeni

İşte web sitenizde kullanılabilen başka bir Flexbox Düzeni. Resimden de görebileceğiniz gibi, üst kısımda iki tane daha belirgin sütun var.

Bu, bu ikisinin diğerlerinden daha ANLAMLI içeriğe sahip olduğu anlamına gelir. Ondan sonra birkaç küçük sütun göreceksiniz. Bu sütunlar ana hikayeyi destekleyen içeriğe sahiptir.

Onların okuyuculara bazı değerli fikir veya olayları işaret etmek istiyorsanız web siteniz için en iyi seçimdir. İstediğiniz gibi daha fazla önyükleme sütunu ekleyebilirsiniz.

Düzen tasarımı genellikle birden çok web sitesinde görülür ve diğer popüler sütunlardan daha etkili görünmektedir.

Daha fazla bilgi / Demo İndir

Tip Festivali – GSAP Geçişi

Bu GSAP Geçişi, tek bir resim sütunudur. Bu tür bir düzeni kullanmanın amacı nedir? Daha fazlasını söylemekten daha fazlasını göstermektir. Bunun da ötesinde, görselleri kullanmak daha fazla insanı birbirine bağlamanın harika bir yoludur.

Bazıları web sitesindeki içeriği okumak için tembeldir. Yalnızca içeriğe odaklanmak yerine, neden web sitenizin temasını vurgulayan çekici resimler aramaya çalışmıyorsunuz?

Bu tek sütunda kullanılan strateji, daha az söylemek ve daha fazlasını göstermektir. Ayrıca daha fazla insanı web sitesini ziyaret etmeye yönlendirebilir. Okuyucu üzerinde daha önemli bir etki yaratır.

İyi bir ilk izlenim kalıcıdır.

Ziyaretçilerinize daha iyi izlenimler bırakırsanız, daha fazlası için geri gelmek için nedenleri olacaktır. Bu nedenle görüntüleri AKILLI SEÇMEK önemlidir.

Temanızla alakasız resimler onları karıştırabilir. Mümkün olan en iyi görüntü için bir arkadaş veya profesyonel isteyin.

Daha fazla bilgi / Demo İndir

jaluzi

Bu Jaluziler, bir vurgulu geçiş fikridir. Farenizi bir panjur sütununa getirdiğinizde, ters dönecektir. Tek bir sayfaya çok sayıda sütun koymak istiyorsanız, bu harika bir fikir olabilir.

Daha fazla bilgi / Demo İndir

CSS Resmi Vurgulu Efektler

Bu Görüntü, Hover Efekt Düzeni, görüntülerinizi farklı efektlerle tasvir etme konusunda size harika bir fikir verir.

Uzaklaştır, Yakınlaştır, Kaydır, Bulanıklaştırma veya Gri Ölçek, Sepya, Bulanıklık + Gri Tonlama, Opaklık, Yanıp Sönme, Parlaklık, Daire seçeneklerinden herhangi birini seçebilir ve hiçbir etki yaratmayabilirsiniz. Resim amaçlı bloglar için, bu sizin için hazır bir düzen olabilir.

Daha fazla bilgi / Demo İndir

Makale Haber Kartı

Bu düzen tasarımının yapımcısı için eller aşağı. Web siteniz için en uygun haber dostu stili arama konusunda sorun yaşamayacaksınız. Fotoğraftan da görebileceğiniz gibi, sütunlar bir kartta temsil edildi.

Her kartın altında bir resim ve bir açıklama vardır. İlk fotoğrafta, farenizi ona doğru hareket ettirdiğinizde görüntü yukarı kalkar ve açıklama belirir.

Sayfanın minimum alanına bir resim ve kısa bir açıklama koymanın harika bir yoludur.

Daha fazla bilgi / Demo İndir

Önyükleme sütun düzeni tasarımlarını seçerken, temanızla alakalı olanı bulmak en iyisidir. İlgisiz sütunlar koymak, ziyaretçilerin kafasını karıştırır ve uzaklaştırır.

Bunun için dikkatli düşünmek çok önemlidir. Resimlerle ilgileniyorsanız, galeri stili düzenleri seçebilirsiniz. Aksi takdirde, web sitenizde daha uzun bir içeriğe sahip olmak istiyorsanız, Dergi veya F-Shape düzeni sizin için olabilir.

Yukarıdaki düzenlerin KALİTESİ hakkında endişelenmenize gerek yok.

Bu mizanpajları programlayan yaratıcılar, size güvenilir mizanpaj tasarımları sunmak için yeterli bilgiye sahiptir. Evet, içerik önemlidir, ancak iyi bir web tasarımı, tasarımları hiç umursamayan web sitelerinden daha fazla trafik çeker.