Share
Wanneer u zich klaarmaakt om een nieuwe website, een product of een dienst te lanceren, hebt u een speciale plek nodig om potentiële klanten en klanten te sturen. Maar uw website is misschien nog niet klaar om nieuwe bezoekers te verwelkomen. In die gevallen is een HTML5-sjabloon voor bestemmingspagina's de perfecte keuze.
Een HTML5-sjabloon is snel en eenvoudig te installeren. In tegenstelling tot een CMS dat een complexe programmeertaal kan gebruiken, is een HTML-sjabloon eenvoudig te bewerken, zelfs voor beginners.
In deze zelfstudie leg ik uit wat de voordelen zijn van het gebruik van HTML-bestemmingspaginasjablonen en hoe u deze instelt. Maak je geen zorgen: het is snel en pijnloos.
Zoals ik al zei, kun je landingspagina's vrij snel installeren en instellen. Maar er zijn een paar andere voordelen aan het gebruik van een:
Nu dat ik de voordelen van HTML-sjablonen heb behandeld, laten we ons in de zelfstudie verdiepen.
Voor deze tutorial gebruik ik de sjabloon Pure. Het is een schone en minimale sjabloon die voor verschillende doeleinden kan worden gebruikt en wordt geleverd met een werkend contactformulier en een aanmeldingsformulier voor MailChimp..
Naast de sjabloon zijn er nog een paar andere hulpmiddelen die u nodig hebt, zodat u de sjabloon kunt aanpassen en uw site live kunt krijgen:
Voordat u een sjabloon voor uw bestemmingspagina selecteert, moet u een domeinnaam kopen en u aanmelden voor een hostingplan. Tegenwoordig kunt u een hostingpakket aanschaffen vanaf slechts $ 5 per maand en de meeste hostingbedrijven zullen u de domeinnaam gratis verstrekken wanneer u zich aanmeldt voor hun plan. Sommige hostingbedrijven bieden onbeperkte ruimte en bandbreedte, en sommige zullen de beschikbare bronnen beperken.
Zorg ervoor dat u uw onderzoek doet en lees een paar onafhankelijke beoordelingen over hostingbedrijven die uw interesse wekken. Zien hoe tevreden hun vorige klanten zijn, kan een goede indicator zijn voor de aangeboden diensten en de kwaliteit van de klantenondersteuning.
Het volgende item op uw lijst zou een FTP-client moeten zijn. Hiermee kunt u verbinding maken met uw hostserver en de sjabloonbestanden uploaden.
Er zijn tal van FTP-clients die beschikbaar zijn voor verschillende besturingssystemen. Een populair FTP-platform dat op alle platforms kan worden gebruikt, is FileZilla. Het is ook gratis te downloaden en te gebruiken.
U heeft een code-editor nodig om uw sjabloon aan te passen. Als u een code-editor gebruikt, kunt u gemakkelijker de code vinden die u moet bewerken, omdat deze speciale syntaxisaccentuering gebruikt. U kunt Notepad ++ gebruiken als u een Windows-gebruiker bent of TextWrangler als u een Mac-gebruiker bent. Een andere optie is om Sublime Text 3 te gebruiken die op zowel Windows- als Mac-computers en Linux kan worden gebruikt en biedt een gratis proefversie.
Ten slotte moet u een sjabloon voor de bestemmingspagina kopen en downloaden en de inhoud voorbereiden die op uw bestemmingspagina wordt weergegeven. U kunt vele HTML-bestemmingspaginasjablonen vinden op Envato Elements die specifiek zijn ontworpen voor bestemmingspagina's. Zodra u een sjabloon vindt die u bevalt, kunt u deze kopen en downloaden naar uw computer. Zorg ervoor dat u de map uitgepakt en deze ergens opslaat waar u deze gemakkelijk kunt openen.
Verzamel alle afbeeldingen en tekst die u aan uw bestemmingspagina wilt toevoegen. Door alles op één plek te bewaren, wordt het gemakkelijker om het aan de sjabloon toe te voegen en worden de afbeeldingen naar uw server overgebracht.
Met alles op zijn plek, is het tijd om de sjabloon aan te passen en uw informatie eraan toe te voegen. Laten we beginnen met vertrouwd te raken met de structuur van de sjabloon.
Zoals eerder vermeld, gebruik ik de HTML-sjabloon voor de bestemmingspagina.
Na het uitpakken van de map, kunt u zien dat de sjabloon voor de landingspagina van de bootstrap meerdere submappen en een aantal HTML-bestanden bevat. Dit is hoe de structuur eruit ziet:
U ziet ook verschillende HTML-bestanden, die verschillende demoversies van de HTML-bestemmingspaginasjablonen vertegenwoordigen. U kunt met de rechtermuisknop klikken of dubbelklikken op elk van de HTML-bestanden om ze in de gewenste browser te openen en te zien hoe ze eruit zien. Wanneer je de gewenste demoversie hebt gevonden, sluit je alle andere tabbladen.
Ik zal werken met de index-normaal-scroll-countdown.html-sjabloon gedurende de rest van de zelfstudie.
Nu de door u gekozen sjabloon voor de bestemmingspagina van HTML in uw browser is geopend, wordt het tijd om de informatie te vervangen door die van uzelf. De eenvoudigste manier om dit te doen is om te weten welk deel van de code in de sjabloon moet worden gewijzigd. Laten we beginnen door met de rechtermuisknop op de eerste regel tekst onder het loket te klikken en op Inspecteren te klikken.
Een nieuw paneel verschijnt onder in uw browservenster. U zult opmerken dat het de HTML-code toont die onze sjabloon aan de linkerkant vormt, evenals de CSS die stijlen voor de sjabloon aan de rechterkant biedt.
Zoals u kunt zien aan de screenshot, bevindt de geselecteerde zin zich tussen de tags die paragrafen vertegenwoordigen. De meeste tags in HTML bestaan uit tagparen met een openings- en een sluittag. De inhoud moet tussen die tags worden geplaatst om op een webpagina te verschijnen:
opacity-0 "> Geniet voor de lancering van een Zeer beperkte mogelijkheid door je te abonneren op onze nieuwsbrief.
Klik op de volgende knop voor meer informatie over ons project.
Om de dummy-informatie in de sjabloon te vervangen, hoeft u alleen maar te weten welke tags de informatie bevatten die u wilt bewerken. Vervolgens kunt u die tags in de code-editor vinden en uw eigen tekst invoegen.
Nu u weet hoe u code moet vinden die moet worden bewerkt, gaat u terug naar de sjabloonmap, klikt u met de rechtermuisknop op het door u gekozen HTML-bestand en selecteert u Openen met,en kies de code-editor die je eerder hebt gedownload. U zou de volledige HTML-code moeten zien waaruit uw sjabloon bestaat.
Blader door de code-editor tot je dezelfde coderegel vindt die we in de browser hebben gemarkeerd. Het zou rond lijn 75-76 moeten zijn. Klik vervolgens in de
label, markeer de tekst en vervang deze door uw eigen tekst.
Om de rest van de sjabloon te bewerken, kunt u eenvoudig de bovenstaande stappen herhalen totdat alle gewenste informatie is opgenomen.
U kunt ook secties van de sjabloon verwijderen als u niet wilt dat ze verschijnen. Evenzo kunt u secties dupliceren als u meer informatie wilt opnemen. Selecteer eenvoudig het gedeelte van de sjabloon dat begint met de openingstag en markeer alles tot en met de afsluitende tag voor dat onderdeel en verwijder of plak en plak dat gedeelte hieronder.
Wanneer u klaar bent met het vervangen van de inhoud, is het tijd om de voorbeeldafbeeldingen te vervangen door die van uzelf. Om dit proces gemakkelijker te maken, kijk eens naar de afbeeldingsnamen in de img-map van de sjabloon en geef vervolgens uw afbeeldingen een naam met dezelfde namen. Selecteer vervolgens alle tijdelijke afbeeldingen, verwijder ze en plaats uw afbeeldingen in plaats daarvan in de map img.
Nu is het tijd om het uiterlijk van uw sjabloon aan te passen en de stijlen in CSS te bewerken. Standaard bevat de sjabloon Pure verschillende stylesheets voor de donkere en lichte versie van de sjabloon:
Als u wilt weten welke stylesheet u moet bewerken, bekijkt u uw HTML-bestand in de code-editor en zoekt u naar de regel die er ongeveer zo uitziet:
Ga naar de map van uw sjabloon en open de bijbehorende stylesheet in de code-editor.
Om te zien welke regel code en stijl je moet bewerken, kun je hetzelfde proces herhalen dat we hebben gebruikt om de HTML te bewerken.
Klik in uw browser met de rechtermuisknop op elk element dat u wilt opmaken en selecteer Inspecteren. Kijk naar rechts en je ziet de stijlen die voor dat deel van de sjabloon zijn gebruikt:
Zoals je kunt zien aan de screenshot, is de Inspecteur laat ons de stijlen zien die worden gebruikt voor de alineatekst. Schakel over naar de codebewerker en het stylesheetbestand. Blader naar beneden tot u een regel met code vindt die begint met p.
Hier kunt u de gebruikte lettertypen, de grootte van het lettertype en de kleur van de tekst wijzigen.
Als u de achtergrondkleur van de sjabloon wilt wijzigen, zoekt u de regel code met de tekst gevolgd door accolades en voert u vervolgens de HEX-kleurcode in
het gedeelte dat de achtergrondkleur aangeeft.
Vergeet niet om alle wijzigingen die u hebt aangebracht op te slaan door in uw code-editor op Opslaan te klikken.
Nadat u de sjabloon naar wens heeft aangepast, moet u deze naar uw hostingserver uploaden. Uw hostingprovider zal u e-mailen met alle informatie die u nodig hebt om bestanden over te zetten met FTP.
Start uw FTP-programma zoals FileZilla. U ziet de bovenste balk waar u de servernaam, uw gebruikersnaam en wachtwoord kunt invoeren. Gebruik de informatie van uw host om verbinding te maken met uw server door op te klikken Snel verbinden.
Zoek aan de linkerkant van het FileZilla-venster de map met uw sjabloon op uw computer en klik erop om hem uit te vouwen. Selecteer alle bestanden en mappen en sleep ze naar de rechterkant van het scherm in de map public_html.
Zodra alle bestanden zijn geüpload, opent u uw browser en voert u uw domeinnaam in. Gefeliciteerd, uw site is nu live!
Een landingspagina kan wonderen doen voor uw bedrijf of product terwijl u zich opmaakt voor de lancering. Hier zijn een paar tips die u helpen het maximale uit uw HTML-bestemmingspaginasjablonen te halen en u te helpen bij het maken van een hype:
Bekijk deze zelfstudies om nog meer te leren over HTML-bestemmingspaginasjablonen of bootstrap-sjablonen voor bestemmingspagina's:
Met behulp van een HTML-sjabloon kunt u uw startpagina snel opstarten. Begin met het selecteren van een van onze HTML-bestemmingspaginasjablonen van Envato Elements of een van de landingspagina-sjablonen voor opstartpagina's van ThemeForest. Gebruik vervolgens onze zelfstudie om u door het instellingsproces te begeleiden.
Accentsconagua