Log in op uw Sitebuilder back-end.
Indien u voor het eerst inlogt, zal het systeem dit herkennen. U zal onmiddellijk kunnen bouwen. U krijgt de vraag: 'Waarover zal uw website gaan?' Kies een categorie, subcategorie en een naam voor uw website. Maak u geen zorgen! U kan alles later nog wijzigen.
Beweeg de cursor over een template uit de lijst en klik op Selecteer wanneer u een template naar uw smaak gevonden hebt.
De Sitebuilder zal u tonen hoe u de widgets kunt gebruiken, content kunt bewerken en uw site kunt publiceren.
Volg de 6-stappen rondleiding! Die zal van pas komen. Tip: Hebt u deze stap overgeslagen, dan kunt u de rondleiding later nog altijd volgen. Klik gewoon op het vraagteken bovenaan rechts van uw scherm, en opnieuw boven rechts op de Take A Tour link.
Aan de slag!
De Inbedden widget in het gedeelte Social media is gelijkaardig aan de HTML code widget.
Het is eigenlijk een code editor. Het enige verschil is dat de widget je rechtstreeks toegang geeft tot de webmaster / developer tools van verschillende social media websites en apps. Zo zal je kunnen:
Een Twitter tijdlijn van de door jou geposte tweets, van je favoriete tweets, de tweets van accounts in jouw lijsten, het resultaat van een bepaalde zoekopdracht of zoekopdrachten die in jouw collecties staan inbedden.
Om de widget in jouw lay-out toe te voegen ga je naar het paneel 'Sociaal'. Klik en versleep de 'Inbedden' widget naar je lay-out. Dat zal het 'Bewerken: Inbedden' gebied openen.
Om de Facebook Platform / Social Plugins pagina te openen klik je op Facebook Plug-ins. Het Facebook developers platform zal in een nieuwe tabblad geopend worden.
Tip: Deze knoppen kunnen ook gemakkelijk ingevoegd worden door gebruik te maken van de Facebook Like widget vanuit het paneel Sociaal in je Sitebuilder backend. Het gebruik van de Inbedden widget geeft je meer controle.
Wat dit doet: Bezoekers van jouw site klikken op de Vind ik leuk knop die je geïntegreerd hebt, en delen automatisch op hun Facebook-profiel dat zij jouw pagina leuk vinden of aanbevelen! De posting gaat ook naar hun Facebook muurtje, vergezeld van een aantrekkelijke afbeelding en een link naar jouw site!
Zo maak je het:
Vul het formulier in en pas jouw instellingen aan tot je tevreden bent met wat je ziet in de preview box.
Klik op GetCode. Dat zal het JavaScript / de html code aanmaken.
Tip: Je kan de Delen functie van de Vind ik goed button gebruiken. De Delen knop biedt meer weergave opties voor het aantal shares.
Wat dit doet: De Delen knop nodigt de bezoekers uit om je pagina te delen op hun Facebook tijdlijn, of in een privéboodschap. Hij toont het aantal keren jouw pagina reeds gedeeld werd op Facebook.
Zo maak je het:
Vul het formulier in en pas jouw instellingen aan tot je tevreden bent met wat je ziet in de preview box.
Klik op GetCode. Dat zal het JavaScript / de html code aanmaken.
Wat dit doet: De Send / Verzenden knop nodigt de bezoekers van jouw pagina uit om die via Facebook Messenger te verzenden naar een groep, een vriend, of naar zichzelf.
Zo maak je het:
Wat dit doet: Hiermee kan je een bepaalde Facebook posting, van jou of iemand anders, in je website inbedden.
Zo maak je het:
Vul het formulier in en pas jouw instellingen aan tot je tevreden bent met wat je ziet in de preview box
Klik op GetCode. Dat zal het JavaScript / de html code aanmaken.
Tip: Je kan de Kolommen widget gebruiken om de posting centraal te zetten.
Publiceer om de wijzigingen te bekijken.
Wat dit doet: Hiermee kan je een video die door jou of iemand anders op Facebook gemaakt is, inbedden in jouw site. De aldus ingebedde video heeft een Vind ik leuk knop, een Delen knop, een link naar jouw Facebook video posting, en een link naar jouw Facebook pagina! Het is een prachtige manier om jouw aanwezigheid in de sociale media te versterken.
Tip: Wil je een video inbedden die naar YouTube geüpload is, gebruik dan de Media >> YouTube widget.
Zo maak je het:
Vul het formulier in en pas jouw instellingen aan tot je tevreden bent met wat je ziet in de preview box.
Klik op GetCode. Dat zal het JavaScript / de html code aanmaken.
Tip: Je kan de Kolommen widget gebruiken om de posting centraal te zetten.
Publiceer om de wijzigingen te bekijken.
Tip: Dezelfde functie kan je ook bereiken door de Facebook Feed widget te gebruiken in het paneel Sociaal van je Sitebuilder backend. Je krijgt meer controle wanneer je de Inbedden widget gebruikt.
Wat dit doet: Met de Page Plugin tool kan je je volledige Facebook pagina integreren in een venster op jouw website. Bezoekers kunnen zo interageren met jouw Facebook pagina zonder jouw site te verlaten.
Zo maak je het:
Vul het formulier in en pas jouw instellingen aan tot je tevreden bent met wat je ziet in de preview box.
Klik op GetCode. Dat zal het JavaScript / de html code aanmaken.
Tip: Je kan de Kolommen widget gebruiken om de posting centraal te zetten.
Publiceer om de wijzigingen te bekijken.
Tip: Dezelfde functie kan ook gemakkelijk bereikt worden door gebruik te maken van de Facebook Commentaar widget uit het paneel Sociaal in jouw Sitebuilder backend. Je hebt meer controle wanneer je de Inbedden widget gebruikt.
Wat dit doet: De widget creëert een veld op jouw site waar enkele van de laatste commentaren getoond worden die bezoekers geplaatst hadden.
Zo maak je het:
Vul het formulier in en pas jouw instellingen aan tot je tevreden bent met wat je ziet in de preview box.
Klik op GetCode. Dat zal het JavaScript / de html code aanmaken.
Tip: Je kan de Kolommen widget gebruiken om de posting centraal te zetten.
Publiceer om de wijzigingen te bekijken.
Wat dit doet:
Voeg een Volgen button aan je site toe zodat fans zich kunnen abonneren op de feed van jouw Facebook pagina, of zodat getoond wordt hoeveel volgers je al hebt.
Vul het formulier in en pas jouw instellingen aan tot je tevreden bent met wat je ziet in de preview box.
Klik op GetCode. Dat zal het JavaScript / de html code aanmaken.
Tip: Je kan de Kolommen widget gebruiken om de posting centraal te zetten.
Publiceer om de wijzigingen te bekijken.
De Inbedden widget in het gedeelte Social media is gelijkaardig aan de HTML code widget.
Het is eigenlijk een code editor. Het enige verschil is dat de widget je rechtstreeks toegang geeft tot de webmaster / developer tools van verschillende social media websites en apps. Zo zal je kunnen:
Een Twitter tijdlijn van de door jou geposte tweets, van je favoriete tweets, de tweets van accounts in jouw lijsten, het resultaat van een bepaalde zoekopdracht of zoekopdrachten die in jouw collecties staan inbedden.
Om de widget in jouw lay-out toe te voegen ga je naar het paneel 'Sociaal'. Klik en versleep de 'Inbedden' widget naar je lay-out. Dat zal het 'Bewerken: Inbedden' gebied openen.
Om het Google Developers Platform te openen, klik je op Google+ Button. Het Google Developers Platform zal in een nieuw tabblad geopend worden.
Wat dit doet:
Creëert een +1 button op jouw site. Bezoekers die op de button klikken krijgen een pop-up venster waarin gevraagd wordt of zij jouw website publiek of enkel met hun kringen als een link willen delen.
Eenvoudige button:
Om gemakkelijk een button aan te maken moet je gewoon de code kopiëren van de +1 button gids - in het gedeelte 'A simple button':
<script src="https://apis.google.com/js/platform.js" async defer></script>
<g:plusone></g:plusone>
Aanpasbare button:
Wij adviseren je echter om in de plaats daarvan de HTML5-klare +1 tag versie te gebruiken. Zie hieronder.
<script src="https://apis.google.com/js/platform.js" async defer></script>
<div class="g-plusone"></div>
Gebruik je deze versie, dan kan je de button heel goed aanpassen aan jouw smaak. Gebruik gewoon bij elke button attribuut 'data-' als prefix. De volledige lijst met attributen vind je in de Google gids. Hieronder vind je enkele voorbeelden..
Voorbeelden:
Gebruik deze lijnen code indien je wil dat het pop-up venster in het NEDERLANDS verschijnt:
<script>
window.___gcfg = {
lang: 'nl'
};
</script>
<script src="https://apis.google.com/js/platform.js" async defer></script>
<div class="g-plusone"></div>
Gebruik deze lijnen code indien je wil dat het pop-up venster in het FRANS verschijnt:
<script>
window.___gcfg = {
lang: 'fr'
};
</script>
<script src="https://apis.google.com/js/platform.js" async defer></script>
<div class="g-plusone"></div>
Gebruik deze lijnen code om de GROOTTE (size) van de button te veranderen - je kan kiezen voor waarden tussen data-size="small", data-size="medium", data-size="standard" of data-size="tall":
<script src="https://apis.google.com/js/platform.js" async defer></script>
<div class="g-plusone" data-size="small"></div>
Gebruik deze lijnen code met data-annotation="none" om het aantal gebruikers te verbergen dat jouw pagina al een +1 gaven.
<script src="https://apis.google.com/js/platform.js" async defer></script>
<div class="g-plusone" data-annotation="none"></div>
Tip: Meer instellingen vind je op: https://developers.google.com/+/web/+1button/
Wat dit doet:
Het maakt een Follow button aan voor jouw Google+ pagina of die van iemand anders.
Wat je nodig hebt:
Tip: Zo kan je gemakkelijk jouw Google+ pagina ID vinden. Open je Google+ profiel en ga naar je zakelijke pagina. In de adresbalk zou de URL er zo ongeveer moeten uitzien: https://plus.google.com/b/*********************/dashboard/overview De cijfers die hierboven vervangen werden door sterretjes, zijn jouw pagina ID.
Eenvoudige button:
Om de knop gemakkelijk aan te maken moet je de eenvoudige code van de Follow Button gids kopiëren en ervoor zorgen dat je JOUW pagina ID vermeldt:
<script src="https://apis.google.com/js/platform.js" async defer></script>
<g:follow href="https://plus.google.com/*********************" rel="author"></g:follow>
Aanpasbare button (Aanbevolen):
<script src="https://apis.google.com/js/platform.js" async defer></script>
<div class="g-follow" data-href="https://plus.google.com/*********************" data-rel=" author "></div>
Voorbeelden:
Gebruik deze lijnen code indien je wil dat het pop-up venster in het NEDERLANDS verschijnt:
<script >
window.___gcfg = {
lang: 'nl',
parsetags: 'onload'
};
</script>
<script src="https://apis.google.com/js/platform.js" async defer></script>
<div class="g-follow" data-href="https://plus.google.com/*********************" data-rel=" author "></div>
Gebruik deze lijnen code indien je wil dat het pop-up venster in het FRANS verschijnt:
<script >
window.___gcfg = {
lang: 'fr',
parsetags: 'onload'
};
</script>
<script src="https://apis.google.com/js/platform.js" async defer></script>
<div class="g-follow" data-href="https://plus.google.com/*********************" data-rel=" author "></div>
Gebruik deze lijnen code met data-annotation = "none" om het aantal gebruikers TE VERBERGEN dat jouw pagina reeds volgt.
<script src="https://apis.google.com/js/platform.js" async defer></script>
<div class="g-follow" data-href="https://plus.google.com/*********************" data-rel="author" data-annotation="none"></div>
Tip: Meer instellingen vind je op: https://developers.google.com/+/web/follow/
Wat dit doet:
Het maakt een badge van jouw Google+ pagina aan in jouw website-lay-out. Die badge vertoont jouw profielfoto, de cover afbeelding, de naam en jouw tagline. En ook een Follow / Volgen button.
Wat je nodig hebt:
Tip: Zo kan je gemakkelijk jouw Google+ pagina ID vinden. Open je Google+ profiel en ga naar je zakelijke pagina. In de adresbalk zou de URL er zo ongeveer moeten uitzien: https://plus.google.com/b/*********************/dashboard/overview De cijfers die hierboven vervangen werden door sterretjes, zijn jouw pagina ID.
Aanpasbare button (Aanbevolen):
<script src="https://apis.google.com/js/platform.js" async defer></script>
<div class="g-page" data-href="https://plus.google.com/*********************"></div>
Voorbeelden:
Gebruik deze lijnen code indien je wil dat de badge in het NEDERLANDS is:
<script >
window.___gcfg = {
lang: 'nl',
parsetags: 'onload'
};
</script>
<script src="https://apis.google.com/js/platform.js" async defer></script>
<div class="g-page" data-href="https://plus.google.com/*********************"></div>
Gebruik deze lijnen code indien je wil dat de badge in het FRANS is:
<script >
window.___gcfg = {
lang: 'fr',
parsetags: 'onload'
};
</script>
<script src="https://apis.google.com/js/platform.js" async defer></script>
<div class="g-page" data-href="https://plus.google.com/*********************"></div>
Tip: Meer instellingen vind je op: https://developers.google.com/+/web/badge/
Wat dit doet:
Dit maakt een Share / Delen button aan op jouw website. De posting gaat naar de Google+ feed van de bezoeker, samen met een aantrekkelijke afbeelding en een link naar jouw site!
Aanpasbare button (Aanbevolen):
<script src="https://apis.google.com/js/platform.js" async defer></script>
<div class="g-plus" data-action="share"></div>
Gebruik deze lijnen code indien je wil dat de button in het NEDERLANDS verschijnt:
<script >
window.___gcfg = {
lang: 'nl',
parsetags: 'onload'
};
</script>
<script src="https://apis.google.com/js/platform.js" async defer></script>
<div class="g-plus" data-action="share"></div>
Gebruik deze lijnen code indien je wil dat de button in het FRANS verschijnt:
<script >
window.___gcfg = {
lang: 'fr',
parsetags: 'onload'
};
</script>
<script src="https://apis.google.com/js/platform.js" async defer></script>
<div class="g-plus" data-action="share"></div>
Tip: Meer instellingen vind je op: https://developers.google.com/+/web/share/
Log in op uw Sitebuilder back-end.
Indien u voor het eerst inlogt, zal het systeem dit herkennen. U zal onmiddellijk kunnen bouwen. U krijgt de vraag: 'Waarover zal uw website gaan?' Kies een categorie, subcategorie en een naam voor uw website. Maak u geen zorgen! U kan alles later nog wijzigen.
Beweeg de cursor over een template uit de lijst en klik op Selecteer wanneer u een template naar uw smaak gevonden hebt.
De Sitebuilder zal u tonen hoe u de widgets kunt gebruiken, content kunt bewerken en uw site kunt publiceren.
Volg de 6-stappen rondleiding! Die zal van pas komen. Tip: Hebt u deze stap overgeslagen, dan kunt u de rondleiding later nog altijd volgen. Klik gewoon op het vraagteken bovenaan rechts van uw scherm, en opnieuw boven rechts op de Take A Tour link.
Aan de slag!
Een thema is een template of sjabloon voor een website waarvan u gebruik kunt maken om uw eigen website te bouwen. Het thema bevat bepaalde kleuren en lay-out. De manier waarop header en footer eruit zien, hangt af van het template. Ook de lettertypes, afbeeldingen en de organisatie van uw widgets. En of uw pagina menu's aan de zijkant heeft of niet.
U kunt het huidige thema altijd wijzigen zonder uw content te verliezen. Denk er wel aan dat dit uw achtergrond en kleuren ook kan beïnvloeden. Zo wijzigt u het thema van uw website:
In de back-end gaat u naar de onderkant van het menu in de zijbalk. Klik op Ontwerp.
U hebt nu de Design Editor geopend. U ziet een lange lijst met thema's.
Sorteer de lijst op de verschillende criteria - klik op de Nieuws, Populariteit of Relevantie knoppen.
Blader doorheen de thema's door middel van de pijltjes bovenaan rechts of de bolletjes onderaan.
Hebt u het perfecte thema gevonden, selecteer het en klik op 'Verzenden'.
Blader doorheen al uw pagina's. Ga na dat de wijziging in de lay-out van de kleuren geen verdere aanpassingen vereisen - de widgets anders schikken, de achtergrond wijzigen, of de kleur van de tekst aanpassen.
Publiceer en bekijk hoe uw gewijzigde website eruit ziet.
Er zijn drie dingen die je moet weten over de afmetingen van de afbeeldingen in je header:
Wat ook de grootte is van de originele afbeelding die je geüpload hebt - wanneer je de ingebouwde beeld-editor gebruikt zal het resultaat niet groter dan 800 x 600 px zijn, ongeacht of je de afbeelding bijsnijdt, de afmetingen of helderheid aanpast, enz. Zodra je de afbeelding opslaat, worden de afmetingen van de afbeelding automatisch aangepast.
Afhankelijk van het thema dat je gebruikt kan de header afbeelding 100% van de schermbreedte bedekken, omwille van de vereisten van het responsive design. Voor ervaren gebruikers bestaat er een oplossing. Zie verder.
Denk eraan dat niet alle website sjablonen / templates een eigen header afbeelding hebben. Is in jouw header geen afbeelding aanwezig, dan kan je de Image of Slideshow widget gebruiken om een header afbeelding te maken..
Zo kan je de header afbeelding in verschillende situaties bewerken:
Log in op uw Sitebuilder back-end.
Ga naar de Home pagina.
Beweeg de cursor over de header afbeelding. Het symbool Header Area bewerken zal verschijnen. Klik erop, dit opent de Header Area.
Klik op Afbeelding Bewerken. U komt nu in de Photo Editor.
Verklein de afbeelding door middel van de Crop of Resize knop.
Gebruik Crop wanneer u een deel van de afbeelding wil uitknippen. Klik op de button Crop
Gebruik de markeerpunten in de hoeken om het deel of de delen te kiezen dat u wil uitknippen.
Wil u de proportie behouden, klik dan Lock Dimensions.
Gebruik Resize wanneer u alles in de afbeelding bewaren wil. Klik op Resize.
Om de proporties te behouden moet u op het slot klikken.
Vul de gewenste pixelgrootte in.
Bent u klaar, klik op Apply en dan op Save.
Let op wanneer je de breedte van je header afbeelding wijzigt. Gebruik je de methode hierboven om de breedte te verminderen, dan kan SiteBuilder mogelijk uw afbeelding uitrekken en de kwaliteit ervan verminderen. Dat komt doordat de header breedte ingesteld staat op 100% voor het responsive design voor meerdere schermen. De breedte op een veilige manier wijzigen doe je zo:
In het menu aan de zijkant ga je naar het tabblad SEO. Klik erop om de Search Engine Optimization instellingen te opeen. Je zal het header html-code veld vinden in het Head Code of Kop Code menu. Post de volgende code.
<style>
#headerimage img{
max-width:1130px;
max-height:190px;
}
</style>
Geeft deze code niet het gewenste resultaat, dan kan de identifier verkeerd zijn - verschillende designs hebben vaak verschillende identifiers. Welke je nodig hebt kom je te weten door de broncode te bekijken. Dat doe je zo:
Voor Google Chrome: Klik rechts op de header afbeelding, en kies Inspect Element uit het uitklapmenu.
Voor Safari: Open de voorkeuren via Safari >Voorkeuren en ga naar het gedeelte Geavanceerd / Meer. Onderaan de pagina vink je het vak 'Toon het Ontwikkelaars menu' aan. Sluit de instellingen af, en ga naar de bovenkant van de pagina. Klik op Ontwikkelaar > Toon broncode
Voor Firefox: Klik rechts op de header afbeelding, en kies Inspect Element uit het uitklapmenu.
Beweeg de cursor over de stukken code tot enkel het header oplicht in de lay-out. Kopieer deze identifier. In dit voorbeeld is jouw identifier 'headerimage', en dus zou de lijn code die je moet vinden er zo uitzien:
<div id="headerimage" class="XXX">
<img src="http://…" style="…">
</div>
Zie je een andere identifier of class, wijzig de bovenstaande code in het Kop Code menu. Gebruik '#' wanneer je het object aan het beschrijven bent via de identifier -de 'id' waarde- en gebruik '.' in de plaats van '#' wanneer je het object beschrijft via de class waarde.
Log in op de backend van je Sitebuilder.
Blader naar je homepage.
Beweeg de cursor over de header afbeelding / header strook. De tekst verschijnt 'Header Area bewerken'. Klik erop. Dat zal de Header Area openen.
Rechts zie je een preview van de afbeelding die je wil aanpassen. In de hoek linksonder van de rand van die afbeelding zie je vijf iconen. Klik op de borstel. Je komt nu in de 'Foto Editor'.
Gebruik de optie 'Bijsnijden' (crop) of 'Vergroten/verkleinen' (resize) om de afbeelding te verkleinen.
Gebruik 'Bijsnijden' wanneer je stukken van de afbeelding wil bijknippen. Klik hiervoor op 'Bijsnijden'.
0.Wil je de verhoudingen bewaren maar de schaal wijzigen, klik op 'Proporties vergrendelen'.
Gebruik Vergroten/verkleinen wanneer je alle objecten in de afbeelding behouden wil en enkel de grootte wil wijzigen. Klik op 'Verkleinen/vergroten'.
Om de verhoudingen te bewaren klik je op het slot.
Vul de gewenste afmeting in pixel in.
Ben je klaar, klik op 'Toepassen' en dan 'Bewaren'.
Herhaal dit voor alle afbeeldingen in je diashow. Zorg ervoor dat je dezelfde afmetingen in pixels geeft! Want anders zal je carrousel bij elke afbeelding van vorm veranderen.
Je bent nu terug in je 'Header Area'. Klik nogmaals op 'Toepassen' om af te ronden en op 'Sluiten' om naar de editor terug te keren.
Denk eraan: je header area is verschillend bij elke pagina. Wil je de nieuwe lay-out naar alle pagina's kopiëren, ga je naar de doelpagina en open je daar de header editor. In het tabblad Lay-out kopieer je de lay-out van de pagina die je zojuist bewerkt hebt. Heb je deze handleiding nauwgezet gevolgd, dan is dat je homepagina.
Vooraleer te publiceren gebruik je best de Preview optie om te zien hoe je nieuwe lay-out eruit ziet op de verschillende schermen..
Je kan nu je nieuwe lay-out publiceren. Vergeet niet om ook de wijzigingen voor je mobiele toestel te wijzigen.
U moet begrijpen dat u de header area niet volledig kan verwijderen. Wenst u geen header afbeelding, dan kunt u o.a. dit proberen:
Hebt u een diashow van header afbeeldingen:
Hebt u één header afbeelding:
In het menu aan de zijkant ga je naar het tabblad SEO. Klik erop om de Search Engine Optimization instellingen te opeen. Je zal het header html-code veld vinden in het Head Code of Kop Code menu. Post de volgende code.
<style>
#header-image
{
display:none;
}
</style>
Geeft deze code niet het gewenste resultaat, dan kan de identifier verkeerd zijn - verschillende designs hebben vaak verschillende identifiers. Welke je nodig hebt kom je te weten door de broncode te bekijken. Dat doe je zo:
Voor Google Chrome: Klik rechts op de header afbeelding, en kies Inspect Element uit het uitklapmenu.
Voor Safari: Open de voorkeuren via Safari >Voorkeuren en ga naar het gedeelte Geavanceerd / Meer. Onderaan de pagina vink je het vak 'Toon het Ontwikkelaars menu' aan. Sluit de instellingen af, en ga naar de bovenkant van de pagina. Klik op Ontwikkelaar > Toon broncode
Voor Firefox: Klik rechts op de header afbeelding, en kies Inspect Element uit het uitklapmenu.
Beweeg de cursor over de stukken code tot enkel het header oplicht in de lay-out. Kopieer deze identifier. In dit voorbeeld is jouw identifier 'header-image', en dus zou de lijn code die je moet vinden er zo uitzien:
<div id="header-image" class="XXX">
<img src="http://…" style="…">
</div>
Zie je een andere identifier of class, wijzig de bovenstaande code in het Kop Code menu. Gebruik '#' wanneer je het object aan het beschrijven bent via de identifier -de 'id' waarde- en gebruik '.' in de plaats van '#' wanneer je het object beschrijft via de class waarde.
U kunt een zoekfunctie op uw website activeren. De bezoeker kan dan op uw website, in alle tekstvelden en pagina's, zoeken naar een woord of woordenreeks. Volg hiervoor deze stappen:
Ga naar het beheersgedeelte van uw Sitebuilder.
Ga naar de widget rubriek 'Media'.
Klik het 'Bestand' widget aan en versleep het naar uw ontwerp.
Een pop-up "Bewerken: Bestand" zal verschijnen met aanduiding van de toegestane bestanden. U kunt een beschrijving toevoegen aan uw bestand en een ankertekst, die de tekst zal zijn voor de download link. Klik op 'Bestand Uploaden'.
Gebruik de 'Bestanden Uploaden' button om op uw computer te bladeren naar het gewenste bestand.
Selecteer het bestand van uw computer.
Wanneer het bestand geüpload is, klik dan op de knop 'Verzenden'.
Bevestig nogmaals.
Onderaan ziet u de ankertekst. Bovenaan ziet u de beschrijving van het bestand.
Bent u klaar, klik dan op de 'Publiceren' button in de hoek rechts boven om de wijzigingen in uw website weer te geven.
Met SiteBuilder kunt u gemakkelijk verwijzen naar interne pagina's op uw website. Dat is de perfecte manier om een aangepaste sitemap of een menu aan te maken.
Vooraleer u uw links of verwijzingen gaat aanmaken, zou u reeds uw tekst ingevuld moeten hebben in een Tekst Widget venster.
Selecteer de gewenste tekst die moet verwijzen naar de interne pagina.
In het veld van de tekstverwerker klikt u bovenaan op het icoon met de kettingschakelt.
In het Linktype uitklapmenu kiest u Pagina's.
In het Selecteer Pagina uitklapmenu kiest u de pagina waarnaar u wil linken.
Klik op OK.
Sla uw project op, door te klikken op de knop Opslaan bovenaan rechts.
U kunt het beste de werking van de zopas aangemaakte link testen in de front-end. Hebt u uw website nog niet gepubliceerd, dan kunt u de Preview modus gebruiken. Klik hiervoor op de Preview knop bovenaan rechts.
Met SiteBuilder kunt u heel gemakkelijk verwijzen naar een ander deel van uw tekst binnen dezelfde pagina. Dat is de ideale manier om bovenaan een pagina een inhoudsopgave te maken of een FAQ (Frequently Asked Questions of Veelgestelde vragen). Deze instructies leggen uit hoe u tewerk gaat.
Vooraleer u uw links begint aan te maken, moet u reeds uw tekst ingevuld hebben in een Tekst Widgetvenster.
Eerst moet u de zogenaamde Interne links of Ankers (Anchors) aanmaken. Een anker geeft een belangrijk deel van een pagina aan, waarnaar u later wil verwijzen. Dat kunnen bijvoorbeeld de titels van de verschillende onderdelen van uw tekst zijn.
Selecteer de titel of de tekst waarnaar u wil verwijzen.
In het tekstverwerkingsvenster klikt u bovenaan op het icoontje met de vlag.
Vul de interne link naam in - een naam voor de interne link die duidelijk is voor u. Bevestig met OK.
Als het goed is, zou u nu een vlag moeten zien voor de anker-titel.
Herhaal dit voor elk ankerpunt.
Vervolgens maakt u de links aan naar deze ankers.
Selecteer de tekst die naar het ankerpunt moet verwijzen.
In het tekstverwerkingsvenster klikt u bovenaan op het icoontje met de kettingschakel.
In het Linktype uitklapmenu, selecteert u Interne link in pagina.
In het 'Op naam interne link' uitklapmenu selecteert u de ankernaam - de naam die u in de vorige stap aan de overeenkomende titel gegeven had.
Klik op OK.
Sla uw project op door te klikken op de knop Opslaan rechts bovenaan. U kunt het best de werking van uw zopas aangemaakte links uittesten in de front-end. Hebt u uw website nog niet gepubliceerd, dan kunt u de Preview modus gebruiken.
Klik op de knop Instellingen in het verticaal menu links.
In het menu Instellingen, gaat u naar het tabblad Talen. Hier ziet u twee secties.
Om een nieuwe taal aan de website toe te voegen, klikt u op de knop Toevoegen.
In het uitklapmenu kiest u uw taal naar keuze.
Klik op Verzenden om deze instelling toe te passen.
Klik op Opslaan bovenaan rechtst om deze veranderingen te bewaren. publiceer uw website nog niet!
Afhankelijk van het thema dat u gebruikt, zal u op een bepaalde plek op uw site een knop vinden om van taal te wisselen. Wissel van taal, en vertaal uw content tot uw site volledig tweetalig is.
Klik op Publiceren om de wijzigingen in de backend toe te passen op de frontend van uw site.
In het Widgets menu links klikt u op Instellingen.
Ga naar de onderkant van het venster. Klik op de 'Back-up en Herstellen' knop.
Hier kunt u een nieuwe backup maken indien u op de knop 'Een nieuwe back-up maken' klikt.
Selecteer of u een back-up maakt van uw gepubliceerde versie -de versie die nu online staat- OF de versie waaraan u momenteel werkt in uw editor.
Vergeet niet een naam en een commentaar in te vullen. De datum of de melding gepubliceerd / editor moet u niet invullen, SiteBuilder zal die informatie voor u bewaren.
Klik op 'Back-up aanmaken'
Uw back-up is klaar!
In het Widgets menu links klikt u op Instellingen
Helemaal onderaan het venster klikt u op de knop 'Back-up en Herstellen'
Selecteer de back-up de u wil terugzetten. Hebt u verschillende bestanden, dan kunt u kiezen op basis van de datum en het type - gepubliceerd of concept. (Klik op het pijltje voor de naam om deze informatie te bekijken).
Klik op de knop 'Herstellen'
Bevestig door op de knop 'Ik ben zeker' te klikken
Uw project werd hersteld vanuit de back-up!
Om u vertrouwd te maken met hoe widgets werken, doet u volgende oefening:
Kijk naar de linkerkant van uw scherm. Daar ziet u het widget menu met vijf widget : Gewoon, Sociaal, Media, Geavanceerd en Functies.
Om een widget te gebruiken: klik en sleep het naar de gewenste plaats in de lay-out. Probeer dit met een van de widgets uit de Gewoon reeks.
Beweeg de cursor over het zopas ingevoegde widget. Links bovenaan ziet u nu vijf icoontjes. Dat zijn de widget controllers.
Met het tandwiel opent u de widget editor. Denk eraan: in tegenstelling tot de andere controllers werkt deze verschillend bij iedere widget!
Klik op de schuifbalken om het ontwerp van de widget box aan te passen - marges, witruimte, achtergrond, randen, enz.
Om een widget te kopiëren met zijn content en instellingen klikt u op het widget kopiëren icoon, om vervolgens de kopie met klikken en verslepen op de gewenste plaats te zetten.
Om een widget te verplaatsen klikt u op het kruisvormige widget verplaatsen icoon; u kunt het widget verplaatsen naar waar u wil.
Verwijder de widget door op het rode X te klikken.
Onderzoek nu zelf alle andere widgets!
De kleur van de header en van de footer is afhankelijk van het template dat u gekozen hebt. Sommige templates laten u kiezen uit verschillende skins.
Om de skin van uw template te wijzigen:
In uw back-end gaat u naar de onderkant van het menu links. Klik op 'Ontwerp'.
U bent nu in de Design Editor. Heeft uw template verschillende skins, dan kunt u dit zien in het laatste tab in het menu aan de zijkant, na Thema's, Tekst en Achtergrond. Bij sommige thema's ziet u ook Skins staan.
Kies een skin kleur en klik op 'Verzenden'.
Ervaren gebruikers kunnen stijl tags toevoegen aan de header van de website.
Open uw website in een browser en bekijk de HTML-code. Zoek naar de class of id naam van header en footer divs van uw thema en de eigenschap achtergrond.
In uw back-end gaat u naar onderaan het menu in de zijbalk. Klik op 'SEO'. Dit opent het SEO-paneel van uw paginanavigatie.
In het luik Kop Code voegt u uw gewenste stijl in. Het voorbeeld hieronder is voor een thema waarbij de header div .top heet, de footer div .footer heet, en de eigenschap achtergrond is, met zwart als kleur.
<style>
.top {background:#000000;}
.footer {background:#000000;}
</style>
Vervang #000000 door een kleur naar keuze.
Klik op 'Verzenden'
Denk eraan dat u de header van elke pagina individueel moet wijzigen - u kunt verschillende kleuren gebruiken voor verschillende delen van uw site!
Tip: Zou je de Kop Code code willen toepassen voor de hele site, dan kan dat indien je versie 3 van Sitebuilder hebt: klik op "Instellingen" en blader naar beneden: de Kop Code sectie hier telt voor alle pagina's.
Klik op het 'Opslaan' icoon bovenaan rechts van uw scherm, en vervolgens op 'Publiceren'.
In het verleden was de belangrijkste factor om de aandacht van de zoekmachines te trekken de densiteit van trefwoorden - het aantal keren dat een bepaald trefwoord in uw website voorkomt. Tegenwoordig is het optimaliseren voor zoekmachines of Search Engine Optimization veel complexer. U moet zelfs een hoge densiteit van uw trefwoord vermijden. Daarentegen moet u de trefwoorden op strategische plaatsen zetten - dit is een lijst van deze plekken, en hoe u het correct doet:
De variabelen bij uw navigatie helpen u om hoger in de SEO resultaten te komen maar bepalen ook de manier waarop het resultaat weergegeven wordt in de lijst.
In uw back-end gaat u naar het menu in de zijbalk. Klik op 'SEO'. Dit opent het SEO paneel voor de navigatie op uw pagina. De structuur van de pagina is erg belangrijk - zorg voor korte en duidelijke omschrijvingen.
'Openen voor Zoekmachines' - vink dit aan wanneer uw website klaar is. Hierdoor maakt u uw website beschikbaar om geïndexeerd te worden door de zoekmachines.
'Titel': De titel van de pagina wordt weergegeven in het tabblad van de browser.
'Omschrijving': Deze tekst zal verschijnen onder de paginatitel in de zoekmachines.
'Trefwoorden': Vul hier 3 - 5 trefwoorden of trefzinnen in - een paar algemene, en enkele die enkel voor deze pagina relevant zijn.
'Vriendelijke URL': Hier bepaalt u het adres van die bepaalde pagina. Het beste schrijft u gewoon de naam van de pagina, in kleine letters, gescheiden door koppeltekens.
Herhaal dit voor al uw pagina's.
Verzenden.
Vergeet niet om te Publiceren of de wijzigingen worden niet van kracht.
Tekst is de krachtigste SEO factor. Gebruik uw belangrijkste trefwoorden in titels, en aan het begin van teksten en paragrafen.
Zorg ervoor dat u titels correct aanbrengt. Klik daarvoor op uw tekstveld.
Selecteer de tekst die een titel moet worden.
Uit het uitklapmenu wijzigt u nu Normal naar Heading 1.
Klik het menu weg.
Zoekmachines kunnen de inhoud van een afbeelding niet indexeren. Gebruik Alt (alternatieve) tekst om zelf een beschrijving te voorzien.
Beweeg de cursor over de afbeelding tot u het symbool 'Afbeelding Bewerken' ziet verschijnen. Klik erop.
U bevindt zich nu in het Bewerken: Afbeelding paneel. In het tabblad Tekst vindt u het vak Alt. Let op. Het gebruik van de Titel en Omschrijving vakken zal ook uw SEO bevorderen, maar de tekst zal ook in uw pagina verschijnen. De Alt-tekst zal enkel zichtbaar zijn wanneer de afbeelding niet geladen kon worden.
Verzenden.
Ja, dat kan!
Gebruik deze handige gids om snel aan de slag te gaan met uw nieuwe Sitebuilder.
Stap 1: Nieuw bij Sitebuilder?
Stap 2: Thema's en widgets
Stap 3: Het hoogstnoodzakelijke
Stap 4: Trek de wereld in
Gebruik deze quickstart om snel van start te gaan met uw Reseller Hosting.
Stap 1: Aanmaken servicepakket
Alvorens u een hostingpakket kan aanmaken dient u een servicepakket aan te maken, Dit servicepakket zal immers de limieten bepalen waaraan de hostingaccount aan zal moeten voldoen. Het servicepakket zal dus bepalen hoeveel schijfruimte er is, hoeveel mailboxen er kunnen worden aangemaakt en dergelijke meer.
Hoe kan ik een service pack aanmaken?
Enkele seconden later is uw nieuwe service pakket actief en kan u dit gebruiken om een account aan te maken.
Stap 2: Aanmaken hostingaccount
Eens het servicepakket is aangemaakt, kan er een hostingaccount worden aangemaakt. Hiervoor kan u de handleiding in onderstaande artikel volgen.
Hoe kan ik een hostingaccount aanmaken?
Enkele seconden later is uw nieuwe account aangemaakt en kan u hiermee aan de slag. Hieraan zal tevens meteen een nieuwe tijdelijke naam gekoppeld zijn, langs welke u deze weg kan consulteren:
Dit betreft dan een tijdelijke URL in de vorm "domeinnaambe.webhosting.be". Deze kan u gebruiken om de inhoud van het hostingpakket te bekijken zolang de effectieve domeinnaam hier niet aan gekoppeld is.
Stap 3: Koppelen van de domeinnaam aan de hostingaccount
Eens het hostingaccount actief is, zal u ongetwijfeld de domeinnaam naar dit hostingaccount willen laten doorverwijzen. Maak de nodige A-records aan en verwijs deze naar het ip-adres van het hostingpakket. Dit IP-adres kan u terugvinden in My rs-host, door bij "Reseller" op "Acccounts" te klikken. Klik daarna op "Beheer". U krijgt nu het ip-adres te zien.
Wat is een A record en hoe kan ik het aanmaken of wijzigen?
Deze instellingen worden ongeveer 4 uur na het instellen actief, op voorwaarde dat uw domeinnaam onze nameservers (ns3.combell.net / ns4.combell.net of ns3.european-server.com / ns4.european-server.com) gebruikt.
Ga in uw back-end naar het menu links. Onderaan vindt u Statistieken. Klik erop.
In het tabblad Overzicht ziet u een tijdlijn met uw bezoeken
In het tabblad Content Data vindt u informatie over het aantal bezoeken per pagina
In het tabblad Bronnen Verkeer ziet u informatie over de bronnen, de media en de trefwoorden die bezoekers naar uw site geleid hebben
In het tabblad Geo Locatie vindt u een landkaart met daarop het aantal bezoeken per land.
Uit het widget menu links kiest u Gewoon. Klik en versleep de Afbeelding widget naar uw template. U zal meteen het standaard afbeeldingkader zien verschijnen.
Beweeg de cursor boven de afbeelding. De woorden 'Afbeelding Bewerken' zullen verschijnen. Klik erop.
Met 'Effecten' kiest u wat er gebeurt wanneer u de cursor over de afbeelding beweegt - op de uiteindelijke versie van de website wel te verstaan.
Met 'Uitlijnen' positioneert u de afbeelding.
Met 'Link' kunt u uw afbeelding laten verwijzen naar een website, een pagina op uw site, of naar een mail.
Met 'Tekst' voegt u 'Titel', 'Alt' tekst in (zeer belangrijk voor de SEO) en de 'Beschrijving'.
De Sitebuilder bevat een overvloed aan gratis afbeeldingen. Maar uw eigen afbeeldingen toevoegen wordt altijd wel erg gewaardeerd door uw bezoekers. Hier leert u hoe u uw afbeeldingen kunt uploaden en een carrousel kunt creëren:
Klik op het tabblad 'Bestanden' in het menu uiterst links.
U bevindt zich in uw bestandsbibliotheek. Klik op de 'Bestanden Uploaden' knop bovenaan rechts. Blader om de afbeeldingen te vinden die u wil gebruiken, en voeg die in. Sluit af met 'Sluiten'.
Voeg een carrousel aan uw lay-out toe: in het widget-menu links kiest u het tabblad 'Media'. Klik en versleep de Afbeeldingen Carrousel naar de gewenste plaats in uw lay-out. De manager wordt meteen geopend.
Links ziet u een aantal standaard afbeeldingen. Verwijder die.
Voeg afbeeldingen toe vanuit de bestandsbibliotheek door te klikken op de 'Add Image' knop te klikken of door ze te klikken en verslepen vanuit een lokaal bestand.
Schakel over naar het tabblad 'Settings & Preview'. Speel wat met het ontwerp, instellingen van de player en de geavanceerde instellingen tot u het gewenste resultaat bereikt. Rechts ziet u altijd meteen een preview.
Klik op 'Save & Close' om terug te keren.
Publiceer en bekijk de preview.
Herhaal deze stappen tot u het gewenste resultaat bereikt.
Het Contact Formulier widget hebt u nodig op uw Contacteer Ons pagina.
Een contact formulier toevoegen aan uw lay-out: kies het tabblad Gewoon uit het widget-menu links. Klik en versleep het Contact Formulier widget naar de gewenste plaats in uw template.
De editor wordt meteen geopend. Kies op het tabblad 'Formulieren' het gewenste formaat.
Schakel over naar het tabblad 'Instellingen'. Vul de velden in.
'Naam Formulier' en 'Omschrijving' zullen getoond worden op uw pagina.
Wanneer de bezoeker op de knop Verzenden klikt, zal u een e-mail ontvangen.
Vul bij de velden 'E-mail Onderwerp' en 'E-mail Boodschap' een voor u duidelijke tekst in - u wil een bestelling niet per vergissing als spam beschouwen.
Controleer voor alle zekerheid of het e-mail adres van de ontvanger juist gespeld is.
Pas de 'Dank U Boodschap' aan; die zal uw bezoeker vertellen dat hij alles goed gedaan heeft en dat u zijn boodschap ontvangen zal.
Wij raden u ten stelligste aan om een 'CAPTCHA' te gebruiken - zoniet zou u enorme hoeveelheden automatische spamboodschappen kunnen ontvangen.
Bent u klaar met de aanpassingen, klik op 'Verzenden'. Uw formulier is klaar.
Tip: Wil u uw contact formulier nog verder aanpassen, maak dan gebruik van de Formulier Manager van het Gewoon widget set.
De Sitebuilder bevat een uitgebreide bibliotheek met gratis afbeeldingen. Maar bezoekers zullen wellicht uw eigen afbeeldingen meer waarderen. Zo kunt u afbeeldingen uploaden en zelf een galerij samenstellen:
Bij het tabblad Media klikt u op 'Bestand'.
U bent nu in uw bestandsbibliotheek. In de hoek boven rechts vindt u de 'Bestanden Uploaden' knop. Klik erop, blader naar de afbeeldingen die u in uw galerij wil gebruiken, en voeg ze toe. Klik op 'Sluiten'.
Een galerij toevoegen aan uw lay-out: bij het widget-menu links kiest u het tabblad 'Media'. Klik en sleep de Galerij widget naar de gewenste plaats in uw template. De Galerij Editor wordt meteen geopend.
U ziet rechts een aantal standaard afbeeldingen. Klik op 'Wissen' bij elke afbeelding die u wil wissen.
In de hoek links boven ziet u een button 'Bestanden Uploaden'. Hierop klikken zal uw bestandsbibliotheek openen.
Selecteer de gewenste bestanden en klik op 'Verzenden'.
In het gedeelte Lay-out kiest u een vergrootglas-functie.
De afmeting en ratio in het Miniatuurafbeelding gedeelte bepalen welk deel en hoeveel van uw afbeelding getoond worden. U moet dit later misschien nog aanpassen, in functie van de focus op uw afbeeldingen.
Herschik de volgorde van uw afbeeldingen door middel van de pijltjes in de miniatuurafbeeldingen.
Voeg desgewenst beschrijvingen toe - die zullen verschijnen onder de vergrote afbeelding.
Klik op 'Verzenden'
Publiceer en bekijk uw galerij in preview
Herhaal deze stappen tot u het ideale uitzicht bereikt
Een Google Map is van grote waarde voor plaatselijke handelszaken. Zo kunt u die gebruiken:
Een Google Maps aan uw lay-out toevoegen: in het widgets menu links kiest u het tabblad Gewoon. Klik en versleep de Google Maps widget naar de gewenste plaats in uw template.
Meteen wordt de editor geopend. In het tekstveld 'Locatie' vult u uw adres in. Klik op 'Toevoegen'.
Op dezelfde manier kunt u verschillende adressen toevoegen. Al uw locaties zullen in de lijst onder de map verschijnen.
Klik op het "+" of "-" symbool in de hoek links boven van de kaart om de schaal van de map te bepalen, zoals hij standaard zichtbaar zal zijn.
Klik op 'Verzenden'.
De Kolommen widget is handig wanneer u een netjes geordende lay-out wil.
Kolommen toevoegen aan uw lay-out: kies uit het widget-menu links de tab Gewoon. Klik en sleep het Kolommen widget in uw template.
Beweeg de cursor over het Kolommen vak tot het bewerken-icoon verschijnt in de hoek linksboven.
Kies het aantal kolommen dat u wil gebruiken door gewoon op het getal 2, 3, 4 of 5 te klikken.
Klik op de scheidslijn tussen de kolommen en versleep die naar links of rechts om de breedte van uw kolommen aan te passen. Een handige tag met het percentage van de breedte verschijnt onderaan.
Plaats andere widgets in de kolommen.
Tip: Om een kolom-widget te verwijderen moet u eerst alle content eruit verwijderen. Daarna beweegt u de cursor over de box en klikt u op het rode kruis.
Uit het widgets menu links kiest u het tabblad Gewoon. Klik en versleep het Tekst widget vervolgens naar uw template. U kunt onmiddellijk beginnen te typen.
Wanneer u op een tekst widget klikt, verschijnt er een venster om dit te bewerken. Dit is de editor van de tekst widget. Maak hiervan gebruik om tekst vet, cursief, of onderlijnd te zetten, of een link toe te voegen, de spelling te controleren, lettertype en kleur te wijzigen, een kleur te kiezen enz. Tip: Maak gebruik van de Headings, dat is beter dan de tekst enkel maar te formatteren. Zoekmachines hechten meer belang aan trefwoorden in headings.
Bedenk wel dat elk tekstveld op zichzelf staat. Twee tekstvelden naast elkaar zetten zal ze niet laten samensmelten. Beweeg de cursor over de widget die u wenst te verwijderen en klik op het rode X in de hoek rechtsboven. Bij meerdere tekstvelden moet u die een voor een verwijderen.
Video content is erg populair. Met de YouTube widget kunt u YouTube video's inbedden in uw website. Zo doet u het:
Een video toevoegen in uw lay-out: kies het tabblad 'Media' in het menu links. Klik en versleep de YouTube widget naar de gewenste plaats in uw lay-out. De manager wordt meteen geopend.
Bekijk de overige instellingen en activeer naar believen.
Klik op 'Verzenden'
Indien jouw SiteBuilder pakket ook Mobiel ondersteunt, dan kan je gebruik maken van een speciale Creatieve Modus om je website nog beter aan te passen voor de smartphone!
Alle SiteBuilder designs zijn gebruiksvriendelijk voor het mobiele toestel. Elk ontwerp werd geoptimaliseerd om zowel op de desktop, tablet als smartphone er goed uit te zien.
Alle mobiele sites zijn aangemaakt in de standaard Mobiele Snelle Modus. Alle wijzigingen die aan de web-versie aangebracht worden, worden ook toegepast op de mobiele versie.
Omvat jouw pakket een mobiele site, dan kan je die site bekijken en bewerken via het tabblad Mobiel bovenaan links in je scherm.
Maar let op: je moet eerst overschakelen naar de Creatieve Modus! Zodra je overgeschakeld bent, zal jouw Creatieve Modus mobiele site geen wijzigingen meer aannemen die in de web-modus gemaakt worden.
Wat betekent dit? Veronderstel dat je je website al aangemaakt hebt. Je schakelt voor de mobiele versie over van de Quick Modus (de standaard modus) naar de Creative modus. Je kan nu afbeeldingen, teksten en andere widgets rechtstreeks in de mobiele versie van je site wijzigen, zonder dat dit effect heeft op je web versie. Ben je tevreden met het resultaat, publiceer je site. Enkel je mobiele versie is gewijzigd.
Veronderstel echter dat je beslist om een nieuwe pagina aan de web-versie toe te voegen. Ben je nog in de Mobiele Creatieve Modus, dan zal die pagina niet te zien zijn op de mobiele site. Schakel je echter over naar de Quick modus, dan zal de pagina te zien zijn, maar alle wijzigingen die je in de Creatieve Modus gemaakt had zijn verdwenen. Je mobiele site is weer een replica van de web-versie. Geen paniek echter: schakel je terug naar de Creatieve Modus, dan zal je zien dat alle wijzigingen bewaard bleven. Alleen de nieuwe pagina wordt vertoond. Je moet die namelijk manueel toevoegen.
Denk er wel aan dat je geen twee verschillende designs (thema's) kan hebben op je web-versie en je mobiele versie. Wijzig je het design van je web-versie, dan zal het design van de mobiele versie ook veranderen, ongeacht of je nu in de Creatieve of Snelle modus bent van het tabblad Mobiel.