Parhaat tavat luoda sarakkeita WordPressissä – paljastettu

Kun opettelet luomaan sarakkeita WordPressissä, saat viestisi selkeämmin perille ja käyttäjäsi voivat skannata tarjontaasi helposti.

WordPressissä voidaan käyttää useita menetelmiä usean sarakkeen asettelun luomiseen.

Jotkut ovat helppoja, jotkut ovat vaikeita, ja jotkut ovat perus-HTML. Ne voivat kuitenkin olla välttämättömiä käyttämästäsi WordPress-alustasta riippuen.

Enemmän tyyliä voidaan tehdä itse isännöidyillä WordPress-sivustoilla. Mutta jopa ilmaisilla WordPress.com-tilauksilla voit hyödyntää sarakkeita.

Kuinka luoda sarakkeita WordPressissä

Lohkoeditorin käyttäminen on yhtä helppoa kuin sarakelohkon lisääminen. Aikaa vievä, mutta erittäin tehokas monimutkaisiin asetteluihin. Classic Editorin avulla Shortcodes Ultimate -laajennus tekee sarakkeiden lisäämisestä helppoa. Vaihtoehtona on käyttää HTML-koodia vain sarakkeille tai HTML-taulukoita reunuksellisille sarakkeille.

Lisää sarakkeita WP-teemaasi CSS:n ja HTML:n avulla

WP-teeman mukauttaja yksinkertaistaa teeman tyylisivun muokkaamista.

ryan garcia vs romero duno

Siirry Ulkoasu-valikkoon, valitse 'muokkaa' ja sitten 'Additional CSS'.

Lisää seuraava:

.column-left {
float: left;
width: 33.333%;
}
.column-right {
float: right;
width: 33.333%;
}
.column-center {
display: inline-block;
width: 33.333%;
}

Käytä sitten WP-editorissasi tekstieditoria ja liitä seuraava HTML…

<div class="container">
<div class="column-left">
<h2>Insert column title</h2>
Your content here.
</div>
<div class="column-center">
<h2>Insert column title</h2>
Your content here.
</div>
<div class="column-right">
<h2>insert column title</h2>
Type your text in here.
</div>
</div>

CSS-muokkausohjelma lisää koodin teemasi tyylitaulukkoon. Kun olet lisännyt, käytä HTML-koodia sarakkeiden lisäämiseen.

Luo monimutkaisia ​​sarakeasetteluja helposti WP-lohkoeditorilla

Gutenbergiin on liitetty lohko sarakeasettelujen luomista varten.

Napsauta +-kuvaketta, kirjoita 'sarakkeet' ja valitse sarakelohko. Valitse seuraavaksi haluamasi asettelu. Voit käyttää enintään kolmea saraketta viidellä eri leveydellä.

Seuraavaksi määrität sisältösi lohkoon.

Koska tämä on lohkoeditori, kaikkea ohjataan lohkoilla. Nopein tapa on lisätä kappalelohko, lihavoida sarakkeen otsikko (jos käytät otsikoita) ja kirjoittaa sitten sarakkeen sisältö.

Vaihtoehtoisesti voit rakentaa lohkoja lohkojen sisään.

Lisää otsikkolohko, sitten kappalelohko tai teksti- ja kuvalohko. Suunnittele sarakkeet mielesi mukaan.

Esimerkkinä alla olevassa asettelussa käytetään kahden sarakkeen asettelua (70:30), joka näyttää meistä-sisällön vasemmalla ja kuvat on kohdistettu oikealle.

Kuvat lisätään toiseen sarakkeeseen siten, että kappalelohkon viereen on pinottu kaksi 50:50 saraketta.

Lohkoeditori helpottaa monimutkaisten sarakkeiden asettelujen suunnittelua.

Yllä esitetyn kaltaisen asettelun luominen vaatisi aikaa koodata manuaalisesti CSS:n ja HTML:n avulla.

Monimutkaisissa sarakeasetteluissa lohkoeditorin käyttö auttaa.

Käytä WordPressiä Lyhytkoodit Ultimate Kytkeä

Ultimate Shortcodes -laajennus on täynnä sisällön tyylivaihtoehtoja. Riittää, kun sanotaan, että sarakkeet ovat yksi niistä, ja voit saada jopa viisi saraketta näytettäväksi työpöytänäytössä.

Siirry laajennussivullesi, napsauta Lisää uusi ja etsi Shortcodes Ultimate.

matteo guidicelli sarah geronimo häät

Kun se on asennettu ja aktivoitu, uusi painike ilmestyy WordPress-editorin näyttöön 'Lisää media' -painikkeen viereen. Napsauttamalla sitä ladataan näytön, jossa on kaikki käytettävissä olevat lyhytkoodit.

Sarakkeet ovat ilmainen ominaisuus. Punaisella kuvakkeella varustetut lyhytkoodit ovat ensiluokkaisia. Muut ovat ilmaisia.

Valitse sarakkeet ja muotoile ne haluamallasi tavalla noudattamalla ohjeita.

Käyttämällä heidän verkkosivustollaan tarjoamaa mukautettua CSS:ää voit lisätä sen mukautettuun CSS:ään laajennuksen asetussivulla ja lisätä sitten sarakkeita, joissa on teksti painikkeiden sisään.

Laita tämä tekstieditoriin…

<h2><span style="color: #ff0000;">Learn More</span></h2>
 About Us 
 Services 
 FAQs 
 Feedback
 Pricing 

Kun '1/5' on yllä olevissa lyhytkoodeissa, nämä numerot määräävät, kuinka monta saraketta lisätään. Käytä '1/3' kolmelle sarakkeelle.

Ja tietysti, jos käytät painikkeita, voit linkittää tekstin sivuille, joille haluat vierailijoiden menevän.

Koska kyseessä ovat lyhytkoodit, ne voidaan sijoittaa mihin tahansa sivustollesi. CSS:n kanssa ei tarvitse puuhailla.

Jos et halua lisätä laajennuksia tai käyttää lohkoeditoria tai jos käytät WordPress.com-sivustoa, voit silti hyödyntää sarakkeita, mutta paljon vähemmän tyyliä ja räätälöintiä...

Kuinka luoda sarakkeita WordPressissä HTML:llä

WordPress.comin käyttäjille, joilla ei ole pääsyä CSS-muokkaustyökaluun, WordPress-editorin HTML on ainoa tapa luoda sarakkeita.

HTML on edelleen suosittu, vaikka se onkin yksi kypsimmistä tietokonekielistä. Se antaa sinulle monisarakkeisen asettelun perusteet. Vain ilman hienoa tyyliä.

Jos olet tyytyväinen sarakkeisiin ilman reunuksia, taustoja tai sisältölaatikoita, jotka ympäröivät tekstilohkoja, HTML on oikea tapa edetä.

Napsauta WP-editorissa teksti-välilehteä muokataksesi sisältöäsi HTML:llä ja lisää seuraava:

<div style="width: 33.3%; padding: 20px; float: left;">

Kolme HTML-elementtiä ohjaavat sarakkeen asettelua.

Ensimmäinen on leveys. Minkä tahansa teeman enimmäisleveys on 100 %, jotta se vie koko näytön koon. Jos haluat pöytätietokoneissa neljä saraketta, muutat leveydeksi 25 %. 25 kertaa 4 on 100, joten 25 % antaa sinulle neljän sarakkeen asettelun.

Täyte on sarakkeiden välinen etäisyys. Muuten olisi vaikea erottaa, missä yksi tekstilohko päättyy ja seuraava alkaa.

Viimeinen osa on kelluva elementti. Tätä käytetään sarakkeiden kellutukseen sivun vasemmalla tai oikealla puolella.

Jokainen osa voidaan muuttaa tarvitsemiesi sarakkeiden kokoisiksi. Jos esimerkiksi haluat vain kaksi saraketta, aseta leveydeksi 50 %.

<div style="width: 50%; padding: 20px; float: left;">Your content here</div>
<div style="width: 50%; padding: 20px; float: left;">Your second column content here</div>

pacquiao vs thurman ilmainen stream

Luo HTML-taulukko lisätäksesi sarakkeita reunuksilla WordPressissä

Toinen tapa lisätä sarakkeita ilman CSS-muokkausta on luoda taulukko HTML-kielellä.

Seuraava HTML-koodi luo kaksisarakkeen taulukon

<table style="width: 100%; height: 48px;" border="”5″" width="”1200″" cellspacing="”50″" cellpadding="”50″">
<tbody>
<tr style="background-color: #fff73f;">
<td style="text-align: center; height: 16px;"><strong>Column Title </strong></td>
<td style="text-align: center; height: 16px;"><strong>Next column title</strong></td>
</tr>
<tr style="height: 16px;">
<td style="height: 300px; text-align: center;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pharetra venenatis urna, sit amet venenatis erat sagittis sit amet. Donec sit amet sollicitudin elit. Cras ultricies hendrerit arcu, id blandit lacus feugiat non.</td>
<td style="height: 300px; text-align: center;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pharetra venenatis urna, sit amet venenatis erat sagittis sit amet. Donec sit amet sollicitudin elit. Cras ultricies hendrerit arcu, id blandit lacus feugiat non.</td>
</tr>
</tbody>
</table>

Samoin kuin luotaessa sarakkeita ilman reunuksia HTML:ssä, HTML-taulukoiden kokoa voidaan säätää muuttamalla leveyttä ja korkeutta. Kuten myös taustavärit.

Jos haluat luoda taulukon HTML-kielellä WordPressissä, aseta ensin 'taulukon tyyli' ja pudota sitten kohtaan ladataksesi sisältö.

tarkoittaa 'taulukon riviä'. on 'taulukon tiedot'.

Sarakkeiden otsikot asetetaan riville. Käytä taulukon tiedot -aluetta lisätäksesi sisältökappaleita sarakkeen sisään.