Eigen landingspagina ontwikkelen

Niveau: gevorderd

Let op: voor het ontwikkelen van een eigen landingspagina is goede kennis van HTML en CSS een vereiste.

Wat voor soort landingspagina’s kan ik maken?

Door middel van CSS en HTML kan je volledig naar eigen smaak een landingspagina opstellen. Voor het opzetten van een landingspagina is een goede kennis van CSS en HTML vereist. Javascript wordt niet ondersteund. Je kan alleen HTML tags gebruiken die voorkomen in de body. Scripts zijn ook niet toegestaan.

Enkele bijzondere situaties worden in de onderstaande kopjes toegelicht. Voor overige uitleg over HTML en CSS wijzen we je graag op de guides en helppagina’s van Mozilla. 

Geen CSS/HTML kennis?

Heb je geen CSS/HTML kennis, maar wil je toch een custom pagina ontwerpen? Neem dan contact op met Customer Support om te informeren naar de mogelijkheden om een landingspagina door ons te laten ontwerpen.

Een achtergrondafbeelding gebruiken in de style

Doorloop de volgende stappen:

1. Verlaat Source code modus en upload een afbeelding via Insert Image.

2. Ga na het uploaden terug naar de Source code modus en zoek de afbeelding op in de broncode.

3. Voeg de volgende styles toe aan de afbeelding: style=”display:none,width:1px;height1px;”

4. Kopieer de link van de afbeelding naar de class/style waarvoor je hem wenst te gebruiken.

5. Verwijder het afbeeldingselement niet uit de landingspagina. De afbeelding wordt namelijk verwijderd wanneer dit element wordt verwijderd.

Inlogpagina maken met forms

Het Awaretrain-platform beschouwd iedere post-request op de landingspagina als een user die inloggegevens heeft achtergelaten. Je kan dus een inlogpagina namaken. Wanneer users proberen in te loggen zal dit in de rapportage terug te zien zijn. Deze gegevens worden NIET ongeslagen, er wordt alleen gemonitord of de gebruiker gegevens invoert en op ‘aanmelden’ klikt. Onderstaand een voorbeeld form:

<form action=”” method=”post”>

<input type=”text” placeholder=”username”>

<input name="password" pattern=".{3,}" required type="password" placeholder=”password”>

<input type=”submit” value=”Login”>

</form>

De pagina die wordt geladen na een post-request kan bovenaan de pagina worden bepaald met de optie LANDINGSPAGINA KOPPELEN.

Responsive

Vergeet niet om je webpagina responsive te maken. Veel e-mails worden namelijk op de telefoon geopend.

CSS-editor

Heb je in de HTML gebruik gemaakt van classes? Dan kan je de CSS opgeven in de CSS-editor. De CSS hoeft maar een keer opgegeven te worden en hoeft dus niet per taal opgegeven te worden.

Opslaan

Let op: als je klaar bent met je wijzigingen dien je eerst de Source code modus te verlaten. Klik daarna pas op OPSLAAN. De aanpassingen worden niet opgeslagen wanneer je op opslaan klikt terwijl je nog in Source code modus zit.