A fejlécek és a lábléc használata az Elementorral

A webhely fejlécei és láblécei alapvető elemek. A legtöbb esetben a fejléc olyan navigációs hivatkozásokat biztosít, amelyek leegyszerűsítik a webhely különböző részeire történő navigálást. Másrészt a lábléc olyan létfontosságú információkat tartalmaz, amelyekre a webhely látogatóinak szüksége lehet, mint például a vállalkozás címe vagy elérhetősége, hogy néhány amp említsünk.

A fejléceket és lábléceket a felhasználó aktuális témája biztosítja a WordPress-en. Ezek általában jól megtervezettek, és a legtöbb felhasználáshoz megfelelőek. Ha azonban testre szeretné szabni a témákat, módosítania kell a kódot; Ilyenkor jönnek jól a Page Builder plugin modulok. Használhatja őket weboldal-összetevők létrehozására és módosítására a kód ismerete nélkül.

Ez az oktatóanyag megtanítja nekünk, hogyan készítsünk webhely fejlécet és láblécet. Az Elementor Pro kerül felhasználásra (mivel az Elementor alapverziója nem tartalmazza az ezen összetevők létrehozásához legfontosabb funkciókat). Tehát töltse le az Elementor Pro-t, és ellenőrizze, hogy be van-e kapcsolva.

Miért válassza az Elementort oldalkészítőnek?

Az Elementor a legfejlettebb oldalkészítő, amely lehetővé teszi a felhasználók számára, hogy prémium elemeket alkalmazzanak gyönyörű tervek és elrendezések létrehozásához. Nagyon hasznos azoknak a kezdőknek, akiknek nincs előzetes kódolási ismerete. Az Elementor drag 'n drop szerkesztője lehetővé teszi a felhasználók számára a widgetek és elemek mozgatását.

Az Elementor egy vizuális oldalkészítő, amely lehetővé teszi a felhasználók számára, hogy módváltás nélkül is meglássák, hogyan jelennek meg oldalaik.

Egy másik nyomós érv az Elementor használata mellett, hogy a legtöbb munka költség nélkül elvégezhető. Ingyenes kiadásuk több mint képes megfelelő webhelyszerkesztési lehetőségeket biztosítani. Áttekintjük azonban az ingyenes és a fizetős verziót is, így kiválaszthatja az igényeinek leginkább megfelelőt.

Az alábbiakban felsoroljuk az Elementor néhány fontos szempontját, amelyek miatt érdemes:

  • A fogd és vidd funkció támogatott.
  • Nagy számú sablonja van.
  • Összesen több mint 90 widget található.
  • A reszponzív támogatáshoz nincs szükség kódolásra.
  • Újra- és visszavonási lehetőségek állnak rendelkezésre.
  • Az automatikus mentés elérhető.

Segítene, ha egy egyedi fejléc létrehozása előtt döntene a kívánt fejléc- és láblécszakaszok általános elrendezéséről. Az előre elkészített fejlécszakasz-elrendezés megtekintése számos választási lehetőséget kínálhat.

Különféle fejlécrészek közül választhat; a legelterjedtebb és legmodernebb megjelenésű fejléc bal szélső sarokban egy webhely logója, középen egy navigációs sáv, a jobb oldalon pedig egy keresősáv található.

Végtelen lehetőségek rejlenek, és tetszőleges elrendezést készíthet.

A 7. számú előre elkészített fejléc sablont választottam; Ez a leggyakoribb és legegyszerűbb módszer a fejléc használatára a WordPress webhelyeken. Másolja ki és illessze be a fejléc sablon nevét a Sablonok > Fejléc > keresési sablonba > illessze be a másolt fejléc nevét .

Ha megtalálta a kívánt fejlécesablont, válassza a „Szerkesztés az Elementorral” lehetőséget, és az Elementor Pro fejléckészítő szakaszába kerül.

Kezdődjön a buli.

Mi az a fejléc és mit csinál?

Weboldalának felső részét „webhelyfejlécnek” nevezik. A fejléc általában ugyanaz az egész webhelyen. Egyes webhelyek azonban különböző fejléceket használnak a webhely különböző részeihez.

A fejléc kialakítása biztosítja a felhasználóknak az első benyomást a webhelyről, függetlenül attól, hogy megérkeztek-e a kezdőlapra, az oldalra vagy más egyéni tartalomra. És ha jól van megtervezve, akkor megragadja a felhasználó figyelmét, és további görgetésre és olvasásra csábítja.

A fejléc segíthet a vállalat márkaidentitásának népszerűsítésében is.

Olyan funkciókat használok, mint a cég logója, betűtípusa, színei és általános márkanyelve.

A webhelyen való navigáció, a webhelyen történő keresés, a bevásárlókosár (értékesítési oldalakhoz), a cselekvésre ösztönző (CTA) gombok és egyéb funkciók, amelyek javítják a felhasználói élményt és növelik a konverziós arányt, mind megtalálhatók a fejlécekben.

A lábléc a weboldal egy része, amely az oldal alján jelenik meg. Általában folyamatosan jelennek meg a webhelyen, minden oldalon és bejegyzésben, hasonlóan a fejlécekhez.

A lábléceket gyakran figyelmen kívül hagyják, ami a potenciál elpazarlása, mivel a webhely minden oldalán megjelennek. Ugyanolyan fontosak a fejlécek szempontjából.

A lábléc kialakítása hasznos és létfontosságú információkat jeleníthet meg, például hírlevél regisztráció, szerzői jogi információk, használati feltételek és adatvédelem, webhelytérkép, kapcsolatfelvételi adatok, térképek, webhelynavigáció és még sok más, a választott beállításoktól függően.

Hogyan készítsünk fejlécet

Ebben a részben személyre szabott fejlécet fogunk létrehozni. Ne aggódjon, ha ez megfélemlítőnek tűnik; nem kezdjük elölről. Ehelyett az Elementór Pro sablonjait használjuk, amelyeket az Elementor tervezőcsapata tervezett.

Fejléc sablon fejlesztése

A WordPress adminisztrációs panelén vigye az egérmutatót a Sablonok fölé, és kattintson az Új hozzáadása elemre a fejléc létrehozásához.

Egy modális ablak jelenik meg az átirányítás után. Válassza ki fejlécet a legördülő menüből, nevezze el a fejlécet, majd kattintson a „ Sablon létrehozása ” gombra:

hozzon létre egy sablont

Ezzel elindul az Elementor szerkesztő. Ezt követően megjelenik a sablonok listája, amelyek közül választhat. Tehát válasszon egyet, amelyik tetszik:

Meg kell jelennie az Elementor szerkesztési szakaszának tetején, miután kiválasztott egy sablont:

Logó készítése: Az első lépés egy logó létrehozása. Állítsa be a logót a webhely Élő szerkesztőjében, hogy elhelyezze a fejlécben. Válasszon egy logót a Webhelyazonosító gombra kattintva.

Ha döntött a logó mellett, kattintson a Közzététel .

Ha frissíti az Elementor felületet, akkor webhelye logójának a fejlécben kell lennie:

Ezt követően bármilyen módosítást elvégezhet.

Változások végrehajtása a fejléc menüben

A következő lépés az étlap megváltoztatása. Ha létrehozott egy menüt, a sablon automatikusan beépíti azt:

Íme a menüszerkezetünk, amelyet a fejléc sablonjában láthat:

Ha egynél több menüje van, szükség esetén frissítheti a tartalmát.

A tulajdonságait ugyanúgy szerkesztheti, mint bármely más widgetet.

Ha további elemeket kell hozzáadnunk, további részeket is hozzáadhatunk fejlécünkhöz:

Kezdjük azzal, hogy adjunk hozzá egy fejlécet és néhány közösségi média ikont:

Ezt követően tetszőleges módosításokat végezhet. A szerkesztésünk így alakult:

Fejléc kiadvány

Most már közzéteheti a fejlécet, miután befejezte a módosítást. amp a fejlécet a teljes webhelyünkön fogjuk használni , ezért ezt a lehetőséget választjuk ki, miután a Feltétel hozzáadása lehetőséget választottuk:

És itt van egy amp élő oldalunk egyik oldalára:

A lábléc elkészítésének folyamata meglehetősen hasonló a fejléc létrehozásához. Ennek elkészítéséhez hozzon létre egy új lábléc sablont, például:

Ezután döntsön a sablon mellett. A láblécek különböző formájú és méretűek. Egyesek szilárd információkat tartalmaznak, míg mások kapcsolatfelvételi űrlapokat tartalmaznak. Válassza ki az igényeinek megfelelő sablont.

A weboldalunkhoz választott sablon a következő:

A fejléc azonnal megjelenik, amint elkezdi a szerkesztést (ha beállítja azt a feltételt, hogy minden oldalon megjelenjen).

Szükség szerint módosítsa a láblécet; Így néz ki revíziónk:

A lábléc közzététele a befejezés után:

Késztermék

Így néz ki a kész eredmény. A fejléc és a lábléc is használatban van weboldalunkon:

Ez a legfontosabb fázis, és gondoskodnia kell arról, hogy a fejléc és lábléc szakaszok reagáljanak. Mivel a teljes szélességű menü általában nem illik a mobil nézethez, tudnia kell, hogyan fog megjelenni a terv a mobil képernyőjén. Az Elementor oldalsáv részének alján található reszponzív kapcsolók módosíthatják a mobil és a lap verzióját.

Különféle módon tesztelheti a fejléc és a lábléc válaszkészségét. Az ex amp le, akkor eszközök használatát, mint Browserstack, CrossBrowser tesztelése, és a Google Resizer annak biztosítására, hogy a weboldalakon a reagáló amennyire csak lehetséges. Ezt manuálisan is megteheti, különféle eszközökkel kísérletezve.

A dolgok lezárása

Remélem, ez az útmutató segített Önnek az egyedi fejléc- és láblécrészek gyors fejlesztésében az Elementor Pro használatával. A WordPress számos funkcióval rendelkezik, de csak néhány módosítást tesz lehetővé a fejlécben és a láblécben, végül az Elementor Pro oldalkészítővel javítva. A webhely elemeinek sokkal jobb ellenőrzésével most jobban bemutathatja webhelye jövőképét. Ezenkívül az Elementor funkcionalitása javult ingyenes kiegészítők használatával, lehetővé téve a felhasználók számára, hogy fejlettebb képességekkel testreszabják webhelyeiket.

Hagy egy megjegyzést

Az e-mail címed nem kerül nyilvánosságra. A kötelező mezők meg vannak jelölve *