Elementor er en kraftfuld sidebygger, der giver dig mulighed for at oprette fantastiske websteder med lethed, og dens grundlæggende Flipbox-widget tilbyder en enkel måde at tilføje interaktive 3D-effekter på. Problemet? Det er en professionel funktion, design og animationer er begrænsede.
Master Addons er en kraftfuld Elementor addon, der giver en flipbox widget også. Det er gratis og tillader større tilpasning end Elementors Flipbox widget.
Med Master Addons kan du oprette visuelt slående 3D-flipboxes, der flytter, transformerer og engagerer brugere på måder, som standard Elementor-widgetten simpelthen ikke kan.
I denne vejledning viser vi dig, hvordan du opretter førsteklasses 3D-flipboxes med Master Addons og skaber iøjnefaldende design, der skiller sig ud.
Oprettelse af en 3D Elementor Flipbox med Master Addons
Lad os gå mursten for mursten og skabe vores egne flipbox brug af Master addons. Ved udgangen bør du have en meget klar forståelse af, hvordan du opretter din egen unikke.
Trin 1: Installation af Master Addons til Elementor
Før du kan begynde at bruge Master Addons Flipbox-widget, skal du installer og aktiver master Addons plugin. Sådan er det:
1. I dit WordPress dashboard, gå til Plugins > Tilføj ny.
2. Søg efter “Master Addons for Elementor” i søgelinjen.
3. Klik Installer nu og så Aktiver når plugin'et er installeret.
Når de er aktiveret, vil Master Addons-widgets, inklusive Flipbox, være tilgængelige i Elementor-editoren.
Trin 2: Tilføjelse af Flipbox Widget
Nu hvor plugin'et er installeret, lad os tilføje Flipbox til din side
1. Åbn din side i Elementor editor. Vælg Flexbox eller gitter som dit layout.
2. På venstre panel, søg efter den Flipbox. Du bør se en Flipbox widget med en “MA” tag.
3. Træk og slip den Flipbox widget ind i den ønskede sektion af din side. En vigtig ting at bemærke her er, at når du arbejder med flipboxes, er det anbefales at bruge Flexbox for at sikre, at dine flipboxes ser godt ud.
Når det er tilføjet, vises et grundlæggende flipbox-design på dit lærred, klar til at blive tilpasset.
Trin 3: Oprettelse af en 3D Elementor Flipbox
Nu har vi nået de indstillinger, som du kan justere for at få en premium-looking 3D-effekt på din flipbox.
Først af.
1. Stil Forudindstillet
I stilforudindstillingen indstiller du designvariation og animationsstil
Designvariationen lader dig tilpasse forsiden af din boks. Du kan indstille den til: Default, Image, Diagonal, Front Icon.
Med animationsstilen kan du vælge præcis, hvordan din flipbox vil blive animeret.
Master addons har 20 + premium animationer til rådighed. Fra simpel vandret og lodret flip til 3D Flip, kube animationer, rollover-effekter osv.
Master Addons giver dig en dedikeret 3D flip animation, der giver dine flipboxes en dynamisk følelse. Du kan endda tilpasse flip stil af denne animation. Når du har valgt det, vises en ny mulighed i “Style” faneblad under Generelle indstillinger: 3D Flip Style.
2. Front Indhold
Klik på Flipbox widget til at redigere det.
Under Content fanen, du vil se felter for at tilføje dit indhold til Front Box. Du kan tilføje en overskrift, beskrivelse og et billede eller ikon her.
3. Tilbage Indhold
Rul ned til Tilbage Indhold afsnit i samme Content tab.
Tilsvarende skal du tilføje det indhold, du vil have vist, når flipboxen vendes. Du kan tilføje en ny overskrift, tekst eller en call-to-action-knap.
Du kan style begge sider af flipboksen separat ved at bruge Style tabulator til at justere skrifttyper, farver, polstring, kanter og mere for hver side.
Trin 4: Forbedring af 3D Flipboxes med andre udvidelser
Master Addons for Elementor stopper ikke bare ved grundlæggende flipbox-funktionalitet - det tager din flipbox til et helt nyt niveau med en række udvidelser designet til at tilføje interaktivitet, glatte animationer og engagerende effekter.
Vi vil udforske de kraftfulde funktioner, der giver dig mulighed for at forbedre din flipbox, hvilket gør den mere dynamisk, visuelt fængslende og brugervenlig.
Uanset om du vil oprette avancerede 3D-transformationer, tilføje parallakseeffekter eller finjustere indgangsanimationer, tilbyder Master Addons alt, hvad du behøver for at tage dine flipboxes til næste niveau.
Forvandler:
- I Advanced fanen, du finder Forvandler indstillinger.
- Her kan du justere flipbox rotation på X-, Y- eller Z-akserne for at skabe mere komplekse 3D-effekter.
- Leg rundt med scale, oversætte, og skæv muligheder for en endnu mere dynamisk flipbox.
Rellax (Parallax Effect):
- For at aktivere Rellax-effekten skal du gå til Advanced tab og rul til Rellax indstillinger.
- Aktiver effekten og juster rullehastighed at skabe en parallakseeffekt, hvor flipboxen bevæger sig med en anden hastighed end resten af indholdet, mens brugerne ruller.
Flydende effekter:
- Tilføj flydende effekter (Pro) for at få flipboxen til at drive forsigtigt i en løkke. Denne mulighed kan findes under Motion Effects section.
- Vælg typen af bevægelse (f.eks. svævende op eller ned), og juster intensiteten efter din smag.
Værktøjstip:
- Master Addons lader dig også tilføje Værktøjstip til din flipbox, som vises, når brugerne holder markøren over elementer. Værktøjstip kan give yderligere oplysninger eller kontekst uden at rode i dit design.
- Du kan aktivere og tilpasse værktøjstip til både front- og bagsideindholdet i flipboxen under indstillingerne Avanceret.
- Tilpas værktøjstipteksten, positionen (øverst, nederst, til venstre eller til højre) og stilen (farver, skriftstørrelse), så den passer til dit design.
Nogle andre nyttige udvidelser
- Under Motion Effects fane, aktiver Indgang Animation at anvende en opmærksomhedsskabende effekt, når flipboxen vises på siden.
- Du kan vælge mellem forskellige animationer som fade-in, slide eller bounce for at få din flipbox til at springe, når den kommer ind i viewporten.
- Hvis du vil have en jævn afsløringsanimation, når flipboxen vendes, skal du aktivere Afsløre option under Advanced indstillinger.
- Denne funktion lader tilbageindholdet i flipboxen gradvist afsløres, hvilket skaber en poleret overgang.
- Brug Visningsbetingelser for at indstille regler for, hvornår og hvor flipboxen vises. Du kan styre synlighed baseret på enhedstyper (desktop, tablet, mobil) eller endda forhold som rulleposition.
Forhåndsvisning og færdiggørelse af din flipboks
Når du har tilpasset din flipbox, er det tid til at se den i aktion.
- Klik på øjeikon nederst i Elementor-panelet for at få vist din flipbox i editoren.
- Test, hvordan flipboxen opfører sig på forskellige enheder (desktop, tablet og mobil) for at sikre, at den reagerer og ser godt ud overalt.
- Foretag eventuelle sidste justeringer af designet, animationshastighederne eller positionen, indtil du er tilfreds med, hvordan det ser ud.
Når du er tilfreds, skal du klikke Publicere for at gøre din flipbox live på dit websted.
Konklusion
Master Addons for Elementor tilføjer mere krydderi til standard flipbox-oplevelsen og tilbyder en række avancerede funktioner, der giver dig mulighed for at skabe virkelig dynamiske, interaktive designs.
For at gå med 3D-animationseffekterne er der muligheder som transformationer, parallakseeffekter, jævne afsløringsovergange og mere, du kan bruge til at bringe dine flipboxes til live på måder, der går ud over grundlæggende animationer.
Ved at følge denne vejledning kan du nemt tilføje iøjnefaldende flipboxes til dit websted, hvilket forbedrer både brugerengagement og visuel appel. Så, dyk ned i Master Addons og begynd at eksperimentere for at skabe fantastiske 3D flipboxes, der vil imponere dine besøgende!
