Het is niet ingewikkeld om uw website te laten draaien. U kunt zelfs een eenvoudige maar effectieve bedrijfssite maken met behulp van een websitesjabloon van één pagina. Met behulp van een sjabloon met één pagina kunt u uw bedrijf de broodnodige online aanwezigheid geven en alle informatie over de diensten of producten die u aanbiedt presenteren.
Een bijkomend voordeel is het feit dat mensen die geïnteresseerd zijn in uw bedrijf onmiddellijk alle details kunnen zien die ze nodig hebben zonder door meerdere pagina's te hoeven klikken. En omdat op de ene paginasite vaak meerdere calls-to-action voorkomt, hebt u een veel grotere kans om bezoekers om te zetten in potentiële kopers.
In deze zelfstudie bespreken we de stappen voor het instellen van uw website met een HTML-sjabloon van één pagina. We bespreken de hulpmiddelen die u nodig hebt, de technische details van het aanpassen van uw sjabloon en hoe u deze naar uw server kunt uploaden. We zullen u ook enkele belangrijke tips geven over het effectief maken van één pagina-websites. Laten we beginnen!
Voordat u uw website met één pagina maakt, zijn er enkele dingen die u nodig hebt. Laten we ze hieronder bekijken.
De meest voor de hand liggende keuze is om uw bedrijfsnaam te gebruiken voor uw domein. Als de naam wordt gebruikt, kunt u proberen woorden als bedrijf, bureau of studio toe te voegen en vervolgens de domeinnaam te kopen.
Het wordt ook aanbevolen om een .com-extensie te gebruiken, omdat dit een van de oudste en meest geloofwaardige extensies is. Als u echter geen geschikte naam kunt krijgen met de .com-extensie, is het gebruik van de extensie .net het overwegen waard.
Het vinden van een goed hostingbedrijf lijkt in eerste instantie een onmogelijke taak. In het algemeen wilt u op zoek gaan naar een host die goede recensies heeft op websites van derden, omdat deze waarschijnlijk onbevooroordeeld zijn. Let op wat mensen zeggen over hun uptime, klantenondersteuning en gebruiksgemak.
De volgende stap is het vinden van een sjabloon voor uw website. Een goede plek om te beginnen met zoeken is de ThemeForest-marktplaats. U kunt kiezen uit honderden professionele sjablonen voor één paginasite die zich op verschillende niches richten, of blader door onze samengestelde selectie van enkele van de beste:
Aangezien u de sjabloon moet bewerken om de informatie te vervangen door de uwe, heeft u een code-editor nodig. Het markeert de codesyntaxis en maakt het gemakkelijker om de delen van de code te vinden die moeten worden gewijzigd.
Voor deze tutorial gebruik ik Sublime Text die kan worden gebruikt op Mac, Windows en Linux en wordt geleverd met een gratis proefversie.
U hebt ook een FTP-client zoals FileZilla nodig om verbinding te maken met uw server en de websitebestanden te uploaden zonder ze een voor een te hoeven uploaden. FileZilla is gratis en beschikbaar voor alle besturingssystemen.
Laten we nu kijken naar de details over het maken van een pagina-website, te beginnen met het downloaden en het opzetten van uw sitesjabloon.
Nadat je alle bestanden en hulpmiddelen hebt verzameld die je nodig hebt, is het nu tijd om de HTML-sjabloon aan te passen. Voor deze zelfstudie gebruik ik de Wander-websitesjabloon. Begin met het downloaden van de sjabloonbestanden van uw downloadpagina op ThemeForest. Pak de inhoud uit van de gecomprimeerde map en open de map. U zult merken dat het een documentatiemap bevat evenals alle sitesjabloonbestanden.
Hoe maak je een pagina-website met de Wander HTML-sjabloon.Omdat dit een multifunctionele sjabloon is, bevat het een behoorlijk aantal bestanden. Uw sjabloon kan alleen worden geleverd met één HTML-bestand en mappen die de stijlbladen, scriptbestanden en afbeeldingen bevatten.
Als u de sjabloon naar wens wilt bewerken, moet u het HTML-bestand wijzigen dat gewoonlijk wordt genoemd index.html. In het geval van Wander zal ik het bestand met de naam bewerken home-one-pagina.html, terwijl we een website van één pagina maken.
Als je nog nooit met een HTML-sjabloon hebt gewerkt, ziet het bestand er waarschijnlijk intimiderend uit als je het probeert te openen in Sublime Text of een andere editor. Hoewel een volledige HTML-zelfstudie buiten het bestek van dit artikel valt, laten we de basisbeginselen van wat HTML is en hoe het eruit ziet, bespreken..
HTML is een opmaaktaal die bestaat uit tags zoals ,
,
, en anderen. De tags komen in paren, elk met een opening en een sluiting. Ze helpen de browser begrijpen hoe het moet weergeven wat er tussen die tags zit.
Een alinea in een HTML-document ziet er als volgt uit: Dit is mijn paragraaf.
. Een kop wordt omringd door een h label vergezeld van een nummer van 1-6 wat staat voor koersniveau 1 via kopniveau 6.
Wanneer u een HTML-sjabloon bewerkt, hoeft u geen van de tags te bewerken, alleen de tekst ertussen. Als u echter een deel van de code wilt kopiëren of verwijderen, moet u het hele onderdeel van de openingstag naar de afsluitende tag selecteren en vervolgens kopiëren of verwijderen.
De gemakkelijkste manier om uw sjabloon te bewerken, is deze in een browser te openen en vervolgens de code te inspecteren. Dubbelklik eerst op het HTML-bestand om het in uw standaardbrowser te openen. U ziet meteen dat u de tekst in het kopgedeelte moet bewerken. Klik met de rechtermuisknop op de zin die luidt Wij maken MERKEN Shine en selecteer Inspecteren.
Het inspecteren van HTML in een webbrowser.Onderaan wordt een paneel weergegeven met de HTML-code van onze sjabloon. De regel met de geselecteerde zin bevindt zich aan de linkerkant van het deelvenster Inspecteur. Je zult zien dat de zin is ingepakt in een label met de klasse van
grote mt20
.
Open nu de sjabloon in uw codebewerker door met de rechtermuisknop op de sjabloonnaam te klikken en selecteer Open met Sublime-tekst. Zoek dezelfde coderegel die je in het Inspecteur-paneel hebt gezien, selecteer de tekst tussen de tags en vervang deze door je bedrijfs-tagline.
HTML-code bewerken.Als u de alinea direct onder de kop wilt bewerken die u zojuist hebt vervangen, gaat u terug naar uw browser, klikt u met de rechtermuisknop op de alinea en selecteert u Inspecteren. Deze keer zit de zin tussenin tags met de klasse van
wit
. Ga terug naar je code-editor, zoek de bijbehorende coderegel, klik tussen de tags en voeg je informatie toe.
Ga door met deze stappen totdat je alle demo-inhoud hebt vervangen door je eigen demo-inhoud. Verwijder ongewenste secties door alles te selecteren, van de opening tot de afsluitende tag van een bepaald codegedeelte.
Op dezelfde manier, als u een deel van de sjabloon wilt dupliceren, zoekt u de code die die sectie bevat en selecteert u alles inclusief de openings- en sluitingstags, kopieert en plakt u dan waar u de inhoud wilt laten verschijnen.
In de onderstaande schermafbeelding wilde ik nog een testimonial toevoegen, dus ik heb de code voor de derde testimonial geselecteerd en deze direct hieronder gekopieerd.
Merk op dat in de meeste gevallen secties van de code ingepakt worden Nadat u klaar bent met het bewerken van de inhoud, moet u de afbeeldingen vervangen. De handigste manier om ze uit te schakelen, is door nota te nemen van de afbeeldingsnamen in uw sjabloonmap en vervolgens uw afbeeldingen een naam te geven op dezelfde manier. Zodra uw afbeeldingen de juiste naam hebben, kopieert u ze naar de map met afbeeldingen. Er is nog een ding te doen voordat je de bestanden naar je server uploadt, en dat is de template aan het afstemmen op je bestaande merk. De stijlen bevinden zich in de CSS-map. In het geval van Wander zijn er verschillende stylesheets samen met de map met de naam kleuren. Om het CSS-bestand te bewerken, volgt u dezelfde stappen die we hebben gebruikt om het HTML-bestand te bewerken. Als u wilt weten hoe een bepaald element is opgemaakt, klikt u er met de rechtermuisknop op in uw browser en klikt u op Inspecteren. Kijk deze keer aan de rechterkant en je zult de bijbehorende stijl voor dat element opmerken. Hetzelfde paneel heeft ook de naam van het stijlbestand dat u moet bewerken samen met de regel waarop die code zich bevindt. Open het bestand in uw code-editor. In dit geval is het theme.css. Omdat ik de achtergrondkleur van de tweede sectie met alle functies wil bewerken, moet ik de regel 5378 in het theme.css-bestand. Laten we het in zwart veranderen: Zoek naar de regel met code die zegt: De naam wijzigen in green.css wijzigt de kleuren van knoppen, koppelingen en pictogrammen: Om de lettertypen te wijzigen, inspecteert u de tekst en bekijkt u het rechterdeel van het infovenster. U ziet de naam van het lettertype dat de tekst gebruikt, evenals de regel met code waar u het kunt veranderen in een lettertype dat uw voorkeur heeft. Nu u uw websjabloon met één pagina hebt aangepast en opgemaakt, kunt u deze naar uw hostserver uploaden. Uw gastheer zal u de gebruikersnaam en het wachtwoord geven die nodig zijn om de FTP-verbinding te gebruiken. Om het uploadproces te starten, opent u FileZilla en voert u de servernaam, gebruikersnaam en wachtwoord in de bovenste balk in en klikt u vervolgens op Snel verbinden. Zoek de map met uw sjabloon op uw computer aan de linkerkant van het scherm en klik erop om deze uit te vouwen. Selecteer in de linkerbenedenhoek alle bestanden en mappen en sleep ze naar de rechterkant van het scherm in de hoofdmap van uw hostingserver in de public_html map. Nu uw website live is, volgen hier een paar belangrijke tips om in gedachten te houden. In tegenstelling tot een traditionele site, heeft een sjabloon van één pagina weinig ruimte beschikbaar, dus dat betekent minder ruimte om uw boodschap over te brengen. Daarom is het van cruciaal belang om alle jargon en onnodige details te verwijderen, waardoor alleen de meest relevante informatie overblijft. Leg duidelijk uit wat u te bieden heeft en wat de voordelen zijn die uw product of dienst biedt. Gezien de beperkte ruimte, moet uw oproep tot actie sterk en overtuigend zijn. U moet het ook meerdere keren opnemen voor het maximale effect. Standaard worden de meeste websitesjablonen voor één pagina al geleverd met meerdere secties die een call-to-action bevatten, dus haal er het meeste uit. Leid bezoekers naar een sectie met een tariefplan of een contactformulier waar ze contact met u kunnen opnemen. Stel uw navigatie in om naar verschillende delen van uw website te gaan. Je bent een stap voor op het spel als je kiest voor een sjabloon dat al een plakkerige navigatie heeft die op zijn plaats blijft terwijl een bezoeker naar beneden scrolt. Neem alleen de links naar uw secties op en vermijd het plaatsen van externe links, want dat zal iedereen die uw pagina bezoekt afwerpen. Als u afbeeldingen of video's gebruikt, kunt u uw verhaal vertellen en meer vertellen over wat u te bieden heeft zonder dat u te veel ruimte in beslag neemt. In het geval van websites met één pagina zijn visuals je beste vriend. Plaats de belangrijkste informatie bovenaan uw site en leid de gebruiker vervolgens langzaam door de pagina naar meer specifieke informatie die uw kernboodschap ondersteunt. Dit zal u helpen om de hiërarchie te behouden en de informatie op een logische manier te presenteren. Als u deze zelfstudie hebt gevolgd, hebt u nu de kennis om snel een website van één pagina te maken met behulp van een responsieve sjabloon. Begin uw reis met de juiste websitesjabloon en raadpleeg deze zelfstudie om snel aan de slag te gaan.Hoe uw websjabloon voor één pagina op te maken
Hoe u uw sitesjabloon kunt uploaden naar de server
5 Belangrijke tips voor websites met betere websites
1. Houd uw boodschap beknopt
2. Gebruik sterke oproepen tot actie
3. Houd navigatie toegankelijk en eenvoudig
4. Gebruik Visuals
5. Hiërarchie behouden
Ga aan de slag met uw eigen website met één pagina