Sådan tilføjes punkteffekt til en kolonne i Elementor

Vil du tilføje en punkteffekt til en kolonne i Elementor?

Elementor er perfekt til oprette et websted, hvor der er lagt vægt på design. I Elementor kan du tilføje animationseffekter for at gøre dit websted mere interaktivt.

En af de animationseffekter, du kan føje til en Elementor-drevet side, er en punkteffekt. Du kan tilføje en punkteffekt til en sektion, kolonne eller widget.

Denne artikel viser dig, hvordan du tilføjer en score til en kolonne i Elementor. Forresten, hvis du er ny hos Elementor, kan du henvise til vores tidligere artikel for at finde ud af det hvordan du installerer Elementor.

Sådan tilføjes punkteffekt til en kolonne i Elementor

I Elementor er kolonne et obligatorisk element. Det er her, du kan tilføje widgets - de faktiske designelementer til at oprette din side. Som med andre typer elementer i Elementor kan du også tilpasse en kolonne for at gøre den elegant.

Du kan tilføje baggrund i ensfarvet farve, billedbaggrund, skygge til svævende effekt. Elementors indbyggede svæveeffekt lader dig bruge en anden baggrund, en anden kant og en anden skygge, når du peger.

For at begynde at tilføje en punkteffekt til en kolonne i Elementor skal du først klikke på håndtaget på den kolonne, du vil tilføje punkteffekten på for at skifte til kolonneindstillingspanelet.

Gå til fanen i indstillingspanelet (panel på venstre side) stil og åbn blokken Baggrund. I sidstnævnte kan du åbne fanen AU OVERSIGT for at indstille en anden baggrund for pegetilstanden.

Du kan bruge en solid farvebaggrund, en gradientfarvebaggrund eller en billedbaggrund. Du kan også indstille overgangsvarigheden (overgangen fra den normale tilstand til den pegende tilstand) i indstillingen Overgangsvarighed.

For at indstille en anden kant og en anden boksskygge i pegetilstanden kan du åbne blokken Grænse. Klik på fanen OVERSIGT  af denne blok og indstil kantstil, kantstørrelse, kantfarve, kantradius og områdeskygge for den pegende tilstand.

Tilføjelse af en avanceret svæveeffekt til en kolonne i Elementor

I modsætning til Divi BuilderElementor bruger ikke CSS-transformationen til sin svævende effekt. Derfor kan du kun tilføje grundlæggende svæveeffekter. Men ligesom Elementor (pro-versionen) dig giver dig mulighed for at tilføje tilpasset CSS, kan du bruge tilpasset CSS til at tilføje CSS-transformation for at tilføje avanceret svæveeffekt.

Rollover-effekter oprettes ved hjælp af CSS-transformation. For at tilføje en CSS-transformation til en kolonne skal du først gå til fanen Avanceret og åbn blokken Brugerdefineret CSS (Sørg for, at indstillingspanelet er i kolonneindstillingspaneltilstand). Tilføj følgende CSS-kode.

Koden :

vælger: svæver {overgang: alle .2s let-ind-ud; transformere: skala (1.1); markør: punkt; z-indeks: 1; }

• Matrix
• oversætte
• Scale
• Roter
• skew

CSS-koden ovenfor bruger skalatransformationen. Du kan simpelthen erstatte den med den transformeringsstil, du kan lide.

Læs cette side for at lære mere om CSS-transformation.

1. Visuel Restaurant Reservation

Opret systemet Online Booking af din restaurant eller cafe-websted, takket være dette fremragende premium WordPress-plugin. Med sidstnævnte vil du have muligheden for selv at oprette borde og pladser på nettet, som dette plugin tilbyder, og lade dine kunder reservere de gratis, dette er hovedfunktionen ved dette plugin, og hvad der adskiller det fra de andre plugins i denne liste.

Ved hjælp af Drag & Drop kan du trække forskellige bordtyper til din restaurant og beregne det maksimale antal pladser for hver tabel såvel som antallet af borde. Besøgende på din restaurant kan vælg formen på bordet, de foretrækker, og placeringen af ​​bordet i forhold til de andre borde i gitteret.

Her for dig 5 WordPress plugins til at optimere kategoribeskrivelser og etiketter

Kunderne på din restaurant vil være glade for at tage dette valg direkte på Internettet i stedet for at rejse. Med dette plugin vil de være i stand til at få en idé om, hvad der venter dem i dag.

Blandt andre funktioner tilbyder den: Træk og slip-support, 3 typer reservationssystem, en temmelig intuitiv håndtering, komplet tilpasning af dens layout og meget mere.

Downloade | demo | Web-hosting

• Hvad er forskellen mellem en blog og et websted?
• Sådan kopieres og indsættes tekst i WordPress uden problemer med formatering
• SEO benchmarking: Konkurrenceanalyse
• 5 WordPress-plugins til at acceptere PayPal-betalinger