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 gratis Infoboks widget i Master Addons til Elementor bygger det kort. Du vælger et ikon eller billede, skriver en titel og beskrivelse, vælger en forudindstilling af typografi (fem er gratis, ti med Pro) 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. Stilforudindstillingerne 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 tilfreds fane. Den tilfreds sektion rummer alt, hvad kortet viser, og det er her, det meste af din redigering sker.
- Stilforudindstilling: vælg Variation One til Fem i det gratis plugin, eller Seks til Ti med Master Addons Pro. Hver lægger ikonet, titlen og beskrivelsen forskelligt ud (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.
- Læs Mere Tekst og Læs Mere Link: disse vises kun med Variation Six, som har brug for Pro.
Under dem finder du en Hjælp Docs link og en Indpakningslink afsnit fra det frie Wrapper Link udvidelse det gør hele kortet klikbart.
Vælg en forudindstilling af typografi #
Forudindstillingerne æ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 En til Fem (gratis): hver arrangerer ikonet, titlen og beskrivelsen forskelligt. Variation To og Tre tilføjer en stor falmet kopi af ikonet bag kortet, og Variation Fem indstiller ikonet i en sekskantform.
- Variation Seks til Ti (Pro): fem flere layouts. Variation Six tilføjer knappen Læs mere og en gradientikon baggrundsmulighed.
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 spejlbillede 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 #
de måde tab opdeles i Generelle stilarter, ikonstil, navn, art, og Mønstre (fra den gratis Patterns udvidelse). 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 #
de ikonstil sektionen indstiller ikonstørrelse, farve og baggrund med separate Normal- og Hover-tilstande plus justering.
de navn og art 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 farve eller en spejlbillede. 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.
For forudindstillinger, demoer og en sammenligning med Elementor Icon Box, se Infoboks widgetside.
Ofte stillede spørgsmål #
Hvad er infoboks-widgetten i Master Addons?
Det er en Elementor-widget, der kombinerer et ikon eller billede, en titel og en kort beskrivelse til ét stylet kort. Du får fem gratis stilforudindstillinger (ti med Pro) og kontrol over farver, mellemrum og svæveeffekter, så du kan opbygge funktionsrækker, servicelister og opkald direkte fra panelet.
Hvor mange stilforudindstillinger har infoboksen?
Ti. Variation En til Fem er gratis, og Variation Seks til Ti har brug for Master Addons Pro. Hver enkelt arrangerer og dekorerer ikonet, titlen og beskrivelsen forskelligt. Du skifter mellem dem fra dropdownen Style Preset uden at lave dit indhold om.
Kan jeg bruge et billede i stedet for et ikon?
Ja. I fanen Indhold skal du indstille Billede eller ikon til Billede og vælge en fil fra Mediebiblioteket. Widgetten viser dit billede i stedet for ikonet, som fungerer godt til logoer, produktbilleder eller illustrerede kort. Vælg Ingen for en tekstboks.
Kan jeg gøre infoboksen klikbar?
Du kan sammenkæde titlen med feltet Titel URL i fanen Indhold. For at gøre hele kortet klikbart, skal du bruge indstillingen Wrapper Link, fra den gratis Wrapper Link udvidelse. Begge lader besøgende trykke på boksen for at nå en anden side eller sektion.
Kan jeg tilføje en svæveeffekt til infoboksen?
Ja. Generelle stilarter har en Hover Animation dropdown med indbyggede effekter som Bob og Grow, og afsnittene Ikon, Titel og Beskrivelse har hver deres Hover-tilstande for farve og baggrund. Sammen lader de kortet reagere, når nogen bevæger sig hen over det.
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.
