At designe et professionelt websted var ikke for alle, især da vi alle følte, at du absolut havde brug for at være en professionel kodning og webdesigner. I dag ser vi nye værktøjer, der opstår til WordPress-økosystemet, for at give en stadig nemmere løsning til at designe et websted, og dette inden for rækkevidde for de mest begyndere.

Hvad angår design af WordPress-layouts, var vi allerede nødt til at indsende plugin Visual Composer, som absolut er et af de bedste værktøjer, når det kommer til layoutdesign. Det skal dog bemærkes, at denne løsning ikke er egnet for alle. Dette er grunden til, at vi i denne tutorial vil introducere dig mere til WordPress plugin Elementor, som er en WordPress plugin freemium (gratis, men kan forlænges under abonnement).

Hvor finder man Elementor til WordPress

Vi overvejer seriøst at få dig til at se potentialet i plugin, og den gratis løsning vil hjælpe dig med at komme i gang uden at betale en krone. Denne gratis løsning er tilgængelig på WordPress.org. At være en WordPress plugin, sidstnævnte er installeret som enhver anden plugin fra instrumentbrættet. 

Hvis plugin formår at tilfredsstille dig fuldstændigt, vil du kunne få den komplette licens med alle funktionaliteter på webstedet officiel elementor.

Hovedtræk ved Elementor

Inden du begynder selvstudiet med en oversigt over pluginet, introducerer vi dig først til plugins hovedfunktioner (gratis version og fuld version).

udgave Gratis Fuld version
Flere kolonner Navigationsmenu, artikel
Moduler Tekster, titler Moduler WooCommerce (produkter, kategorier)
Videomoduler, billede, karrusel, gallerier, lydcloud Facebook-integration (side, knap, kommentarer)
Dele modul Tabel priser
HTML-modul Portefølje, Formular
Modul til WordPress-widget Søg Modul

 

Bemærk, at dette er en noget udtømmende liste over de forskellige funktioner, der tilbydes af pluginet. Du finder flere detaljer i udforske deres hjemmeside.

Kom i gang med Elementor

Vi skal ikke dække hele installationsprocessen her. Da dette er et WordPress-plugin, er installationsproceduren allerede forklaret i en tidligere tutorial. Efter installationen føres du dog til plugins startside.

delementor.png præsentationsside

Hvis du har denne side på din skærm, så har du installeret korrekt Elementor-plugin. Vi bruger i øjeblikket den fulde version til denne tutorial, men grænsefladen bør ikke være for forskellig fra den gratis version.

Før jeg går til redigeringsgrænsefladen, vil jeg opfordre dig til at registrere din licens. Dette gælder kun for dem, der har valgt den fulde version. Hvis du har den gratis version, kan du gå til næste afsnit. For at registrere din licens vil du bemærke en underretning på WordPress, der beder dig om at registrere din licens.

notifikation plugin elementor.png

Du skal bare klikke på den for at gå til registreringssiden og klikke på Aktivere.

registrering af en licens elementor.png

Du skal normalt bruge din bekræftelsesside, hvis din licens er gyldig.

aktiv licens elementor.png

Hvis du ikke ankommer til denne side, opfordrer jeg dig til at kontakte udviklerne af pluginet for mere hjælp til problemet.

Sådan bruger du Elementor

Elementor arbejder på sider og indlæg på WordPress. Uanset om du bruger den klassiske grænseflade eller den nye Gutenberg-grænseflade, vil du se en knap, der beder dig om at bruge Elementor-builder.

constructor elementor.png

I praksis behøver du ikke altid redigere dine indlæg ved hjælp af Elementor. Jeg opfordrer dig derfor til kun at bruge pluginet på siderne. Ved at klikke på knappen får du adgang til Elementor-designgrænsefladen, der giver et indtryk af déjà vu (for dem, der bruger WordPress Customizer).

præsentationsgrænseflade elementor.png

Så du har til venstre de forskellige kontroller, der tilbydes af pluginet, og til højre har du live preview af dine ændringer. I denne vejledning bruger vi Twenty Sixteen WordPress-temaet.

Elementor sektioner

Sektioner i Elementor er grupper af blokke af funktionalitet, som Elementor tilbyder. Antallet af sektioner afhænger af, om du bruger den fulde version, og om du bruger WooCommerce, Yoast SEO eller andre kompatible plugins. Afhængigt af disse forhold vil du have flere eller færre sektioner på din grænseflade. Da vi bruger den fulde version med plugin WooCommerce aktiveret, sådan ser vores grænseflade ud.

section elementor.png

Sådan placeres en Elementor-blok

Når du har udvidet et afsnit, finder du Elementor Blocks. De forskellige Elementor-blokke placeres ved "Drag & Drop" på det område, der er fremhævet med stiplede linjer.

Tilføj blokke elementors.png

Sådan vælger du et layout på Elementor

Før du tilføjer en blok på Elementor, skal du huske at vælge et layout ved at klikke på knappen "+" i det fremhævede afsnit.

Vælg et layout elementor.png

Afhængigt af dine behov vælger du det layout, der passer bedst. Når du har valgt et layout, har du en fremstilling af dette afsnit i det samme område fremhævet. Dette afsnit viser det samme antal kolonner, der svarer til dit valg. I mit tilfælde valgte jeg en kolonne med 3 kolonner.

elementor sektion med zone.png

De forskellige blokke med et "+" tegn indeni er de områder, der kan acceptere Elementor-blokke. Hvis du tilføjer en Elementor-blok uden først at vælge et layout, vælges enkeltkolonnelayoutet som standard.

Elementor sektioner kan omarrangeres indbyrdes efter det samme "drag & drop" -princip. Du kan også slette en sektion, hvis du ikke længere ønsker at bruge den.

flytte et afsnit elementor.png

Her er et eksempel på et afsnit, der indeholder 2 blokke, nemlig titelblokken og tekstblokken.

sektionselement med 2 blocs.png

Sådan bruger du andre designværktøjer

Når du er færdig med dit design, er en af ​​de ting, du vil gøre, at gemme dit arbejde. Du finder denne mulighed nederst i sektionen, der viser de forskellige Elementor-sektioner.

elementor.png backup

Du kan vælge at gemme direkte (Publish) og gemme som kladde eller som skabelon. Vi vil udforske disse forskellige punkter yderligere senere.

Under dit design vil du muligvis også forhåndsvise ændringerne uden Elementors ekstra interface. Alt du skal gøre er at klikke på øjeikonet.

Forhåndsvisning af ændringer elementor.png

Det sker, at der under designet opstår en fejl (en ufrivillig handling). I dette tilfælde tilbyder Elementor en historie, som giver dig mulighed for at navigere gennem alle dine handlinger.

handlinger elementor.png

Dette giver dig mulighed for nemt at gå tilbage.

Indstillingen “Browser”, der kommer lige før historik-knappen, giver dig mulighed for yderligere at ændre de forskellige sektioner i forhold til den browser, der bruges af besøgende. Denne mulighed giver dig adgang til avanceret ændring af sektionsstrukturer (kolonnebredde). Du skal foretage ændringer her meget omhyggeligt.

browser option elementor.png

Knappen "Indstillinger" giver dig mulighed for at ændre bestemte indstillinger, der er specifikke for siden, såsom titlen, det fremhævede billede eller status blandt andre.

elementor.png indstillinger

Det er det til denne tutorial, vi vil udforske Elementor mere i vores næste tutorial. Tøv ikke med at kigge på hjemmeside officiel som giver meget mere succesfulde eksempler.