Sådan vender du Wordpress til en Visual Builder

Jan 27, 2026
hvordan
(Billedkredit: ELEMENTOR / JOSEPH FORD)

Visuelle bygherrer har eksisteret i lang tid for WordPress, men har altid forårsaget Division med deres brug. De fleste havde betydelige ulemper med hensyn til sidens hastighed og koden, de genererer, og oftere end ikke træk og slipblokke i redigeringsskærmen var ikke en realistisk repræsentation af det endelige resultat. På den anden side vil du undertiden bare være i stand til at designe og prototype hurtigt uden at skulle skrive kode.

Ved hjælp af sidebuilder plugin elementor med den rigtige opsætning kan WordPress konverteres til en minimalistisk visuel visuel Website Builder. , næsten uafhængigt af temaet, der bruger en række indstillinger, så du kan skabe komplekse designs med lethed.

Brug af den 20. nitten standard WordPress Theme. , Du kan opbygge et klar til brug lærred, der kan bruges til prototype eller bygge produktionsklar WordPress websites. . Med dette lærred vil vi lave en simpel side med to sektioner og en kontaktformular.

Vi vil gøre websiden Mobile-Friendly, og ved hjælp af to plugins, vil vi adressere den største bekymring med brug af en visuel bygherre og minimere sidens allerede minimale belastningstid. Alternativt, se vores rundup af stor Wordpress Tutorials. at finpudse dine evner endnu mere.

Brug ikonet øverst til højre for hvert billede for at forstørre det

  • De bedste WordPress Hosting Services i 2019

01. Installer en kopi af WordPress

For at sparke tingene, skal du installere en kopi af WordPress på det system, du bruger. Vi bruger et program kaldet Laragon, som tilbyder en hurtig installation mulighed for at oprette en instans på min maskine.

02. Fjern de dele, du ikke har brug for

Give yourself a clutter-free page to work with

Giv dig selv en rodfri side til at arbejde med (Billedkredit: ELEMENTOR / JOSEPH FORD)

Gå over til plugins, og slet alt, der følger med WordPress. På tidspunktet for skrivningen vil det strømline vores bestræbelser på at installere 'Classic Editor' plugin for at deaktivere den nye Gutenburg Editor. . For at reducere rodet skal vi også gå til udseende & gt; Widgets og fjern alle widgets.

03. Vælg et tema med en header og footer

Den eneste del af temaet, vi vil bruge, er overskriften og sidefoden - alt andet vil blive fjernet tilbage. Vi vil bruge standard tyve nitten tema, og vil vise dig nogle hurtige ændringer for at få det til at se skarpt ud. Når du bruger elementor, jo mindre temaet gør det bedre.

04. Installer Elementor og opret en side

You'll find Elementor in the WordPress plugins library

Du finder Elementor i WordPress plugins biblioteket (Billedkredit: ELEMENTOR / JOSEPH FORD)

Brug WordPress-plugin-søgningen til at finde Elementor. og installer det. Når du er installeret og aktiveret, skal du oprette en ny side. Navngiv den nye side 'Home' og gem det som et udkast, så det eksisterer i databasen. Klik på 'Rediger i Elementor.' Dette vil indlæse Elementor Visual Builder.

05. Fuld bredde siden

Kigger på siden, er det begrænset til det boksede layout af vores tema. For at deaktivere dette skal du klikke på COG nederst til venstre for Elementor Editor og ændre 'Side Layout' til 'Elementor Full Width'. Hvis du laver en hjemmeside uden mange sider, kan du overveje 'Elementor Canvas' mulighed, som også fjerner overskriften og sidefoden.

06. Tilføj noget indhold

Give yourself some content to work with

Giv dig selv noget indhold til at arbejde med (Billedkredit: ELEMENTOR / JOSEPH FORD)

Nu hvor vi har en tom side, skal vi give os noget at arbejde med. Klik på Elementor Grid-ikonet øverst til højre på editoren for at se alle tilgængelige elementer. En headerblok og tekstblok tilføjes ved at trække disse i midten af ​​siden. Disse to elementer vil hjælpe os med at style vores typografi.

07. Fjern overskriftslinjer

Du kan bemærke, når du bruger det tyve nitten tema, at en linje gøres over alle overskrifter. Lad os fjerne det ved hjælp af WordPress Tilpas værktøjet. Mens vi er her, vil jeg også tilføje et logo i webstedets identitetsindstillinger og nogle menupunkter. 

 H1: Før, H2: Før {
Display: Ingen;
}

08. Fix indholdsbredden

Ensure the content lines up with the header

Sørg for, at indholdslinjen op med overskriften (Billedkredit: ELEMENTOR / JOSEPH FORD)

Vores indholdssektion løser ikke helt op med overskriften. Dette skyldes, at tyve nitten bruger en beregnet margen for at sætte bredden af ​​overskriften og footeren. Vi kan replikere dette på vores elementor sektioner for konsistens med nogle CSS.

Vi bør også øge indholdsbredden på siden Main Elementor Settings. 

 @MEDIA kun skærm og (min bredde: 768px) {
.Entor-top-section.Erementor-section-
boxed & gt; .Enmentor-container {
Margin: 0 Calc (10% + 60px);
}
}

09. Lav en åbningsafdeling

Drag in the elements you want to include

Træk i de elementer, du vil medtage (Billedkredit: ELEMENTOR / JOSEPH FORD)

Vi starter med den øverste del af siden, som vil indeholde en lille smule tekst og et billede. Slet vores sektion fra tidligere og udskift det med en ny tobolinesektion ved at klikke på Red Plus. Træk i et overskrift, en teksteditor og en knap til venstre kolonne. Til højre trækker vi i et billede.

10. Tilføj en baggrund

Vælg afsnittet, enten ved at svinge over det og klikke på den blå fane eller ved hjælp af navigatoren nederst til højre på Elementorknapperne. Du vil se tre faner - layout, stil og avanceret.

Brug fanen Layout, giv vores sektion en højde på 80VH. Vælg Style for at finde indstillingerne, og brug baggrundsindstillingen til at indstille en baggrund på # 0073AA.

11. Style teksten

You can change the font for your whole document in one go

Du kan ændre skrifttypen til hele dit dokument på én gang (Billedkredit: ELEMENTOR / JOSEPH FORD)

For at ændre skrifttypen til hele vores dokument kan vi klikke på 'Standard skrifttyper' i Hamburger-menuen øverst på Elementor-baren. Du kan også klikke på dine individuelle tekstelementer og bruge fanen Style til at ændre farve og andre muligheder.

12. Brug en baggrundsoverlejringseffekt

En god tilføjelse er evnen til hurtigt at tilføje baggrundsoverlejringer fra sektionsstilfanen. Vælg vores afsnit og gå til fanen Baggrund. Giv vores baggrund et billede for at give det tekstur, så gå til 'Baggrund Overlay', Dropdown nedenfor, og vælg en gradient baggrundsoverlejning.

13. Opret et opkald til handling

Det andet afsnit på vores side vil være et opkald til handling sektion. Vi vil indlejre kontaktformular 7, men alt, hvad der kan generere en kortkode, vil fungere. Lav et nyt afsnit med to kolonner, eller højreklik på vores sidste afsnit og duplikere det.

Installer din kontaktformular plugin og generer kortkoden til din formular. I højre kolonne skal du trække i en kortkode widget og indsætte kortkoden i boksen.

14. Mobil venlig

Don't forget to tweak your design for mobile

Glem ikke at tweak dit design til mobil (Billedkredit: ELEMENTOR / JOSEPH FORD)

For at få adgang til mobile muligheder for vores side, skal du aktivere 'Responsive Options' nederst på Elementor Panel. Ved at vælge 'Mobile' -tilstand, kan vi se, at vores sektioner vil have brug for noget polstring.

Brug af mobilindstillingen, som du kan tjekke ved, at der er et blåt ikon ved siden af ​​hver indstilling, vil vores valg ikke påvirke den vigtigste desktop-visning. Imidlertid vil eventuelle layoutændringer i denne tilstand påvirke skrivebordsvisningen.

15. Optimer billeder

For at minimere sidebelastningshastighedsproblemer skal vi køre en billedkomprimering. Dette kan gøres via et plugin eller via din webserver. Lad os nu bruge et populært plugin, EWWW Image Optimizer, for at indstille en maksimal kvalitet og bredde for vores billeder, og derefter køre en optimering.

16. Cache sider for at øge ydeevnen

Make your site lightning-fast with help from a cache plugin

Gør dit websted lynhurtig med hjælp fra et cache plugin (Billedkredit: ELEMENTOR / JOSEPH FORD)

Endelig installerer vi et cache-plugin for at maksimere belastningstider for vores side. Der er mange cache plugins derude, men i øjeblikket, Cache Enabler. er lav profil og fungerer godt med denne opsætning.

Med cachen aktiveret, belastes hjemmesiden hurtigt. Det har også en fuldt funktionel visuel builder i baggrunden. Det er det perfekte hurtigt fungerende blanke lærred til dig at designe på.

Generate CSS – the conference for web designers: 26 September, Rich Mix, Shoreditch, London

(Billedkredit: fremtiden)

Deltag i os den 26. september for Generere CSS. , en skræddersyet konference for webdesignere bragt til dig af Creative Bloq, Net og Web Designer . Gem £ 50 med en tidlig fuglbillet, når du bestiller inden den 15. august 2019.

Denne artikel blev oprindeligt offentliggjort i Creative Web Design Magazine Webdesigner . Køb problem 287. eller abonnere .

Læs mere:

  • 40 Brilliant Wordpress Tutorials
  • Brug WordPress som hovedløs CMS
  • Hvad er nyt i WordPress 5.0?

hvordan - Mest populære artikler

Pureref: Sådan bruges billedreferenceværktøjet

hvordan Jan 27, 2026

(Billedkredit: Brendan McCaffrey (Original Concept af Clara McCaffrey)) Pureref er et godt eksempel på en lille appl..

Sådan oprettes vandsimuleringer

hvordan Jan 27, 2026

Denne vejledning vil lære dig at oprette en animeret strand Diorama fra start til slut ved hjælp af Houdini FX. Du vil forstå ..

Opret GUD-stråler i V-ray

hvordan Jan 27, 2026

I virkelige fotografering er lysstråler på deres mest synlige, når de har en overflade for at hoppe ud, såsom støv, pollen e..

10 Tips til mastering af Apples fotos app

hvordan Jan 27, 2026

MACOS-billedets app begyndte livet som iPhoto: en forbrugerapp til styring af digitale fotografier, med et par grundlæggende bil..

Opret mængde specifikke CSS-stilarter og layouter

hvordan Jan 27, 2026

I denne vejledning vil vi kigge på måder at ændre CSS-stilarterne af elementer, såvel som tilsyneladende styling deres foræl..

Sådan maler man fantasyyr

hvordan Jan 27, 2026

Når du har kommet op med en ide til en fantasy væsen, er det næste skridt at bringe det til liv ved at male det med troværdig..

7 Killer måder at påvirke brugeradfærd

hvordan Jan 27, 2026

Websites beskæftiger psykologiske teknikker til at påvirke deres brugers adfærd. Tegning i årtier af akademisk forskning, der forklarer, hvordan vores sind virker, og hvordan vi træffer ..

Hemmeligheden til at male som Monet

hvordan Jan 27, 2026

Med denne masterclass forsøger vi at komme ind i hovedet af Monet lidt, så vi kan tænke og male i hans stil. Men bekymre dig i..

Kategorier