Hallo vrienden! Ik stel voor dat we erover praten modale vensters maken in WordPress. Pop-upvensters (modale vensters) breiden de mogelijkheden van de site aanzienlijk uit. Heeft u een boodschap of advertentie die iedere websitebezoeker zou moeten zien? Wilt u uw campagne zichtbaar maken? Wilt u een pop-upregistratieformulier op uw website maken of een formulier voor het delen van inhoud op sociale netwerken? Creëer een modaal venster!
Pop-upmodaliteiten zijn ontworpen om de aandacht te trekken. Ze verschijnen op de pagina, blokkeren de hoofdinhoud en dwingen de gebruiker om vertrouwd te raken met hun inhoud (tekst, video, call-to-action, enz.).
Aandacht! Laat u niet intimideren door de lengte van deze les - er zijn geen problemen bij het maken van modale vensters (lees en ontdek het zelf), ik beschrijf elke stap gewoon in detail.
Algoritme voor het maken van modale vensters in WordPress
WordPress heeft geen ingebouwde tools voor het werken met pop-ups. We ontwerpen en personaliseren ze met behulp van een plug-in Pop-upmaker. Laten we bijvoorbeeld een modaal venster maken met een video, pop-up wanneer u op een knop klikt(u kunt het later configureren automatisch verschijning).
- Installeren Popup Maker-plug-in. Activeren zijn. Laat me je eraan herinneren: we hebben geleerd hoe je plug-ins installeert.
- Zoek de sectie in het zijmenu aan de linkerkant van het beheerderspaneel Pop-upmaker en ga naar de subsectie ervan Pop-up toevoegen.
- De modale venstereditor wordt geopend. Voer de naam van het venster in het veld bovenaan de pagina in (de naam wordt alleen weergegeven in het beheerderspaneel - gebruikers zien deze niet).
- Bedenken venster titel(zal zichtbaar zijn voor gebruikers) en voer dit in het veld boven de knop in Mediabestand toevoegen.
- In het blok Voorwaarden Selecteer uit het vervolgkeuzemenu de pagina's (categorieën) waarop het venster zal verschijnen. Of de plug-in zou moeten werken op alle pagina's van de site, selecteer Formaat: Alles.
- Voeg toe aan het grote veld onder de werkbalk tekst, afbeeldingen, video of audio– alle inhoud die in het pop-upvenster wordt weergegeven. In het beschouwde voorbeeld heb ik de code voor een video van YouTube toegevoegd (we hebben het toevoegen van video's aan een WordPress-site bestudeerd).
- In het blok Triggers Er zijn instellingen voor het handmatig of automatisch openen (zelfactivering) van het pop-upvenster. In ons voorbeeld heb ik de waarde gekozen Klik op Openen.
- Geef dit hieronder aan pop-upgrootte(in pixels of percentages). Bij het kiezen van een optie Auto De plug-in past het modale venster automatisch aan.
- Vink het vakje in de regel aan Achtergrond uitschakelen zodat de sitepagina zichtbaar is achter het pop-upvenster (raad ik aan).
- Opgericht animatietype en snelheid(niet nodig: optimale waarden zijn standaard al ingesteld).
- Pas de positie van het venster op het scherm aan. Aanvankelijk positioneert de plug-in deze bovenaan in het midden.
- Eigendoms-waarde z-index, standaard ingesteld, hoeft doorgaans niet te worden gewijzigd.
- Selecteer opties om het pop-upvenster te sluiten. Vink de selectievakjes aan in de regels met "vogels" Klik op Overlay om te sluiten(het venster wordt gesloten als u op de achtergrond eromheen klikt), Druk op F4 om te sluiten(het raam sluit met de sleutel F4), Druk op ESC om te sluiten(het raam sluit met de sleutel ESC). Om sitebezoekers niet te irriteren met de puzzel van het sluiten van het modale venster, raad ik aan alle vakjes aan te vinken.
- Klik Publiceren. Gefeliciteerd, uw modale venster is aangemaakt!
Over het aanpassen van het pop-upvensterontwerp
Om het ontwerp van het gemaakte modale venster te wijzigen, gaat u naar de subsectie Thema sectie Pop-upmaker zijmenu van het beheerderspaneel (links). 
Configureer in de editor die wordt geopend gewenste vensterachtergrond, kleur En lettergroottes, opvulling, schaduwen, knop naam sluitend. De smaak en kleur... weet je, dus ik zal niet in detail treden over het aanpassen van het ontwerp van het pop-upvenster. Als je vragen hebt, stel ze dan in de reacties.
Hoe u een pop-upvenster instelt
Weet je nog dat we de functie van het automatisch openen van een modaal venster niet hebben ingeschakeld in de plug-ininstellingen? Daarom moeten we uitzoeken hoe ons raam zal openen. Laten we een venster instellen dat verschijnt wanneer u op een link, afbeelding of knop klikt.
De Popup Make-plug-in wijst elk venster toe twee unieke CSS-klassen. Als u een van deze klassen aan een webpagina-element toevoegt, wordt er een modaal venster geopend als u op dit element klikt.
Waar en hoe je Instagram-reacties kunt stimuleren – alle methoden. Het portaal prijzenmm.com ontdekte wat goedkoper en beter is: zelf meer reacties op Instagram genereren, met programma's, in ruil ontvangen of een dienst bestellen op de SMM-service. Voor- en nadelen van elke methode.
Voorbeelden van het toevoegen van CSS-code voor een modaal venster aan een link, afbeelding en knop:
< a href = "#" class = >Modaal venster openen< / a >Er verschijnt een modaal venster wanneer u op de afbeelding klikt
< img src = "popup-primer.jpg" class = "popmake-obrazets-modalnogo-okna"/ >Modaal venster wordt geactiveerd na klikken op de knop
< button class = "popmake-obrazets-modalnogo-okna"> Modaal venster openen< / button >Klik op het HTML-element nadat u er een CSS-klasse aan heeft toegevoegd popmake-obrazets-modalnogo-okna. Een modaal venster dat vergelijkbaar is met dit zou moeten verschijnen: 
Is het verschenen? Geweldig! Nu kunt u pop-upvensters configureren. Als het venster niet opent, beschrijf het probleem dan in de opmerkingen - we zullen het samen lanceren!
Heeft u vaak pop-ups op websites opgemerkt? Zo laten de meeste internetbronnen, vooral nieuws- en blogsites, bezoekers pop-up- of pop-upvensters zien met deze of gene informatie. Waarom zijn ze überhaupt nodig? Doorgaans helpt hun aanwezigheid bezoekers om te zetten in abonnees (dat wil zeggen vaste gebruikers). Volgens internetmarketeers komt het grootste percentage van de conversies uit pop-upvensters, als deze uiteraard correct zijn geconfigureerd. Als dergelijke vensters uur na uur voor de ogen van de bezoeker "uitvliegen", is het natuurlijk duidelijk dat hij zo'n site zal verlaten en niet meer wil terugkeren.
Hoe pop-ups instellen in WordPress?
De “engine” biedt standaard niet de mogelijkheid om pop-upvensters te maken en te configureren. Daarom zullen we een oplossing van derden gebruiken: de gratis Popup Maker-plug-in.
Popup Maker-plug-in
Dus na het installeren en activeren van de plug-in zien we onmiddellijk het welkomstvenster. Om te beginnen met werken, drukt u op de knop Overslaan.
Als gevolg hiervan wordt u naar het hoofdvenster gebracht waar u pop-upvensters kunt maken.
Om een pop-upvenster te maken, klikt u op de knop Pop-up toevoegen, waarna u naar de pagina voor het maken van een pop-upvenster wordt gebracht.
Hier moet u de volgende gegevens invoeren. Voer in de eerste twee invoervelden de naam en titel van ons venster in. Houd er rekening mee dat u willekeurige tekst in de titel kunt invoeren, aangezien deze nergens wordt weergegeven.
Blok Voorwaarden omvat het instellen van de locatie van het pop-upvenster. Zoals u kunt zien, is er een vrij grote selectie aan parameters waarmee u de weergave flexibel kunt aanpassen (op alle pagina's van de site, alleen op de hoofdpagina, in categorieën, enz.). Bovendien is het mogelijk om de weergave uit te schakelen weergave van het pop-upvenster op mobiele apparaten en tablets (settings Schakel deze pop-up uit op mobiele apparaten En Schakel deze pop-up uit op tablets respectievelijk).
In het instellingenblok Het opzetten van een thema U kunt een van de visuele vensterthema's kiezen die door de plug-in worden aangeboden.
Blok Toon instellingen Hiermee kunt u de grootte van het pop-upvenster instellen.
Instellingen Achtergrond uitschakelen Hiermee kunt u de achtergrond onder het pop-upvenster weergeven of verbergen.
Blok Animatie Hiermee kunt u de snelheid van uw venster instellen, evenals animatie-effecten (vervagen, vergroten, enz.)
In het blok Positie U kunt een locatie op het scherm selecteren waar uw pop-upvenster wordt weergegeven.
Dus nadat alle instellingen zijn gemaakt, moet u op de knop klikken Publiceren.
Ons pop-upvenster is gemaakt en kan nu op de website worden bekeken.
Onlangs werd ik voor één site gevraagd om een feedbackformulier voor WordPress te maken in een modaal venster. Dat wil zeggen dat wanneer de gebruiker op de link "schrijf ons" klikt, in plaats van naar de overeenkomstige pagina te gaan, een nieuw pop-upvenster moet worden geopend, waarin de functie van het verzenden van een bericht zich zal bevinden. Dit is een meer interactieve oplossing, hoewel niet iedereen dit leuk vindt. Persoonlijk geef ik de voorkeur aan de klassieke implementatie met een contactpagina, maar de formulieren op sites zijn anders - dus het zal nuttig zijn om de oplossing voor dit probleem te overwegen. In mijn werk heb ik 2 plugins gebruikt: het bekende Contact Form 7 en de Easy Modal module om een modaal venster te creëren in WordPress.
Update 18-05-2017: Afgaande op de laatste beoordelingen in de repository kunnen er in sommige gevallen problemen zijn met de werking ervan. Als u hier ook last van heeft, probeer dan een nieuwe oplossing van de ontwikkelaars genaamd Popup Maker. Een ander alternatief kan worden overwogen.
Ik zal niet in detail treden over het installeren en configureren van Contact Form 7; alle informatie hierover vindt u hier. Op de blog stond ook een artikel over wat nuttig zou kunnen zijn.
Laten we meteen naar de Easy Modal-module gaan. Je zult hem vinden. De ontwikkelaars beweren dat dit de beste oplossing is voor het creëren van modale vensters op een website met verschillende interessante opties voor het presenteren van inhoud.
Meer dan 10.000 downloads, beoordeling 4,6. Geldige versies van 3.4 zijn 4.0.8, hoewel ik het met succes heb uitgevoerd op WP 4.3.1. Ondanks het feit dat de plug-in nu is omgezet in een nieuwe Popup Maker-oplossing, kun je op de website wordpress.org en bij het zoeken naar plug-ins in het admin-paneel nog steeds de gebruikelijke Easy Modal-versie 2.0.17 vinden. Aan de hand van zijn voorbeeld zal ik u vertellen over het maken van een modaal feedbackvenster in WordPress.
Na de installatie verschijnt een sectie met dezelfde naam, waar er verschillende items zijn. We hebben de allereerste nodig - Modalen. Klik daar op de knop Nieuw toevoegen.
Met deze actie wordt een nieuw modaal venster voor uw WordPress-site gemaakt. De elementinstellingen hebben 4 tabbladen:
- Algemeen: algemene parameters.
- Weergaveopties - weergaveopties.
- Sluitingsopties - instellingen voor het sluiten van het venster (met een klik of de Esc-knop).
- Voorbeelden - voorbeelden van te gebruiken code.
Algemene instellingen omvatten de vensternaam (niet weergegeven op de site), de titel, inhoud en downloadtype. Voeg in het inhoudsblok, overschakelend naar de HTML-modus, de shortcode van uw feedbackformulier toe in het modale venster.
Belastingstype heeft 2 opties:
- Laad de hele site (voor de hele site).
- Per pagina/post (voor specifieke berichten en pagina's).
Een zeer interessante optie. Als u een pop-upvenster nodig heeft dat op alle pagina's van de site wordt weergegeven (de link bevindt zich bijvoorbeeld in de zijbalk), kies dan de eerste optie. In het tweede geval verschijnt het bijbehorende instellingenblok op de pagina's/berichten van de site tijdens het bewerken:
U kunt voor een bepaalde pagina uw eigen pop-upvenster activeren en selecteren. Als u het vakje niet aanvinkt, wordt het element niet op de site geladen.
Het tweede tabblad met de moduleparameters is Weergaveopties.
Hier geef je aan:
- venstergrootte - automatisch, gemiddeld, adaptief, klein, groot, enz.;
- achtergrond - u kunt een achtergrond voor het formulier gebruiken of deze zonder achtergrond weergeven;
- pop-upvensteranimatie;
- positie (locatie) - middenboven, rechtsonder, enz.; vast of niet;
- inkeping bovenaan het scherm.
Voorbeelden van het weergeven van de uitvoer van een modaal venster in WordPress met behulp van de Easy Modal-plug-in vindt u op het laatste tabblad.
Je moet deze code invoegen via een widget in de zijbalk of in een teksteditor. Het verschilt niet van andere HTML-code, het enige is dat de klasse van een specifiek modaal venster (eModal-1) hier wordt aangegeven. Voor het tweede element dat u hebt gemaakt, is de klasse eModal-2, enz. Om te voorkomen dat u een fout maakt bij het invoegen van de code, kunt u deze het gemakkelijkst vanaf deze pagina kopiëren.
Het thema van een modaal venster bewerken
In de Easy Modal-plug-in kunt u, naast instellingen voor een specifiek element, thema's voor pop-upvensters definiëren (Theme). De gratis basisversie van de module heeft slechts één sjabloon, maar dit is meer dan voldoende.
Deze tool heeft 6 tabbladen:
- Algemeen - geef de naam van het onderwerp aan;
- Overlay — achtergrond (hier kunt u de kleur en transparantie van de achtergrond van het formulier selecteren);
- Container - verschillende instellingen van het modale venster zelf (opvulling, frame, schaduw);
- Titel: titelparameters van het pop-upvenster (lettertype, schaduw);
- Inhoud — lettertype en kleur van teksten in het blok;
- Sluiten - formulierafsluitingselement (tekst en ontwerp).
Zoals u kunt zien, kan het uiterlijk worden aangepast aan uw wensen. Ik eindigde met dit eenvoudige WordPress-formulier in een modaal venster:
Vergeet na het instellen van alle instellingen niet om ze op te slaan (klik op de knop Opslaan).
Video over het toevoegen van Contactformulier 7 in de Easy Modal-pop-up
Ik heb trouwens een video gevonden over het werken met de Easy Modal-plug-in, waarin het proces wordt gedemonstreerd van het maken van een modaal feedbackvenster in WordPress. Daar is de module-interface enigszins verouderd (sommige instellingen zien er anders uit), maar je kunt de algemene essentie begrijpen. Misschien is het voor iemand gemakkelijker om dit probleem te begrijpen met behulp van een video.
Totaal over modale vensters voor WordPress
Zoals hierboven vermeld, is nu de Easy Modal-plug-in (te oordelen naar de officiële pagina) omgezet in Popup Maker. Ik heb een module met dezelfde naam in de repository gevonden, maar ik heb deze niet getest. Ik vertel je hierover zodat je weet waar je op moet letten als Easy Modal in WordPress in volgende versies plotseling niet meer werkt.
Beide oplossingen zijn gratis, hoewel er betaalde add-ons voor zijn. Hiermee kunt u de targeting aanpassen, meer ontwerpthema's toevoegen, analyses bevatten en enkele andere functies. Als u een geavanceerder modaal venstermechanisme nodig heeft, kunt u deze extensies eens nader bekijken.
Wat betreft de taak om het feedbackformulier van Contact Form 7 in een pop-upvenster te openen, zijn de basismogelijkheden van Easy Modal voldoende. Bovendien kan deze oplossing ook worden gebruikt om andere modale vensters in WordPress weer te geven: handige tips, aanvullende informatie, enz. Gezien de aanwezigheid van een editor voor het invoegen van HTML-code, kun je in het pop-upvenster video's, formulieren etc. weergeven. Kortom, een nuttige plug-in. Als je er vragen over hebt, schrijf dan in de reacties.
Sergej Arsentiev
Beste WordPress pop-upplug-in
Elke blog heeft foto's, en er zijn er behoorlijk veel en ze hebben verschillende breedtes. Tegelijkertijd verschijnen grote afbeeldingen op de pagina als miniaturen en als u erop klikt, wordt de hele afbeelding geladen. Er zijn speciale plug-ins voor WordPress waarmee afbeeldingen in een pop-upvenster kunnen worden geopend met een prachtig effect.
Slechts één probleem: deze plug-ins zijn behoorlijk wispelturig en niet iedereen zal op uw site willen ‘opduiken’. Ik heb veel plug-ins geprobeerd voordat ik er een vond die voor mij werkte.
WP Lightbox, Lightbox2, Fancybox, Jquery Lightbox en andere plug-ins werkten voor mij persoonlijk NIET.
Maar deze plug-in werkte onmiddellijk en zonder aanvullende instellingen of zoeken naar JavaScript-conflicten. Het is heel goed mogelijk dat het ook voor jou perfect werkt, dus ik raad je aan het meteen te proberen, vooral omdat het veel voordelen heeft.
Aandacht! Ik heb een nog coolere plug-in gevonden!
Ik heb een nog coolere en slimmere plug-in gevonden voor pop-upafbeeldingen en galerijen - Responsieve lightbox van dFactory. Je hoeft de rest dus niet te lezen, ik laat het als geschiedenis achter
De plug-in is volledig Russified, eenvoudige en noodzakelijke instellingen, hij werkt nog stabieler en beter.
Installeer het gewoon als een gewone WordPress-plug-in en alles zou moeten werken. Ik heb het op verschillende thema's getest, inclusief niet-standaard thema's met een uniek ontwerp en lay-out. Waar andere plug-ins aan de zijlijn stonden, werkte deze.
U kunt downloaden vanuit de repository https://ru.wordpress.org/plugins/responsive-lightbox/
5 minuten en alles werkt, veel succes!
Ter wille van de geschiedenis laat ik de vorige tekst staan:
Volgens recensies van sommige programmeurs op internet is deze pop-upplug-in een van de snelste om mee te werken, omdat hij de modernste JS-scripts gebruikt. In principe opent alles vrij snel, maar ik heb geen stopwatch gebruikt en de snelheid van verschillende plug-ins niet vergeleken. Maar het is in ieder geval fijn om te weten dat je “de snelste plugin” hebt
Een van de voor de hand liggende voordelen van Colorbox zijn de vele instellingen: ik heb ze zelfs in een aparte ondertitel geplaatst. Ik zal niet alles beschrijven, ik zeg alleen welke instellingen ik heb ingesteld, vooral omdat er beschrijvingen zijn van elke instelling.
Lightbox Plus Colorbox installeren en configureren
In het header.php-bestand vóór de afsluitende tag
In het footer.php-bestand vóór de afsluitende tag
