Hogyan építsünk WordPress webhelyet 2021-ben 6 lépésben. Egy A-tól Z-ig útmutató

2017-ben lehetőség nyílt arra a cégre, amelyben dolgoztam, hogy megtanuljam a webdesignot.

elkezdtem HTML-t, CSS-t és Javascript-et tanulni. Nagyon élveztem. Amíg bele nem botlottam az első bogaraimba. Később egy mellékprojektet kaptam: egy tényleges weboldalt. Nagyon izgatott voltam, a kollégáim ott voltak nekem, amikor segítséget kértem.

néhány hónappal később egy pro-bono WordPress megbízáson dolgoztam egy civil szervezet számára.

hadd mondjam el, hogy az utazási piacon voltunk, és marketinget végeztem. De volt ez a kultúra, amely felhatalmazta az embereket az új készségek elsajátítására.

DIY típusú vagyok, és rájöttem, hogy a tanulási kód tanulási görbéje sokkal hosszabb a vártnál. A WordPress segítségével a dolgok másképp működtek.

gyorsan előre, 2020-ban végül a Colibri készítőknél dolgoztam, mivel a Colibri Népszerű WordPress drag and drop oldalkészítő volt.

a dolgok olyan könnyűek ma ilyen eszközökkel. A WordPress valóban felhatalmazhatja az embereket arra, hogy pillanatok alatt a semmiből építsenek egy weboldalt. És a weboldalak inspirációja csak…az egész interneten.

most, itt vannak a lépések:

1. válassza ki a domain nevet
2. szerez website hosting
3. ismerkedjen meg a WordPress felület
4. telepítsen egy WordPress téma
5. Építsd meg a WordPress honlapján
6. telepítse létfontosságú WordPress plugins

mert miután néhány lépést a nem elég ahhoz, hogy egy supercalifragilisticexpialidocious weboldal legyen, van egy bónuszom az útmutató végén: UX tervezési tippek és trükkök.

de mielőtt belevágnék a témába, Szeretnék megvilágítani egy másik témát. Nem tart sokáig, ígérem.

mennyibe kerül egy WordPress weboldal?

ha költségbontást akarunk végezni egy WordPress webhely számára, akkor a következőket kell belefoglalnunk:

• domain vásárlása: az árak 15 dollár/év
• tárhely megszerzése: az árak olyan alacsonyan kezdődnek, mint 8 dollár/év
• WordPress téma. Most, attól függően, hogy milyen szintű Testreszabás és hány funkciót szeretne felvenni, kezdheti a $0-t. Ha nem akar letelepedni egy alapvető weboldallal, akkor az éves WordPress téma tervek 70 dollár körül forognak.
• WordPress Bővítmények. Sok közülük ingyenes, de ha speciális opciókat szeretne, frissítenie kell egy fizető tervre.

ez azt jelenti, hogy a legalapvetőbb honlap indul $23/év. Abban a pillanatban, amikor fejlett témafunkciókat szeretne, a költségek körülbelül 100 dollárra emelkednek évente.

a bővítmények frissítésekor évente körülbelül 200-500 dollárt fizethet.

ha valami egyedi gyártást szeretne, és fel kell hívnia egy WordPress fejlesztőt, a költségek az első évben meghaladhatják az 1000 dollárt.

az online áruházak esetében a költségek jelentősen növekedhetnek, mert sok funkcióra van szükség, és a teljesítmény és a biztonság a legfontosabb.

most, hogy ezt tisztáztuk, itt az ideje, hogy a mai témánk aljára térjünk: Hogyan hozzunk létre egy WordPress webhelyet 2021-ben.

válassza ki a domain nevét

forrás: https://unsplash.com/photos/N1XUwR8iOf0

ha ezt még nem tudta, akkor a domain név a vállalkozás neve vagy a termék neve. A nevek nagyon erősek lehetnek, ezért ne legyen elhamarkodott a domain név kiválasztásakor. Ha úgy érzi, hogy megfázik a lába, ne aggódjon, vannak olyan eszközök, amelyek segíthetnek.

tippek és trükkök a honlap domain név kiválasztása

csináltam néhány brainstorming egy honlap domain egy üzleti egy ideje, és rájöttem, hogy “Wazz” hangzott elég érdekes. Rövid, könnyen megjegyezhető. De abban a pillanatban, amikor gugliztam, jól….hadd mondjam el, nevetésben törtem ki. A brit szlengben “vizelést”jelentett. Tényleg emberek, csináld meg a kutatást.

később meg akartam nevezni a fotós honlapomat. A “holdfényt”elemeztem. Olyan szép, romantikus, meseszerű érzés volt … kivéve, hogy nem volt. úgy tűnik, hogy “illegálisan desztillált vagy csempészett alkoholt” jelentett.

tehát győződjön meg róla, hogy az elnevezése egyedi, emlékezetes, és nincs furcsa jelentése angolul vagy más népszerű nyelven (pl. Ha helyi vállalkozás vagy, ezt kihagyhatja.

most nézzük meg egy kicsit egy apró ellenőrzőlistát a domain név kiválasztásához a WordPress webhelyéhez:

• Készítsen listát a vállalkozásához/termékéhez kapcsolódó kulcsszavakról. Gondoljon arra, hogy a felhasználóknak hogyan kell érezniük a termék használata után. Tegyük fel, hogy van egy bőr termékcsaládja, amely természetes összetevőkön alapul. A lista tartalmazhat olyan szavakat, mint a “bőr”, “gondozás”, “biztonságos”, “természetes”, “gyönyörű”, “friss” stb. Használjon olyan eszközt, mint a Namelix vagy a Novanym, hogy domain név ötleteket generáljon.
• ellenőrizze az újonnan talált domain név jelentését. Mindig úgy google, mint ez a “{írja be a nevet ide} jelentése”. A szótári magyarázatokkal végzem. Ezután megyek a Google képekhez, és megnézem, hogyan illeszkedik. Talán van egy ilyen nevű énekes, manga rajzfilm neve stb. Ha igen, akkor újra kell hajtania a folyamatot.
• keresse meg a domain nevet a Facebook-on vagy a LinkedIn-en, hogy lássa, van-e ilyen nevű üzleti oldal.
• ellenőrizze, hogy van-e eladó webhely-domain. Sok webhely esetében a”. com “a legjobb legfelső szintű domain (TLD), amelyet az”. org”,”. net “vagy”. io ” követ.
• vásárolja meg a domain nevét. Ezt megteheti egy domain regisztrátoron, például a GoDaddy-n vagy a tárhely-szolgáltatón keresztül.

és ez elvezet minket a következő fejezethez.

szerez website hosting

minden website, amit valaha meglátogatott házigazdája a szerveren. Ez azt jelenti, hogy meg kell szereznie a webtárhelyet egy tárhelyszolgáltatótól.

figyelembe véve, hogy egy WordPress weboldalt építünk, választhat egy hosting tervet WordPress.com vagy más harmadik fél tárhelyszolgáltatója.

hadd tisztázzak valamit, mielőtt folytatnánk. Vannak wordpress.com és wordpress.org. a különbség az, hogy tovább WordPress.com építhetsz és építhetsz egy weboldalt. Tól től WordPress.org általában témákat és bővítményeket szerez a webhelyéhez, amelyet máshol tárolnak. Össze lehet hasonlítani a WordPres.com tervek itt.

ez az útmutató hipotézise az, hogy valóban márkát szeretne építeni, és teljes ellenőrzést szeretne gyakorolni a webhelye felett. Ez azt jelenti, hogy egy harmadik fél tárhelyszolgáltatójához fordul.

három fő hosting szolgáltatás létezik: megosztott tárhely, VPS és menedzselt tárhely. Az első helyzetben a szerver erőforrásai több webhely között vannak felosztva. Hosszú távon, ha ezek a webhelyek növekednek, és a tiéd is, teljesítményproblémákkal találkozhat. Lehet, hogy rájön, hogy szüksége van egy VPS szolgáltatásra vagy egy felügyelt tárhely-tervre.

tehát ezt szem előtt kell tartania, amikor tárhelyszolgáltatót választ: melyek az üzleti céljaid?

ha VPS tárhelyet használ, az erőforrások továbbra is megosztásra kerülnek, de némi ellenőrzést szerezhet felettük. A biztonság és a teljesítmény szempontjából is javulást fog látni.

a menedzselt tárhely egy “la carte” szolgáltatás. Saját fizikai szervert kapsz magadnak, és a teljesítmény és a biztonság növekedését fogod látni.

határozottan, a dolgok ennél bonyolultabbá válhatnak, de csak a tárhely nagy képét akartam festeni.

ezután, amikor elemzi a terveket, nézze meg közelebbről:

• árazás
• Tárolás
• támogatás
• teljesítmény

néhány tárhelyszolgáltató rendelkezik néhány extra funkcióval, például domain kínálattal (pl.: Namecheap), weboldal készítővel (pl.: GoDaddy), e-kereskedelmi lehetőségekkel stb.

most már valószínűleg észrevette, hogy néhány webhely “HTTP” vagy “HTTPS” – et használ. Mi van azokkal?

a HTTP a modern web alapja. Összekapcsolja a böngészőket és a szervereket, és kérés-válasz alapon működik. Az extra “s” azt jelenti, hogy a weboldallal való kapcsolat titkosítva van, és a weboldallal megosztott adatok biztonságosak.

tegyük fel, hogy egy felhasználó fizet a webhelyén, vagy bejelentkezik egy fiókba. Az információ, amelyet a felhasználó beír, privát lesz. Biztonságos a hackeléstől. Ez az SSL technológián keresztül történik, amely a “Secure Sockets Layer” kifejezést jelenti.”A fogyasztók számára a “HTTPS” jelek bizalma, mert megvédheti adataikat és magánéletüket. Ez azt jelenti, hogy meg kell szereznie egy SSL tanúsítványt.

győződjön meg róla, hogy a választott terv tartalmazza ezt is.

abban a pillanatban, amikor megszerzi a tárhely-tervét, és beállította a bejelentkezési adatait, az egyetlen hiányzó darab maga a WordPress lesz. A legtöbb tárhelyszolgáltató lehetővé teszi a WordPress telepítését az irányítópultról/varázslóból. Ez mind nagyon intuitív.

hogyan fog bejelentkezni a webhelyére? Könnyű. Csak írja be a böngészőbe a webhely címét, és adja hozzá a “/wp-admin” – t, az alábbiak szerint.

ismerkedjen meg a WordPress felülettel

a WordPress irányítópult 9 részből áll. Vessünk egy pillantást rájuk.

WordPress Beállítások

ebben a szakaszban további 7 menüpont található. Röviden leírom a legfontosabb dolgokat, amelyeket itt meg kell tenni.

• az “Általános” alatt beállíthatja a webhely címét, a tagline-t, az URL-t, az időzónát, az idő & dátumformátumot és a nyelvet.
• az “olvasás” alatt “megmondod” a WordPress-nek, hogy melyik oldal szolgál kezdőlapként, és melyik a “blogod”. Ez egy fontos lépés. Azt is kiválaszthatja, hogy hány blogbejegyzés jelenhet meg egy oldalon, vagy ha azt szeretné, hogy webhelyét a Google indexelje.
• alatt “vita” fogsz csinálni a blog megjegyzéseket beállítás.
• belül “Média” beállíthatja a maximális méreteket pixelben, amelyeket kép Médiakönyvtárba történő hozzáadásakor használni kell.
• belül” Permalinks ” akkor állítsa be a formátumot az URL-eket.
• az Adatvédelmi irányelveket az “Adatvédelem”részben adhatja meg.

a “Beállítások” panel megközelítésének legjobb módja az, ha beírja ezeket az elemeket, és kitölti a hiányzó információkat, csak hogy megbizonyosodjon arról, hogy nem hagy ki semmi fontosat. A dolgok elég egyszerűek, ezért ne légy hideg láb. Az összes beállítás kevesebb, mint 30 perc alatt elvégezhető.

WordPress oldalak és hozzászólások

amit tudnod kell, hogy a tartalom az “oldalak” vagy a “hozzászólások”belsejébe kerül. Itt fogod tölteni az időd 95% – át.

az “oldalak” statikusak. Lehet, hogy van egy “kezdőlap”, “szolgáltatások” oldal, “Kapcsolat” oldal, megkapja a pontot. A bejegyzések alatt lehet a legújabb blogcikkek, talán a Portfólió. Ezek dinamikus oldalak, mert automatikusan a legújabb webhely tartalmát helyezik a tetejére.

amikor a “hozzászólások” lehetőséget választja az irányítópulton, létrehozhat egy bejegyzést, megjelenítheti az összes bejegyzést, és kezelheti a címkéket és kategóriákat.

új bejegyzést hozhat létre, ha a fentiek szerint az “Új hozzáadása” lehetőséget választja, vagy az “összes bejegyzés” menüpontra lép, majd válassza az “Új hozzáadása”lehetőséget.

ugyanez működik az oldalakon.
az “összes oldal” vagy az “összes bejegyzés” részben a téma által telepített alapértelmezett oldalak és bejegyzések láthatók.

most hogyan szerkeszthet egy bejegyzést vagy egy oldalt?

amikor az egérmutatót az alapértelmezett oldalak és bejegyzések fölé viszi, néhány lehetőséget fog látni: szerkesztés, gyors szerkesztés, kuka, nézet. A fenti képernyőképen a “Szerkesztés Colibri-ben”is található. Ennek oka az, hogy telepítettünk egy plugint, amely lehetővé teszi az oldalak testreszabását a Colibri WordPress builder segítségével (de erről egy kicsit később beszélünk).

WordPress média

az összes média ide kerül: képek és videók. Húzhatja őket, vagy feltöltheti őket.

médiát is hozzáadhat a bejegyzés/oldal szintjéről. Később többet mutatok a témáról.

WordPress megjegyzések

a 4.irányítópult szakasz neve “Megjegyzések”. Itt kezelheti a hozzászólások megjegyzéseit. Rengeteg spam-megjegyzést fog kapni, amelyeket spambe vagy kukába lehet helyezni. Jóváhagyhatja a relevánsakat.

a “megjelenés” menü

ezen a szinten meg lehet:

• téma keresése, telepítése és aktiválása (további részletek a következő fejezetben).
• testreszabhatja a widgeteket, hogy blokkokat adjon hozzá a webhely oldalsávjaihoz, lábléceihez és egyéb területeihez.
• adja meg a WordPress webhely menüit.
• adjon hozzá háttérképet a webhelyéhez.
• Szerkessze a téma kódját belül “téma szerkesztő” (csak akkor ajánlott, ha fejlesztő vagy).

most, amikor aktivál bizonyos bővítményeket, néhány új menüpontot láthat a “megjelenés”alatt. Ebben az esetben, mivel aktiváltuk a Skyline témát, látunk egy lehetőséget, hogy beállítsuk a “SkylineWP Beállítások”alatt. Minden téma jöhet a saját beállítás.

“beépülő modulok telepítése” a Skyline téma által hozzáadott másik extra menüpont. Itt láthat néhány plugin-ajánlást, amelyek jól működnek a Skyline-nal.

ez a következő menüponthoz vezet.

Plugins

sok olyan funkció van, amelyet nem lehet csak téma szerint kezelni, például SEO optimalizálás, SEO audit, webhelybiztonság és biztonsági mentés, táblázatok, űrlapok, e-kereskedelmi funkciók stb. A bővítmények itt vannak, hogy kompenzálják az ilyen lehetőségek hiányát.

itt van egy kis bemutató a pluginek telepítéséről, aktiválásáról és deaktiválásáról. Minden intuitív és felhasználóbarát.

felhasználók

ezen a szinten eldöntheti, hogy ki férhet hozzá az Ön webhelyéhez. Hozzáférést adhat a közreműködőknek, vendégszerzőknek, szerkesztőknek és még sok másnak, az Ön igényeitől függően.

eszközök

az “eszközök” Alatt lehetősége van eszközök adatainak importálására és exportálására más tartalomkezelő rendszerekbe (pl. Blogger).

van még egy “Site health” szakasz, amely megmutatja a kritikus információkat a WordPress konfigurációjáról és a figyelmet igénylő elemekről, néhány Tanáccsal együtt.

mivel tiszteletben kell tartanunk az Adatvédelmi irányelveket, itt exportálhatja vagy törölheti a felhasználók személyes adatait.

és ezzel becsomagoltuk a WordPress irányítópult fejezetét.

térjünk rá érdekesebb üzletre.

Hogyan telepítsünk egy WordPress témát

ehhez el kell mennie a WordPress admin irányítópultjára, kattintson a bal oldali menü “megjelenés”, majd a “témák”elemére.

Ezután kattintson az “Új hozzáadása” gombra.
egy csomó sablon jelenik meg, és szűrheti őket legújabb, kiemelt, Népszerűség…vagy funkciók szerint.

büszkén mondhatjuk, hogy saját Mesmerize és Colibri témáink szerepelnek a Top 20 legnépszerűbb WordPress témában.

a téma kiválasztásakor kattintson az “Install”, majd az “Activate”gombra.

a WordPress témáját akkor is aktiválhatja, ha visszatér a megjelenés-> témákhoz.

a teljes telepítési folyamatot a bemutatónk is ismerteti.

most már készen áll a rock and roll!

via GIPHY

készítse el WordPress webhelyét

a WordPress programban a weboldal kialakítása a választott témától függ. Ha szüksége van valami extra, Nos … lehet, hogy meg kell találni valamit, hogy töltse ki a hiányzó funkciókat.

általában minden WordPress témának 2 terve van: egy a bloghoz és egy az oldalakhoz. A színek korlátozottak, nincsenek speciális testreszabások. Ez azt jelenti, hogy egy bizonyos időben a bővítmények hasznosak lesznek.

most a WordPress témáknak van egy téma testreszabója, alapvető funkciókkal. Jól illeszkednek azok számára, akiknek nincs szükségük egyedi funkciókra, és nagyon gyorsan szeretnék felépíteni webhelyüket. Szükség esetén hozzáadhatja saját CSS stílusait. Csak győződjön meg róla, hogy válasszon egy témát, hogy van egy elrendezés, amely megfelel a saját elképzelés.

hogyan lehet testre szabni egy témát? Csak menj át Megjelenés – > Testreszabás.

a bal oldalon kiválaszthatja, hogy mit módosítson: tartalom, menü stb. A jobb oldalon, ott van a webhely előnézete. A ceruza ikonra kattintva valós időben megváltoztathatja a szöveget.

a történet másik oldalán vannak WordPress építők. Ezek olyan bővítmények, amelyek segítenek igazán egyedi webhelyek létrehozásában. Teljesen megváltoztathatja a téma elrendezését.

esetünkben a Skyline előre telepít egy ilyen Colibri nevű építőt, példaként fogjuk használni.

attól függően, hogy a verzió a téma, az ingyenes vagy fizetett egy, megvan a különböző elemeket játszani: a fejlécektől, az adott oldalszakaszoktól kezdve a kisebb összetevőkig, mint például a cselekvésre való felhívás, a fülek, a számlálók, a harmonikák stb.

szerkesztheti a témát, mint korábban, a megjelenés-> Testreszabás, vagy vegye be a parancsikont, az alábbiak szerint.

mi változik? A Testreszabón belül további funkciókhoz férhet hozzá.

a testreszabó használata mellett van egy másik lehetőség a weboldal testreszabására a WordPress – ben-az alapértelmezett szerkesztő. Ezt a “Szerkesztés” opcióval érheti el minden bejegyzés és oldal alatt. Ezenkívül abban a pillanatban, amikor új bejegyzést vagy oldalt ad hozzá, egyenesen az alapértelmezett szerkesztőbe kerül (hacsak nincs aktiválva egy építő).

tehát a következő fejezetben mélyrehatóan megvizsgáljuk, hogyan kell:

1. hozzon létre egy WordPress weboldalt egy WordPress oldalkészítő segítségével
2. hozzon létre egy WordPress webhelyet az alapértelmezett WordPress szerkesztő használatával

A. Hogyan építsünk egy WordPress weboldalt ingyenes weboldal-készítők segítségével

a WordPress weboldal-készítők segítenek a WordPress testreszabását egy teljesen új szintre emelni. Ön képes lesz arra, hogy testre mindent: fejlécek, oldal tartalmát, láblécek, navigációs menük, globális, egyedi stílus, akkor nevezd meg! Nincs szükség tervezési vagy kódolási készségekre!

ez általában egy drag and drop folyamat. Nem kell aggódnia a mobil kialakítás miatt, az építők lefedik a reakciókészséget.

a Webhely beállításainak módosítása a Testreszabóban

nézze meg a bal oldali panelt. Most görgessen le az “Általános beállítások”pontra.

Itt állíthatja be:

• a webhely neve.
• a weboldal Általános színsémája és tipográfiája.
• sablonok bloghoz, fejléchez és lábléchez: milyen hátteret kell használni, távolságokat, szegélyeket, árnyékokat stb.
• távolság: belső gombok, oszlopok stb.
• Custom CSS Styling

Hogyan hozzunk létre tartalmat a WordPress segítségével építők

mint korábban említettük, ha azt szeretnénk, hogy hozzon létre egy új honlap oldal, feje fölött a “oldalak”, és válassza a “Új”. Az alapértelmezett WordPress szerkesztőbe kerül, ahol megnevezi az oldalt. Ezután válassza a “Szerkesztés Colibri-vel”lehetőséget.

ha meglévő WordPress oldalt szeretne szerkeszteni, kattintson a “Szerkesztés Colibri-ban”gombra.

szakaszok hozzáadása a WordPress oldalakhoz

a bal oldali panelen minden “+” jel blokkokat és összetevőket nyit meg. Görgessen lefelé, amíg meg nem találja a kívánt mintát, vagy csak írjon be egy kategóriát. Itt vannak a Colibri Builderben elérhető kategóriák: Hero Accent, About, Features, Content, Call to Action, Blog, számlálók, Portfólió, Fotógaléria, ajánlások, ügyfelek, csapat, Kapcsolat, F. A. Q. és árképzés.

ezek előre meghatározott sablonok, amelyek megfelelnek a választott színsémának.
az egyik blokk kiválasztásával, a blokkon megjelenő “+” jelre kattintva a blokk az oldal alján helyezkedik el.

a bal oldali panelen húzással bárhová mozgathatja őket.

lehetőség van az “üres” blokkokra is.

ez azt jelenti, hogy testreszabhatja őket, ahogy jónak látja. Végül akár el is mentheti a tervét későbbi felhasználásra.

az egyes szakaszok jobb felső sarkában található beállítási ikonból beállíthatja a sorok számát, átrendezheti az elemeket, új blokkokat adhat hozzá, sőt törölheti az egész szakaszt.

a WordPress oldal szakaszainak testreszabása

ha meg akarja változtatni a szakaszok szövegét, megteheti in-line, Vagyis magában a szakaszban, élőben.

az in-line szerkesztés nem érhető el a gombokon lévő szövegeknél. A bal oldali panelen fogják kezelni őket.

ha meg akarja változtatni egy képet a webhelyéről, ez mind intuitív. Kezdje a kép kiválasztásával.

a bal oldali panelen belül is láthatja. Kattintson a képre. Megjelenik egy új ablak, amely arra kéri, hogy töltsön fel egy képet, vagy válasszon egyet a könyvtárból. Ha úgy dönt, hogy feltölteni, akkor ezt a drag and drop.

most, visszatérve az imént említett panelhez, 3 fő opcióval rendelkezik: elrendezés, stílus és haladó. Amikor kiválaszt egy szakaszt a jobb oldali webhely előnézetéből, megjelenik a szakasz megfelelő panelje.

vegyük őket egyenként:

• Layout

Itt állíthatja be a tartály szélességét és magasságát a szerkezet szintjén. . Egyszerűen fogalmazva, a konténer az a tényleges hely, amelyet egy blokk elfoglal. A tartály belsejében elhelyezi a tartalmat (szöveg, képek).

azt is beállíthatja a térköz A tartalom, és milyen közel a felső vagy alsó kerül.

új sorokat is felvehet a blokkba.

• Stílus

ezen a szinten testreszabhatja a blokk hátterét, vagy elválasztókat adhat hozzá. Az elválasztók olyan vizuális jelek, amelyek jelzik, amikor egy webhelyszakasz véget ér vagy megkezdődik.

• haladó

itt jön a móka, emberek!

a tipográfiától és a távolságtól a válaszkészségig itt juthat el a legkisebb weboldal részletekhez.

az elem állapotától függően variációkat hozhat létre: normál vagy lebegő.

ha kiválaszt egy bizonyos elemet egy blogon belül, mondjuk egy fejlécet, ugyanaz a panel jelenik meg a bal oldalon.

ez azt jelenti, hogy szemcsésebbé teheti a szerkesztést.

a címsorokról és a szemcsés elemekről szólva ezeket “komponenseknek”nevezzük. Lássuk, hogyan lehet játszani velük.

az összetevők használata a WordPress webhelyén

az összetevők címsorokra, csúszkákra, elválasztókra, gombokra, körhintákra, árazásra stb.vonatkoznak. Ugyanúgy hozzáférhetők, mint a blokkok. Egymás mellett ülnek, és drag and drop funkcióval rendelkeznek. A Colibri 40 komponenst kínál.

mint korábban említettük, a bal oldali panelen beállíthatja őket, ha az “elrendezés”, a “stílus” vagy az “advanced”menüpontra lép.

mobil válaszkészség

a többeszközös világban elengedhetetlen, hogy egy teljesen reagáló weboldal legyen. Alapértelmezés szerint a Skyline egy mobil érzékeny téma. Ez azt jelenti, hogy szakaszai a különböző eszközök szerint állnak be. Ha meg szeretné tekinteni, hogyan néz ki a WordPress webhely táblagépen vagy mobilon, akkor ezt megteheti, ha a bal alsó sarokban található vezérlőkkel játszik.

azt is kiválaszthatja, hogy bizonyos funkciókat elrejtsen a mobilon, például a “speciális” opciókon belül.

hogyan készítsünk menüt a WordPress Testreszabóban

most tegyük fel, hogy megtervezte az oldalait, és hozzá kell adnia őket egy menübe. A jobb oldali panelen az összes szakasz fentről lefelé van rendezve, például a webhelyén. A lábléc az utolsó szakasz. Az alábbiakban néhány extra funkciót láthat.

itt hozhatja létre a menüt.

az “új menü létrehozása” kiválasztása után megnevezheti a menüt, és kiválaszthat egy elhelyezést (fejléc, lábléc, oldalak stb.).

amikor a “Tovább” lehetőséget választja, hozzáadhatja oldalait a menühöz, az “elemek hozzáadása” opcióból. Ennél könnyebb nem is lehetne.

hogyan kell dolgozni a WordPress widgetekkel

már említettem, hogy a widgetek olyan tartalomblokkok, amelyeket hozzáadhat webhelye oldalsávjaihoz, lábléceihez és egyéb területeihez.

WordPress builder plugin használatakor csak a WordPress oldalsávjaihoz használ widgeteket, mert előre megtervezett lábléc-elrendezések vannak.

az oldalsávokat általában a blogoldalak használják. Minden téma különböző widget opciókkal rendelkezik, a keresősávoktól, a legutóbbi bejegyzésektől és megjegyzésektől, a közösségi widgetektől a képekig és videókig. Tegyük fel, hogy Instagram-profilját egy oldalsávon szeretné megjeleníteni, ehhez van egy Instagram WordPress widget.

az egyik kedvenc widgetem az, amely lehetővé teszi az egyéni HTML szerkesztést. Nagyon erősnek találom.

ezt mondta, akkor kicsit kész. Gratulálunk, a WordPress webhelye működik!

most nézzük meg a másik módszert a WordPress webhelyeinek építéséhez.

B. Hogyan építsünk egy WordPress honlap az alapértelmezett WordPress szerkesztő (Gutenberg)

megyek, hogy ez nagyon gyors. Ez a szerkesztő még mindig új a WordPress – ben (ez az alapértelmezett WordPress szerkesztő 2018 decembere óta), de a közösségi hozzájárulásnak köszönhetően folyamatosan fejlődik.

a klasszikus WordPress szerkesztő így nézett ki:

most van:

most, amit tudnod kell, hogy nem minden téma kompatibilis ezzel az új szerkesztővel. Meg kell találnia egy Gutenberg-kész.

Layout tervezés az alapértelmezett WordPress szerkesztő korlátozott. Ez is blokkokon alapul. Most, amint azt valószínűleg az előző fejezetben megtudta, a blokkok nagyjából minden lehetnek: fejlécek, képek, gombok, videók stb.

most, miért nem ragaszkodom a témához: ha megnézed a Gutenberg-véleményeket, a legfrissebb 1 csillagos vélemények. Ez nem egy jó élmény. Még akkor is, ha már 2 év telt el a bevezetéstől, és sok frissítés a közepén, ez még mindig gyerekcipőben jár. A WordPress most a közösségre támaszkodik új blokkok létrehozásában, hogy a szerkesztési élmény fejlődhessen.

jelenleg az eszköz úgy viselkedik, mint egy szövegszerkesztő, alacsony fogyasztású a stílus oldalán.

vannak olyan eszközök, mint a Kadence, amelyek segíthetnek, de még nem vagyunk ott.

telepítse a létfontosságú WordPress bővítményeket

a WordPress ökoszisztéma témákból és bővítményekből áll

több ezer WordPress bővítmény áll rendelkezésre odakint, amelyek kibővíthetik a funkcionalitást vagy új funkciókat adhatnak hozzá webhelyéhez.

ez egy nagyon rövid bemutató a plugin telepítéséről.

plugin ajánlásaink

most térjünk át egy kicsit egy másik témára: az oldal sebességére.

mind a látogatók, mind a Google sokat törődnek a webhely sebességével.

Miért A Google?

a sebesség fontos tényező, amelyet figyelembe kell venni az organikus rangsorolásnál, vagyis itt:

miért rossz a Webhely sebessége a felhasználóknak, és végső soron Önnek?
Nos, ha rossz élményt kínál nekik, előfordulhat, hogy nem vesznek részt az ajánlatában, vagy talán nem is térnek vissza egyhamar.

a Google 2018-as kutatása szerint a mobil felhasználók 53% – A olyan webhelyet hagy el, amelynek betöltése 3 másodpercnél tovább tart (Szent Moly!).

és nézd meg ezt!

hogyan befolyásolja az oldal betöltése a mobil látogatókat (megjegyzés: ugrál, ami azt jelenti, hogy elhagyja az oldalt)?
.
Szóval, hogyan lehet ezt kijavítani, és javítani a webhely általános teljesítményét, hogy ne kapjon hüvelykujját mind a felhasználóktól, mind a Google-tól?

2 laza megoldást választottam (sokkal több van ott, de elég technikai).

részletek optimalizálása
a honlap képeit nem eredeti méretben kell feltölteni. Is, próbálja megy PNG helyett JPEG (kevesebb szín).
a Smush a preferált WordPress plugin a képtömörítéshez. Nem fog látni látható csökkenést a minőségben, és az oldal sebessége optimalizálva lesz.

kb gyorsítótár
egyszerűen fogalmazva, a gyorsítótár ideiglenes tárolást biztosít a tartalom későbbi eléréséhez. Webhelye másképp töltődik be,ha ugyanaz a látogató először vagy 5. alkalommal fér hozzá.

miért van ez?
amikor a böngésző gyorsítótárazásával foglalkozik, a böngésző a fájlok másolatát menti egy webhelyről a felhasználó eszközére
(merevlemez, mobiltelefon). Amikor egy webhelyet gyorsítótáraznak, a böngészőnek csak az oldal új vagy frissített részeit kell betöltenie, és nem kell új kiszolgálói kérést kezdeményeznie. Ugyanez történik, ha rákattint a “Vissza” gombra, a böngésző megjeleníti az oldalt a gyorsítótárból. Ez
szintén szuper hasznos, ha lassú internetkapcsolattal foglalkozik, az oldalak gyorsan betöltődnek.

szeretne többet megtudni a gyorsítótár működéséről? Olvassa el itt.

az itt javasolt eszközök a következők:
a W3 Total Cache (W3TC) javítja webhelye SEO-ját és felhasználói élményét a webhely teljesítményének növelésével és a betöltési idő csökkentésével.
6. számú Kolibri. Ez néhány extra funkciók is, hogy szeretjük, mint a tömörítés a Javascript, HTML & CSS fájlokat.

most hogyan lehet ellenőrizni, hogy milyen gyorsan töltődik be webhelye?
a Google csak az eszköz, hogy segítsen, hogy, valamint néhány rögzítő ötleteket.

bónusz: UX tervezési tippek és trükkök

Emlékszel, amikor azt mondtam, hogy “az ég a határ” a WordPress oldalépítőkkel?

nos…mindig van egy “de”. Amikor weboldalt tervez, mindig szem előtt kell tartania a
közönséget vagy a vevő személyiségét (ahogy a marketingesek szeretik mondani). Nagyszerű élményt kell nyújtania számukra a webhelyén, ezt jelenti az UX (user-experience).

ehhez vannak bizonyos szabályok, amelyeket be kell tartania a súrlódásmentes felhasználói élmény biztosítása érdekében.

megfelel a felhasználók igényeinek
a webhely felhasználói nem akarnak túl sokat gondolkodni. Hasznos információkra van szükségük, amelyeket könnyedén fel lehet fedni és megérteni. Nincs szükségük olyan élményre, amely sok kattintásból vagy sok oda-vissza áll.

az emberek azonnali kielégülést keresnek: gyorsan és könnyedén megtalálják, amire szükségük van. Ha ez nem történik meg a webhelyén, akkor keresnek egy másikat.

vizuális hierarchia

a weboldal minden részét nem kezelik egyenlően, egyesek fontosabbak, mint mások (űrlapok, gombok, címsor, értékajánlat stb.).

hol szeretné, hogy a felhasználó leszálljon? Mit akarsz, hova klikkeljen?

használja a vizuális jeleket, hogy segítsen neki elérni, amit akar. Az oldalak összes elemének idegenvezetőként kell viselkednie.

a kutatók azt találták, hogy a balról jobbra olvasó felhasználók Z-alakú mintával szkennelik a webhelyeket.

ez azt jelenti, hogy oda kell irányítania a legfontosabb információkat.

könnyű navigáció

a navigációs sávot egyszerűen kell tartani, ne menjen túl sok lehetőségbe. Lehet, hogy paradox választási helyzetbe kerül, amikor a felhasználók elárasztják a lehetőségeket.

az oldalakat belsőleg kell összekapcsolni más releváns oldalakkal, hogy a navigáció zökkenőmentes legyen, és a felhasználónak nem szabad sokszor kattintania a “Vissza” gombra az előző oldalakhoz való eljutáshoz.

használjon fehér helyet. A fehér tér lehetővé teszi az információk emészthető tartalmi területeken történő rendezését. Ez kényelmesebbé teszi a felhasználókat, és nem fogja elárasztani a rengeteg adat.

azonos színséma (konzisztencia)

kerülje a szuper sötét vagy szuper intenzív színeket a webhelyén. Lehet, hogy elküldik a felhasználókat. Erősebb színeket használhat a webhely fontos szempontjainak kiemelésére.

használjon egyformán kiegyensúlyozott színeket. Itt egy kis inspiráció.

és még egy dolog, mielőtt továbblépnénk a következő UX tervezési elvre. A színeknek jelentése van az egész világon, különféle érzelmekhez kapcsolódnak. Ez az infografika megvilágítja a témát.

hatékony írás használata

ne használjon túlzott és clickbait másolatot. Írjon józan ésszel, természetes nyelven, ne használjon zsargont (nem mindenki ismeri bizonyos technikai szavakat).

használja max. 3 betűtípus legfeljebb 3 pontméretben — legfeljebb 18 szó vagy 50-80 karakter szövegsoronként, ahogy a Smashing magazin javasolja.

Use social proof

miért bízzak benned, a vállalkozásodban vagy a termékeidben?
mi, emberek, társas lények vagyunk. Közösségekben élünk, vannak barátaink és családunk. Ők lehetnek az influencereink. Sokat törődünk a véleményükkel.
.
hadd soroljak fel néhány példát az Ön számára:
6240> 5033

● Testimonials

● nem. ügyfelek (“jó társaságban vagy”).

● Ügyféllogók

Ügyfélkapu

xhamsterlogók

sajtóközlemények tervezési trendek, a parti kreatív emberek csodálatos infografikát készítettek a témáról.

következtetések

nevezhetjük egy wrap nem gondolod?

a rövid utat akartuk megtenni, nem pedig elárasztani az információkkal. De végül az ördög a részletekben rejlik. Épp most adtuk meg a helikopteres kilátást.

a lényeg az, hogy a webhelyed kevesebb, mint 2 óra alatt futtatható. De minél több funkciót, oldalt, tartalmat szeretne hozzáadni, annál tovább tart. Soha ne hagyja figyelmen kívül a legújabb webdesign trendeket.

még egy utolsó dolog, bár, ha a DIY típus, akkor feltétlenül kell, hogy a Colibri builder egy körre!

itt van egy videó arról, hogyan lehet létrehozni egy WordPress webhelyet rengeteg funkcióval.

most, ha tetszett ez a cikk, és többet szeretne megtudni arról, hogyan tervezzen egy WordPress weboldalt, győződjön meg róla, hogy feliratkozik a Youtube-csatornánkra, és kövessen minket a Twitteren és a Facebook-on!