Beantwoord

Pop up Websitemaker

  • 16 augustus 2017
  • 5 reacties
  • 306 keer bekeken

Reputatie 3
Badge +1
  • WebsiteMaker Tester
  • 104 reacties
Hi,


Vraagje. Is het mogelijk om een soort van pop up te gebruiken op de WebsiteMaker (ik gebruik waarschijnlijk het verkeerde woord)? Zoals je bij sommige sites krijgt, dat je bijvoorbeeld alleen verder kunt lezen als je je e-mail adres invoert. Of het invoeren van je e-mail adres voor een gratis e-book.


Als je hier bv langer dan 30 sec op kijkt krijg je zo'n pop up; https://tim.blog/. Hier ook; http://okdork.com/. en https://appsumo.com/fieldbook/.

Bedankt alvast!
icon

Beste antwoord door SjorsK 17 augustus 2017, 19:54

Dit lijkt mij inderdaad een maatwerkoplossing die in geen enkel standaard pakket wordt aangeboden.

Wat men praktisch gezien doet is het volgende:

De volgende CSS class staat standaard aan voor de "code" die de "Site-takeover" laat zien:
code:

.Site_TakeOver_Disable {
display: none
}


Na 30 seconden wordt de volgende code voor ingeladen die de bovenstaande code "overruled'
code:

.Site_TakeOver_Show {
display: visible !important
}

Daarnaast moet je een Javascript oplossing hebben die de CSS class toevoegd, en een oplossing die er voor zorgt dat de CSS class na 30 seconden verwijderd moet worden.

De code ziet er ongeveer zo uit:
[code]
setTimeout(function() {
$('.article-read').addClass('.Site_TakeOver_Show');
},5000);

Het nummer is in miliseconden

Natuurlijk moet je ook een stukje code hebben waarmee je als je op een kruisje drukt weer de oude site krijgt:
code:

$('#image').click(function() {
$('#foo').removeClass('Site_TakeOver_Show');
});


En last but not least moet je een pagina ontwikkelen die je wilt weergeven. Daarna zit je ook nog met de mogelijke gevolgen dat de code een spaghetti wordt en de site niet goed functioneert, dit gezien websiteMaker hiervoor niet ontwikkeld is. Laten we zeggen dat het voor een programmeur een leuke uitdaging is om het voor elkaar te krijgen 🙂
Bekijk origineel

5 reacties

Reputatie 7
Badge +11
Hi @Mick, in WebsiteMaker is bij mijn weten hier niet direct een feature voor aanwezig. Ik denk dat je afhankelijk gaat zijn van 3rd party code. @SjorsK Ben jij toevallig hiervoor iets tegengekomen of heb je een ander geniaal idee? 😊
Reputatie 7
Badge +6
Dit lijkt mij inderdaad een maatwerkoplossing die in geen enkel standaard pakket wordt aangeboden.

Wat men praktisch gezien doet is het volgende:

De volgende CSS class staat standaard aan voor de "code" die de "Site-takeover" laat zien:
code:

.Site_TakeOver_Disable {
display: none
}


Na 30 seconden wordt de volgende code voor ingeladen die de bovenstaande code "overruled'
code:

.Site_TakeOver_Show {
display: visible !important
}

Daarnaast moet je een Javascript oplossing hebben die de CSS class toevoegd, en een oplossing die er voor zorgt dat de CSS class na 30 seconden verwijderd moet worden.

De code ziet er ongeveer zo uit:
[code]
setTimeout(function() {
$('.article-read').addClass('.Site_TakeOver_Show');
},5000);

Het nummer is in miliseconden

Natuurlijk moet je ook een stukje code hebben waarmee je als je op een kruisje drukt weer de oude site krijgt:
code:

$('#image').click(function() {
$('#foo').removeClass('Site_TakeOver_Show');
});


En last but not least moet je een pagina ontwikkelen die je wilt weergeven. Daarna zit je ook nog met de mogelijke gevolgen dat de code een spaghetti wordt en de site niet goed functioneert, dit gezien websiteMaker hiervoor niet ontwikkeld is. Laten we zeggen dat het voor een programmeur een leuke uitdaging is om het voor elkaar te krijgen 🙂
Reputatie 3
Badge +1
Bedankt voor de reacties! Ik ben zelf verre van handig met codes, dus dat gaat hem niet worden ben ik bang.
Reputatie 7
Badge +11
@SjorsK bedankt voor het delen van je tip en bijna kant-en-klare script!

Erg jammer dat er geen simpele oplossing in WebsiteMaker zit hiervoor. Om het met CSS en Javascript te realiseren is natuurlijk niet voor iedereen weggelegd. @Mick, een idee is om iemand te vragen je hiermee te helpen, de code van Sjors is redelijk compleet en weet een ervaren programmeur vast binnen no-time te implementeren.
Reputatie 3
Badge +1
Goed idee!

Reageer