Hogyan lehet megfordítani a WordPress vizuális építővé

Feb 3, 2026

kézikönyv

(Kép hitel: Elrendor / Joseph Ford)

A vizuális építők sokáig léteztek a WordPress számára, de mindig is megosztották a használatukat. A legtöbb volt jelentős hátrányai szempontjából oldal sebesség és a kódot, hogy az általuk termelt, és gyakrabban, mint nem a drag and drop blokk szerkesztő képernyőn nem volt reális ábrázolása a végeredményt. Másrészt, néha csak azt szeretné, hogy képes legyen gyorsan megtervezni és prototípusát, anélkül, hogy kódolni kellene.

A PageBuilder plugin Elrendor használatával a jobb beállítással a WordPress minimalista vizuális lehet weboldal építője , szinte független a témától, amely egy tömböt tartalmazza, lehetővé téve, hogy könnyedén komplex formaterveket hozzon létre.

A húsz tizenkilenc alapértelmezett WordPress téma , felépíthet egy készenléti vászonot, amely felhasználható a prototípushoz vagy a gyártás készítéséhez Wordpress webhelyek . Ezzel a vászonnal egy egyszerű oldalt készítünk két részvel és érintkezési űrlapot.

Mi lesz a weboldal mobilbarát, és két plugin használatával foglalkozunk a legfontosabb aggodalomra a vizuális építő használatával, és minimalizálja az oldal már minimális terhelési idejét. Alternatívaként tekintse meg a nagyszerű felkeresést WordPress oktatóanyagok még tovább.

Használja az egyes képek jobb felső sarkában lévő ikont

A legjobb WordPress hosting szolgáltatások 2019-ben

01. Telepítse a WordPress másolatát

A dolgok kikapcsolásához, telepítve a WordPress másolatát a használt rendszeren. Használunk egy Laragon nevű programot, amely gyors telepítési lehetőséget kínál, hogy létrehozzon egy példányt a gépemen.

02. Távolítsa el a nem szükséges alkatrészeket

Give yourself a clutter-free page to work with — Adj magadnak egy rendetlenségmentes oldalt, hogy dolgozzon (Kép hitel: Elrendor / Joseph Ford)

Fejezze be a bővítményeket, és törölje mindazt, ami a WordPress segítségével van összekapcsolva. Az írás idején egyszerűsíti erőfeszítéseinket a "Klasszikus szerkesztő" plugin telepítésére az új letiltásához Gutenburg szerkesztő . A rendetlenség csökkentése érdekében meg kell mennünk a megjelenéshez & gt; Widgetek és az összes widgu eltávolítása.

03. Válasszon egy témát egy fejléccel és lábléccel

A téma egyetlen része, amelyet használunk, a fejléc és a lábléc - minden mást visszahúzódik. Az alapértelmezett húsz tizenkilenc témát fogjuk használni, és megmutatjuk neked néhány gyors változtatást, hogy éles legyen. Az Elrendor használata esetén minél kevesebb a téma jobb.

04. Telepítse az Elrendort és hozzon létre egy oldalt

You'll find Elementor in the WordPress plugins library — Megtalálhatja az elemelt a WordPress plugins könyvtárban (Kép hitel: Elrendor / Joseph Ford)

Használja a WordPress plugin keresést Elemelő és telepítse azt. Miután telepítve és aktiválva van, hozzon létre egy új oldalt. Nevezze meg az új "home" -t, és mentse el, hogy vázlatként legyen, hogy létezik-e az adatbázisban. Kattintson a "Szerkesztés elemre" gombra. Ez betölti az Elrendor Visual Builder-t.

05. Teljes szélesség Az oldal

Az oldalra nézve a téma dobozos elrendezéséhez korlátozott. Ha tiltsa le ezt, kattintson az Elrendorszerkesztő bal alsó részén lévő COG-ra, és módosítsa az "Oldalelrendezés" elemet az "Elemező teljes szélességére". Ha sok oldal nélkül honlapot készít, akkor fontolhatja meg az "Elementor vászon" opciót, amely eltávolítja a fejlécet és a láblécet is.

06. Adjon hozzá néhány tartalmat

Give yourself some content to work with — Adjon magának a tartalmat, hogy dolgozzon (Kép hitel: Elrendor / Joseph Ford)

Most, hogy van egy üres oldalunk, meg kell adnunk magunkat, hogy dolgozzunk. Kattintson az Elemoráló rács ikonjára a szerkesztő jobb felső sarkában, hogy megtekinthesse az összes rendelkezésre álló elemet. A fejlécblokkot és a szövegblokkot az oldal közepére húzza. Ez a két elem segít nekünk stílusunkat a tipográfia.

07. Távolítsa el a vezetővonalakat

Észrevetted a húsz tizenkilenc téma használatakor, hogy a vonal minden címszó fölé kerül. Távolítsuk el, hogy a WordPress testreszabás eszköz segítségével. Miközben itt vagyunk, felveszem egy logót a webhelyazonosító beállításaiban és néhány menüpontban is.

 H1: korábban, h2: előtt {
Kijelző: Nincs;
}

08. Javítsa ki a tartalomszélességet

Ensure the content lines up with the header — Győződjön meg róla, hogy a tartalom rögzíti a fejlécet (Kép hitel: Elrendor / Joseph Ford)

Tartalmi részünk nem felel meg a fejléchez. Ez azért van, mert húsz tizenkilenc számított margót használ a fejléc és a lábléc szélességének beállításához. Ezt a CSS-vel való konzisztenciájunkat megismételjük.

A tartalomszélességet is növelni kell a fő elemsori beállítások oldalon.

 @media csak képernyő és (min-szélesség: 768px) {
.Elementor-top-szekció.Elementor-szekció-
dobozos & gt; .Elementor-konténer {
Margó: 0 Calc (10% + 60px);
}
}

09. Készítsen nyitási részt

Drag in the elements you want to include — Húzza a beilleszteni kívánt elemeket (Kép hitel: Elrendor / Joseph Ford)

Elkezdjük az oldal felső részével, amely kis mennyiségű szöveget és képet tartalmaz. Törölje a fejezetünket korábban, és cserélje ki egy új két oszlopra a Red Plus gombra kattintva. Húzza a fejlécet, a szövegszerkesztőt és a bal oldali oszlopot. A jobb oldalon egy képet húzunk.

10. Háttér hozzáadása

Válassza ki a részt, vagy ha lebegné, és kattintson a kék fülön, vagy a Navigator használatával az Elrendor gombok jobb alsó sarkában. Látni fogja három lap - elrendezés, stílus és fejlett.

Az Elrendezés lap használatával adja meg a 80vh magasságunkat. Válassza a Stílus lehetőséget, hogy megtalálja az opciókat, és használja a háttér opciót a # 0073AA háttérének beállításához.

11. Stílus A szöveg

You can change the font for your whole document in one go — Megváltoztathatja a betűtípust az egész dokumentumhoz egy útban (Kép hitel: Elrendor / Joseph Ford)

A betűtípus megszerzéséhez az Elrendor Bar tetején található Hamburger menüben az "Alapértelmezett betűtípusok" gombra kattintva. Az egyes szöveges elemekre is kattinthat, és a STYLE fül segítségével módosíthatja a színt és más lehetőségeket.

12. Használjon háttérfedélhatást

Nagyszerű kiegészítés az, hogy gyorsan hozzáadhatod a háttérfedeleket a szekcióstílus lapról. Válassza ki a fejezetünket, és menjen a Háttér fülre. Adja meg a háttérünket, hogy textúrát adjon, majd menjen a "Háttérfedés", az alábbi legördülő, és válasszon egy gradiens háttérfedezetet.

13. Hozzon létre egy hívást a cselekvésre

Oldalunk második szakasza hívás a cselekvési szakaszra. Beágyazjuk a 7. érintkezési űrlapot, de bármi, ami generálhat egy rövid kódot fog működni. Készítsen egy új részt két oszlopmal, vagy kattintson jobb egérgombbal az utolsó részünkre, és ismételje meg.

Szerelje be a kapcsolattartó formanyomtatvány bővítményét, és generálja az űrlap rövid kódját. A jobb oldali oszlopban húzza át a shortcode widget, és illessze be a rövid kódot a dobozba.

14. Mobilbarát

Don't forget to tweak your design for mobile — Ne felejtsd el, hogy a design a mobil (Kép hitel: Elrendor / Joseph Ford)

Az oldalunk mobil beállításainak eléréséhez be kell kapcsolnia az "Érzékeny beállításokat" az Elrendor panel alján. A "Mobile" mód kiválasztásával láthatjuk, hogy a részünknek szüksége lesz néhány párnázásra.

A mobil opció használatával ellenőrizheti, hogy biztosítsa azt, hogy van egy kék ikon minden egyes beállítás mellett, a választásaink nem befolyásolják a fő asztali nézetet. Az ebben az üzemmódban végrehajtott bármely elrendezési módosítás befolyásolja az asztali nézetet.

15. A képek optimalizálása

Az oldal terhelési sebességének minimalizálása érdekében kép tömörítést kell futtatnunk. Ez egy pluginon vagy a webszerveren keresztül történhet. Most használunk egy népszerű plugint, az EWWW Image Optimizer-t, hogy a képek maximális minőségét és szélességét állítsuk be, majd futtassunk optimalizálást.

16. Gyorsítótár oldalak A teljesítmény növeléséhez

Make your site lightning-fast with help from a cache plugin — Tegye a webhely villámgyorsítását a gyorsítótár plugin segítségével (Kép hitel: Elrendor / Joseph Ford)

Végül telepítünk egy gyorsítótár bővítményt, hogy maximalizálja a terhelési időket az oldalunkhoz. Számos gyorsítótár bővítmény van, de jelenleg, Cache Enabler Alacsony profil, és jól működik ezzel a beállítással.

A gyorsítótár engedélyezve, a webhely gyorsan terheli. A háttérben teljesen működőképes vizuális építője is van. Ez a tökéletes gyorsan működő üres vászon, hogy tervezzen.

Generate CSS – the conference for web designers: 26 September, Rich Mix, Shoreditch, London — (Kép hitel: jövő)

Csatlakozzon hozzánk szeptember 26-án CSS létrehozása , Egy testre szabott konferencia a webes tervezők hozta neked Creative Bloq, háló és Web Designer . Mentse el az 50 fontot egy korai madárjegygel, amikor 2019. augusztus 15. előtt foglalja el.

Ezt a cikket eredetileg a Creative Web Design magazinban tették közzé Web designer . Vásároljon kibocsátást 287 vagy Iratkozz fel .

Olvass tovább:

40 Brilliant Wordpress oktatóanyagok
Használja a WordPress fej nélküli CMS-t
Újdonságok a WordPress 5.0-ban?

Hogyan lehet megfordítani a WordPress vizuális építővé

01. Telepítse a WordPress másolatát

02. Távolítsa el a nem szükséges alkatrészeket

03. Válasszon egy témát egy fejléccel és lábléccel

04. Telepítse az Elrendort és hozzon létre egy oldalt

05. Teljes szélesség Az oldal

06. Adjon hozzá néhány tartalmat

07. Távolítsa el a vezetővonalakat

08. Javítsa ki a tartalomszélességet

09. Készítsen nyitási részt

10. Háttér hozzáadása

11. Stílus A szöveg

12. Használjon háttérfedélhatást

13. Hozzon létre egy hívást a cselekvésre

14. Mobilbarát

15. A képek optimalizálása

16. Gyorsítótár oldalak A teljesítmény növeléséhez

kézikönyv - Most Popular Articles

Hogyan lehet Repost az Instagram-on

Kezdjük az Adobe Dimenzióval CC-vel

Hogyan készítsünk egy Mandelbulb-t

4 egyszerű lépés a render javításához

15 Fantasy portré tippek

Az UX stratégia négy tétele

Hogyan építsünk egy teljes oldalú weboldalt szögletes

Mock up az AR grafikákkal a hatásokkal

Kategóriák