Website is gemaakt enkel met gebruik van MAGIX Web Designer en geen andere afbeeldingen of software-gereedschappen.
Geavanceerde functies

Herhaalde elementen

Het is gebruikelijk om sommige items terug te laten komen op alle pagina's van uw website. De koptekst, de kopafbeelding, de navigatieknoppen en de voettekst op deze website zijn goede voorbeelden. In Web Designer noemen we dit herhaalde objecten. Er wordt een klein bloemsymbool getoond zoals deze, zichtbaar in de rechter bovenhoek, wanneer u deze selecteert. Het is eenvoudig om uw eigen terugkerende elementen te creëren. Probeer een object aan deze pagina toe te voegen, bijvoorbeeld een foto, of teken een rechthoek of misschien bestaande clipart. Gebruik het selectiegereedschap om het element en het menu te selecteren: 'Arrangeren -> Herhaald object -> Herhalen op alle pagina's'. In de pagina- en lagengalerie rechts kunt u zien dat het element op alle pagina's op dezelfde plek wordt herhaald. Wanneer het wijzigt of verplaatst, worden alle kopieën geüpdatet. Tip: wanneer u niet wilt dat het element op een pagina wordt weergegeven, verwijder dit element dan van de pagina. Wanneer u wilt dat een kopie niet automatische geüpdatet wordt, selecteert u het object en dan de menuoptie Arrangeren -> Herhaald object -> Stop updaten.

Responsief webdesign

Met Web Designer kunt u mobiel geoptimaliseerde websites maken die dynamisch kunnen worden aangepast aan verschillende breedten van apparaten. Zo kunt u een versie van uw website maken die gesneden is op smalle telefoonschermen en tegelijkertijd een ander lay-out en tekstformaat biedt dat geschikt is voor apparaten met bredere schermen zoals tablets en standaard computers.    Hier is een voorbeeld dat drie lay-outs levert voor mobiele, tablet- en normale computerbrowsers. Alle websitethema's in Web Designer bevatten mobiele varianten, maar wanneer u uw website op een ouder thema gebaseerd hebt of uw eigen ontwerp gemaakt hebt, dan kunt u varianten aan uw eigen ontwerp toevoegen. Rechtsklik op de pagina- achtergrond en selecteer vervolgens Website varianten > Website varianten > Creëren. Lees deze populaire online- introductie om meteen te kunnen beginnen.

Online bewerken met Online Designer (BETA, alleen Web Designer Premium)

Online Designer biedt een uiterst simpele manier om de inhoud van uw Xara-website of -document te bekijken, te bewerken en te updaten met behulp van een browser op elke computer of tablet (zelfs een Mac of Android-tablet!), vanuit overal in de wereld en de website opnieuw te publiceren. Het is het perfecte antwoord voor wanneer u de tekst van website wilt actualiseren of wilt samenwerken met collega's of klanten. Deze service bevindt zich momenteel in het beta-stadium, maar u kunt het proberen. Lees meer in he Online Designer intro doc.

Supersites (alleen Web Designer Premium)

Supersites vormen een geavanceerde functie van Web Designer Premium. Dit kunnen losse scrolpagina's zijn of opvallende pagina-overgangen om uw website te doen onderscheiden van de massa. Supersite voorbeeld 1 : een responsief restaurantmenu bedoeld voor tablets en standaard computers. Roteer je apparaat (of wijzig de breedte van de browser) om een de lay-outs te zien voor liggend en staand (niet voor mobieltjes) met een automatische effect 'op het scherm aanpassen'. Supersite voorbeeld 2 : een eenvoudige slideshow met 'op het scherm aanpassen', oriëntatiedetectie en retina resolutie-afbeeldingen. Deze bevatten grote foto's dus gaat het beste bij snelle verbindingen. Deze beide voorbeelden ondersteunen veeggebaren op touch-apparaten om van pagina naar pagina te gaan. Om uw website als een supersite te exporteren rechtsklik op uw pagina en selecteer webeigenschappen. Selecteer in het websitetabblad webexport-opties en controleer de optie supersite. Nu kunt u kiezen tussen de stijlen scrollen en overgangen.

Presentaties (alleen Web Designer Premium)

Met de Premium-versie van Web Designer kunt u nu ook internet-presentaties maken, dat zijn internet- gebaseerde PowerPoint-achtige slideshows waar uw internetbezoekers zelf doorheen kunnen navigeren. Hier is een voorbeeld van een internet-presentatie.

Gefixeerde objecten & uitgerekte achtergronden (alleen Web Designer Premium)

Twee veel voorkomende eigenschappen van hedendaagse webdesigns zijn gefixeerde objecten (objecten die op hun plaats blijven wanneer u over de pagina scrolt, typisch voor navigatiebalken of sociale-netwerk- knoppen) en achtergronden die worden uitgerekt over de gehele breedte van het browservenster. Hier is een voorbeeldwebsite met zowel gefixeerde objecten als uitgerekte achtergronden. Het is eenvoudig deze te maken: rechtsklik hiervoor op het object dat u wilt aanpassen en selecteer website-element gefixeerd/uitgerekt.

Google-lettertypen (alleen Web Designer Premium)

Deze tekst gebruikt een lettertype genaamd Open Sans, een heldere, moderne groep van lettertypes die zich in Web Designer bevinden. Maar u heeft nu de keuze uit meer dan 600 lettertypen, dankzij Google lettertypen. Web Designer bevat een fantastische lettertype-picker en deze downloadt en installeert elk lettertype dat u kiest. Nog beter, dit zijn normale Windows-lettertypes die wanneer ze eenmaal geïnstalleerd zijn met elke Windows-applicatie werken. Wanneer deze gebruikt worden in webdocumenten worden deze lettertypes geleverd door servers van Google (dat bespaart u bandbreedte) en deze zijn compatibel met alle moderne browsers. Om een Google-lettertype te bekijken en te installeren van het lettertype uitklapmenu (tekstgereedschap), klik op de toevoegen-link die hier getoond wordt.

Rondvloeiende tekst

Om een object tekst te laten afstoten, klik met de rechter muisknop op het object en selecteer 'Tekst afstoten onder...' Wanneer u nu het object over de pagina beweegt, wordt alle tekst rondom dit object afgestoten. Dit zal natuurlijk alles op uw pagina opnieuw ordenen en misschien moet u elementen opnieuw positioneren of de paginagrootte wijzigen om deze aan de lopende tekst aan te passen.

Aanpassingen pagina

Als u hier tekst toevoegt of verwijdert, verandert de paginagrootte zich om zich aan te passen aan de tekstwijzigingen, alle items bewegen zich naar boven of naar beneden al naar gelang wat nodig is, inclusief de afbeeldingen en de voetregel. Zelfs de afbeelding van de bloem beneden op de pagina blijft op de juiste plek. Deze worden beheerd vanuit de positie op de pagina contextmenu (rechtsklikken in het Selectiegereedschap). Elementen met de instelling 'wegduwen' (zoals deze tekstkolom) duwt de paginavoettekst en alle andere elementen gemarkeerd met 'wegduwen' weg. U kunt afbeeldingen of foto's ook op een lijn met de tekst plakken of u kunt vrij rondzwevende afbeeldingen aan een punt in de tekst vastmaken. Dit betekent dat de afbeelding zich verplaatst met de omringende tekst terwijl u de tekst bewerkt. De twee afbeeldingen hier direct onder zijn voorbeelden - voeg een paar lege regels aan de tekst toe om deze te zien bewegen.

Paginaselectie en weergave

De pagina- en lagengalerie wordt getoond aan de rechterkant van het venster. Klik gewoon op een thumbnail om de gewenste pagina te verplaatsen. Klik op de kleine driehoek naast elke pagina om de galerie uit te breiden en de lagen op elke pagina te tonen. Wanneer u liever de weergave heeft met het scrol-document waar alle pagina's onder elkaar worden getoond onder 'word processor stijl', klik met de rechter muisknop op de pagina-achtergrond en selecteer 'Meervoudige-paginaweergave'.  U kunt eenvoudig pagina's opnieuw ordenen door ze te slepen naar de pagina-en lagengalerie. U kunt ook pagina's en objecten hernoemen, toevoegen of verwijderen. 

Andere gereedschappen

Laten we enkele andere gereedschappen en functies van Web Designer onderzoeken. U kunt deze uitproberen op de semi-transparante tekstballon onderaan. Denk er aan dat u voor de meeste handelingen eerst het element moet selecteren (klik hierop met het selectiegereedschap). Wijzig de kleur: sleep een kleur vanuit de kleurlijn onderaan naar de vorm. Of probeer de kleuren-editor (Ctrl+E). Verander de grootte, positie, hoek: met het selectiegereedschap aan de vier controlepunten rondom de vorm slepen. Voeg een zachte schaduw toe: selecteer het schaduwgereedschap en sleep dit naar de ballonvorm. Pas de hendels bovenaan aan. Voeg een geleidelijke kleurvulling toe: selecteer het vulgereedschap (verfpot-icoon), en sleep over uw vorm. Sleep aan de pijluiteinden om aan te passen. Probeer een kleur op de uiteinden van de vulpijl te plaatsen. Of selecteer een pijleinde en probeer de kleuren-editor (Ctrl+E). Maak het semi-transparant: selecteer het transparantiegereedschap (wijnglas) en pas de transparantie- waarde aan met behulp van de regelaar bovenaan. Sleep de vorm over de pagina om het transparantie- effect te zien. Nog beter: sleep in het transparantiegereedschap over het object. Zo geeft u het object een geleidelijke transparantie. Bewerk vorm: dit is een beetje meer geavanceerd. Selecteer de vorm, ga naar het  vormgereedschap (in het uitklapmenu van het derde gereedschap linksbeneden). Sleep aan een kant van de vorm of op een van de kleinere controlepunten. Wanneer u wel eens vector béziercurve bewerkingsgereedschappen gebruikt heeft, zal u dit bekend voorkomen. Uiteindelijk: bekijk een preview van uw aanpassingen - alles wat u heeft aangepast, functioneert in de browser. (Wanneer u andere websiteprogramma's, HTML-editors of grafische software heeft gebruikt, zult u merken wat de voordelen van Web Designer zijn. De mogelijkheid alles opnieuw te positioneren naar wens, samen met de grafische gereedschappen en nauwkeurige WYSIWYG resultaten maak Web Designer vrijwel uniek onder de websiteprogramma's.)
Een voorbeeld van een halftransparante vorm
MAGIX Web Designer
Zelfde website, andere lay-outs geoptimaliseerd voor verschillende apparaten. Klik om te vergroten.