Naar inhoud springen

WYSIWYG editor

Uit KB Van Loenhout

WebsiteBaker wordt geleverd met een standaard WYSIWYG-editor genaamd „CKeditor”, waarmee je tekst, lijsten en tabellen kunt opmaken, regels en afbeeldingen kunt toevoegen, speciale tekens kunt gebruiken en hyperlinks kunt maken. Het zou echter te ver gaan om elke afzonderlijke functie van deze editor in deze documentatie uit te leggen.

Als u de cursor enkele seconden op de pictogrammen laat rusten, verschijnt de titel van de knop en eventueel een handige tip. Als u eerder een tekstverwerkingsprogramma zoals Word of OpenOffice Writer hebt gebruikt, zult u met veel van de functies en pictogrammen vertrouwd zijn.

WYSIWYG-pagina’s zijn ‘gewone’ pagina’s die opgemaakte tekst, lijsten, tabellen en grafische elementen zoals lijnen en afbeeldingen kunnen bevatten. Je kunt ook hyperlinks toevoegen – links naar andere pagina’s, websites of naar downloadbare bestanden die je in je map ‘media’ hebt geplaatst.


Indien je het thema FR Themes hebt geïnstalleerd bevat de menubalk van de WYSIWYG editor wat meer opties dan bij het meegeleevdre WebsiteBaker thema. De meest gebruikte opties worden nader toegelicht:

Editormenu

A - Broncode: middels deze knop kan je schakelen tussen WYSIWYG weergave, of html code. In de modus html code kan je zelf uitgebreide html functies toevoegen op het gebied van opmaak en functionaliteit.

B - Tekstopmaak: de veelgebruikte typen zoals vet, cursief etc.

C - Stijl: er zijn een aantal voorgedefinieerde stijlen meegeleverd. Probeer uit of er wat leuks voor je tussen zit!

D - Opmaak: er is voorgedefinieerde opmaak meegeleverd, voor de headings / koppen, normaal en twee afwijkende. Via de module FR Style Editor kan je vrij eenvoudig deze stijlen aanpassen zodat je het uiterlijk van jouw website naar eigen smaak kan aanpassen.

E - Lettertype: er zijn diverse lettertypen meegeleverd. Roboto en Noto zijn een van de meest gebruikte voor websites.

F - Links: je kan op diverse manieren links toevoegen: een url naar een externe websitepagina, een WB-link naar een interne website pagina, een interne link in de huidige pagina en e-mail (niet aan te raden om het op deze manier te gebruiken, gebruik dan een mailformulier).

G - Afbeelding: kies een afbeelding in jouw Media map of type een url in. Je kunt een link aanmaken op de afbeelding en geavanceerde instellingen opgeven.

Indien je op de afbeelding een link wilt plaatsen naar een interne pagina is de beste aanpak:

  • plaats een afbeelding en sla deze op
  • selecteer de afbeelding
  • klik op Link (F) , en kies voor WB-link, en selecteer de gewenste pagina

Indien je een reeks afbeeldingen wilt plaatsen als links naar jouw foto-albums én alle afbeeldingen in vierkant wil tonen: in de afbeelding, tabblad Geavanceerd, onderdeel Stylesheet-klassen wijzig je de klasse naar 'img-responsive-square'