Infoboks

Næsten hver side ender med at have brug for en række små kort, der parrer et ikon med en kort overskrift og en tekstlinje. Funktioner, tjenester, trin, kontaktoplysninger, alle samme form. Den Infoboks widget i Master Addons til Elementor bygger det kort. Du vælger et ikon eller billede, skriver en titel og beskrivelse, vælger et af fire færdige layouts og styler hver del fra Elementor-panelet.

Det er en af de widgets, du ender med at nå konstant, da et ikon, en overskrift og en sætning dækker så mange sektioner af et websted. Nedenfor er en gåtur gennem hver indstilling, fra stilforudindstillingerne ned til ikon-, titel- og beskrivelseskontrollerne.

Hvad gør Info Box-widgetten #

En infoboks stabler et ikon eller billede oven på en titel og en kort beskrivelse. De fire stilforudindstillinger betyder, at det samme indhold kan ligne et udfyldt kort, et kort med grænser eller en ren centreret blok, og du kan stille flere op side om side for at lave en funktionsrække.

Titlen kan linke hvor som helst, ikonet kan byttes til et uploadet billede, og kortet kan bære sin egen baggrund, kant og svæveanimation. Der er tre faner: Indhold til ikonet, titlen og teksten, Stil for farver og mellemrum og Avanceret til de sædvanlige Elementor-indstillinger.

Før du starter #

• WordPress med Elementor installeret og aktiv.
• Master Addons til Elementor installeret og aktiv. Ny i plugin'et? Se den installationsvejledning.
• Et ikon i tankerne, eller et billede at uploade, plus titlen og beskrivelsesteksten.

Sådan tilføjes Info Box-widgetten #

I Elementor-editoren skal du åbne Elementer panel og søg efter Infoboks, eller rul til afsnittet Mastertilføjelser. Træk det over på din side. Det indlæses med et eksempelikon, en “Infobokstitel” og en pladsholderbeskrivelse, så du starter fra et arbejdskort i stedet for et tomt.

Opsæt indholdet #

Åbn Content fane. Den Content sektion rummer alt, hvad kortet viser, og det er her, det meste af din redigering sker.

• Stilforudindstilling: vælg Variation One til Four. Hver udlægger ikonet, titlen og beskrivelsen forskelligt (mere om disse nedenfor).
• Billede eller ikon: en tre-vejs skifte til Ingen, Ikon eller Billede. Vælg Ikon for at bruge ikonbiblioteket, eller Billede for at uploade dit eget.
• Ikon: når Ikon er valgt, skal du vælge et hvilket som helst ikon fra Font Awesome-biblioteket eller uploade en SVG.
• Titel: overskriftsteksten, med en Write with AI-mulighed ved siden af.
• Titel URL: gør titlen til et link til en hvilken som helst side eller ekstern URL.
• Beskrivelse: linjen eller to af tekst under titlen, også med Skriv med AI.

Under dem finder du en Hjælp Docs link og en Wrapper Link mulighed (en Pro-funktion), der gør hele kortet klikbart.

Vælg en forudindstilling af typografi #

De fire forudindstillinger ændrer hele looket uden at røre dit indhold, så skift mellem dem er en hurtig måde at finde det layout, der passer til sektionen.

• Variation One: et centreret kort med ikonet, titlen og beskrivelsen stablet, ofte på en udfyldt baggrund.
• Variation To: et kort med kanter med ikonet venstrejusteret over titlen.
• Variation Tre: et kort med ikonet sat i en farvet firkantet blok over overskriften.
• Variation Fire: et centreret layout med ikonet inde i et cirkulært badge.

Brug et billede i stedet for et ikon #

Hvis et foto eller logo passer bedre end et ikon, skal du indstille Billede eller ikon til Image og vælg en fil fra Mediebiblioteket. Widgetten viser derefter dit billede i ikonslottet, som fungerer godt til partnerlogoer, produktminiaturebilleder eller illustrerede funktionskort. Indstil det tilbage til Ingen når du vil have en tekstboks.

Style æsken #

The Style tab opdeles i Generelle stilarter, Icon Style, Title, Description, og Mønstre (en Pro-indstilling). General Styles styrer selve kortbeholderen.

• Kanttype, bredde og farve: omridset omkring kortet.
• Grænseradius: rundt om hjørnerne.
• Polstring og Margin: afstand inde i og omkring kassen.
• Baggrund: indstil en Normal og en Hover-baggrund, enten en ensfarvet eller et billede.
• Hover Animation: tilføj en indbygget bevægelseseffekt som Bob eller Grow, når nogen svæver kortet.

Ikon, titel og beskrivelse styling #

The Icon Style sektionen indstiller ikonstørrelse, farve og baggrund med separate Normal- og Hover-tilstande plus justering.

The Title og Description sektioner håndterer typografi, farve, justering og afstand for teksten. Hver enkelt har sine egne Normal- og Hover-tilstande, så kortet kan skifte, når besøgende bevæger sig hen over det.

Baggrundsfarve og billedindstillinger #

Tilbage i General Styles, den Baggrund kontrol tager enten et fast stof Color eller en Image. En tonet baggrund med hvid tekst, som det fyldte “Om os”-kort, er en nem måde at få en boks til at skille sig ud i en række af almindelige.

Resultatet på siden #

Publicer eller forhåndsvisning, og boksene gengives med dine ikoner, titler og beskrivelser på plads. Her er en række med tre infobokse, hver på en anden forudindstilling af stil, den slags layout, der passer til en funktions- eller servicesektion.

Almindelige brugstilfælde #

• Feature højdepunkter i en tre-fire-kolonnerække under helten.
• Tjenester eller tilbud hver med et ikon og en en-linjes oversigt.
• Hvordan-det-virker trin med et nummereret eller temaikon pr. trin.
• Kontaktoplysninger ligesom telefon, e-mail og adresse som sammenkædede bokse.
• Om eller team callouts brug af forudindstillingen fyldt baggrund til at skille sig ud.

Tips til at arbejde med Infoboks-widget #

• Hold beskrivelser korte. En eller to linjer læses bedst og holder en række kort lige.
• Match ikonstørrelser på tværs af en række. Indstil den samme Ikonstørrelse på hver boks, så de stiller op. Det er den ting, der normalt ser ud, når kortene ikke helt matcher.
• Brug én forudindstilling pr. række. Blanding af forudindstillinger i samme række har tendens til at se ujævn ud; skift baggrundsfarven i stedet, når du vil fremhæve en.
• Link titlen eller indpakningen. Send folk et nyttigt sted hen med Titel URL, eller gør hele kortet klikbart med Wrapper Link.
• Tilføj en subtil svæveanimation. En lille Bob eller Grow on hover signalerer, at kortet er interaktivt uden at komme i vejen.

Ofte stillede spørgsmål #

Indpakning #

Info Box-widgetten forvandler et ikon, en titel og en sætning til et rent kort, du kan gentage på tværs af et hvilket som helst afsnit. Vælg en forudindstilling, vælg et ikon eller billede, tilføj din tekst og links, og stil derefter boksen, så den matcher din side. For relaterede layoutværktøjer, se Flipbox widget og the Teammedlem widget, gennemse hele Master Addons widgets og udvidelser, og kontrollere de prissætning side for hvad hver plan indeholder.