I webdesignets værktøjskassen er der intet som velplaceret animation for at tilføje et strejf af magi til en side eller et indlæg. Det er let at se hvorfor – animation kan bringe ellers statiske elementer som tekst til live. Ting, der bevæger sig, har en måde at fange vores øje på, så animation er en fantastisk måde at henlede seernes opmærksomhed på noget. Så længe det er gjort smagfuldt, med mål og sans for komposition, kan animation være en stor fordel for din hjemmeside.
Tekst er et godt eksempel på, hvor nyttig animation kan være. Afsnit kan vises på en side på en bestemt måde. Individuelle ord kan også gøre det – du kan endda indstille hele sætninger til at blive vist et bogstav ad gangen, hvilket skaber en stilfuld skriveeffekt. Og selvom det bestemt er muligt at tilføje disse effekter ved hjælp af HTML og CSS, har vi skabt en nemmere måde for dig at tilføje animeret tekst til dit websted.
Vores Qi-tilføjelser til Elementor-plugin – et bundt af tres specialfremstillede Elementor-tilføjelser – indeholder lige det, du har brug for. Tilføjelsen kaldes animeret tekst-widget, og det er et fantastisk lille værktøj til at tilføje animeret tekst i WordPress. I denne artikel viser vi dig:
Hvis du foretrækker at se video frem for at læse artikler, har vi også en videovejledning til widgetten.
Fordi Qi-tilføjelser til Elementor er en samling af widgets til Elementor, skal dit websted have Elementor installeret og aktiveret, før du installerer og aktiverer pluginnet. Hjemmesidebyggeren kommer i både gratis og pro-betalte versioner. Vores plugin kræver ikke pro-versionen. En almindelig gratis installation er alt hvad du behøver for at nyde de fulde fordele ved Qi Addons til Elementor.
Når Qi Addons til Elementor er installeret og aktiveret, vil du bemærke et nyt sæt elementer og widgets i dit Elementor-elementpanel. For at begynde at skabe din animerede teksteffekt skal du søge efter “animeret tekst” i venstre sidepanel for at få widgetten frem.
Det næste trin skulle være at trække widgetten til et afsnit på siden. Afhængigt af dit sidedesign kan du tilføje det til en kolonne i en sektion med flere kolonner. Sektionslayoutet, vi brugte, var standard, enkelt-kolonne.
Efter at have trukket widgetten til en sektion, åbnes tilføjelsesfanen Indhold i sektionen Generelle indstillinger. Det er her, du kan ændre widgetens standardtekst og tilføje din egen. Du kan tilføje enkelte ord, sætninger, sætninger eller hele afsnit – uanset hvilken tekst du vil animere.
Til vores eksempel brugte vi sætningen “Vælg din animationsstil.”
Den næste mulighed er den store – Appear Animation. Det er her, du kan vælge, hvilke dele af teksten – ord, bogstaver eller hele teksten – der skal flytte sammen i animationen. Du kan også vælge den retning, hvorfra teksten skal vises på siden, og indstille fremkomstforsinkelsen – hvor lang tid efter den besøgende når den animerede tekstsektion vil animationen starte.
De muligheder, vi valgte, inkluderede at opdele titlen for bogstav, at få bogstaverne vist fra toppen, og animationen blev vist med en forsinkelse på 200 millisekunder.
Du kan kombinere forskellige typer opdelinger og animationer for at skabe den ønskede effekt. For eksempel, hvis du går efter en skriveeffekt, vil du indstille “efter bogstav” opdeling og en “fra højre” animation.
Når du har besluttet dig for titlen og animationsmulighederne, kan du gå videre til styling af den animerede tekst.
Stilmulighederne i widgetten er ret ligetil og nemme at navigere. For det første giver nogle muligheder dig mulighed for at vælge justeringen og titelmærket for teksten. Til denne demonstration valgte vi midterjusteringen og H3-titelmærket.
De følgende par muligheder omhandler tekstfarven og typografien (skrifttypefamilie, størrelse, vægt, stil, teksttransformation, dekoration samt linjehøjde og bogstavafstand). Vi ændrede ikke farven på teksten, men vi lavede et par ændringer i typografiindstillingerne. Vi ændrede størrelsen på bogstaverne til 70 pixels og vægten til 400.
Vi valgte ikke at ændre titeludfyldningsmulighederne, da vi ikke ønskede at øge afstanden omkring vores tekst. Så vores prøve animerede tekst var færdig og klar til at blive vist. Alt i alt tog det kun et par minutter at skabe, og resultaterne så flotte ud.
Lad os afslutte det!
Når det kommer til designmuligheder, du har adgang til, når du bygger websider, er mere normalt bedre. Det samme gælder ikke for at bruge dem, da mange muligheder fungerer bedst, når de nøje overvejes og tilføjes på en måde, der maksimerer deres effekt.
For tekstanimation betyder det at lade den gøre det, den er bedst til – at henlede opmærksomheden på ellers statiske tekststykker. Uanset om du bruger det til at falme hele tekstafsnit ind eller til at oprette sætninger ved hjælp af skriveeffekten, vil Qi Addons til Elementor og Animated Text-widgetten være de perfekte værktøjer til at tilføje animeret tekst i WordPress.
Støt vores arbejde ❤️
Hvis du kunne lide denne artikel, kan du overveje at give drikkepenge for at hjælpe os med fortsat at udgive kvalitetsindhold.
