Ako vytvoriť obsahové boxy vo WordPress (s CSS)

Pomocou obsahového poľa môžete umiestniť rámček okolo alebo za text vo WordPress.

Pomocou výplne, okraja, orámovania, farby a stĺpcov si môžete vytvoriť vlastné obsahové polia. Na pridanie ďalšieho štýlu do polí môžete použiť aj príkazy HTML, ako napríklad span.

Ak ste pravidelným čitateľom, možno ste si všimli, že ich vo svojich príspevkoch používam pomerne často. V prípade, že nepoznáte, čo to je, vyzerá to takto:

Tu vidíte to, čo by niektorí ľudia poznali ako pole s informáciami, funkciami alebo krátkymi kódmi. Všetky tri príklady sa však primárne nazývajú obsahové boxy a sú rovnaké.

Začíname

Krabice s obsahom môžete použiť na veľa vecí. Od zvýraznenia preventívneho kroku, vylúčenia zodpovednosti, zverejnenia alebo jednoduchého tipu. Vytvára to len nový príjemný prvok vo vašom obsahu, ktorý sa ľuďom naozaj páči.

Je to efektívna technika na zapojenie vašich návštevníkov.

Mnoho webových stránok používa obsahové polia na zobrazenie funkcií, služieb a pracovných skúseností.

Ako vytvoriť obsahové boxy pomocou CSS

Existuje mnoho typov obsahových boxov a všetky sa v niektorých smeroch líšia.

Ukážem vám ukážku každého z niekoľkých rôznych typov obsahových polí a pod každým uvediem kód CSS, ktorý môžete skopírovať/prilepiť do svojho súboru WordPress CSS.

1.Bez názvu

Toto je typ obsahového poľa, ktoré nemá žiadnu oblasť nadpisu. Môžete ich použiť na zvýraznenie akéhokoľvek textu, ale bez akéhokoľvek nadpisu alebo nadpisu.

Ak to chcete použiť, skopírujte a prilepte CSS uvedený nižšie do súboru CSS WordPress.

.bfb-content-box{ background-color: #42d1fd; farba okraja: #d9f6ff; farba: #ffffff; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; }

Vždy, keď to budete musieť použiť vo svojich blogových príspevkoch, postupujte takto:

1. Otvorte editor príspevkov WordPress
2. Prepnite sa do textového editora

Potom zadajte:

Farbu pozadia môžete zmeniť zmenou hodnoty v kóde background-color:. Vyhľadajte na Google hexadecimálny kód svojej farby a skopírujte ho/prilepte ho vedľa farby pozadia: v kóde CSS.

2. Obsahové pole s názvom a bielym pozadím

Toto je typ obsahového poľa, ktoré má oblasť nadpisu. V spodnej časti môžete pridať názov a pozadie textu pod ním bude biele.

Ak chcete použiť toto pole obsahu, pridajte tento riadok kódu do súboru CSS WordPress:

.su-box-title { display: block; výplň: ,5em 1em; váha písma: 700; veľkosť písma: 1,1 em; farba pozadia: #4fff59; farba: #FFFFFF; border-top-left-radius: 1px; border-top-right-radius: 1px; border-color: #3fcc47; border-radius: 3px; }

Potom pridajte tento kód:

.su-box-content.green { farba pozadia: #fff; farba: #444; výplň: 1 em; border-color: #3fcc47; border-radius: 3px; }

Ak chcete zobraziť toto konkrétne pole obsahu, prilepte tento kód kdekoľvek ho chcete zobraziť:

Môžete tiež pridať emotikon alebo ikonu pred nadpis, aby boli vaše krabice dobrou atrakciou.

3. Obsahové pole s nadpisom a farebným pozadím textu

Táto krabica s obsahom vyzerá veľmi atraktívne najmä vďaka svojmu dvojfarebnému tónu.

Dlaždica zobrazuje krásny nepriehľadný hlavový blok a pod ním má obsah hladké priesvitné červené pozadie. Najlepšie na tom je, že môžete samostatne zmeniť záhlavie a farbu pozadia obsahu.

Skopírujte/prilepte nižšie uvedený kód do súboru WordPress CSS:

#primary .entry-content .content-box .title { margin: -2rem -2rem 1rem -2rem; výplň: 0,5rem 2rem 0,5rem 1rem; displej: blok; font-weight: bold; farba: #FFF; veľkosť písma: 1,125rem; }

A potom vložte tento kód:

.entry-content .content-box.bforbloggers1{ border-color: #e22828; } .entry-content .content-box.bforbloggers1{ background: rgba(226,40,40,0.2); } .entry-content .content-box.bforbloggers1.title { background: #e22828; } .entry-content .content-box { border-radius: 5px; orámovanie: 1px plný; výplň: 2rem 2rem 1rem 2rem; okraj: 0 0 2rem 0; font-weight: normal; }

Ak chcete zobraziť toto pole obsahu, použite kód zobrazený nižšie:

4. Bez názvu a farby pozadia

Toto je jeden z najjednoduchšie vyzerajúcich obsahových boxov. Je minimálny a perfektne zabalí text a obrázky.

Ak to chcete použiť, skopírujte/prilepte kód CSS nižšie do súboru CSS WordPress:

.box1{ border: 1px solid #10ef53; }

Ak to chcete zobraziť na svojom blogu, skopírujte/prilepte tento kód:

Pole s odporúčaným obsahom s ikonami

Mnoho webových stránok, ktoré majú na predaj SaaS alebo iné digitálne produkty, používa funkcie a stĺpce. Tieto polia funkcií vám pomôžu lepšie ukázať vašim zákazníkom, aké sú najlepšie funkcie a služby, ktoré ponúkate.

Ak chcete vytvoriť tento typ obsahového poľa, budete si musieť nainštalovať doplnok WordPress s názvom Pokročilé WP stĺpce.

Po inštalácii budete tiež musieť nainštalovať ďalší doplnok s názvom Ikony WPSVG.

Po aktivácii Advanced WP Columns prejdite do jeho nastavení. V “trieda stĺpcov“ zadajte pole nové stĺpce a stlačte Uložiť.

Vytvorte novú stránku, na ktorú chcete pridať pole funkcií. V hornej časti editora WordPress si všimnete nové tlačidlo na pridanie pokročilých stĺpcov a nové tlačidlo na pridanie ikon SVG do vášho obsahu.

Kliknite na tlačidlo rozšírené stĺpce wp a kliknite na prázdny a na ďalšej obrazovke vyberte počet stĺpcov, ktoré chcete pridať.

Potom zadajte nejaký text do všetkých prázdnych stĺpcov a kliknite Pridať.

Máte vytvorené nové stĺpce a teraz ich uvidíte v editore príspevkov. Umiestnite kurzor tesne pred text bez toho, aby ste naň dali medzeru Pridať ikonu tlačidlo.

Zobrazí sa vyskakovacie okno, kde si môžete vybrať ikonu z:

Vyberte ľubovoľnú ikonu a kliknite na „rozpätie“ a potom kliknite na Vložiť ikonu tlačidlo. Opakujte tento postup, ak chcete pridať ikony aj do polí iných stĺpcov.

WP SVG Icons pridá do vašich polí krátky kód na zobrazenie ikon na vašej živej stránke. Aby teda vyzerali veľké, skopírujte/prilepte nižšie uvedený kód CSS do súboru CSS WordPress:

span.wp-svg-smile.smile{

font-size:100px;

}

span.wp-svg-rocket.rocket{

font-size:100px;

}

span.wp-svg-bubbles.bubbles{

font-size:100px;

}

.newcolumns {

border:1.25px solid #fff;

min-height:200px;

padding-top:20px !important;

}

Názvy „bubbles“ v kóde span.wp-svg-bubbles.bubbles a ďalších sa budú meniť, keď budete používať iné ikony. Skrátený kód a názov ikony sa zobrazujú vo vyskakovacích ikonách WP SVG.

Pomocou editora Gutenberg

Chcem ukázať ďalší veľmi jednoduchý spôsob, ako vytvoriť obsahový box, ktorý sa používa redaktor Gutenberg.

S vydaním WordPress 5.0 bude predvolený editor, ktorý sa nazýva TinyMCE, nahradený editorom Gutenberg. Gutenberg je blokový editor, čo znamená, že môžete vytvárať bloky HTML a upravovať ich štýl bez toho, aby ste sa dotkli riadku kódu.

V súčasnosti je však vo fáze beta a nemali by ste ho používať iba na živej stránke. To tiež znamená, že tím Automattic (vývojári WordPress a Gutenberg) môže túto funkciu odstrániť. Stále ho však môžete použiť na testovacej alebo ukážkovej stránke.

Takto to bude fungovať a vyzerať v Gutenbergu:

Stačí pridať blok, zmeniť jeho pozadie a farbu textu. Je to celkom jednoduché a rýchle. Pomocou posúvača môžete dokonca upraviť veľkosť poľa a textu.

💡TipMôžete tiež použiť ľubovoľného tvorcu stránok, ako je Thrive Architect, aby ste mali rovnako jednoduché používanie, ak nechcete používať Gutenberg.

Napísal som o každom obsahovom poli, ktoré poznám a používam. kód CSS môžete vyladiť tak, aby ste si ho ešte viac prispôsobili a vytvorili značku.

Tieto polia obsahu môžete použiť aj v oblasti miniaplikácií bočného panela alebo päty výberom textovej miniaplikácie.

Tieto obsahové boxy by fungovali v každej téme. Nemajú nič spoločné s hlavnými súbormi function.php alebo style.css témy WordPress.

Ak niekedy v budúcnosti zmeníte tému, nebude to mať žiadny vplyv na polia obsahu.

To je všetko.

Dajte mi vedieť, ktorý sa vám páčil najviac?