Hvordan legge til punkteffekt i en kolonne i Elementor

Vil du legge til en punkteffekt i en kolonne i Elementor?

Elementor er perfekt for opprette et nettsted, der det legges vekt på design. I Elementor kan du legge til animasjonseffekter for å gjøre nettstedet ditt mer interaktivt.

En av animasjonseffektene du kan legge til på en Elementor-drevet side, er en punkteffekt. Du kan legge til en punkteffekt i en seksjon, kolonne eller widget.

Denne artikkelen viser deg hvordan du legger til en poengsum i en kolonne i Elementor. Forresten, hvis du er ny i Elementor, kan du referere til vår forrige artikkel for å finne ut hvordan du installerer Elementor.

Hvordan legge til punkteffekt i en kolonne i Elementor

I Elementor er kolonne et nødvendig element. Dette er hvor du kan legge til widgets - de faktiske designelementene for å lage siden din. Som med andre typer elementer i Elementor, kan du også tilpasse en kolonne for å gjøre den elegant.

Du kan legge til fargebakgrunn, bakgrunnsbilde, skygge, for svevende effekt. Elementors innebygde svevereffekt lar deg bruke en annen bakgrunn, en annen kant og en annen skygge når du peker.

For å begynne å legge til en punkteffekt i en kolonne i Elementor, klikker du først på håndtaket til kolonnen du vil legge til punkteffekten på for å bytte til kolonneinnstillingspanelet.

Gå til fanen i innstillingspanelet (panel på venstre side) Stil og åpne blokken Bakgrunn. I sistnevnte kan du åpne fanen AU OVERSIKT for å sette en annen bakgrunn for peketilstanden.

Du kan bruke en fargebakgrunn, en gradientfargebakgrunn eller en bakgrunnsbilde. Du kan også angi overgangsvarigheten (overgangen fra normal tilstand til peketilstand) i alternativet Overgangsvarighet.

For å angi en annen kant og en annen bokseskygge på peketilstanden, kan du åpne blokken Grense. Klikk på fanen OVERSIKT  av den blokken og angi kantstil, kantstørrelse, kantfarge, kantradius og områdeskygge for peketilstanden.

Legge til en avansert sveveeffekt i en kolonne i Elementor

I motsetning til Divi BuilderElementor bruker ikke CSS-transformasjonen for sin svevende effekt. Derfor kan du bare legge til grunnleggende sveveeffekter. Men som Elementor (proversjonen) deg lar deg legge til tilpasset CSS, kan du bruke tilpasset CSS for å legge til CSS-transform for å legge til avansert svevereffekt.

Rollover-effekter opprettes ved hjelp av CSS-transformasjonen. For å legge til en CSS-transformasjon i en kolonne, gå først til kategorien Avansert og åpne blokken Custom CSS (sørg for at innstillingspanelet er i kolonneinnstillingspanelmodus). Legg til følgende CSS-kode.

Koden :

selector: hover {overgang: alle .2s letthet inn-ut; transform: skala (1.1); markør: punkt; z-indeks: 1; }

• Matrix
• Oversette
• Skala
• Roter
• skew

CSS-koden ovenfor bruker skalaomdannelsen. Du kan ganske enkelt erstatte den med hvilken transformasjonsstil du liker.

Les cette side for å lære mer om CSS-transformasjonen.

1. Visuell Restaurantbestilling

Lag systemet Bestillinger av restaurant- eller kafénettstedet ditt, takket være denne utmerkede premium WordPress-pluginen. Med sistnevnte vil du ha muligheten til å lage bord og seter selv på rutenettet som denne plugin tilbyr og la kundene dine reservere de gratis, dette er hovedfunksjonen til denne plugin og det som skiller den fra de andre pluginene i denne listen.

Ved hjelp av Drag & Drop kan du dra forskjellige typer bord til restaurantens rutenett og beregne maksimalt antall seter for hvert bord, samt antall bord. Besøkende på restauranten din kan velg formen på bordet de foretrekker og plasseringen av bordet i forhold til de andre bordene i rutenettet.

Her for deg 5 WordPress plugins for å optimalisere kategoribeskrivelser og etiketter

Kundene på restauranten din vil være glade for å gjøre dette valget direkte på internett i stedet for å reise. Med denne pluginen vil de kunne få et inntrykk av hva som venter dem i dag.

Den tilbyr blant annet funksjoner: støtte for dra og slipp, 3 typer reservasjonssystem, en ganske intuitiv håndtering, fullstendig tilpasning av utformingen og mye mer.

Last ned | dEMO | Webhotell

• Hva er forskjellen mellom en blogg og et nettsted?
• Hvordan kopiere og lime inn tekst i WordPress uten formateringsproblemer
• SEO benchmarking: Konkurransedyktig analyse
• 5 WordPress-plugins for å godta PayPal-betalinger