Å utforme et profesjonelt nettsted var ikke for alle, spesielt ettersom vi alle følte at vi absolutt trengte å være profesjonelle for koding og webdesign. I dag ser vi nye verktøy som dukker opp for WordPress-økosystemet, for å gi en stadig enklere løsning for utformingen av et nettsted, og dette innen rekkevidde for de nybegynnere.
Når det gjelder utformingen av WordPress-oppsett, måtte vi allerede sende inn plugin-modulen Visual Composer, som definitivt er et av de beste verktøyene når det kommer til layoutdesign. Det skal imidlertid bemerkes at denne løsningen ikke passer for alle. Dette er grunnen til at vi i denne opplæringen vil introdusere deg mer til WordPress Plugin Elementor, som er en WordPress Plugin freemium (gratis, men kan utvides under abonnement).
Hvor kan du få Elementor for WordPress
Vi vurderer seriøst å få deg til å se potensialet i plugin, og gratisløsningen vil hjelpe deg i gang uten å betale en krone. Denne gratis løsningen er tilgjengelig på WordPress.org. Være en WordPress Plugin, sistnevnte er installert som alle andre plugin fra dashbordet.
Hvis plugin klarer å tilfredsstille deg fullstendig, vil du kunne få fullstendig lisens med alle funksjonalitetene på nettstedet offisiell elementor.
Hovedtrekkene i Elementor
Før du starter opplæringen med en oversikt over pluginet, vil vi først introdusere deg for hovedfunksjonene til plugin (gratis versjon og fullversjon).
| versjonen Gratis | Full versjon |
|---|---|
| Flere kolonner | Navigasjonsmeny, artikkel |
| Moduler Tekster, titler | Moduler WooCommerce (produkter, kategorier) |
| Videomoduler, bilde, karusell, gallerier, lydcloud | Facebook-integrasjon (side, knapp, kommentarer) |
| Deling modul | Tabell priser |
| HTML-modul | Portefølje, Form |
| Modul for WordPress-widget | Forskningsmodul |
Vær oppmerksom på at dette er en litt uttømmende liste over de forskjellige funksjonene som tilbys av pluginet. Du finner mer informasjon i utforske deres hjemmeside.
Kom i gang med Elementor
Vi skal ikke dekke hele installasjonsprosessen her. Siden dette er et WordPress-plugin, har installasjonsprosedyren allerede blitt forklart i en tidligere opplæring. Etter installasjonen blir du imidlertid ført til plugins hjemmeside.
Hvis du har denne siden på skjermen, har du riktig installert Elementor-plugin. Vi bruker for øyeblikket fullversjonen for denne opplæringen, men grensesnittet bør ikke være for forskjellig fra gratisversjonen.
Før jeg går til redigeringsgrensesnittet, vil jeg invitere deg til å registrere lisensen din. Dette er bare gyldig for de som har valgt fullversjonen. Hvis du har gratisversjonen, kan du gå til neste seksjon. For å registrere lisensen din, vil du legge merke til et varsel på WordPress som vil be deg om å registrere lisensen din.
Så det er bare å klikke på den for å gå til registreringssiden og klikke på Aktiver.
Du vil normalt trenge bekreftelsessiden din hvis lisensen din er gyldig.
Hvis du ikke kommer til denne siden, inviterer jeg deg til å kontakte utviklerne av programtillegget for mer informasjon hjelp til problemet.
Hvordan bruke Elementor
Elementor jobber med Pages og Posts på WordPress. Enten du bruker det klassiske grensesnittet eller det nye Gutenberg-grensesnittet, ser du en knapp som vil be deg om å bruke Elementor-byggeren.
I praksis trenger du ikke alltid å redigere innleggene dine ved hjelp av Elementor. Jeg inviterer deg derfor til å bruke pluginet bare på sidene. Ved å klikke på knappen får du tilgang til Elementor-designgrensesnittet som gir et inntrykk av déjà vu (for de som bruker WordPress Customizer).
Så du har til venstre de forskjellige kontrollene som tilbys av pluginet, og til høyre har du live forhåndsvisning av endringene dine. I denne opplæringen bruker vi Twenty Sixteen WordPress-temaet.
Elementor seksjoner
Seksjoner i Elementor er grupper av blokker med funksjonalitet som Elementor tilbyr. Antall seksjoner avhenger av om du bruker fullversjonen og om du bruker WooCommerce, Yoast SEO eller andre kompatible plugins. Avhengig av disse forholdene vil du ha flere eller færre deler på grensesnittet ditt. Siden vi bruker fullversjonen med plugin WooCommerce aktivert, er dette hvordan grensesnittet vårt ser ut.
Hvordan plassere en Elementor-blokk
Når du har utvidet en seksjon, finner du Elementor-blokkene. De forskjellige Elementor-blokkene er plassert av "Drag & Drop" på området uthevet med stiplede linjer.
Hvordan velge en layout på Elementor
Før du legger til en blokk på Elementor, må du huske å velge et oppsett ved å klikke på "+" -knappen i den uthevede delen.
Avhengig av dine behov, velger du det oppsettet som passer best. Når du har valgt et oppsett, har du en fremstilling av den delen i det samme området uthevet. Denne delen viser det samme antall kolonner som tilsvarer ditt valg. I mitt tilfelle valgte jeg en kolonne med 3 kolonner.
De forskjellige blokkene med et "+" skilt inni, er områdene som kan akseptere Elementor-blokker. Hvis du legger til en Elementor-blokk uten å velge en layout først, vil enkeltkolonneoppsettet velges som standard.
Elementor-seksjoner kan omorganiseres innbyrdes, etter samme "drag & drop" -prinsipp. Du kan også slette en seksjon hvis du ikke lenger vil bruke den.
Her er et eksempel på en seksjon som inneholder to blokker, nemlig tittelblokken og tekstblokken.
Hvordan bruke andre designverktøy
Når du er ferdig med designen, er en av tingene du vil gjøre, å lagre arbeidet ditt. Du finner dette alternativet helt nederst i seksjonen som viser de forskjellige Elementor-seksjonene.
Du kan velge mellom å lagre direkte (Publiser), og å lagre som kladd eller mal. Vi vil utforske disse forskjellige punktene mer senere.
Under designet kan det være lurt å forhåndsvise endringene uten det ekstra grensesnittet til Elementor. Alt du trenger å gjøre er å klikke på øyeikonet.
Det hender at under designen oppstår en feil (en ufrivillig handling). I dette tilfellet tilbyr Elementor en historie, som lar deg navigere gjennom alle handlingene dine.
Dette lar deg enkelt gå tilbake.
Alternativet "Browser", som kommer like før historikknappen, lar deg modifisere de forskjellige seksjonene ytterligere i forhold til nettleseren som brukes av besøkende. Dette alternativet gir deg tilgang til avansert modifisering av seksjonsstrukturer (kolonnebredde). Du må gjøre endringer her veldig nøye.
"Innstillinger" -knappen lar deg endre bestemte alternativer som er spesifikke for siden, for eksempel tittelen, det valgte bildet eller statusen.
Det er det for denne opplæringen, vi vil utforske Elementor mer i vår neste opplæring. Ikke nøl med å ta en titt på stedet Officiel som gir mye mer vellykkede eksempler.
