Een van de exclusieve bestemmingspagina's die velen tijdens de Cyber ​​​​Monday-periode aan hun abonnees aanbieden, is de geweldige bestemmingspagina voor softwarereleases. Deze lay-out bevat geweldige illustraties en een uniek gebruik van sectieverdelers die lezers zullen verbazen. bezoekers.

cyber maandag

Hoe u de exclusieve bestemmingspagina voor de softwareversie voor Cyber ​​Monday kunt krijgen

Voordat u met dit gebruik begint, moet u zich vertrouwd maken met de exclusieve Cyber ​​Monday-bestemmingspagina die u kunt krijgen door een nieuw Elegant Themes-lid te worden, uw bestaande account te upgraden of al levenslang lid te zijn. met ons. Als u al een levenslang lid bent, kunt u inloggen op ons ledengedeelte en al onze exclusieve pagina's hier downloaden. Alle andere gebruikers moeten de onderstaande knop gebruiken om te kopen of te upgraden voordat ze de rest van onze tutorial kunnen voltooien.

Ben je al levenslang lid? U kunt het pakket nu downloaden, u hoeft niet deel te nemen aan de Cyber ​​Monday-deal!

Hoe maak je een contextuele demovideo op Divi

Nadat u de nieuwe bestemmingspagina voor de softwareversie uit ons ledengedeelte hebt gedownload, kunt u verder lezen.

In de use case van deze tutorial laten we u zien hoe u met één klik op de knop een videodemo kunt maken. De video die bij klikken verschijnt, ziet er geweldig uit op desktops en kleine schermen. Dit is een geweldige aanpak als u een video niet rechtstreeks op uw pagina wilt opnemen, maar er liever interactie mee wilt creëren bezoekers.

overzicht

Voordat we in de tutorial duiken, kijken we eerst naar het eindresultaat in verschillende schermformaten.

Bureau

eindresultaat divi video popup.gif

Mobile

resultaat mobiele video popup divi.gif

Laten we beginnen!

Gebruik de gratis Video PopUp-plug-in

Installeer en activeer de plug-in

Het eerste wat je moet doen is het downloaden van inpluggen  en is gratis Video PopUp . U kunt deze plug-in vinden door naar uw website WordPress > Plugins > Nieuwe toevoegen > Zoeken naar 'Video PopUp'. Zodra u deze plug-in hebt gevonden, installeert u deze. Als u klaar bent, moet u de plug-in activeren.

video popup.jpg

Plugin instellingen

Ga verder door naar de algemene instellingen van deze plug-in te gaan en de twee opties bovenaan te activeren.

configuratie video popup.jpg

Voeg een nieuwe pagina toe met behulp van de bestemmingspagina van de softwareversie

Voeg een nieuwe pagina toe en schakel de Visual Builder in

Het is tijd om dingen in praktijk te brengen! Voeg een nieuwe pagina toe, geef je pagina een titel en activeer direct Visual Builder.

maak een nieuwe pagina divi.jpg

Download een lay-out van de softwareversie uit opgeslagen lay-outs

Ga naar "Uw opgeslagen lay-outs" en download de bestemmingspagina die u heeft geüpload.

geüploade lay-out divi.jpg

Voeg een tekstmodule toe onder de Blurb-module van de afspeelknop

Zoals u kunt zien, heeft de pagina al een afspeelknop waarmee we het gewenste resultaat kunnen bereiken. Maar om dit te laten werken, moeten we het ontwerp in de Blurb-module opnieuw maken met behulp van een tekstmodule. Voeg een nieuwe tekstmodule toe net onder de Blurb-module.

voeg tekst toe boven de module blurb.jpg

Voeg een afbeelding toe aan het inhoudsgebied

Nadat u de tekstmodule heeft toegevoegd, kunt u doorgaan en de afbeelding van de afspeelknop toevoegen aan het inhoudsgebied van uw tekstmodule door op ' Voeg een medium toe En het selecteren van de afspeelknop in uw mediabibliotheek.

Voeg een medium toe aan blurb divi.jpg

kies een foto divi.jpg

Voeg een kopie toe aan het inhoudsgebied

Ga verder door een kopie net onder de afbeelding toe te voegen.

duplicate blurb.jpg module

Tekst instellingen

Om de module aan te passen aan de lay-out, zullen we de centrale tekstoriëntatie inschakelen in de tekstinstellingen van de module.

activeer centrale orientation.jpg

Standaard linktekstinstellingen

En we zullen ook de parameters van de linktekst dienovereenkomstig aanpassen:

  • Linklettertype: cabine
  • Gewicht koppelingsletter: vet
  • Tekstkleur link: rgba (162,176,193,0.7)
  • Tekstgrootte koppelen: 17px
  • Hoogte van de verbindingslijn: 1.6em

ontwerp menu link divi.jpg

Beweeg over tekstinstellingen

Wijzig de kleur van de zweeftekst.

  • Tekstkleur koppelen: # a2b0c1

verander de kleur van de divi.jpg link

tussenruimte

Voeg ten slotte ook een negatieve bovenmarge toe aan de tekstmodule.

  • Top Marign: -20vw

stel een bovenmarge in divi.jpg

Voeg een contextuele lezing toe aan de inhoud van de tekstmodule

Schakel over naar de teksteditor

Om de pop-up bij het klikken te maken, moeten we een aangepaste link naar de inhoud van de tekstmodule toevoegen. Keer terug naar het inhoudsgebied van de tekstmodule en selecteer de modus Teksteditor.

bewerk de tekstmodule in de tekstbewerkingsmodus divi.jpg

Voeg een link toe naar alle inhoud

Koppel uw contentspot aan de pop-up door een link naar de afbeelding en de kopie toe te voegen. Zorg ervoor dat u de link-URL vervangt door uw eigen URL.

<a class="vp-s vp-yt-type" href="https://www.youtube.com/watch?v=zesTKCnvyAU" data-dwrap="1"></a>

voeg een link toe een afbeelding met een video divi.jpg

Verwijder de Blurb-module van de afspeelknop

Nu we een tekstmod hebben gemaakt die er precies hetzelfde uitziet als de Blurb-mod, kunnen we de eerder bestaande Blurb-mod verwijderen en dat is alles! U kunt deze methode toepassen op elk type lay-out dat u gebruikt, maar het is echt een grote toegevoegde waarde voor de bestemmingspagina van de softwareversie.

verwijder de ongebruikte blurb-module divi.jpg

Final gedachten

Zoals u kunt zien, is het toevoegen van een pop-up aan Divi met behulp van de Video Popup-plug-in vrij eenvoudig. Hiermee kunt u video's presenteren jouw blog zonder dat het automatisch in de inhoud hoeft te worden geïntegreerd.