TEKSTEN UIT WORD (EN ANDERE EDITORS) PLAKKEN

Niet doen: Rechtstreeks tekst uit word (of een andere tekstverwerker) kopiëren en plakken. Er wordt dan code vanuit de tekstverwerker meegenomen, waardoor de tekst niet goed meer op te maken is.

Oplossing 1: De tekst eerst in het kladblok van de computer te plakken, die tekst weer kopieëren en dan in de editor te plakken. Daarna de tekst opmaken met de editor.

Oplossing 2: Je bericht rechtstreeks in de editor op de site typen.

TEXT OPMAKEN

Het opmaken van tekst lijkt heel erg op zoals je dat doet in andere tekstverwerkers, zoals word: Selecteer de tekst en klik op b.v. 'bold', 'italic', 'uitlijnen' 'lijst' enz. Verder is het niet nodig om veel opmaak te doen aan je tekst, omdat dit al automatisch geregeld is via de template.

Kopjes maken.
Gebruik het "format" pictogram om kopjes te maken (Heading 1, heading2, enz.)
De opmaak daarvan is eveneens centraal geregeld.

LET OP: Tussen een kopje en paragraaftekst moet een zgn. harde enter (dat is gewoon de enterknop op je toetsenbord) zitten, anders wordt alle tekst die onder het kopje zit ook opgemaakt als koptekst.

TIP: Tekst die opgemaakt wordt als heading1, heading2, etc. wordt door google als belangrijker gezien, dus het is een goed idee om hier zoekwoorden in te verwerken.

AFBEELDINGEN PLAATSEN

Afbeeldingen uploaden en plaatsen
editormodus

1. Ga in de tekst staan waar je de afbeelding wilt hebben
2. Klik op het pictogram 'insert/edit image' (de image-manager pop-up verschijnt; zie afbeelding hieronder)
3. Klik op 'upload' (A) (er verschijnt opnieuw een pop up)
4. Klik op 'browse' in de nieuwe pop-up
5. Zoek de afbeelding(en) op en klik op 'OK'
6. Klik op 'upload'
7. Klik op 'close'
8. Selecteer de (pas upgeloade) afbeelding in het venster midden onder (B) door er op te klikken
9. Klik op 'insert/oke' (C)

Wanneer je reeds eerder een afbeelding ge-upload had, kun je stap 3 t/m 7 overslaan.

EEN (REEDS GEPLAATSTE) AFBEELDING AANPASSEN

Formaat van de afbeelding aanpassen:

1. Klik op de afbeelding die je wilt aanpassen
2. Klik op "Insert/Edit image"
3. Vink ‘keep aspect’ ratio aan (D) zodat de afbeelding niet vervormt.
4. Vul de gewenste breedte of hoogte in pixels in.
5. Klik op 'tab'
6. Als je tevreden bent klik je op 'update' (C)

Uitlijning, marges en tekstomloop
Deze zijn centraal geregeld en worden automatisch ingesteld bij het plaatsen van een afbeelding. Bij deze automatische instellingen is ook rekening gehouden met een juiste weergave op mobiele apparaten.
Mocht dat nodig zijn, dan kun je deze instellingen per afbeelding overschrijven door ze aan te passen in de image manger. In de rechter bovenhoek zie je globaal een voorbeeld van hoe je aanpassingen er uit komen te zien.

TIP: Bij het tabblad 'Advanced' (E), kun je een titel invullen voor de afbeelding. Dit maakt de site zoekmachinevriendelijker.

AFBEELDINGEN OP MAAT SNIJDEN MET PIXLR

Afbeeldingen uploaden en plaatsen vanaf je computer

Voordat je afbeeldingen upload en op de site plaatst kun je ze handig bijsnijden (croppen) m.b.v. pixlr.

1. Ga naar https://pixlr.com/editor/
2. In het menu links boven kies 'bestand' > afbeelding openen
3. Zoek de afbeelding op je compuer en klik 'open
4. Klik op het uitsnijgereedschap in het gereedschappenpalet aan de linker kant
5. Kies bovenin bij 'beperking' voor 'outputgrootte'
6. Vul daarna bij breedt en hoogte de waarde in pixels in
7. Snij een gebied in de foto uit door met de muis te klikken, vasthouden en dan slepen
8. Druk op enter
9. Als je tevreden bent over het resultaat, kies je bij bestand: bewaren
10. Als je niet tevreden bent klik je op CTRL + Z (undo) en trek je opnieuw een kader

In de video hieronder zijn bovenstaande stappen in beeld gebracht.

LET OP: Als het resultaat wat korrelig wordt heeft het oorspronkelijke bestand een te kleine resolutie. Zorg voor een beter bestand of kies een groter gebied uit de oorspronkelijke foto.

TIP: Aan de rechterkant van pixlr kun je het beeld op 100% zetten, zodat je het uiteindelijke resultaat op ware grote kunt bekijken.

LINKS MAKEN

1. Selecteer met de muis het stukje tekst (of de afbeelding) waar je een link op wilt maken
2. Klik op het 'Insert/Edit link' Er verschijnt een popup venster.
3. Plak hier de volledige (dus http://www....enz) url.
4. Om een e-maillink te maken gebruik je het envelop-pictogram en daar typ je het e-mailadres in

LINK VERWIJDEREN: selecteer het stukje tekst of de afbeelding waar de link op staat en klik op het ‘break-link’ pictogram (ziet er uit als een gebroken ketting)

TIP: Om de link te laten openen in een nieuw venster, kies je onderaan, bij (target/doel) open in new window / openen in nieuw venster.

BESTANDEN PLAATSEN

LET OP: De bestanden (kleurenkaarten, veiligheidsbladen e.d.) die als 'knop' in de productindex en bij de producten zelf staan, worden op een ander wijze gekoppeld. Zie de instructie 'PRODUCTINDEX'

Gebruik de file-manager om bestanden toe te voegen. De filemanager werkt vergelijkbaar als de image-manager.
1. Klik op het pictogram van de file-manager
2. Upload een bestand via de uploadknop of zoek een reeds ge-upload bestand
3. Vink evt aan of je een pictogram bij het bestand wilt plaatsen
4. Bedenk een tekst waar het bestand aan gekoppeld is (Deze wordt weergegeven als link-tekst op de pagina)

YOUTUBE FILMPJE PLAATSEN

1. Ga met de muis op de plek in de tekst staan waar het filmpje moet komen.
2. Klik op de 'Insert/Edit media'. Er verschijnt een popup.
3. Kies bij media type voor "youtube".
4. Plak de volledige link van het filmpje in het veld naast "url".
5. Klik op 'insert'

NIEUWSBERICHT MAKEN

1. Klik in het menu rechts boven op de site op "nieuwsbericht".
2. Typ de tekst in, plaats eventueel een afbeelding en geef het bericht een titel.
3. Ga in de tekst staan waar je een lees meer knop wilt hebben

4. Klik op 'insert read more'

Na opslaan komt het bericht bovenaan op de nieuwspagina te staan. (Berichten worden automatisch op datum gesorteerd; de meest recente berichten bovenaan.)

De vormgeving van de nieuwsberichten is automatisch ingesteld. Het is dus nodig om bijvoorbeeld marge tussen de afbeelding en tekst te maken, uit te lijnen etc. (Mogelijk is de weergave in de editor een beetje anders dan op de site.)

TIP: Als je een mededeling (b.v. een melding van vakantieperiode) een tijde bovenaan wilt houden kun je de publicatie datum in de editor aanpassen (b.v. op het jaartal 3000 o.i.d. zetten)

Nieuwsberichten depubliceren
Via de knop 'publiceren' bovenaan de editor kun je (bij status) een bericht depubliceren, zodat deze niet zichtbaar is voor publiek.

DEALERSPAGINA

De dealerspagina moet worden bijgewerkt via het beheergedeelte

1. Ga naar: www.auro.nl/administrator
2. Log in met dezelfde gebruikersnaam en wachtwoord als waarmee je op de site inlogt
3. In het horizontale menu bovinin klik je op 'componenten'.
4. Vervolgens kies je uit het dropdown-menu ‘Store Locator’
   Hier kun je dealers aanpassen, nieuwe dealers aanmaken en dealers depubliceren of verwijderen.

Ga als volgt te werk bij het toevoegen van een dealer:

1. Klik 'nieuwe dealer'
2. Vul naam in
3. Vul adres in (Straat, nummer, postcode, plaats)
4. Klik op de knop ‘calculate coordinates’
5. Koppel de dealer aan een categorie ('Winkels & webwinkels' of 'Houten vloeren')
6. Zorg dat status op 'gepubliceerd' staat.
   (Tags en featured worden niet gebruikt en kan zo blijven staan.)

7. Bij de description kan een afbeelding worden geplaatst. De afbeelding moet een afmeting hebben van 300 px breed en 200 px hoog

   (in deze instructievideo van 3 minuten wordt uitgelegd hoe je eenvoudig met pixlr een afbeelding bij kunt snijden: https://www.youtube.com/watch?v=vrXDOH-cNVY)
   
8. Vul het telefoonnummer in (notatie Tel.: 0000 000 000)
9. Vul de volledige url van de website in
10. Bij custom field 3 moet nog de plaats ingevuld worden. Deze wordt weergegeven op laptop-versies en de lijst met dealers wanneer deze naast de kaart staat.
11. Klik op opslaan.

INSTRUCTIEPAGINA

Tabbladen plaatsen.

1. Ga met de muis onder of boven een bestaande 'tab-groep' met video en stap-voor-stap-instructie staan.
2. Klik op De knop 'Tabs' onderaan de editor.
3. Maak twee tabbbladen aan. (Eentje met de titel Videoninstructie en eentje met de titel Stap-voor-stap-instrcutie)
4. Klik op 'oke'

De structuur van de tabbladen (tab-groep) ziet er als volgt uit:

{tab Videoinstructie}

Hier plaats je de video


{tab Stap voor stap instructie}

Hier zet je de stap voor stap instructie


{/tabs}


De tekst die hierboven in groen aangegeven is, kun je naar wens aanpassen. De tekst na het woordje 'tab' en voor de punthaak is de titel van de tekst. De andere tekst (Hier plaats je...) is de inhoud van de diverse tabbladen
De tekst en tekens die hierboven in rood aangegeven zijn, moet blijven staan en mag niet aangepast worden (ook de punthaken laten staan aan het einde van de groene tekst!!)


Tabbladen vullen.

In het eerste tabblad plaats je evt. een stukje tekst en daarna een video (zie evt. youtube filmpje plaatsen)

In het tweede tabblad de stap voor stap intructie

Voor de stap-voor-stap-instructie ga je als volgt te werk:

1. Klik op het pijltje direct rechts naast het pictogram 'insert table'.
2. Maak een tabel met één rij en één kolom door op het hokje links boven te klikken
3. Ga met de muis in de tabel staan
4. Klik op de rechtermuisknop
5. Kies table properties
6. Klik op het tabblad 'advanced'
7. Zet in het veld classes de tekst instructie
8. Klik op 'oke'
9. Zet de afbeelding in de tabel met de image manager (zie afbeeldingen plaatsen hoe je dit kunt doen)
10. Typ daarna de tekst van de betreffende stap naast de afbeelding

Voor iedere volgende stap:

1. Ga met de muis onder de tabel staan die je net gemaakt hebt.
2. Herhaal bovenstaande 10 stappen

Het is niet nodig om de teksten en afbeeldingen in de tabellen op te maken, dit wordt automatisch centraal gedaan,
doordat je de tabel de klasse 'instructie' hebt meegegeven.

HEADERFOTO AANPASSEN

Ga met de muis helemaal naar rechtsboven op een van de headerafbeelingen staan (maakt niet uit op welke pagina). Er verschijnt een pictograam waar je op kunt klikken. (Soms is dat pictogram bijna niet zichtbaar, door de kleur van de afbeelding erachter, maar hij zit altijd helemaal rechts boven.)

Scrol een stukje naar beneden en klik op 'opties'. (Module-instellingen moeten zo blijven staan!)

Je ziet een overzicht van welke afbeeldingen op welke pagina's staan en welke titels (Masthead title) en omschrijving (Masthead description) daarbij horen. Als je geen teksten invult wordt de standaard titel en omschrijving weergegeven. (Deze standaard teksten staan helemaal bovenin en kun je ook aanpassen.)

- Je kunt pagina's toewijzen en verwijderen aan een afbeelding in de meest linker kolom
- Via selecteren aan de rechterkant kun je afbeeldingen toevoegen/aanpassen
- Als je meer afbeeldingen toe wilt voegen kun je een item kopiëren en vervolgens naar wens aanpassen.

Let er op dat er geen dubbele afbeeldingen op eenzelfde pagina staan.

In de video hieronder (duurt 1,5 min) zie je in het kort waar alles staat wat hierboven beschreven is.

PRODUCTEN AANPASSEN, DEPUBLICEREN EN TOEVOEGEN

Nieuw product toevoegen

Een nieuw productblokje toevoegen gaat via het behergedeelte. (administrator)
(In de video (van ruim 1 minuut) worden onderstaande stappen uitgevoerd.)

1. Ga naar inhoud (horizontale menu bovenin) en kies 'artikelen'
2. Zoek een product dat het beste in de buurt komt van het nieuw aan te maken product. Gebruik daarvoor evt. de knop 'zoekmiddelen'
3. Open het artikel
4. Klik op opslaan als kopie
5. Haal de tekst weg bij alias en titel
6. Vul de juiste titel in (alias hoeft niet ingevuld te worden; die wordt automatisch aangemaakt na opslaan)
7. Selecteer de juiste categorie waar het product in moet staan
8. Klik op 'opslaan & sluiten'
   Het product is nu nog niet gepubliceerd op de site, want het product moet ook nog aangepast worden. Via de site kun je het product aanpassen. (Dit is handiger dan via het beheergedeelte, omdat de layout in de editor op de site beter overeenkomt met hoe het er uiteindelijk uit gaat zien.)

Producten aanpassen

Aanpassen van de producten kun je via de site doen met de editor zoals je gewend bent.
(Gedepubliceerde producten herken je aan het rode kader.)

Een aantal dingen waar je op moet letten (bekijk ook de video hieronder):
- Pas de koptekst aan (dus de naam van het product) door een deel van de bestaande tekst te verwijderen, maar niet alle tekst. Op die manier blijft de bestaande opmaak in tact.
- Afbeelingen (pictogrammen e.d.) wijzig je door er op te klikken en via de image manager de afbeelding aanpassen. Dus niet de afbeelding verwijderen maar erop klikken en dan aanpassen

- De plaatjes van de producten zitten in de map 'productafbeeldingen' (via imagemanager aan te passen)
- Deze hebben een afmeting van 114 X 212. Nieuw toe te voegen producten moeten ook deze afmetingen hebben.
- De plaatjes onderaan van de legenda zitten in de map 'icoontjes'
- Wil je meer leganda icoontjes? Kopieer en plak dan een bestaande en wijzig deze.

Algemene regel is dus: niet verwijderen maar aanpassen / wijzigen

Zie ook onderstaande video ( 3 minuten) voor uitleg.

Producten (de)publiceren

editormodus

Via de editormodus klik je bovenin voor de knop 'Publiceren' en bij status kies je 'Gepubliceerd' uit het dropdownmenu. Het product is nu ook zichtbaar voor publiek. (Wanneer het product gedepubliceerd is, is het alleen zichtbaar als je ingelogd bent)

Producten in de juiste volgorde zetten

Controleer na het toevoegen van een nieuw product of ze in de juiste volgorde staan en pas dit eventueel aan:

1. Ga in het beheertgedeelte naar het overzicht van alle artikelen (Inhoud -> artikelen)
2. Kies via zoekmiddelen de categorie die je wilt sorteren
3. Klik links boven eenmaal (boven de linkerkolom) op sorteer volgorde
4. Nu kun je de producten op de juiste volgerde slepen door met de muis boven de drie blokjes te gaan staan en dan klikken en slepen.
   (ververs de betreffende pagina op de site om het resultaat te zien.)

In deze video van (1 minuut) worden bovenstaande stappen uitgevoerd:

PRODUCTINDEX

editormodus

De productindex is met zgn. sliders gemaakt (zelfde soort systeem als de tabbladen op de instructiepagina)

De structuur van de tabbladen ziet er als volgt uit:

{slider Naam van product a}

Links en buttons van product a


{slider Naam van product b}

Links en buttons van product b


{/sliders}


De tekst die hierboven in rood aangegeven is, kun je naar wens aanpassen. De tekst na het woordje 'tab' en voor de punthaak is de titel van de tekst. De andere tekst is de inhoud van de diverse tabbladen
De tekst en tekens die hierboven in rood aangegeven zijn, moet blijven staan en mag niet aangepast worden (ook de punthaken laten staan aan het einde van de groene tekst)


De video hieronder (4 minuten) geeft een duidelijke uitleg. Hier in het kort, puntsgewijs omschreven wat je moet doen:

1. Voor het maken van een nieuwe slider (dus nieuw product in de index toevoegen) is het het handigst om een bestaande slider te kopiëren en eronder te plakken. Dus je kopieert vanaf de eerste punthaak (voor het woord slider) tot waar de punthaak van de volgende slider begint.
   Omdat, door de code van de sliders, de opmaak wat in de war is, kan het handig werken om het editor veld horizontaal kleiner te maken (zie video)
2. Pas vervolgens de tekst aan (nieuwe nummer en naam van het product)
3. Koppel nieuwe links en pdf's aan de tekst van de grijze blokjes door op de tekst te dubbelklikken en vervolgens het kettingpictogram te gebruiken (ook voor de pdf's)
   Gebruik de zoekfunctie om het nieuwe product te vinden op de site en de link daarvan te kopieëren. Zorg ervoor dat je de 'hightlight', die toegevoegd wordt in de link verwijdert. De pdf's kun je ook kopieëren vanuit het product. (dit wordt allemaal in de video uitgelegd)

Pdf bestanden moet je eerst met de file manager op de site zetten voordat je ze kunt linken.

Een pdf bestand op de site zetten en vervolgens op een link zetten doe je zo:

1. Klik op de insert/edit file om een bestand op de server te zetten.
2. Via de uploadknop kun je nu een bestand van je computer uploaden
3. Na het bestand ge-upload te hebben kun je het bestand aanklikken, waardoor de url bovenin wordt weergegeven.
4. Kopieeer deze url
5. Verlaat de filemanager door op 'cancel' of het kruisje te klikken
6. Selecteer de link waar je de pdf aan wilt koppelen
7. Klik op het link pictogram
8. Plak de zonet gekopieerde link in het url veld
9. Kies onderin bij target voor 'Open in nieuw venster'

LET OP: In de filemanager staan reeds een aantal veiligheidsbladen in een map ed. Verander deze bestanden en mappen niet van naam en/of locatie, omdat dan de link op de site verbroken wordt.

LEGENDA

editormodus

De legendapagina bevat afbeeldingen met zgn. captions. Dat zijn korte beschrijvingen die a.h.w. aan de afbeeldingen vast blijven zitten.

In de editor staan de afbeeldingen allemaal onder elkaar. Na opslaan worden ze automatisch naast elkaar gezet.

Om een afbeelding te vervangen of toe te voegen kun je de imagemanager gebruiken zoals je gewend bent. De afbeeldingen van de legenda zijn vierkant en moeten een minimale afmeting hebben van 111 x 111 pixels. Als ze een beetje groter zijn, dat is geen probleem; ze worden automatisch verkleind tot 111 pixels.
Het handigst is ook hier weer om een bestaande afbeelding te kopieëren, plakken en aanpassen.

In de video hieronder (1 minuut) zie je o.a. hoe je captions toevoegt aan de afbeeldingen.

FOTO'S TOEVOEGEN AAN DE PAGINA FOTO'S

Op de voorkant van de site zie je, na inloggen een stukje code staan op de plek waar de fotootjes staan. Dit zorgt er voor dat de foto's uit een bepaalde categorie getoond worden.

Deze ziet er ongeveer als volgt uit:

phocagallery view=category|categoryid=1|limitstart=0|limitcount=0

Het getal dat hierboven rood gemaakt is geeft de weergegeven categorie aan.

Om een nieuwe categorie aan te maken ga je als volgt te werk:

1. log in via het beheergedeelte (http://www.auro.nl/administrator/)
2. Ga naar componenten -> phocagallery
3. Ga naar categories (via de knop links boven of het menu aan de linkerkant)
4. Klik links boven op de groene knop 'nieuw'
5. geef de categorie een naam
6. Klik op opslaan

Om foto's toe te voegen of aan te passen ga je naar het beheergedeelte:

1. log in (http://www.auro.nl/administrator/)
2. Ga naar componenten -> phocagallery
3. Ga naar images (via de knop links boven of het menu aan de linkerkant)
4. Klik links boven op de groene knop 'nieuw'
5. geef de afbeelding een titel (deze wordt weergegeven als je met de muis over het plaatje gaat)
6. let op: kies de juiste categorie voor de afbeelding

7. haal een afbeelding van je computer via 'select filename'

8. klik op opslaan en sluiten als je klaar bent (of op opslaan & nieuw als je nog eentje wilt toevoegen)

Om een nieuwe reeks foto's uit een andere cateogrie weer te geven op de pagina, kopieëer en plak je de coderegel van een andere categorie op de pagina (inclusief de punthaken) in de editor en pas je de categoryid aan. Dit id-nummer vind je in het begeergedeelte helemaal aan de rechterkant van de kolom bij categorieën.

Na opslaan worden de kleine plaatjes (thumbnails) gegenereerd en wordt de foto geplaatst op de site. Naderhand kunnen afbeeldingen nog aangepast worden. Wil je een afbeelding (tijdelijk) niet op de site hebben? Klik dan op depubliceren, zodat hij niet op de site wordt getoond.

Foto's op de juiste volgorde zetten

Via het beheergedeelte op phocagallery (zie hierboven hoe je daar komt)

1. Selecteer de categorie waarvan je de afbeeldingen op de juiste volgorde wilt zetten (bovenaan de lijst met afbeeldingen zijn een aantal selctiemogelijkheden, hier kun je de categorie kiezen)
2. In de meest linker kolom van de lijst met afbeeldingen, klik op het pictogram  helemaal  met de 2 driehoekjes ('volgorde')
3. Nu kun je de afbeeldingen op volgorde te zetten door klikken (in de meest linkse kolom met de drie puntjes) en slepen
   Het is niet nodig om op te slaan, na het slepen staan ze gelijk op de juiste volgorde.