Er der en bedre måde at forstå data, forholdet mellem forskellige datapunkter, samt ændring af værdi over tid end ved at bruge diagrammer og grafer? Når det kommer til at præsentere noget så tørt og uspændende som tal, er der intet som en slank visuel repræsentation for at gøre det mere forbrugsdygtigt.
Skabere af WordPress-temaer ved dette, som det fremgår af de mange forskellige temaer med grafunderstøttelse. Men da vi lavede vores Qi Addons til Elementor-plugin, ønskede vi at gøre det et skridt videre. Så blandt de tres gratis Elementor-tilføjelser du får med pluginnet – den største gratis pakke, du finder online – der er tilføjelser til diagrammer og grafer.
I denne artikel vil vi fokusere på den, der lader dig oprette grafer. Der er så mange fantastiske ting, du kan gøre med det, at vi har besluttet at vise, hvordan man laver to smukke grafer, som du kan se på tilføjelsens side. Vi er gået så langt som til at lave en video, der beskriver processen – dog i en lidt anden præsentationsrækkefølge – og du kan se den her:
Men hvis det ikke er din kop te at se video, og at læse en artikel er det, kan du springe videoen helt over og bare fortsætte med at læse. Det der venter er følgende:
Før du kan tilføje en graf i WordPress ved hjælp af Qi-tilføjelser til Elementor og dens graf-widget, skal du installere og aktivere Elementor sidebygger plugin. Du kan nemt finde det på WordPress.org eller ved at navigere til Plugins > Tilføj nyt og leder efter det. Pluginnet er gratis at bruge indtil det punkt, du beslutter dig for, at du har brug for de funktioner, der kun er tilgængelige for betalende kunder. Hvad angår Qi-tilføjelserne, vil de fungere fint med begge versioner. Og hvis du er helt ny til Elementor, vil du måske læse vores Elementor-guide.
Efter at have installeret begge plugins, kan du oprette en ny side eller redigere en eksisterende for at tilføje de grafer, du har set på Graph-tilføjelseshjemmesiden. Vi har oprettet en ny side, og vi har også bygget en to-søjle sektion til at huse vores to grafer.
Efter at have fundet Graphs-widgetten og flyttet den over til en gratis kolonne, får du et glimt af noget pladsholderindhold. Vi viser dig, hvordan vi trin for trin forvandlede det til den første af de to grafer, vi bruger til at inspirere dig til at skabe dine fantastiske grafer.
Umiddelbart vil du bemærke de tre linjer, der repræsenterer datasættene. Deres muligheder indeholder hovedparten af de indstillinger, du kan ændre med hensyn til indholdet af grafen. Vær dog først opmærksom på dataetiketterne, der kører under grafen langs grafens X-akse. I øjeblikket siger de “1 måned”, “3 måneder” og så videre.
For at ændre disse dataetiketter er alt, hvad du skal gøre, at indtaste de nye i menuen Generelt under Indholdsindstillingerne lige under emnerne. Sørg dog for at adskille dem med et komma. Vi ændrer dem til “En”, “To”, “Tre”, “Fire”, “Fem”.
Når du flytter op, vil du være i stand til at indstille diagramelementerne eller tilføje nye ved at bruge knappen Tilføj element. Når du redigerer elementerne, vil du bemærke et par meget vigtige ting. Den første er datasætværdierne – de værdier, der på en måde sætter krumningen af linjen i denne type graf. Du vil også se datasættets etiketter – disse giver dig mulighed for at mærke hvert element på en måde, der vil være synlig i en forklaring, når du aktiverer den i stilindstillingerne. Du vil også bemærke farveindstillinger, udfyldningstilstande, areal- og dækområdefarver. Nogle af disse muligheder er til linjegrafer, og nogle er til søjlediagrammer alene.
For at få den type diagram, vi ønskede, vi har ændret datasættets værdier til 39, 62, 64, 51 og 58. Vi har ændret navnet på datasættets etiket til fotografi. Den farve, vi har valgt, har en hex-kode på #888db3, og vi har også brugt den til områdefarven. Vi har givet påfyldningstilstandene en værdi på +1, for at farve området mellem linje et og to. Her er hvad vi fik efter alle disse ændringer.
Gå videre til det andet punkt, vi har givet det datasætværdierne på 39,59,58,44,54, etiketten Art Direction, #c1c3c7 som linje- og områdefarve, og vi har også sat udfyldningstilstanden til +1.
For det tredje element har vi brugt 39, 57, 55, 38 og 45 som datasætværdier, og vi har givet det mærket Webdesign. Farven, vi valgte, var #EDEDED99 – den har en vis gennemsigtighed i sig, og vi har indstillet udfyldningstilstanden til “oprindelse” for at få denne virkelig pæne effekt.
Med det har vi foretaget indholdsændringerne i den første graf, og vi kan gå videre til at style den.
Når du flytter til stilindstillingerne, er den første ting, du skal vælge, den grafiske stil, du vil oprette. Lige nu har vi vist dig, hvordan vi har lavet en linjegraf. Om lidt viser vi dig, hvordan vi har bygget et søjlediagram. Du vil være i stand til at vælge grafjusteringen, dens størrelse samt kantbredden – bredden af linjerne. Vi har indstillet grafstørrelsen til 87 % og grænsebredden til 3 pixels.
Næste i rækken er Legend Style-indstillingerne. Alle de datasætetiketter, vi har valgt, begynder at dukke op nu. De muligheder, du har til din rådighed, omfatter aktivering af diagramforklaringen, valg af position og justering. Vi har aktiveret forklaringen i vores diagram, valgt dens position til at være nederst og holdt fast i standardjusteringen.
Hvad angår forklaringslinjen, vil du være i stand til at vælge dens bredde, højde og margen. For bredde og højde har vi valgt 8 pixels. Vi har sat marginen til 40 pixels.
Det sidste sæt af Legend Style-indstillinger giver dig mulighed for at indstille etiketfarve, skrifttype, skriftstørrelse og vægt. Vi har indstillet farven til #1e1e1e, skrifttype til DM Sans, skriftstørrelse til 16 pixels og skriftvægt til medium.
I det sidste sæt af Style-indstillinger, Tick Style, vil du være i stand til at indstille den minimums- og maksimumværdi, der vises på Y-aksen, samt den trinstørrelse, du vil vise. Vi har lavet det, så det viser værdier fra 0 til 80 i trin på 20.
Nu hvor du er lidt bekendt med mulighederne til din rådighed, kan vi sætte farten op, når vi viser dig, hvordan du opretter søjlediagrammet. Efter at have fundet tilføjelsen Graphs igen og trukket den til den anden tilgængelige kolonne, vi gik direkte til fanen Stil og skiftede Graph Type til Bar. Ved at skifte tilbage til stilfanen lavede vi et par ændringer – slettede et af elementerne, og sæt dataetiketterne til “En”, “To”, “Tre” og “Fire”.
Tilbage til fanen Stil, vi har ændret grafstørrelsen på den nye graf til 85 %. Vi har sat grænsebredden og svævekantbredden til nul. Vi har sat bjælkestørrelsen, som bestemmer, hvor meget af dens tildelte plads en enkelt bjælke vil optage, til 0,88. Kategoristørrelsen, som bestemmer, hvor meget af dens tildelte plads en gruppe barer vil optage, blev sat til 0,6.
I Legend Style har vi stort set kopieret værdierne fra den forrige graf. Vi har aktiveret forklaringen og placeret den i bunden. Vi har indstillet bjælkens bredde og højde til 11 pixels og marginen til 40. Farven, vi valgte til etiketten, var #1e1e1e, skrifttypen DM Sans, skriftstørrelse 16 og vægt medium. Vi har også kopieret Tick Style med værdier på 0, 80 og 20.
Når du går tilbage til indholdet, er det tid til at indstille elementerne til deres nye værdier. Datasættet, vi har brugt til det første element, er 63,38,24 og 56. Etiketten er Fotografi, og vi har brugt #888DB3 som vores foretrukne farve for både områdefarven og svæveområdets farve.
For det andet punkt, datasættets værdier er 45, 76, 48 og 36. Vi ændrede etiketten til Art Direction og område- og svæveområdets farver til #c1c3d7. Med det kan du forhåndsvise og se resultaterne af dit arbejde – de burde være et tæt match til det eksempel, du kan se på widgetens side.
Lad os afslutte det!
Hvis du nogensinde har brug for at oprette et diagram eller en graf, vil Qi Addons til Elementor-pluginet have det helt rigtige tilføjelsesprogram til dig. Vi har vist dig, hvordan du kan oprette fantastiske diagrammer med kun få muligheder – det bliver ikke nemmere eller smukkere end dette. Så hvis der er data, du har brug for vist visuelt, så tøv ikke med og få den største gratis pakke af Elementor-tilføjelser i verden. Du får det til graferne, og du vil fortsætte med at bruge det til de resterende 59 tilføjelser.
Støt vores arbejde ❤️
Hvis du kunne lide denne artikel, kan du overveje at give drikkepenge for at hjælpe os med fortsat at udgive kvalitetsindhold.
