Hoe Flipbox Overlays en Hovers te maken in WordPress - DeLaatbusiness

Hoe Flipbox Overlays en Hovers te maken in WordPress

6 min


109
6 gratis internet marketing ebooks, klik hier voor download

Wilt u flipbox-overlays en afbeelding-hover-effecten toevoegen aan uw WordPress-site?

Zelfs als u een WordPress-thema van hoge kwaliteit gebruikt, voelt u zich misschien beperkt door aanpassingsopties. Flipboxes en afbeelding zweeftoestellen voegen opvallende geanimeerde effecten toe aan uw site.

In dit artikel laten we u zien hoe u flip-box-overlays en afbeeldingshovers aan uw WordPress-site kunt toevoegen.

Hoe flipbox-overlays en zweeftoestellen te maken in WordPress

Wat is een flipbox?

Een flipbox is een doos die omklapt als u er met de muis overheen beweegt. U kunt dit animatie-effect voor zweven toevoegen aan specifieke delen van uw website, inclusief tekstvakken en afbeeldingen.

Flipbox Demo-animatie

De term komt van de unieke “flip” -functie die optreedt wanneer de muis over de afbeelding beweegt. U kunt bepalen hoe de afbeelding wordt omgedraaid, samen met de informatie en het ontwerp van beide zijden van de afbeelding.

Als uw website relatief statisch is, kunt u een flipbox-effect gebruiken om het interactiever te laten aanvoelen.

U kunt bijvoorbeeld een flipbox met afbeelding met aanwijseffect toevoegen aan een pagina met productprijzen. Op die manier wordt de prijs weergegeven wanneer gebruikers de muisaanwijzer over uw prijsniveaus bewegen.

Of, als je een freelancer bent , kun je logo’s toevoegen van het bedrijf waarmee je hebt gewerkt met die flip en een link naar elk project.

Hoewel deze geanimeerde effecten de gebruikerservaring van uw website kunnen verbeteren, is het belangrijk om niet overboord te gaan.

Denk aan het flipbox-effect als het toevoegen van kruiden aan een maaltijd. Het is er om de bestaande smaken en ingrediënten te versterken, maar te veel en het zal het gerecht verpesten.

Dat gezegd hebbende, laten we eens kijken hoe u flipbox-overlays en afbeelding-hover-effecten kunt toevoegen aan uw WordPress-blog of -website.

Flipbox-overlays en zweefeffecten maken in WordPress

U kunt flipboxen en hover-effecten aan uw WordPress-site toevoegen met behulp van vele methoden, zoals de Elementor- paginabuilder of door aangepaste CSS toe te voegen .

De aanpak die we echter aanbevelen, is het gebruik van de Flipbox – Awesomes Flip Boxes Image Overlay- plug-in. Deze plug-in is flexibel en gemakkelijk te gebruiken. Het is de beste WordPress-plug-in voor flipbox en afbeelding hover.

De gratis versie van de plug-in biedt u snelheid en eenvoud. Zodra de plug-in is geïnstalleerd, kunt u snel mooie flip-boxen aan uw site toevoegen.

Als je meer aanpassingsopties nodig hebt, wil je misschien upgraden naar de premiumversie van de plug-in. Hiermee kunt u de kleuren van uw flipboxen regelen en aangepaste CSS toevoegen.

Het kan zijn dat bestaande sjablonen er al geweldig uitzien wanneer ze aan uw site worden toegevoegd. In dit geval hoeft u niet te upgraden.

Het eerste dat u moet doen, is de plug-in Flipbox – Awesomes Flip Boxes Image Overlay installeren en activeren .

Zodra de plug-in is geïnstalleerd en geactiveerd, kunt u uw eerste flipbox maken door naar Flip Box »Nieuw maken te gaan .

Maak een nieuwe flipbox

Dit brengt de volledige selectie sjablonen naar voren.

Als dat niet genoeg is, kunt u op de menu-optie ‘Sjablonen importeren’ klikken voor nog meer sjablonen die u kunt gebruiken.

Importeer een flipbox-sjabloon

Met de gratis versie van de plug-in zijn er 5 verschillende sjablonen waaruit u kunt kiezen, plus nog eens 10 sjablonen die u kunt importeren.

Om een ​​nieuwe aanpasbare sjabloon te importeren, klikt u op de knop ‘Importeren’ naast het stijlnummer.

Flipbox klik op de importknop

Nu is het tijd om uw sjabloon te selecteren en aan te passen.

U moet op ‘Stijl maken’ klikken om uw eerste flipbox-ontwerp te laden.

Dit zal een pop-upmenu openen waarin je je flipbox een naam kunt geven en kunt kiezen welke lay-out je wilt aanpassen.

Kies welke flipbox je wilt aanpassen

De 1e, 2e, 3e ‘Layouts’ opties komen overeen met de individuele flipboxen in de layout. Klik op ‘Opslaan’ als u uw keuzes heeft gemaakt.

Het is belangrijk om te vermelden dat uw uiteindelijke ontwerp nauw aansluit bij het flipbox-sjabloon, dus u kunt het beste een sjabloon kiezen die lijkt op hoe u het eruit wilt zien op uw website.

Er zijn drie hoofdtabbladen die u kunt gebruiken om het uiterlijk van uw flipbox te wijzigen: ‘Algemeen’, ‘Voorkant’ en ‘Backend’.

Flipbox algemene instellingen menu

Op elk van deze tabbladen kunt u de lettertypen, opvulling en marges wijzigen. Maar we denken dat de standaardopties er al geweldig uitzien.

Vervolgens veranderen we de tekst aan beide zijden van de flipbox.

Plaats de muisaanwijzer op de flipbox onder aan het scherm en klik op ‘Bewerken’.

Flipbox voorbeeld tekst bewerken

Hierdoor wordt een pop-upvenster geopend waarin u de tekst vooraan, achteraan en achtergrondafbeelding kunt wijzigen.

Om de titel te wijzigen, bewerkt u het tekstvak ‘Titel voor’ en het vak ‘Lettertype-pictogram:’ als u een ander pictogram wilt weergeven.

Wijzig de titel en het pictogram van de voorkant van de flipbox

Als je een achtergrondafbeelding wilt toevoegen, klik dan op ‘Afbeelding uploaden’ rechts van de optie ‘Afbeelding voorzijde’.

Upload vervolgens een nieuwe afbeelding of selecteer een afbeelding uit uw bestaande mediabibliotheek.

Upload de achtergrondafbeelding voor de flipbox

Daarna volg je dezelfde reeks stappen voor de achterkant van de flipbox onder de ‘Backend-instellingen’.

Hier kunt u de titel en tekst wijzigen die worden weergegeven wanneer de kaart wordt omgedraaid.

Verander de backend flipbox-tekst

U kunt ook de velden ‘Backend Button text’ en ‘Link’ wijzigen.

Deze veranderen de knoptekst en waar uw gebruikers naartoe gaan als erop wordt geklikt.

Voeg backend flipbox-knop en link toe

Klik ten slotte op ‘Nu uploaden’ om de achtergrondafbeelding op de achterkant van de flipbox te wijzigen.

Hetzelfde als hierboven, u kunt een afbeelding uploaden of er een uit uw mediabibliotheek selecteren.

Upload de achtergrondafbeelding van de backend

Als u klaar bent met bewerken, klikt u op de knop ‘Verzenden’ om uw wijzigingen op te slaan.

Je zult merken dat je nieuwe wijzigingen meteen in het ‘Preview’-venster verschijnen.

Als je een hele rij flipboxen wilt maken, klik dan op het pictogram ‘+’ in de metabox ‘Nieuwe flipboxen toevoegen’.

Voeg een rij flipboxen toe

Dit zal een pop-upvenster openen dat lijkt op het bovenstaande waarmee u uw tweede flipbox kunt aanpassen.

Je hebt nu je flipboxen gemaakt en aangepast, dus het is tijd om ze toe te voegen aan je WordPress-site .

De eenvoudigste manier om dit te doen, is door de meegeleverde shortcode te gebruiken . Aan de rechterkant van je scherm is er een metabox met de naam ‘Shortcode’, kopieer de shortcode die lijkt op de afbeelding hieronder.

Kopieer de shortcode van de flipbox

Navigeer vervolgens naar een pagina of bericht waar je de flipbox wilt toevoegen en plak je shortcode.

Klik vervolgens op ‘Publiceren’ of ‘Bijwerken’ als uw bericht al live is.

Plak de shortcode van de flipbox

Uw nieuwe flipboxen staan ​​nu live op uw site.

Merk op dat wanneer u het formaat van uw browservenster wijzigt, de flipboxen zich aanpassen omdat ze 100% responsief zijn.

Flipbox live WordPress-weergave

Deze plug-in bevat ook een flipbox- widget die u kunt toevoegen aan elk widgetgebied dat door uw thema wordt ondersteund.

Om dit te doen navigeer je naar Appearance »Widgets en zoek je de widget met de titel ‘Flipbox – Awesomes Flip Boxes Image Overlay’.

Flipbox-widget toevoegen

Vervolgens kunt u de widget naar uw gewenste locatie slepen en neerzetten.

Voer ten slotte de stijl-id in, die te vinden is in het hoofdmenu van de Flipbox-plug-in, en klik op ‘Opslaan’.

Flipbox widget-id

We hoopten dat dit artikel je heeft geholpen om te leren hoe je flipbox-overlays en hovers aan je WordPress-site kunt toevoegen.


What's Your Reaction?

hate hate
0
hate
confused confused
0
confused
fail fail
0
fail
fun fun
0
fun
geeky geeky
0
geeky
love love
0
love
lol lol
0
lol
omg omg
0
omg
win win
0
win
Erwin@delaatbusiness.com
Dag, Hulp nodig met internet marketing of websites maken? neem dan contact op

0 Comments

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Choose A Format
Personality quiz
Series of questions that intends to reveal something about the personality
Trivia quiz
Series of questions with right and wrong answers that intends to check knowledge
Poll
Voting to make decisions or determine opinions
Story
Formatted Text with Embeds and Visuals
List
The Classic Internet Listicles
Countdown
The Classic Internet Countdowns
Open List
Submit your own item and vote up for the best submission
Ranked List
Upvote or downvote to decide the best list item
Meme
Upload your own images to make custom memes
Video
Youtube, Vimeo or Vine Embeds
Audio
Soundcloud or Mixcloud Embeds
Image
Photo or GIF
Gif
GIF format