24 Layout de coloane Bootstrap (Organizați conținutul)

Puteți distribui diferite tipuri de conținut cu aceste cele mai bune planuri de coloane Bootstrap foarte convenabil pe tot site-ul dvs. web.

În loc să ne rătăcim (fără speranță), am făcut toate cercetările în locul dvs.

Acum puteți să vă îmbogățiți site-ul web cu o prezentare excelentă de conținut, utilizând diferite planuri de coloane.

În proiectarea aspectului, coloana are o importanță capitală. ORGANIZEAZĂ conținutul și imaginile din interiorul paginii. Nu ciocnind unul cu celălalt.

Modelul coloanei Bootstrap POATE VARIA pe unicitatea pe care doriți să o aduceți pe site-ul dvs.

Dar ce înțelegem cu adevărat prin proiectarea aspectului coloanelor?

Pentru a vă face o idee mai bună, iată câteva exemple:

• Ecran divizat
• Aspect asimetric
• Coloană unică
• Revistă
• O grilă de cărți
• Bara laterală fixă
• Cutii
• Aspect F-Shape

Ne-am asigurat să includem cât mai multe modele diferite - Ceva pentru TOȚI.

Cele mai bune planuri de coloane Bootstrap

Footstrap Footer V19

Chiar și atunci când vorbim despre subsoluri, acestea pot prezenta mai multe coloane pentru o distribuție excelentă a conținutului. Iată o soluție modernă și vibrantă, cu un fundal violet, care va condimenta cu siguranță lucrurile pe site-ul dvs. web.

Există patru coloane, pe care le puteți regla și activa pentru experiența de utilizare de top a paginii dvs.

Designul este, de asemenea, în ton cu toate dispozitivele populare, aclimatându-se instantaneu la smartphone-uri, tablete și desktop-uri.

Rețineți, deși puteți modifica șablonul după dorința inimii, ar trebui să păstrați intactă secțiunea privind drepturile de autor.

Mai multe informații / Descărcați Demo

Footstrap Footer V18

Bootstrap Footer V18 este un aspect curat cu mai multe coloane pentru a crea o zonă de subsol de invidiat pe site-ul dvs. web.

Pe lângă secțiunea despre și pictogramele de pe rețelele de socializare, există diferite linkuri pentru pagini și categorii și un formular de contact.

Puteți să-l utilizați dacă creați un site web de o singură pagină, dar FĂȚI-VĂ GRATUIT să-l integrați și în alte stiluri de site-uri. Nu este nevoie să vă limitați în vreun fel, formă sau formă.

Mai multe informații / Descărcați Demo

Bootstrap Footer V10

Dacă sunteți în căutarea unei zone de subsol curate și minimaliste cu patru coloane, acest aspect Bootstrap este cel mai bun pariu. Nu este pur și simplu că designul este frumos și receptiv, dar structura codului este, de asemenea, foarte ușor de utilizat.

Acestea fiind spuse, indiferent dacă sunteți începător sau expert , puteți începe să lucrați la secțiunea de subsol puternică chiar de la început.

PUTEȚI ADĂuga orice link doriți, încurajați-vă utilizatorii să se aboneze la newsletter-ul dvs. și să vă conecteze site-ul web la platformele dvs. preferate de social media.

Mai multe informații / Descărcați Demo

Formular de contact V14

Formularul de contact V14 este o abordare creativă a unui aspect al coloanei Bootstrap pentru secțiunea sau pagina de contact a site-ului dvs. web.

Este împărțit în două secțiuni ; una este pentru cuvintele suplimentare și încurajatoare despre afacerea dvs., servicii și altele, iar cealaltă afișează un formular de contact complet.

Formularul are MULTIPLE câmpuri, o zonă de text și include chiar și un meniu derulant. Simțiți-vă liber să folosiți instrumentul pentru orice proiect la care lucrați, deoarece este ușor să vă personalizați și să vă îmbunătățiți cu reglementările dvs. de branding.

Mai multe informații / Descărcați Demo

Formular de contact V13

Când adăugați o pagină de contact pe site-ul sau blogul dvs., NU mergeți doar cu formularul. Puteți oricând îmbunătăți lucrurile cu un design îngrijit, care prezintă mai multe coloane pentru a afișa diferite detalii și informații.

Datorită bazei Bootstrap, știți că aspectul este complet fluid , adaptându-se la diferite dimensiuni ale ecranului fără probleme. Puteți chiar să testați înainte lucrurile înainte de a vă angaja complet.

În ceea ce privește formularul de contact, este destul de simplu, cu nume, e-mail și zonă de text.

Mai multe informații / Descărcați Demo

Aspect cu 3 coloane responsive

Aspectul cu trei coloane este un design excelent pentru a oferi vizitatorului trei variante. După cum puteți vedea din imagine, există trei coloane afișate unul lângă altul.

Poziția coloanei poate varia în funcție de dimensiunea paginii dvs. De exemplu, dacă lățimea paginii este ajustată la o scară mai mică, a treia coloană va apărea sub prima și a doua coloană.

Pe de altă parte, reajustarea înălțimii paginii face trei coloane și acestea vor fi stivuite între ele.

Acesta poate fi PERFECT pentru un site web care furnizează utilizatorului trei informații diferite. Ceea ce vă va plăcea la această coloană bootstrap este flexibilitatea pe care o oferă altor creatori de site-uri web.

Este destul de greu să găsești o soluție de coloană bazată pe CSS.

Mai multe informații / Descărcați Demo

Aspect columnar pur CSS Pinterest

După cum puteți vedea din imagine, acest tip de coloană este ceea ce ați numit aspectul „O grilă de cărți”. Care este scopul acestui stil de coloană bootstrap? Este adesea folosit pentru site-urile web care trebuie să afișeze multe informații pe o singură pagină.

Previzualizările în formă de card arată o imagine și o scurtă descriere a ceea ce este în interior. Ajută publicul să găsească elementul care îi place, făcând clic pe card.

Acest tip de aspect este flexibil în care îl puteți manipula pentru a schimba dimensiunile, numărul de coloane, spațierea și stilul cărților.

Puteți vedea în principal acest aspect pe YouTube și Pinterest (care este același aspect pe această imagine). În loc să utilizeze JavaScript - care este aplicația standard utilizată pentru acest aspect Pinterest - Dudley Storey a folosit în schimb CSS .

Potrivit lui, el a fost inspirat de Kushagra Agarwal pentru a crea acest lucru.

Dacă doriți să vedeți o explicație mai detaliată despre programul său, puteți consulta blogul său aici: http://thenewcode.com/825/Pinterest-Style-Column-Layout-In-Pure-CSS.

Mai multe informații / Descărcați Demo

Aspect isometric de comerț electronic folosind grila CSS

Ești un tip antreprenor pentru a -ți vinde produsele ? Probabil că trebuie să utilizați acest aspect. După cum puteți vedea din imagine, este un mod fantastic de a vă prezenta articolul potențialilor cumpărători.

Andy Barefoot a fost cel care a creat acest aspect. Imaginea prezintă o mulțime de articole pentru încălțăminte, dar dacă doriți să faceți același lucru cu site-ul dvs. de comerț electronic, acesta este un design pentru dvs.

Andy Barefoot a creat acest aspect al grilei utilizând CSS. Pe măsură ce deplasați butonul mouse-ului pe element, are un efect plutitor incredibil . În fiecare piesă, prețurile sunt vizibile pentru vizitator sau cumpărător.

Mai multe informații / Descărcați Demo

Efect Parallax

Este un stil unic care creează un aspect de coloană bootstrap. Din exemplul de mai sus, pe măsură ce derulați pagina, coloana se schimbă de la una la alta.

Acesta este un stil IMPRESIONANT pentru pagina dvs. dacă doriți să puneți conținut diferit pe o singură pagină. Adefful nu a folosit Javascript pentru aceasta. El a folosit exclusiv HTML și CSS pentru a crea acest design.

Dacă doriți să adăugați un impact mai mare site-ului web, puteți adăuga mai mult în el după cum doriți.

Mai multe informații / Descărcați Demo

Majoritatea fluidelor de Brad Frost

Modelul pe care l-a folosit pentru aspectul coloanei bootstrap este ceea ce puteți vedea mai ales pe mai multe site-uri web. Acest aspect se mai numește Revistă. Care este baza? Uită-te din nou la exemplul de imagine.

Coloanele sunt separate în principal de mânerul modular . Acest tip de site web cu mai multe coloane a fost conceput pentru a prioritiza conținutul principal prin crearea unei dimensiuni mai mari a coloanei.

Ați fost pe pagina Yahoo în ultima vreme? Folosește același principiu MULTI-COLOANĂ. Titlul sau marea știre este prezentat în prima coloană și, de obicei, cea mai mare.

Atrage atenția cititorului arătând cea mai critică valoare sau conținut. Brad Frost a creat acest aspect inspirat de modelul lui Luke Wroblewski.

Mai multe informații / Descărcați Demo

4-Up Grip Block

Acest aspect este excelent de utilizat pentru prezentarea diverselor conținuturi într-o singură pagină. Deci, cum să-l utilizați într-un mod valoros? Dacă doriți să creați un portofoliu , acesta ar fi un design excelent de utilizat.

Din imaginea de exemplu, există 12 casete de adăugat cu conținutul dvs. Folosirea unui bloc de prindere este modalitatea perfectă de afișare a imaginilor în mai multe cutii. Când este utilizat pe un telefon mobil, puteți vedea tabelele în ONE LINE pe verticală.

Brad Frost a creat acest design de aspect. El a folosit programe HTML și CSS pentru a-l termina. Dacă vă place să afișați fotografiile pe blogul dvs., acesta poate fi salvatorul dvs. final!

Mai multe informații / Descărcați Demo

3 coloane cu lățime egală

În această coloană cu lățime egală, conținutul se separă unul de celălalt folosind o rețea fluidă. Deși simplu, puteți pune o mulțime de informații în coloane.

Acest stil de coloană este, de asemenea, preferat pentru bloguri și articole. Îl puteți folosi în mod liber așa cum este datorită aspectului său minimalist.

Mai multe informații / Descărcați Demo

Grila Flexbox

Acest aspect ar putea include un stil tipic de coloană bootstrap pe care îl puteți vedea pe un alt site web. Este, fără îndoială, un mod genial de a-ți prezenta blogul.

Odată ce treceți prin casete, acesta se deplasează cu diverse animații. Puteți utiliza și acest tip de cutii de coloane pe site-ul dvs. web.

Desigur, conținutul este esențial pe un site web, dar design-urile drăguțe și atrăgătoare sunt, de asemenea, un avantaj.

Chiar și cât de bun este conținutul din site-ul dvs. web, ar fi un deranj pentru vizitatori dacă există o mulțime de întârzieri sau nu pot naviga prin butoanele corecte.

Un lucru bun, puteți pune conținut bun și puteți crea imagini unice în coloana dvs. în același timp.

Mai multe informații / Descărcați Demo

Grilă de răspuns infinit (zidărie / izotop) + Revelați animația

Goji (numele de utilizator al creatorului), a creat acest design de aspect inspirat din articolul Tymphanus Codrops. Puteți pune o mulțime de idei prin coloane.

Acest lucru este similar cu ceea ce puteți vedea din imaginile Google sau Bing. Există grile infinite pe care le puteți include pe site-ul dvs. web. De cele mai multe ori, este ideal pentru prezentări foto.

Pe măsură ce derulați mai mult, veți găsi mai multe opțiuni. Există, de asemenea, un efect de filtrare pe care îl puteți adăuga pe fiecare grilă.

Mai multe informații / Descărcați Demo

Coloane Flux

Colum Flow este unul dintre aspectele de coloane bootstrap utilizate în mod obișnuit pe web. Un plan în formă de F este realizat în întregime pentru utilizatorii care doresc să scaneze conținutul mai accesibil și mai rapid .

Așadar, s-ar putea să vă întrebați, cum se numește forma F? De obicei, atunci când un cititor citește un material, acesta începe din colțul din stânga sus spre dreapta, apoi trece la o altă linie următoare.

Unde puteți utiliza acest tip de aspect? Ziare și site-uri web de reviste online în principal. De asemenea, bloguri.

Din ceea ce puteți vedea din imaginea proiectată de producător, este mai organizat , iar conținutul are impresii vizuale mai bune pentru public.

Mai multe informații / Descărcați Demo

Fancy Image Splitting (SplittingJS)

Dacă doriți să adăugați un stil unic aspectului dvs., acest lucru poate fi un lucru pentru dvs. După cum puteți vedea din imagine, există trei tranziții diferite : Slant and Slide, Slanted Blinds, Show Border și Slide Over.

Plasați butonul mouse-ului pe imagine și tranziția va începe să funcționeze.

Deși necesită mai multă navigare, stilurile distractive pot adăuga mai multă emoție vizitatorilor site-ului. Creatorul a folosit splitting.js pentru a crea stilul.

Mai multe informații / Descărcați Demo

Sliderul eCommerce v2.1

Creatorul acestui aspect este de a oferi antreprenorilor o idee mai bună despre cum să-și facă site-ul web mai interactiv .

După cum puteți vedea din imagine, are o imagine de ansamblu cu o tranziție automată. Dacă doriți să găsiți conținutul pe care îl căutați, faceți clic pe săgeata de lângă imagine.

Acest aspect este creat pentru a afișa ediția limitată sau tema sezonului. Este una dintre strategiile PROPERE de a permite vizitatorilor să facă clic pe articol cu ​​ușurință.

Chiar dacă site-ul dvs. web nu este despre afaceri, acest aspect poate fi folosit și de bloggerii care doresc să-și arate galeriile pe o singură pagină. Este, de asemenea, conceput pentru o navigare mai rapidă .

În afară de asta, Pedro Castro, acest creator de layout, vrea să împărtășească ideile sale despre modul în care a realizat acest stil.

Mai multe informații / Descărcați Demo

Galeria Magnifică

Magnific Gallery are o modalitate excelentă de a afișa grile receptive care arată imaginile dintr-o singură pagină. Când plasați butonul mouse-ului pe imagine, va apărea legenda fotografiei .

În afară de aspectele vizuale bune pe care le oferă, acesta oferă o calitate mai bună a conținutului pentru fiecare articol.

Coloanele sunt, de asemenea, suficiente pentru a scrie o legendă în ea.

O problemă pe care o văd în alte planuri de coloane cu același principiu ca și aceasta este că legenda ocupă spațiu pentru informații detaliate. (Poate deveni prea mic.)

Dacă doriți să utilizați acest lucru pentru un site web de afaceri, puteți pune o imagine în fiecare coloană bootstrap și toate detaliile vor apărea în interiorul acesteia. Va fi mai convenabil pentru cumpărător.

Mai multe informații / Descărcați Demo

Galeria de imagini React și CSS Grid

Acest aspect al galeriei de imagini care creează o experiență plăcută navigând prin conținutul dvs. vizual.

Când faceți clic pe imagine, aceasta va deveni mai proeminentă și va apărea în centru. Dacă doriți să vedeți mai multe fotografii în galerie, faceți clic pe butonul următor.

Pe de altă parte, dacă doriți să reveniți la imaginea anterioară, faceți clic pe săgeata de întoarcere. Acesta este de obicei aspectul pe care îl puteți vedea la profilurile Instagram.

Dacă aveți bloguri și doriți să vă arătați cititorilor fotografiile de călătorie, acesta este cel perfect pentru dvs. Prezentarea imaginilor este, de asemenea, una dintre CELOR MAI BUNE CĂI de a comunica mai mult cu vizitatorii dvs.

Mai multe informații / Descărcați Demo

Aspect grilă Flexbox cu meniu mobil

Iată un alt aspect Flexbox disponibil pentru site-ul dvs. web. După cum puteți vedea din imagine, în partea superioară, mai există două coloane proeminente.

Înseamnă că acele două au mai mult conținut SEMNIFICAT decât celelalte. După el, veți vedea câteva coloane mai mici. Aceste coloane au conținut care susține povestea principală.

Este cea mai potrivită pentru site-ul dvs. web dacă doriți să indicați cititorilor lor idei sau evenimente valoroase . Puteți adăuga mai multe coloane bootstrap după cum doriți.

Designul aspectului este de obicei văzut în mai multe site-uri web și pare a fi eficient decât alte coloane populare.

Mai multe informații / Descărcați Demo

Tip Festival - Tranziție GSAP

Această tranziție GSAP este o singură coloană de imagine. Care este scopul utilizării acestui tip de aspect? Este să arăți mai mult decât să spui mai mult. Mai mult decât atât, utilizarea imaginilor este o modalitate excelentă de a conecta mai mulți oameni.

Unii sunt leneși să citească conținut de pe site. În loc să vă concentrați doar pe conținut, de ce nu încercați să căutați imagini atrăgătoare care să sublinieze tema site-ului dvs. web?

Strategia utilizată în această coloană este de a spune mai puțin și de a arăta mai mult. De asemenea, poate determina mai mulți oameni să viziteze site-ul web. Creează un impact mai semnificativ asupra cititorului.

Prima impresie bună durează.

Dacă lăsați impresii mai bune vizitatorilor dvs., aceștia vor avea motivul să revină pentru mai multe. De aceea este esențial să ALEGEȚI imaginile înțelepte.

Imaginile irelevante pentru tema dvs. ar putea să le confunde. Mai bine cereți un prieten sau un profesionist pentru cea mai bună imagine posibilă.

Mai multe informații / Descărcați Demo

Jaluzele venețiene

Această jaluzelă venețiană este o idee de comutare. Odată ce mutați mouse-ul într-o coloană de jaluzele, acesta se va răsturna . Dacă doriți să puneți o mulțime de coloane pe o singură pagină, aceasta poate fi o idee minunată.

Mai multe informații / Descărcați Demo

Efecte CSS Image Hover

Această imagine, Layout Efecte Hover, vă oferă o idee fantastică despre portretizarea imaginilor dvs. cu diferite efecte .

Puteți alege să micșorați, să măriți, să glisați, să estompați sau să scalați gri, Sepia, să estompați + Scara gri, Opacitate, să clipesc, să strălucească, să cerc, și să nu aibă niciun efect. Pentru bloguri în scopuri imagine, acesta poate fi un aspect ușor pentru dvs.

Mai multe informații / Descărcați Demo

Articol Card de știri

Mâini jos pentru producătorul acestui design de aspect. Nu veți avea nicio problemă în căutarea celui mai convenabil stil de știri pentru site-ul dvs. web. După cum puteți vedea din fotografie, coloanele au fost reprezentate într-un card.

Fiecare carte are o imagine și o descriere sub ea. În prima fotografie, în timp ce vă deplasați mouse-ul spre ea, imaginea se ridică și va apărea descrierea.

Este o modalitate excelentă de a pune o imagine și o scurtă descriere într-un spațiu minim al paginii.

Mai multe informații / Descărcați Demo

Atunci când alegeți proiectarea aspectului coloanei bootstrap, cel mai bine este să găsiți unul care să fie relevant pentru tema dvs. Punerea coloanelor fără legătură îi încurcă și îi alungă pe vizitatori.

Pentru aceasta este vitală o analiză atentă. Dacă vă interesează imaginile, puteți alege aspectele stilului galeriei . În caz contrar, dacă doriți să aveți un conținut mai lung pe site-ul dvs., aspectul revistei sau al formei F poate fi cel pentru dvs.

Nu trebuie să vă faceți griji cu privire la CALITATEA aspectelor de mai sus.

Creatorii care au programat aceste aspecte au cunoștințe adecvate pentru a vă oferi modele de aspect credibile. Da, conținutul este esențial, dar un bun design web generează mai mult trafic decât acele site-uri web cărora nu le pasă deloc de designuri.