Punteffect toevoegen aan een kolom in Elementor

Wil je een punteffect toevoegen aan een kolom in Elementor?

Elementor is perfect voor maak een website, waarbij de nadruk ligt op design. In Elementor kunt u animatie-effecten toevoegen om uw website interactiever te maken.

Een van de animatie-effecten die u aan een door Elementor aangedreven pagina kunt toevoegen, is een punteffect. U kunt een punteffect toevoegen aan een sectie, kolom of widget.

Dit artikel laat je zien hoe je een score toevoegt aan een kolom in Elementor. Trouwens, als je nieuw bent bij Elementor, kun je ons vorige artikel raadplegen om erachter te komen hoe Elementor te installeren.

Punteffect toevoegen aan een kolom in Elementor

In Elementor is kolom een ​​verplicht element. Hier kunt u widgets toevoegen - de eigenlijke ontwerpelementen om uw pagina te maken. Net als bij andere soorten elementen in Elementor, kunt u ook een kolom aanpassen om deze elegant te maken.

U kunt een effen kleurachtergrond, afbeeldingsachtergrond, schaduw toevoegen voor een zweefeffect. Met het ingebouwde zweefeffect van Elementor kun je een andere achtergrond, een andere rand en een andere slagschaduw gebruiken bij het aanwijzen.

Om te beginnen met het toevoegen van een punteffect aan een kolom in Elementor, klikt u eerst op de handgreep van de kolom waaraan u het punteffect wilt toevoegen om naar het paneel met kolominstellingen te gaan.

Ga in het instellingenpaneel (paneel aan de linkerkant) naar het tabblad Style  en open het blok Achtergrond. In het laatste kun je het tabblad openen AU OVERZICHT om een ​​andere achtergrond voor de aanwijsstatus in te stellen.

U kunt een effen achtergrondkleur, een verloopkleurachtergrond of een afbeeldingsachtergrond gebruiken. U kunt de overgangsduur (de overgang van de normale staat naar de aanwijsstand) ook instellen in set de optie Overgangsduur.

Om een ​​andere rand en een andere doosschaduw in te stellen op de aanwijsstatus, kun je het blok openen Grens. Klik op het tabblad OVERZICHT  van dat blok en stel de randstijl, randgrootte, randkleur, randradius en gebiedschaduw in voor de aanwijsstatus.

Een geavanceerd zweefeffect toevoegen aan een kolom in Elementor

Anders divi BuilderElementor gebruikt de CSS-transformatie niet voor het zweefeffect. Daarom kunt u alleen eenvoudige zweefeffecten toevoegen. Maar net als Elementor (de pro-versie) jij stelt u in staat om aangepaste CSS toe te voegen, kunt u aangepaste CSS gebruiken om CSS-transformatie toe te voegen om een ​​geavanceerd zweefeffect toe te voegen.

Rollover-effecten worden gemaakt met behulp van de CSS-transformatie. Om een ​​CSS-transformatie aan een kolom toe te voegen, gaat u eerst naar het tabblad Geavanceerd en open het blok Aangepaste CSS (zorg ervoor dat het instellingenpaneel in de kolominstellingenpaneelmodus staat). Voeg de volgende CSS-code toe.

De code :

selector: hover {overgang: alle .2s gemak-in-uit; transformeren: schaal (1.1); cursor: punt; z-index: 1; }

• Matrix
• Vertalen
• Scale
• Roteren
• scheef

De bovenstaande CSS-code gebruikt de schaaltransformatie. Je kunt het eenvoudig vervangen door elke gewenste transformatiestijl.

lezen cette page voor meer informatie over de CSS-transformatie.

1. Visuele restaurantreservering

Maak het systeem online boeken van uw restaurant- of caféwebsite, dankzij deze uitstekende premium WordPress-plug-in. Met de laatste heb je de mogelijkheid om zelf tafels en stoelen te maken op het rooster dat deze plug-in biedt en je klanten de gratis te laten reserveren, dit is het belangrijkste kenmerk van deze plug-in en wat het onderscheidt van de andere plug-ins in deze lijst.

Met slepen en neerzetten kunt u verschillende soorten tafels naar het raster van uw restaurant slepen en het maximale aantal stoelen voor elke tafel en het aantal tafels berekenen. Bezoekers van uw restaurant kunnen kies de vorm van de tafel die ze verkiezen en de locatie van de tafel ten opzichte van de andere tafels in het raster.

Hier voor jou 5 WordPress plug-ins om categoriebeschrijvingen en labels te optimaliseren

De klanten van uw restaurant zullen deze keuze graag op internet maken in plaats van reizen. Met deze plug-in kunnen ze een idee krijgen van wat hen vandaag te wachten staat.

Het biedt onder meer: ​​ondersteuning voor slepen en neerzetten, 3 soorten reserveringssysteem, een redelijk intuïtieve bediening, volledige aanpassing van de lay-out en nog veel meer.

Downloaden | demonstratie | web hosting

• Wat is het verschil tussen een blog en een website?
• Tekst kopiëren en plakken in WordPress zonder opmaakproblemen
• SEO-benchmarking: concurrentieanalyse
• 5 WordPress-plug-ins om PayPal-betalingen te accepteren