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

Pole obsahu zvýrazňuje konkrétne odseky. Zabalí obsah do štylizovaného rozloženia a rámčekov pomocou značky HTML . Tieto boxy sú postavené, navrhnuté a štylizované pomocou CSS.

Pomocou rámčeka obsahu môžete umiestniť rámček okolo alebo za text WordPress.

Pomocou výplne, okraja, orámovania, farby a stĺpcov si môžete vytvoriť svoje 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čať

Krabice s obsahom môžete použiť na veľa vecí. Od zdôraznenia preventívneho kroku, vylúčenia zodpovednosti, zverejnenie alebo jednoduchý tip. 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;
border-color: #d9f6ff;
color: #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:

<div class="bfb-content-box"> your text here </div>

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/prilepte ho vedľa background-color: v kóde CSS.

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

Toto je typ obsahového poľa, ktoré má oblasť názvu. 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;
padding: .5em 1em;
font-weight: 700;
font-size: 1.1em;
background-color: #4fff59;
color: #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 {
background-color: #fff;
color: #444;
padding: 1em;
border-color: #3fcc47;
border-radius: 3px;
}

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

<div class="su-box-content green"> <span class="su-box-title"> your title</span> your text here </div>

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;
padding: 0.5rem 2rem 0.5rem 1rem;
display: block;
font-weight: bold;
color: #FFF;
font-size: 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;
border: 1px solid;
padding: 2rem 2rem 1rem 2rem;
margin: 0 0 2rem 0;
font-weight: normal;
}

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

<div class="content-box bforbloggers1"> <span class="title"> Your title here </span> Your content here.</div>

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:

<div class="box1">
This text is enclosed in a box.
</div>

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é stĺpce WP.

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 rozšírených stĺpcov a nové tlačidlo pridať ikony SVG vo svojom 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.

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

Vyberte ľubovoľnú ikonu a kliknite na „rozpätie”A potom kliknite na ikonu 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:

Názvy „bubliny“ v kóde span.wp-svg-bubbles.bubbles a ďalšie sa zmenia, keď budete používať iné ikony. Skrátený kód a názov ikony sú zobrazené 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á tímový automat (WordPress a Gutenberg vývojári) môžu 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.

Napísal som o každom obsahovom boxe, 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 každú tému. 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?

Odporúča sa pre vás

Urobte to, keď vo WordPress nefungujú mobilné menu, ikona vyhľadávania atď

Ako zabrániť Jetpacku v odosielaní celého obsahu e-mailovým odberateľom

accessiBe: Ako urobiť svoj web skutočne dostupným

Opravte „.GIFy sa neodovzdávajú“ a „Nefunguje animácia“ vo WordPress

Zdieľaj: