WYSIWYG editor
WebsiteBaker comes with a standard WYSIWYG editor called CKEditor version 4, which allows you to format text, lists, and tables; add lines and images; use special characters; and create hyperlinks. However, it would be beyond the scope of this documentation to explain every single feature of this editor.
If you hover your cursor over the icons for a few seconds, the button's label and, if available, a helpful tip will appear. If you've used a word processor such as Word or OpenOffice Writer before, you'll be familiar with many of the features and icons.
WYSIWYG pages are 'regular' pages that can contain formatted text, lists, tables, and graphic elements such as lines and images. You can also add hyperlinks—links to other pages, websites, or downloadable files that you’ve placed in your 'media' folder.
If you have installed the FR Themes theme, the WYSIWYG editor’s menu bar will contain a few more options than the default WebsiteBaker theme. The most commonly used options are explained in more detail below:
A - Source Code: Use this button to switch between WYSIWYG view and HTML code view. In HTML code mode, you can add advanced HTML features yourself to customize the layout and functionality.
B - Text Formatting: commonly used styles such as bold, italics, etc.
C - Style: There are a number of predefined styles included. See if you can find one you like!
D - Formatting: Predefined formatting styles are included for headings—one standard style and two alternative styles. Using the FR Style Editor module, you can easily customize these styles to tailor the look of your website to your own taste.
E - Font: Several fonts are included. Roboto and Noto are among the most commonly used fonts for websites.
F - Links: You can add links in various ways: a URL to an external web page, a WB link to an internal web page, an internal link within the current page, and email (we do not recommend using it this way; please use an email form instead).
G - Image: Select an image from your Media folder or enter a URL. You can create a link to the image and specify advanced settings.
H - Help: contains a link to this wiki page.
If you want to add a link to an internal page on the image, the best approach is:
- Insert an image and save it
- Select the image
- Click Link (F), choose WB Link, and select the desired page
If you want to post a series of images as links to your photo albums and display all images as squares: in the image settings, under the “Advanced” tab, in the “Stylesheet Classes” section, change the class to “img-responsive-square”