Articles

Hogyan hozzunk létre egyéni fejlécet a WordPressben?

A weboldalad elég vonzónak tűnik a látogatók számára? Vagy csak egy átlagos weboldal a sok millió közül! Szeretné, ha webhelye kiemelkedne a tömegből? Szeretné, ha webhelyének minden oldala különállóan, más-más érzéssel nézne ki? Mi lenne, ha azt mondanám, hogy mindezen problémák megoldásának kulcsa az Ön kezében van? És ez a kulcs az – Egyedi fejléc!!! Igen, jól olvasta. Lássuk, hogyan…

A fejléc az oldalad legfontosabb vizuális eleme, amely a legfelső pozíciót foglalja el. Ez az első dolog, amit a látogató lát, amikor a weboldaladra érkezik. Az oldalad fejléce a weboldalad identitása, amely a weboldal minden oldalán ugyanaz marad. Használhatja arra, hogy jó és tartós hatást gyakoroljon a látogató elméjében. Figyelemre méltó, saját magát bemutató egyéni fejlécek létrehozásával kitűnhet és elnyerheti a felhasználó bizalmát. Az egyéni fejléc a WordPressben egy olyan funkció, amely lehetővé teszi a fejléc képének testreszabását a szöveg, widget stb. hozzáadásával együtt. Ezeket az elemeket az Ön igényei szerint is beállíthatja, hogy weboldalának legjobb képét mutassa. Itt a Templatetoaster weboldalépítő szoftverben ellenőrizze, hogyan hozhat létre egyéni fejlécet a WordPress témaépítővel.

WordPress egyéni fejléc:

A fejléc a webhely egyik legfontosabb eleme. Ez egy olyan gesztus, amely sokat közvetít webhelyedről. Általában egy képet vagy videót tart, hogy megragadja a látogató figyelmét. A Nielsen Norman csoport szerint egy látogató mindössze 10-20 másodpercig marad a weboldaladon. Tehát a fejlécnek vonzónak kell lennie, hogy érdekelje őket.

A WordPressben az egyéni fejléc nagyobb irányítást és rugalmasságot biztosít. A logó, a szöveg vagy a widgetek átpozícionálása mellett elforgathatja, átméretezheti vagy levághatja a fejléc képét. Úgy alakíthatja ki, hogy kontrasztos legyen a webhely megjelenése. A célközönségnek szóló ajánlatként kell használnia. Próbáld meg idézni a szlogenedet a WordPress egyéni fejlécében. Mivel lehet, hogy nincs második esélye arra, hogy az első jó benyomást keltse. Egy jól felépített fejlécnek választ kell adnia arra, hogy miért vagy egyedi, mi mindenre képes a webhelyed stb.

Az egyéni fejléc tehát fontos, mivel a webhelyed arcaként működik. Képesnek kell lennie arra, hogy az oldalad lényegét és hangulatát közölje a közönséggel. Oldalanként más-más WordPress egyéni fejlécet használhatsz. Például a terméked jellemzőit hozzáadhatod a fejléchez a Rólunk oldalhoz, a többi oldalra pedig jellemzők nélkül. Ez csodákra képes !!!

Hogyan adhat egyéni fejlécet a WordPresshez?

A WordPress alapértelmezett témái lehetővé teszik az egyéni fejlécek használatát. Saját egyéni fejlécképeket helyezhetsz el a preferenciáidnak megfelelően. A WordPress egyéni fejléckép beállítása néhány erőfeszítést igényel. Alapvetően két lépésből áll az egyéni fejléc hozzáadása az alapértelmezett WordPress témákhoz az alábbiak szerint

1. A kép forrása és szerkesztése

Először is válasszon ki egy csábító képet. Ennek egyszerűnek és egyedinek kell lennie. Az interneten rengeteg ingyenes képet szerezhetsz be. További részletekért olvassa el a 16 weboldalról, ahol ingyenes képekhez juthat. Miután beszerezte a fejlécképét, már csak a szerkesztése van hátra.

Használhat néhány hasznos asztali szerkesztőprogramot vagy webes ingyenes szerkesztőeszközt. A kiválasztott képet megfiatalíthatja a GIMP, paint.net stb. segítségével. A GIMP egy ingyenes és nyílt forráskódú képszerkesztő szoftver. Számos kifinomult eszközt biztosít ahhoz, hogy különleges színt adj a képednek. Míg a paint.net megkönnyíti a képszerkesztő eszközök használatát Windowson. Készítse el az egyéni WordPress fejléc képét.

2. Töltse fel az egyéni fejlécet

A fejléc kép feltöltéséhez jelentkezzen be a WordPress műszerfalára. A bal oldali ablaktáblán navigálj a Megjelenés → Fejléc menüpontra.

Ez megnyitja a képernyő bal oldalán a Fejléc médiatáblát. Menjen a Fejlécképre, és kattintson az Új kép hozzáadása gombra.

Ez megnyitja a képgalériát a kép kiválasztásához. Itt böngészhet az egyéni képében is. Válassza ki a képet, vágja ki, ha szükséges. Állítsa be egyéni fejlécképként. Kész is van.

Hogyan lehet testre szabni a fejlécet a WordPressben?

Mihelyt feltöltötte a WordPress téma egyéni fejlécképét, szerkesztheti azt videó, szöveg, widgetek, közösségi ikonok stb. alkalmazásához. Bármelyik alapértelmezett WordPress témát használhatja. Itt kap példakódot az egyéni fejléc szerkesztéséhez a Twenty Seventeen témában.

1. Szövegterület hozzáadása a fejléchez

Az alapértelmezett témával csak a weboldal címét tudja megváltoztatni. De ahhoz, hogy szöveges területet adjon hozzá, néhány kódot kell írnia a header-image.php fájlba. A következő kódot kell hozzáadnia, hogy szöveges területet kapjon a fejlécben

A kód hozzáadása után egy külön szöveges területet fog látni a fejlécben az alábbiakban látható módon

2. Közösségi ikonok hozzáadása

A közösségi ikonok hozzáadásához a fejléchez a következő kódot kell hozzáadnia a site-branding.php fájlhoz a wrap class után.

A CSS-t is meg kell adnia, ha a közösségi ikonokat a saját egyedi stílusában szeretné stilizálni.

Ez a kívánt eredményt fogja adni a képen látható módon

3. Widget hozzáadása a fejléchez

Ha néhány widgetet szeretne a weboldalához, akkor a function.php fájlban definiál egy funkciót. Ezt a kódot a fájl végén adhatja hozzá.

Amikor ezt megtette, ezt a HTML-kódot hozzáadja a header-image.php fájlhoz, hogy az adott widget megjelenjen a frontendben.

Most a Megjelenés → Widgetek menüpontba lép. Innen bármilyen widgetet hozzáadhatsz az Egyéni fejléc pozícióhoz. Például a Keresés widgetet egyszerűen az Egyéni fejléc pozícióba húzva adhatod hozzá.

A kapott fejléc valahogy így fog kinézni

4. A logó áthelyezése

A WordPress alapértelmezett beállításaihoz hozzáadhatsz egy logót. Navigálj a Megjelenés → Fejléc → Fejlécmédia → Logó szakaszra. Itt állítson be egy logót a Logó kiválasztása opcióra kattintva.

Az újrapozícionálásához azonban további CSS-t kell írnia. A Twenty Seventeen témában a logó alapértelmezés szerint a bal alsó pozícióban lesz, ahogy az alább látható

Itt egy példa CSS-t láthatsz a logó középre helyezéséhez. Hasonlóképpen a fejlécben bárhová beállíthatja.

.custom-logo-link {padding-right: 2em;position: absolute;left: 500px;top: 0px;}

5. Videó hozzáadása a fejléchez

Végül videót is hozzáadhat a WordPress fejlécéhez. Szerencsére ehhez nem kell kódot hozzáadni. A WordPress alapértelmezett lehetőséget biztosít a videó vagy a háttérkép hozzáadására.

A videó hozzáadásához a fejléchez navigálj a Megjelenés → Fejléc → Fejlécmédia → Fejléc videó. Itt kattintson a Videó kiválasztása gombra az alábbiakban látható módon. Ezután a számítógépéről böngészheti a fejlécbe kívánt videót. Alternatívaként megadhatja a videó URL-címét is, ha az online van. Csak tegye közzé.

A Header videó így fog kinézni

Hasonlóképpen, hozzáadhat egy háttér fejlécképet, kiválasztva bármelyik Header képet a Header Media szakaszból.

Egyenként különböző WordPress egyéni fejléceket is létrehozhat oldalanként, mondjuk néhányat háttérképpel, néhányat videóval vagy Widgetekkel stb. Minden az Ön választásától és kreativitásától függ.

Hogyan hozzon létre egyéni fejlécet a WordPressben a semmiből a TemplateToasterrel?

A sablonfájlokkal való munkához jó PHP, HTML, CSS ismeretekkel kell rendelkeznie. Ha kezdő vagy, és nem tudsz kódot írni, akkor a TemplateToaster WordPress Theme Builderre támaszkodhatsz. Nincs szüksége kódolásra a WordPress egyéni fejléc sablon létrehozásához. Csak néhány kattintás a drag & drop felületre, és máris kész az egyéni fejléc. Lássuk, hogyan lehet egyéni fejlécet hozzáadni a WordPresshez a TemplateToasterrel

Először is töltse le és telepítse a TemplateToaster weboldalépítőt. Sikeres telepítés után megjelenik a CMS kiválasztó képernyő az alábbiakban látható módon. Itt válassza ki a WordPress-t

Ezután megjelenik a következő képernyő, amelyen létrehozhat egy sablont a semmiből, vagy használhat egy mintasablont. A Start from Scratch (Kezdjük a semmiből) lehetőséget választja, majd kattintson a Módosítás gombra.

Ezután átirányítjuk a szoftver fő felületére, ahonnan elkezdheti az egyéni fejléc tervezését.

1. Teljes szélességű egyéni fejléc

A szoftver fő felületének képernyője az alábbiakban látható módon jelenik meg. Innen állíthat be egy teljes szélességű fejlécet. Válassza a Fejléc → Szélesség → Teljes szélesség menüpontot.

2. A logó áthelyezése

A Fejléc lapon kattintson a Logó opcióra. Ez megnyitja a logó ikongalériát. Kiválaszthat egy logó képet a mintatárból, vagy böngészhet saját egyéni képet. Ez beállítja a logót.

Ha duplán kattint a logóképre, akkor megnyílik a Formátum lap az alábbiakban látható módon. Innen megadhat egy linket a logóképhez, vagy beállíthatja annak pozícióját. Egyéni bal és felső pozíció megadásával átpozícionálhatja, vagy kiválaszthat egy pozíció gyorsbillentyűt. Itt például függőleges-közép pozíció van kiválasztva a logóhoz.

3. Háttérkép hozzáadása

A fejléc háttérképének beállításához a Fejléc lapon a Háttér opciót választja. Ez megnyit egy képgalériát. A További képek opcióból saját egyéni fejlécképet is böngészhet.

Hasonlóképpen, a Fejléc fül Kép opciójára kattintva adhat hozzá egy Előtér fejlécképet.

4. Szövegterület hozzáadása a fejléchez

Ha a fejlécen szeretné megjeleníteni a szlogent és a vonatkozó információkat, akkor használhat szövegterületet. A szövegterületen egyszerű szöveget, gombot, listát stb. adhat hozzá. Kattintson a Szövegterületek opcióra.

Dupla kattintással adjon hozzá tartalmat és stílust. Mivel a dupla kattintással megnyílik a Szerkesztő lap a tartalom szerkesztéséhez.

5. Widget hozzáadása a fejléchez

Egyetlen kattintással widget területet adhat hozzá a fejléchez. Menjen a Widget területek fülre, és kattintson a Widget területek → Fejléc lehetőségre. A widgethez tipográfiát is beállíthat, és a fejlécen belül bárhová áthelyezheti, csak húzással. Exportálás után tartalmat adhat hozzá.

6. Közösségi ikonok hozzáadása a fejléchez

A közösségi média ikonok hozzáadása a fejléchez nagyon egyszerű. A Fejléc fülön kattintson a Közösségi ikonok opcióra. Megnyílik a közösségi ikonok galériája, hogy kiválaszthasson egy képet az igényeinek megfelelően. Itt böngészhet egyéni ikonjai között is.

A közösségi média ikonok mindegyike elérhető itt. Megtarthatja az ikonokat az igényeinek megfelelően. A Facebook, a Twitter és a Google + közösségi média ikonjait itt helyezheti el.

7. Videó hozzáadása a fejléchez

Videó hozzáadásához kattintson a Videó hozzáadása opcióra. Innen könnyedén feltölthetsz egy fejléc háttérvideót.

Végszavak

Most már megtudtad, hogyan hozhatsz létre egyéni fejlécet a WordPressben. Ez biztosan megváltoztatja a weboldalad megjelenését. Az, hogy milyen megoldást választasz, teljesen a te döntésed. Remélhetőleg tetszett a bejegyzés. Ha kérdéseid vannak, az alábbi megjegyzés rovatban írhatsz.

Kapcsolódó olvasmányok:

A legjobb WordPress tárhelyszolgáltatók

Hogyan ellenőrizze a WordPress verzióját

Hogyan találja meg a WordPress bejelentkezési url-t

Hogyan telepítse a WordPress-t

Mi a WordPress téma? az

Hogyan változtassuk meg a WordPress nyelvét

Hogyan hozzunk létre WordPress egyéni bejelentkezési oldalt

Hogyan hozzunk létre WordPress témát a semmiből

Hogyan javítsuk a WordPress oldal frissítését, ami nem működik