En af de eksklusive landingssider, som mange leverer til deres abonnenter i løbet af Cyber ​​​​Monday-perioden, er den fantastiske landingsside for softwareudgivelser. Dette layout har fantastiske illustrationer og en unik brug af sektionsopdelere, der vil imponere læserne. besøgende.

cyber monday.jpg

Sådan får du den eksklusive destinationsside til softwareudgivelse til Cyber ​​Monday

Før du springer ind i denne brug, skal du gøre dig bekendt med den eksklusive Cyber ​​Monday-landingsside, som du kan få ved at blive et nyt Elegant Themes-medlem, opgradere din eksisterende konto eller allerede være et helt medlem. med os. Hvis du allerede er et livslang medlem, kan du logge ind på vores medlemsområde og downloade alle vores eksklusive sider her. Alle andre brugere skal bruge knappen nedenfor til at købe eller opgradere, før de kan gennemføre resten af ​​vores tutorial.

Allerede et livsmedlem? Du kan downloade pakken nu, ikke nødvendigt at deltage i Cyber ​​Monday-aftalen!

Sådan opretter du en kontekstuel demo-video på Divi

Når du har downloadet den nye softwareversions destinationsside fra vores medlemsområde, kan du fortsætte med at læse følgende.

I brugen af ​​denne tutorial viser vi dig, hvordan du opretter en videodemo med et klik på en knap. Videoen, der vises ved klik, vil se godt ud på skrivebordet og små skærme. Dette er en fantastisk tilgang, hvis du ikke ønsker at inkludere en video direkte på din side, men foretrækker at skabe interaktion med besøgende.

undersøgelse

Før vi dykker ned i vejledningen, lad os se på slutresultatet i forskellige skærmstørrelser.

kontor

slutresultat divi video popup.gif

Mobil

resultat mobile video popup divi.gif

Lad os starte!

Brug det gratis Video PopUp plugin

Installer og aktiver plugin

Den første ting at gøre er at downloade plugin gratis Video PopUp . Du kan finde dette plugin ved at gå til din websted WordPress > Plugins > Tilføj nyt > Søg efter 'Video PopUp'. Når du har fundet dette plugin, skal du installere det. Når du er færdig, skal du sørge for at aktivere pluginet.

video popup.jpg

Plugin-indstillinger

Fortsæt med at gå til de generelle indstillinger for dette plugin og aktivere de to indstillinger øverst.

konfigurationsvideo popup.jpg

Tilføj en ny side ved hjælp af destinationsversionen af ​​softwareversionen

Tilføj en ny side og aktiver brug af Visual Builder

Det er tid til at begynde at omsætte tingene i praksis! Tilføj en ny side, giv din side en titel og aktiver straks Visual Builder.

oprette en ny side divi.jpg

Download et softwareversionslayout fra gemte layout

Gå til "Dine gemte layout", og download den destinationsside, du har uploadet.

uploadet layout divi.jpg

Tilføj et tekstmodul under Blurb-modulet på afspilningsknappen

Som du kan se, har siden allerede en afspilningsknap, der hjælper os med at opnå det ønskede resultat. Men for at dette skal fungere, er vi nødt til at genskabe designet i Blurb-modulet ved hjælp af et tekstmodul. Tilføj et nyt tekstmodul lige under Blurb-modulet.

Tilføj tekst over blurb.jpg modulet

Føj et billede til indholdsområdet

Når du har tilføjet tekstmodulet, skal du fortsætte og tilføje billedet til afspilningsknappen til indholdsområdet i dit tekstmodul ved at klikke på " Tilføj et medie Og vælge afspilningsknappen på dit mediebibliotek.

Tilføj et medie for at blurb divi.jpg

Vælg et billede divi.jpg

Føj en kopi til indholdsområdet

Fortsæt med at tilføje en kopi lige under billedet.

duplikat blurb.jpg modul

Tekstindstillinger

For at få modulet til at matche layoutet aktiverer vi den centrale tekstretning i modulets tekstindstillinger.

aktiver central orientering.jpg

Standardindstillinger for linktekst

Og vi vil også ændre parametre for linketeksten i overensstemmelse hermed:

  • Link skrifttype: Cabin
  • Link skrifttype vægt: fed
  • Link Tekstfarve: rgba (162,176,193,0.7)
  • Link tekststørrelse: 17px
  • Højde på linklinjen: 1.6em

design menu link divi.jpg

Hold markøren over tekstindstillingerne

Ændre farven på hoverteksten.

  • Linktekstfarve: # a2b0c1

ændre farven på divi.jpg linket

afstand

Endelig tilføj også en negativ topmargin til tekstmodulet.

  • Top Marign: -20vw

sæt en top margin divi.jpg

Tilføj en kontekstuel læsning til indholdet af tekstmodulet

Skift til teksteditoren

For at oprette pop op-vinduet ved klik skal vi tilføje et tilpasset link til indholdet af tekstmodulet. Gå tilbage til tekstmodulets indholdsområde, og vælg tilstanden Teksteditor.

rediger tekstmodulet i tekstredigeringsmodus divi.jpg

Tilføj et link til alt indhold

Link dit indholdspot til pop op-vinduet ved at tilføje et link til billedet og kopien. Sørg for at udskifte linkwebadressen med din egen.

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

Tilføj et link et billede med en video divi.jpg

Fjern blurb-modulet fra afspilningsknappen

Nu hvor vi har oprettet en tekstmod, der ser nøjagtig den samme ud som Blurb-moden, kan vi fjerne den Blurb-mod, der eksisterede før, og det er det! Du kan anvende denne metode på enhver form for layout, du bruger, men det er virkelig en stor merværdi for softwareversionens destinationsside.

slet det ubrugte blurb-modul divi.jpg

endelige tanker

Som du kan se, er det ret simpelt at tilføje en popup på Divi ved hjælp af Video Popup-plugin. Dette giver dig mulighed for at præsentere videoer på din blog uden automatisk at skulle integrere det i indholdet.