Professional Demo

This shows the different bits and pieces you will be able to do with your new website.
For this page, I used the default two columns layout of the theme I selected for myself.
There is a column on the right for a sidebar.
I could have used a layout that used one column and therefore all the available space.

A sidebar can be important. You fill it in the “Widgets” section, which I will show you during our training session.

Meet the Visual Editor

During our training session, I will show you how to get there with your web browser.
For now we can simply look at it and notice it looks like a simplified word processor.

I create a page called “Professional Demo” (that page 🙂 and I simply started  typing away.

I selected the “Meet the Visual Editor” text and applied “Heading 1” style to it.

I copied my screen and imported it into the page.

wordpress-01-editor

Voila…I got started in two minutes with text, styling and image insertion.
I will now click on the Publish button…

Done…My page is already updated and online, I am now continuing with my demonstration.

Formatting text

You can format text on a whole paragraph using styles, or on a small bit of text, or on larger bits of text.

Styling a single paragraph

Ok done already…I selected “Styling a single paragraph” and applied “Heading 2” to it.

There is also a “Heading 3”

There is also a “Heading 4”

There is also a “Heading 5”
There is also a “Heading 6”
Here, I selected preformatted, so it looks different

Formatting a small piece of text

Here I typed this piece of text and selected some words and clicked on some of the editor’s buttons, I did not read the doc…I simply clicked the buttons that felt right based on previous experience with Microsoft Word.

Here I tried left justified.

Here I tried justified

Here I tried right justified

Here I am trying special characters…
£ is the pound, € is euro, ® is a registered trademark…

Here I just randomly write text as I think about words to fill a few lines so that I can try to use the justify tool. I order to do that, i really need I long sort of sentence, or a group of sentences. The result is as expected, the text stretches from one end of the line to the other and the browser spaces automatically to keep the text aligned on the left and on the right.

Lists

Lists are very useful and the editor allows creating bulleted and numbered lists

  • ¢ is the cent
  • € is the euro
  • £ is the pound
  • $ is the dollar
  1. ¢ is the cent
  2. € is the euro
  3. £ is the pound
  4. $ is the dollar

These buttons are a list too…Normally this css effect is easier done with a proper css stylesheet, but the editor lets you update the HTML and therefore allows you some control on the style attribute as shown below.

<li style="display: inline; margin: 0 5px; padding: 0 5px; background: #ffcc99; border-radius: 5px;">
  • ¢ is the cent
  • € is the euro
  • £ is the pound
  • $ is the dollar

Images

I showed you that you could attach an image already put how about multiple images?

Five images in a tiled mosaic

These images are placed automatically, each has a caption that shows when the mouse hovers over it.

Five Images in a thumbnails grid

The same five images presented in a three columns thumbnails grid.

Five images in a slideshow

The same five images presented one at a time in a slideshow;

This slideshow requires JavaScript.

Adding HTML elements

When some html thing you want is not in the editor, you can add it.

This tasteless div has the merit to show that you can control width; borders, corners, padding, text and lists…

  • ¢ is the cent
  • € is the euro
  • £ is the pound
  • $ is the dollar

And also use tables to layout elements

r1c1 r1c2
cropped-92736333.jpg r2c2
r3c1 r3c2

 

Another useful thing is to split in columns

That div fills 70% of the available width.

The two divs inside fill 25% and 70% of its insides.

Each div has its own properties.

The left part has its own properties.
The right part has its own properties.