At internett har endret måten vi mottar og behandler informasjon på er ikke bare en klisjé: det er sannheten. På den ene siden vår oppmerksomhetsspennene blir kortere: folk har mindre og mindre tid til tekstinnhold. På den annen side er det ingen erstatning for det hvis du vil formidle informasjon med enhver mening eller kompleksitet.
En ting du kan gjøre for å unngå at de besøkende bare hopper over en stor mengde tekst, er å gjøre tekstinnholdet ditt skanbart, i tilfelle alt du vil er å fremheve noen få interessante opplysninger. Du kan også bruke uthevet tekst for aksenter. WordPress meldingsbokser er enda en ting du kan prøve: de skiller seg tydelig ut fra resten av teksten og formidle utvalgte biter av informasjon til de besøkende.
Vi vil vise deg hvordan du lager meldingsbokser for WordPress-nettstedet ditt. Men før vi kommer inn på det nøttesnåle, vil vi gjerne diskutere meldingsboksen i mer generelle termer. Hvis du er sikker på at alt du trenger er å vite hvordan du gjør det, bla rett ned til opplæringsdelen. Her er hva vi skal snakke om:
En WordPress meldingsboks er et designelement som brukes til å trekke en besøkendes oppmerksomhet til en informasjon. Den består av en boks, litt tekst og muligens ikoner eller annen grafikk. De relaterer vanligvis viktig informasjon til en besøkende på nettstedet og skiller seg ut fra hoveddelen av teksten.
Også en meldingsboks kan vanligvis avskjediges ved å klikke på et X-tegn eller en annen type lukkeikon. Når brukeren får informasjonen, kan de fjerne meldingsboksen med ett enkelt museklikk og fortsette med lesingen. De ser omtrent slik ut:
En meldingsboks er best å bruke når du vil få de besøkende til å være spesielt oppmerksomme på en diskret informasjon som kan informere resten av innholdet, men er ikke nødvendig for å forstå det. Det kan være nært knyttet til teksten, men det trenger ikke være det.
Kanskje artikkelen en besøkende leser ikke er den første delen av en serie. I så fall kan det være lurt å varsle dem med en meldingsboks om at de må lese noe annet først. Har butikken din et spesialtilbud knyttet til teksten? Kanskje du kan annonsere det i en meldingsboks. Inneholder bok- eller filmanmeldelsen spoilere? Bedre å gjøre det klart på forhånd.
En meldingsboks kan opprettes ved hjelp av kode eller en plugin. Vi vil bruke en gratis plugin, utviklet av oss, kalt Qi Addons for Elementor. Qi Addons utvider Elementors allerede formidable palett av widgets med 60 splitter nye, vakkert designede elementer, hvorav ett er meldingsboksen.
Med vår plugin du kan lage iøynefallende WordPress-meldingsbokser i løpet av minutter. Alt du trenger å gjøre på forhånd er å installere den nyeste versjonen av Elementor (gratisversjonen er helt fin), og deretter installere Qi Addons. Sammen med Qi Addons for Elementor, vil vi bruke vårt eget Qi-tema. For best resultat foreslår vi at du gjør det også. Hvis du allerede har investert i et annet tema, ikke bekymre deg: Qi Addons vil også fungere med det.
Qi Addons er et eget plugin designet for å fungere med Elementor og supplere det, og det er det helt gratis. Etter at du har installert begge, er du klar. Du kan se hvordan du lager en meldingsboks i videoen nedenfor:
Hvis du imidlertid foretrekker opplæringen din i tekstform, les videre nedenfor. Til å begynne med må du finne en Meldingsbokser element i menyen til venstre og dra det dit du vil ha det på siden.
Du vil se meldingsboksen med standardinnstillingene. Den har en plassholdertittel og noe lorem ipsum-tekst. Du kan redigere dem i Generell fanen til widgeten.
Vi vil ikke bruke Egendefinert klasse innstillinger for denne demonstrasjonen. Det vi skal gjøre er å endre Tittel til Juster fargene for bakgrunner, ikoner, titler og tekst. Det hele tar bare et par klikk og slett teksten, noe som gjør dette til en veldig enkel meldingsboks.
Det vi også ønsker å gjøre er å endre ikonene. Ikonet øverst til venstre i boksen er det første i din Generell app, og kalles Ikon. Hold musepekeren for å vise menyene Ikonbibliotek å endre den.
Når du er der, kan du velge fra de tilgjengelige bibliotekene dine. Vi vil legge til en Bokmerke ikonet ved å søke etter det i søkefeltet, velge det og klikke Sett inn.
Vi vil også endre Lukk ikon, ikonet til høyre som brukes til å lukke meldingsboksen. For å endre et ikon ved å laste opp et .svg-bilde, hold musepekeren på kontrollen og klikk Last opp SVG.
Du kan da laste opp et nytt bilde eller velge et fra mediebiblioteket, slik vi skal. Bare velg et bilde og klikk Sett inn media når den er klar.
Med ikonene våre er vi klare til å flytte til Stil fanen.
I hoveddelen av Stil fanen, kan du finne mange alternativer for styling av widgetens tittel, tekst, ikon og bakgrunn.
Vi vil endre vår Titteltag til H4, men du kan endre den til hvilken som helst overskriftsinnstilling eller avsnittstekst. Du kan også endre Tittelfarge, som vi ikke vil gjøre, og Tittel typografi.
I Tittel typografi innstillinger, kan du endre skrifttype (Familie), Størrelse (vi har satt vår til 21 piksler), og Vekt (eller «modighet»). De Forvandle kontroll endrer store bokstaver i tittelen, den Stil kan brukes til å kursivere skriften eller velge en skrå skrift, mens Dekorasjon kontroll brukes til understreking, overstreking eller gjennomstreking.
De Linjehøyde kan skille mellom linjene i en tittel hvis den har mer enn én, men det har også en effekt på størrelsen på boksen ettersom den reserverer plass til en linje som er høy nok. Vi vil sette vårt til 30 piksler. De Avstand mellom bokstavene kontroll brukes til å skille mellom individuelle bokstaver i tittelen, og vi kommer ikke til å bruke den for denne spesielle meldingsboksen.
De Tekstfarge og Innstillinger for teksttypografi er nøyaktig like, men gjelder for teksten, i motsetning til tittelen. Denne spesielle meldingsboksen har ingen tekst, så vi kommer ikke til å bruke dem.
Neste ned finner vi Ikonposisjon kontroller. Du kan plassere ikonet ditt på toppen, midten eller bunnen av tittellinjen. Vi liker det på toppen, så vi lar det være som det er. Vi vil forandre oss Ikon farge til #1e1e1e – nesten svart, for å matche vår tittelskriftfarge. Til slutt vil vi sette Ikonstørrelse til 23 piksler.
Kontrollene for Lukk ikonstørrelse fungerer akkurat det samme som for Ikon. De Lukk ikonfarge kontroll lar deg velge en annen farge for ikonet ditt. Vi vil sette den til svart (#000000). De Lukk ikonet Hover farge er fargen på ikonet når det holdes over av en brukers mus. Vi vil sette dette til svart også, men med litt åpenhet (#000000cc).
Neste ned finner vi Bakgrunnstype kontroller. Denne kontrollen har to hovedmoduser: Gradient, som vi ikke kommer til å bruke, og Klassisk, som vi vil. Vi vil bruke en vanlig fargebakgrunn, en lyseblå (#d5eaf4), men du kan også bruke en Bilde hvis du velger det.
På bunnen av Stil delen av denne fanen kan du finne Bokskantradius kontroller. Du kan bruke disse til å gjøre noen av eller alle meldingsboksens hjørner rundere. Vi vil ikke bruke den til denne demonstrasjonen.
Til slutt finner vi Avstandsstil delen av fanen. I Ikon Margin kontroll, kan du stille inn avstanden mellom ikonet og de andre elementene. Vi klikker på link ikon for å koble fra verdiene, fordi vi ønsker å finjustere ikonets posisjon. Vi vil sette toppmarginen til 4 og høyre marg til 18 piksler.
De Tekst Marg Topp kontroll er der hvis du vil skille teksten fra tittelen. Siden denne meldingsboksen ikke har noen tekst, trenger vi den ikke.
Til slutt, den Bokspolstring kontroll brukes til å kontrollere avstanden mellom boksens kanter og innholdet. Vi trenger det ikke til denne demonstrasjonen.
Og der har du det, en vakker meldingsboks på bare et par minutter.
For å konkludere
Som du kan se, er det bemerkelsesverdig enkelt å sette opp en meldingsboks i WordPress. Alt du trenger er et par gratis plugins (Elementor og Qi Addons), og en god idé for et iøynefallende design. Med Qi Addons får du en fullt funksjonell meldingsboks med praktisk talt ubegrensede stylingmuligheter. Vi oppfordrer den til å bruke den godt.
Støtt vårt arbeid ❤️
Hvis du likte denne artikkelen, vurder å gi en tips for å hjelpe oss med å fortsette å publisere kvalitetsinnhold.
