Finns det ett bättre sätt att förstå data, förhållandet mellan olika datapunkter, samt värdeförändring över tiden än att använda diagram och grafer? När det kommer till att presentera något så torrt och föga spännande som siffror, finns det inget som en snygg visuell representation för att göra det mer förbrukningsbart.
Skapare av WordPress-teman vet detta, vilket framgår av olika teman med grafstöd. Men när vi skapade vårt Qi Addons for Elementor-plugin ville vi göra det ett steg längre. Så, bland de sextio gratis Elementor-tilläggen du får med plugin – det största gratispaketet du hittar online – det finns tillägg för diagram och grafer.
I den här artikeln kommer vi att fokusera på den som låter dig skapa grafer. Det finns så många fantastiska saker du kan göra med det att vi har bestämt oss för att visa upp hur man skapar två vackra grafer som du kan se på tilläggets sida. Vi har gått så långt som att skapa en video som beskriver processen – om än i en lite annorlunda presentationsordning – och du kan se den här:
Men om att titta på video inte är din kopp te och att läsa en artikel är det, kan du hoppa över videon helt och hållet och bara fortsätta läsa. Det som väntar är följande:
Innan du kan lägga till en graf i WordPress med hjälp av Qi-tillägg för Elementor och dess grafwidget måste du installera och aktivera Elementor sidbyggare plugin. Du kan enkelt hitta den på WordPress.org eller genom att navigera till Plugins > Lägg till nytt och letar efter det. Insticksprogrammet är gratis att använda fram till den punkt du bestämmer dig för att du behöver funktionerna som endast är tillgängliga för betalande kunder. När det gäller Qi-tilläggen kommer de att fungera bra med båda versionerna. Och om du är helt ny på Elementor, kanske du vill läsa vår Elementor-guide.
Efter att du har installerat båda plugins kan du skapa en ny sida eller redigera en befintlig för att lägga till graferna du har sett på Graph-tilläggets hemsida. Vi har skapat en ny sida, och vi har också byggt en sektion med två kolumner för våra två grafer.
När du har hittat Graphs-widgeten och flyttat den till en ledig kolumn får du en glimt av platshållarinnehåll. Vi visar dig hur vi gjorde det, steg för steg, till den första av de två graferna vi använder för att inspirera dig att skapa dina fantastiska grafer.
Direkt kommer du att märka de tre linjerna som representerar datamängderna. Deras alternativ innehåller huvuddelen av de inställningar du kan ändra för innehållet i grafen. Var dock först uppmärksam på dataetiketterna som körs under grafen, längs grafens X-axel. För närvarande säger de ”1 månad”, ”3 månader” och så vidare.
För att ändra dessa dataetiketter behöver du bara ange de nya i menyn Allmänt i innehållsalternativen, precis under objekten. Se dock till att separera dem med kommatecken. Vi ändrar dem till ”En”, ”Två”, ”Tre”, ”Fyra”, ”Fem”.
När du flyttar uppåt kommer du att kunna ställa in diagramobjekten eller lägga till nya med knappen Lägg till objekt. När du redigerar objekten kommer du att märka ett par mycket viktiga saker. Den första är datauppsättningsvärdena – de värden som liksom sätter kurvaturen för linjen i den här typen av graf. Du kommer också att se datauppsättningsetiketterna – dessa låter dig märka varje objekt på ett sätt som kommer att synas i en förklaring när du aktiverar det i stilalternativen. Du kommer också att märka färgalternativ, fyllningslägen, områdes- och täckområdesfärger. Vissa av dessa alternativ är för linjediagram, och vissa är för enbart stapeldiagram.
För att få den typ av diagram vi ville ha, vi har ändrat datauppsättningsvärdena till 39, 62, 64, 51 och 58. Vi har ändrat namnet på datauppsättningsetiketten till fotografi. Färgen vi har valt har en hex-kod #888db3, och vi har också använt den för områdesfärgen. Vi har gett fyllningslägena värdet +1, för att färga området mellan rad ett och två. Här är vad vi fick efter alla dessa förändringar.
Vi går vidare till den andra punkten, vi har gett den datauppsättningsvärdena 39,59,58,44,54, etiketten Art Direction, #c1c3c7 som linje- och områdesfärg, och vi har också ställt in fyllningsläget till +1.
För det tredje objektet har vi använt 39, 57, 55, 38 och 45 som datauppsättningsvärden, och vi har gett den etiketten Web Design. Färgen vi valde var #EDEDED99 – den har viss genomskinlighet, och vi har ställt in fyllningsläget på ”ursprung” för att få denna riktigt snygga effekt.
Med det har vi gjort innehållsändringarna i den första grafen, och vi kan gå vidare till styling av den.
När du flyttar till stilalternativen är det första du får välja vilken grafstil du vill skapa. Just nu har vi visat dig hur vi har skapat ett linjediagram. Om en stund visar vi dig hur vi har byggt ett stapeldiagram. Du kommer att kunna välja grafens justering, dess storlek, såväl som kantbredden – bredden på linjerna. Vi har ställt in grafstorleken till 87 % och kantbredden till 3 pixlar.
Nästa i raden är alternativen Legend Style. Alla dessa datauppsättningsetiketter vi har valt kommer att börja dyka upp nu. De alternativ du har till ditt förfogande inkluderar att aktivera diagramförklaringen, välja dess position och justering. Vi har aktiverat förklaringen i vårt diagram, valt att dess position ska vara längst ner och hållit fast vid standardjusteringen.
När det gäller förklaringsfältet kommer du att kunna välja dess bredd, höjd och marginal. För bredd och höjd har vi valt 8 pixlar. Vi har satt marginalen till 40 pixlar.
Den sista uppsättningen av alternativ för Legend Style låter dig ställa in etikettens färg, teckensnitt, teckenstorlek och vikt. Vi har ställt in färgen till #1e1e1e, teckensnittet till DM Sans, teckenstorleken till 16 pixlar och teckensnittets vikt till medium.
I den sista uppsättningen stilalternativ, Tick Style, kommer du att kunna ställa in det lägsta och högsta värdet som visas på Y-axeln, såväl som stegstorleken du vill visa. Vi har gjort det så att det visar värden från 0 till 80 i steg om 20.
Nu när du är lite bekant med de alternativ som står till ditt förfogande kan vi öka takten när vi visar dig hur du skapar stapeldiagrammet. Efter att ha hittat Graphs-tillägget igen och dragit det till den andra tillgängliga kolumnen, vi gick direkt till stilfliken och bytte graftyp till stapel. När vi bytte tillbaka till stilfliken gjorde vi ett par ändringar – raderade ett av objekten och ställde in dataetiketterna till ”En”, ”Två”, ”Tre” och ”Fyra”.
Tillbaka till fliken Stil, vi har ändrat grafstorleken på den nya grafen till 85 %. Vi har nollställt kantbredden och svävkantsbredden. Vi har ställt in stapelstorleken, som bestämmer hur mycket av dess tilldelade utrymme en enskild stapel kommer att uppta, till 0,88. Kategoristorleken, som bestämmer hur mycket av dess tilldelade utrymme en grupp barer kommer att uppta, sattes till 0,6.
I Legend Style har vi i stort sett kopierat värdena från föregående graf. Vi har aktiverat legenden och placerat den på botten. Vi har ställt in bredden och höjden på stapeln till 11 pixlar och marginalen till 40. Färgen vi valde för etiketten var #1e1e1e, typsnittet DM Sans, teckenstorlek 16 och viktmedium. Vi har också kopierat Tick Style, med värden 0, 80 och 20.
När du går tillbaka till innehållet är det dags att ställa in objekten till deras nya värden. Datauppsättningen som vi har använt för det första objektet är 63,38,24 och 56. Etiketten är fotografi och vi har använt #888DB3 som vår valfärg för både områdesfärgen och svävareans färg.
För den andra punkten, datauppsättningsvärdena är 45, 76, 48 och 36. Vi ändrade etiketten till Art Direction och färgerna för område och svävare till #c1c3d7. Med det kan du förhandsgranska och se resultatet av ditt arbete – de bör vara en nära match med exemplet du kan se på widgetens sida.
Låt oss avsluta det!
Om du någonsin behöver skapa ett diagram eller diagram, kommer Qi Addons for Elementor-pluginen att ha precis rätt tillägg för dig. Vi har visat dig hur du kan skapa fantastiska diagram med bara några få alternativ – det blir inte enklare eller vackrare än så här. Så om det finns data du behöver visa visuellt, tveka inte och få det största gratispaketet med Elementor-tillägg i världen. Du får det för graferna, och du kommer att fortsätta använda det för de återstående 59 tilläggen.
Stöd vårt arbete ❤️
Om du gillade den här artikeln, överväg att lämna dricks för att hjälpa oss fortsätta publicera bra innehåll.
