fbpx
Szeretem a különleges, egyedi megvalósításokat. Azon dolgozom, hogy elhozzuk számodra a legmenőbb, legújabb WordPress trükköket, amitől az ügyfeleid majd elájulnak!

Ebben a cikkben egy olyan egyszerű trükköt fogok bemutatni neked, amivel a (jellemzően) blogoldalon található sidebar nevű oldalelrendezéseknek a címsorát tudod egyedi dizájnelemekkel ellátni. Azt gondolom, hogy ettől a megoldást máris profibb lesz az oldalad!

Használj CSS-t!

Az alapértelmezett sidebar stílus mindig H4 címsorméretű lesz. A widgetek (elemek) közötti távolság pedig rendkívül szűk. Ez egy unalmas, sablon elrendezés, amit sajnos a legtöbb honlapon nem változtatnak meg.

Alapértelmezett WordPress sidebar stílus

Márpedig a te sidebar-odban hatalmas lehetőségek vannak, ha megfelelően használod és képes vagy egyedivé varázsolni a megjelenést! Nézzük erre példát!

Irány a Divi beállítások menü

Divi » Sablon beállítások » General tab

DIVI CSS egyéni sidebar stílus

A képen látható helyre másold be az alábbi kódot:

HTML

Ments rá az oldalra és irány a blogoldal, ahol megnézheted, hogy most mit valósítottál meg! Fantasztikus ugye?

Apróbb módosítások

Ha a színkódot szeretnéd módosítani, akkor a color: # után levő számsort kell átírnod arra, amit éppen használni szeretnél.

Amennyiben a szövegnek az elhelyezését szeretnéd módosítani, akkor a tex-align: után írd be a megfelelő szöveget:

  • left (balra zár)
  • right (jobbra zár)
  • centre (középre zár)

Ha a betűméretet szeretnéd átírni, akkor adjál meg új értéket a font-size: után (px előtt).

Tervezd meg az elválasztó vonalat!

Számos lehetőségünk van megtervezni a sidebar elemeit elválasztó vonallal kapcsolatban. Most nézzünk meg ezek közül néhányat.

Az alábbi CSS kódot kell módosítanunk / alapból elhelyeznünk:

HTML

Ezzel a CSS kóddal alapvetően négy beállítást tudunk megadni!

  1. a hosszúságot (margin-bottom) a megfelelő px számmal tudjuk állítani. Jelenleg 25 px-et adtunk meg.
  2. a színt a # utáni számsor átírásával tudod megváltoztatni
  3. az elválasztó vastagságát pedig át tudod írni (jelenleg 4 px)
  4. meg tudod határozni az elválasztó stílusát. Jelenleg a dupla vonal (double) van beállítva!

Elválasztóvonal stílusok

nonenincs
dottedpontozott
dashedvonalazott / csíkozott
solidsima vonal
doubledupla vonal
outsetelőre helyezett

Címkék: CSS DIVI

Most elérhető

50% kedvezménnyel

yoast seo

tovább a fizetéshez

December 12-ig