Logo Slider

En væg af klientlogoer skubber resten af din side ned og viser stadig kun en håndfuld mærker. En logo-skyder passer hele listen ind i én kompakt strimmel, der roterer af sig selv. Den Logo Slider widget i Master Addons til Elementor bygger den stribe fra ethvert sæt logobilleder og tilføjer derefter svæveeffekter, værktøjstip, automatisk afspilning og navigationspile uden et separat skyderplugin.

Hvert logo kan linke til kundens websted, bytte til et andet billede på hover eller afsløre mærkenavnet og en kort beskrivelse. Denne guide går gennem widgetten fra det første træk på lærredet til den færdige karrusel på live-siden.

Hvad Logo Slider-widgetten gør #

Widgetten tager en liste over logobilleder og gør den til en responsiv, auto-spillende karrusel. Du styrer, hvor mange logoer der vises på én gang, hvor hurtigt de roterer, og hvad der sker, når en besøgende svæver over en. Den kører på Swiper-motoren, så skyderen er berøringsvenlig på telefoner og tablets fra starten.

Det sidder i Slider Widgets-gruppen af Master Addons, ved siden af Billedkarrusel og Galleri Slider widgets. De to er bygget til fotos og gallerier. Logo Slider er bygget til mærke mærker: logoer forbliver små, jævnt fordelt og justeret i en enkelt række.

Før du starter #

• WordPress med Elementor installeret og aktiv.
• Master Addons til Elementor installeret og aktiv. Ny i plugin'et? Se den installationsvejledning.
• Dine klient- eller partnerlogoer klar som billedfiler. Logoer med samme dimensioner ser bedst ud; noget omkring 300 gange 150 pixels med en gennemsigtig eller hvid baggrund fungerer godt.

Sådan tilføjes Logo Slider-widget #

I Elementor-editoren skal du åbne Elementer panel og søg efter Logo Slider, eller rul til afsnittet Mastertilføjelser. Træk widgetten over på din side. Den indlæses med seks pladsholderelementer med navnet Brandnavn, så du ser skyderformen med det samme og erstatter pladsholderne én efter én.

Tilføj dine logoer i afsnittet Logoelementer #

I Content fane, åben Logo Varer. Hver post på listen er ét logo. Klik på et element for at udvide det, eller brug kopierings- og sletteikonerne til højre for hver række. Den Tilføj vare knappen nederst udvider listen til så mange logoer, som du har brug for.

Under punktlisten sidder tre indstillinger, der gælder for hele skyderen:

• Billedopløsning: størrelsen WordPress tjener til hvert logo, fra Thumbnail op til Full. Logoer er små filer, så Full er normalt fint.
• Titel HTML Tag: overskriftsmærket viklet rundt om mærkenavnet på hover, H5 som standard. Vælg et mærke, der passer til din sides overskriftsstruktur.
• Vælg Begivenhed: hvad udløser svæveeffekten. Som panelet bemærker, udløses dette kun, når en svævetype er aktiveret på Client Logo.

Inden for hvert element skal du klikke på Klientlogo felt til at åbne WordPress mediebibliotek. Upload dine logofiler eller vælg dem, der allerede er der. Vedhæftningspanelet viser fildimensionerne, praktisk til at kontrollere, at alle logoer deler samme størrelse.

Indstil link- og svæveeffekten for hvert logo #

Hvert logovare bærer sit eget Link felt. Indsæt klientens URL, og logoet bliver klikbart på live-siden. Gearikonet åbner de sædvanlige Elementor-linkindstillinger, såsom åbning i en ny fane.

The Hover? dropdown bestemmer, hvad der sker, når en besøgende bevæger musen over logoet. Det har tre tilstande:

• Ingen: logoet sidder der bare. Rent og enkelt.
• Tekst: logoet falmer og en Brandnavn plus short Description fremstå i stedet.
• Billede: logoet skifter til et andet billede, du vælger.

Med Text valgt, vises to felter. Skriv mærkenavnet og en beskrivelse med én linje, og widgetten viser dem over logoet på hover. Dette passer til bureauer, der ønsker at sige, hvad de gjorde for hver klient uden at forlade skyderen.

Med Image udvalgt, a Hover Logo Image felt vises i stedet. Et almindeligt trick: Brug et gråtonelogo som hovedbillede og fuldfarveversionen som svævebillede, så logoer lyser, når besøgende bevæger sig hen over striben.

Føje et værktøjstip til et logo #

Hver vare har også en Værktøjstip skift. Tænd for den, og der vises en lille boble, når besøgende svæver over det logo. Den Indstillinger faneblad styrer adfærden:

• Indhold: teksten inde i værktøjstippet.
• Placering: hvor boblen sidder, Top som standard.
• Følg markør: lad værktøjstippet følge musen i stedet for at holde sig fast.
• Animation og udløser: hvordan værktøjstippet vises, skaler på Hover som standard.

The Style tab ved siden af Indstillinger stilarter boblen selv: farver, typografi, og afstand. Værktøjstip fungerer godt for korte etiketter som “Partner siden 2019”, der ikke behøver den fulde tekst hover mode.

Opsæt navigationspilene #

Åbn Navigation sektion til at styre, hvordan besøgende flytter skyderen i hånden. Den Navigation dropdown indstiller kontroltypen, med pile som standardvalg.

• Vis rullepanel?: tilføjer en slæbbar stang under skyderen.
• Pile Position: Center sætter én pil på hver side af skyderen. Top Center eller Bottom Center grupperer begge pile over eller under den.
• Placering: holder pilene Inde i skyderen boks eller flytter dem Udenfor det.
• Skjul pil på mobil?: taber pilene på små skærme, hvor swiping gør jobbet.
• Næste ikon og forrige ikon: skift standard chevrons for ethvert ikon i Elementor-biblioteket.

Afstem karrusellens adfærd #

The Karruselindstillinger sektion driver skyderens bevægelse. Det er her en statisk række logoer bliver den roterende strimmel, besøgende forventer.

• Slides pr. Kolonne: hvor mange logoer viser på én gang, fra 1 til 6. Fire eller fem passer til de fleste desktop layouts, og det responsive ikon lader dig indstille en mindre optælling pr. enhed.
• Layout: Karrusel er standard flad skyder.
• Auto Højde: lader skyderhøjden følge logorækken.
• Autoplay og Autoplay Hastighed: roter logoerne automatisk. Hastigheden er forsinkelsen i millisekunder, så 5000 betyder et nyt sæt hvert femte sekund.
• Pause på Hover: stopper rotationen, mens markøren er over skyderen, som passer godt sammen med svæveeffekter og værktøjstip.
• Slides til Scroll: hvor mange logoer går videre pr. trin.
• Center Slide, Grib markør, Træk fri tilstand: centrer det aktive logo, vis en gribemarkør, eller lad besøgende kaste strimlen frit.
• Sløjfe: kører skyderen uendeligt, hvilket er, hvad en logostrimmel næsten altid vil have. En ting at se: løkke har brug for flere logoer end Slides pr. Kolonnetælling. Med fem kolonner og kun fem logoer er der ikke noget ekstra at rotere i.

Style logo skyderen #

Skift til Style fane. Fire sektioner dækker skyderens udseende: Karruselgenstande, Karruselgenstande Hover, Icon og Navigation.

Karruselgenstande #

Dette afsnit indrammer hver logocelle med Normal-, Hover- og Active-tilstande.

• Baggrund, Border Type, Border Radius, Box Shadow: giv hvert logo en kort-stil ramme, eller lad alt være tomt for en ren strimmel.
• Polstring og Vare Gap: plads inde i hver celle og afstanden mellem logoer. Gabet er den hurtigste måde at få en overfyldt strimmel til at trække vejret.
• Skyggetilstand og opacitet: bløde kantskygger og gennemsigtighed for logoerne.

Karruselvarer Svæver #

Dette afsnit angiver den svævetilstand, du valgte på fanen Indhold, inklusive tekstoverlejringen.

• Baggrund, Border, Box Shadow, Polstring, Margin: rammen omkring et svævet logo.
• Navnefarve, Navnetypografi, Mellemrum: mærkenavneteksten, der vises i tilstanden Tekstsvæver.

Ikon #

Ikonsektionen styler det lille ikon, der vises med svæveindhold: dets farve, baggrund, kant, udfyldning, margen og skriftstørrelse.

Navigationspile #

Navigationssektionen styler pileknapperne med separate Normal- og Hover-tilstande.

• Farve og baggrund: pilglyffen og knappen bag den.
• Border Type, Border Radius, Polstring, Størrelse: form knapperne; en fuld radius gør de runde knapper, du ser på de fleste moderne websteder.
• Mellemrum mellem pile: mellemrummet mellem de to knapper, når de sidder sammen over eller under skyderen.

Resultatet på siden #

Forhåndsvisning eller udgivelse, og skyderen kører live: logoer roterer på autoplay-timeren, reagerer på pilene og affyrer deres svæveeffekter og værktøjstip. Her er den færdige strimmel med fem logoer pr. visning og en pil på hver side.

Almindelige brugstilfælde #

• Klientlogostrimler på bureau- og freelancerhjemmesider, hvor hvert logo linker til et casestudie.
• Partner- og sponsorkarruseller til begivenheder, nonprofitorganisationer og SaaS-integrationssider.
• “Som omtalt i” pressebjælker med publikationslogoer, der linker til dækning.
• Mærke montrer på distributør- og forhandlerwebsteder med de etiketter, de bærer.
• Teknologistakke på porteføljewebsteder skal du bruge værktøjstip til at navngive hvert værktøj.

Tips til en bedre logo skyder #

• Hold hvert logo i samme størrelse. Blandede dimensioner gør rækken hoppe som det glider. Eksport af alle logoer på identiske lærreder, såsom 300 ved 150, holder strimlen stabil.
• Brug svævningen gråtone-til-farve. Indstil et hovedbillede i gråtoner og farveversionen som Hover Logo Image. Strimlen forbliver stille, indtil besøgende interagerer med den.
• Slå Pause til Svæve med autospil. Ingen kan læse et værktøjstip på et bevægeligt mål.
• Skjul pile på mobilen. Strygning erstatter dem, og strimlen forbliver ren på små skærme.
• Match dias pr. kolonne til logobredde. Brede ordmærkelogoer har brug for færre kolonner end kompakte ikonmærker. Hvis et logo ser klemt ud, skal du slippe tællingen med én, før du rører billedfilerne.

Ofte stillede spørgsmål #

Indpakning #

Logo Slider-widgetten dækker hele jobbet af en klientlogokarrusel i Elementor: en repeater til logoerne, per-logo links og svæveeffekter, værktøjstip, autoplay med loop og styling ned til pileknapperne. For foto- og galleriskydere skal du se på Billedkarrusel og Galleri Slider widgets. Gennemse det fulde sæt af Master Addons widgets og udvidelser, og se den prissætning side for hvad Pro tilføjer ovenpå.