Kako napraviti stupce u WordPressu bez dodatka

Kako napraviti stupce u WordPressu bez dodatka

Organiziranje sadržaja u stupce jednostavno je zahvaljujući WordPress bloku stupaca. Ovaj blok pripada temeljnim blokovima koji se mogu koristiti u svakoj WP temi. Blok stupaca može imati do 6 stupaca. Dakle, možete imati 6 različitih sadržaja jedan pored drugog.

Danas ćemo vam pokazati kako napraviti stupce u WordPressu bez dodatka – pomoću bloka stupaca. Donosimo i sažetak najnovije značajke iz verzije WP 5.3 Ažuriraj.

U ovom vodiču pronaći ćete informacije o:

Koja je svrha kolona

Kolone na web stranici mogu imati višestruku primjenu. Prije svega, oni mogu sadržaj učiniti dobro uređenim, čitljivijim i lakšim za pregledavanje. Organiziranjem sadržaja u stupce možete istaknuti važne informacije ili parametre.

Na primjer, možete koristiti raspored s više stupaca za predstavljanje svojih usluga. Dodajte ilustrativnu sliku, opis ili gumb. Naravno, sliku možete učiniti klikabilnom.

Izgled s više stupaca s uslugama
Izgled s više stupaca s uslugama

Slično uslugama, možete koristiti stupce na WordPressu za prikaz proizvoda ili kategorija proizvoda. Idealno je ako imate jednostavnu poslovnu web stranicu.

Izgled s više stupaca s proizvodima i kategorijama
Stupci koji se koriste za prikaz proizvoda i kategorija

U postovima na blogu možete koristiti stupce za odvajanje sadržaja. Možete postaviti tekst, grafičke oznake ili slike jednu do druge.

Odvojen sadržaj pomoću stupaca
Korištenje stupaca za odvajanje sadržaja

Kako su kolumne radile u starom uređivaču

Prije WordPressa 5+ ako ste htjeli napraviti sadržaj s više stupaca, morali ste koristiti tablice. Bilo je puno teže nego u najnovijem editoru. Štoviše, obično je postojao problem sa stilovima i prikazom tablica na mobilnim uređajima. Kako je to prije funkcioniralo?

Imali ste više opcija za stvaranje stupaca na WordPress web stranici:

1. Ručno umetnite HTML kod u uređivač teksta

<table>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

Ovaj pristup su uglavnom koristili programeri, koji su mogli brzo kreirati tablicu ili stupac na temelju svojih zahtjeva. Nedostatak je bio što nisu sve WordPress teme mogle dobro rukovati stupcima. Tablice obično nisu bile savršene i prosječan korisnik nije mogao lako riješiti sve moguće probleme.

2. Dopuštanje tablica u WordPress editoru

Budući da je WordPress koristio uređivač TinyMCE, bilo je moguće dopustiti funkcijama uređivanje tablica. Ako ste zainteresirani saznati više, možete pronaći sve detalje na ovom forumu. U slučaju da učinite istu stvar za naše AIT teme, tablice će raditi ispravno.

3. Korištenje elementa Columns u AIT temama

Ako koristite neku od naših starijih WordPress tema, sigurno poznajete naš element Stupci. Ovaj element se može koristiti za dodavanje stupaca unutar stranica. To je element koji se može naručiti, što znači da ga možete postaviti gdje god vam je potreban. Prednost je njegova varijabilnost unutar stranica.

Element stupaca
Stupci elemenata koji se mogu naručiti – možete ih koristiti u bilo kojoj AIT temi

4. Preuzmite dodatak treće strane za upravljanje tablicama

Još jedno rješenje kako napraviti stupce u WordPress postovima i stranicama bilo je preuzimanje jednog od dostupnih dodataka za izradu tablica. Ovi dodaci omogućuju dodavanje stupaca/tablica pomoću nekoliko klikova bez ikakvog kodiranja. Ovo su također mogli koristiti manje iskusni korisnici.

Kako napraviti stupce u WordPressu bez dodatka (u uređivaču blokova)

Zahvaljujući novom uređivaču blokova stvaranje stupaca postalo je iznimno jednostavno. Ako još uvijek koristite stari WordPress, sada je pravo vrijeme za ažuriranje na najnoviju verziju. Moći ćete jednostavno dodavati stupce i upravljati njima, u nekoliko klikova koristeći blok stupaca.

Ovaj blok je dobrodošla promjena za sve koji žele raditi sa sadržajem u više stupaca, prezentirati proizvode ili pisati blog, a nemaju iskustva s programiranjem.

Pogledajmo kako dodati blok stupaca i kako stvoriti stupce u WordPressu bez dodatka:

  • Prva opcija je kliknuti na “+” na gornjoj traci i odabrati blok stupaca među dostupnim blokovima.
  • Druga opcija je da kliknete na "+" bilo gdje unutar uređivača.
Dodajte stupce u WordPress klikom na “+”
Dodavanje stupaca u WordPress klikom na “+”
Dodajte blok stupaca s kosom crtom “/”
Dodavanje stupaca u WordPress pomoću kose crte “/”

Unaprijed definirani izgled WordPress bloka stupaca (NOVO iz WP 5.3)

Najnovija verzija donijela je velika poboljšanja u postavkama stupaca. Prije svega, dostupni su zadani stilovi izgleda. Što to znači?

Korisnici mogu odabrati svoj izgled i stil poravnanja u procesu dodavanja novog bloka u područje sadržaja. Unaprijed definirani izgledi mogu biti od velike pomoći – posebno za one korisnike koji nemaju napredne vještine WordPressa. Ova značajka predstavlja kako mi zamišljamo način kako napraviti stupce u WordPressu (bez plugina ili bilo kojeg drugog dodatka).

Unaprijed definirani izgledi u bloku Stupci
Unaprijed definirane opcije izgleda

 

Ako ne želite odabrati unaprijed definirani izgled u bloku stupaca WordPressa, jednostavno ga preskočite. Nakon preskakanja ovog koraka, sadržaj će biti odvojen u 2 ista dijela/dva pojedinačna stupca koji se mogu uređivati.

Stvoren blok stupaca
Blok stupaca s 2 zadana područja (stupca) koja možete uređivati

Stupci Blokirajte osnovne postavke

WordPress Columns block sam po sebi nema puno opcija. Zašto je to tako objasnit ćemo kasnije. Na gornjoj traci možete promijeniti poravnanje na široku ili punu širinu. Možete promijeniti ovo poravnanje ako ga vaša aktivna tema podržava.

Gornja alatna traka bloka Stupci
Gornja alatna traka s opcijama poravnanja

Najvažnija postavka bloka stupaca je broj stupaca u bočnoj traci inspektora na desnoj strani. Standardno postoje 2 stupca, ali možete povećati ovaj broj na 6. Možete ga promijeniti pomoću miša ili unijeti broj. Kako to izgleda vidjet ćete odmah nakon povećanja ili smanjenja stupaca. Blok se dinamički mijenja ovisno o klizaču.

Promjena broja stupaca
Pomičite se pomoću klizača da biste promijenili broj stupaca prema potrebi

Vrlo je praktičan jer mijenjate broj stupaca doslovno u sekundi bez ikakvih teških promjena postavki ili kodiranja.

Slično drugim blokovima u WordPress uređivaču, možete umetnuti prilagođenu CSS klasu i u blok stupaca.

Dodatak blokova za lakši rad s blokovima

Blok stupaca je poseban jer možete stvoriti više blokova s njim. Sve do izlaska nove verzije bilo je prilično teško raditi s pojedinačnim blokovima. Kada ste htjeli dodati neki blok, niste točno znali gdje kliknuti. Zahvaljujući Block appenderu (i njegovom razlikovanju po boji pozadine) lakše je umetnuti sadržaj u odgovarajući stupac.

Dodatak blokova u bloku stupaca WordPressa
Dodatak blokova s bojom pozadine

Kako raditi s blokom stupaca WordPressa

Ljepota bloka stupaca je u tome što svaki stupac može ugnijezditi druge blokove. To može biti odlomak, blok slike ili blok gumba. Maksimalan broj stupaca je 6, stoga možete kreirati sadržaj s više stupaca prema potrebi. Kao što je ranije spomenuto, za predstavljanje proizvoda možete dodati sliku proizvoda, naziv, cijenu i gumb jedan pored drugog.

Različite vrste sadržaja u rasporedu s više stupaca
Pomoću bloka stupaca možete predstaviti različite vrste sadržaja jedan do drugoga

Također možete koristiti nekoliko blokova stupaca jedan ispod drugog za stvaranje mreže. Možete ga koristiti za predstavljanje svojih usluga ili promociju važnih značajki.

Učinak mreže blokova stupaca
Efekt mreže blokova stupaca postavljenih jedan ispod drugog

Uređivanje ugniježđenih blokova

Kao što smo već spomenuli, možete ugnijezditi druge blokove unutar stupaca. Svaki ugniježđeni blok ima sve svoje postavke dostupne. To znači da ako dodate blok slike u stupac, možete ga uređivati na potpuno isti način kao u samostalnom Blok slike.

Uređivanje slikovnog bloka kao ugniježđenog bloka
Dostupne postavke za blok slike ugniježđen u blok stupaca

Zaključak: Prednosti blokova stupaca

Puštanje u rad WordPress blok editora i dostupnost korištenja stupaca na stranicama i postovima značajno je pojednostavilo način na koji korisnici mogu raditi sa sadržajem. Zahvaljujući bloku WordPress stupaca više nije važno koristiti rješenja treće strane ili pisati HTML kod. Dodavanje ili brisanje stupaca moguće je pomoću nekoliko klikova. Sve je vrlo intuitivno i brzo i za manje tehničare.

Vaš će sadržaj u rasporedu s više stupaca biti lijepo poravnat u mrežu. Također će odmah izgledati dobro u responzivnoj verziji.

Vrijedno smo radili na novoj Citadela WordPress temi, koja je posebno razvijena za uređivač WordPress blokova. Saznajte više o temi Citadela i dostupnim paketima izgleda.

2 misli o “How to make columns in WordPress without plugin

    1. Pozdrav Davide,

      hvala što ste nam se javili. Trebali biste aktivirati Gutenbergov uređivač koji nudi opciju odabira pojedinačnog stupca, na bočnoj traci postavki (desna strana) možete prilagoditi njegovu širinu.

      Lijepi Pozdrav!
      Zlatko
      AIT tim

Komentari su zatvoreni.