Extra lay-out through PivotX buttons

An illustration of the possibilities of the PivotX buttons

Harm Door Harm

17 Maart 2012
These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Add to favorites
  • email
  • Facebook
  • LinkedIn
  • Twitter
Pageviews 251 x viewed

A number of samples made in the Wysiwyg editor using the added PivotX buttons.

First the inserting of an image.

Title of image

Above a centered solo image.

On the left side

And one completely on the left side. Notice that the following text is positioned right next to it. This is because the editor (and HTML) assumes that whenever an image is left or right aligned the following text belongs to that image and so should be positioned next to it. The image gallery below shows 2 images of the image selection dialog.

To get text positioned directly under the image a HTML trick has to be applied (and is not standard available in the editor). Just entering or empty headers seem to have to same result but this is only half true. Firstly HTML cleans out all empty paragraphs (the entering) and when the visitor changes the size of the font the text will show up next to image eventually.

Then one on the right side. The text is above it because this was entered first.


To get here the HTML trick was applied again.

The nicest is to show an image when it is inline with the text. Inline. Like this! With this construction the position of the image compared to the text not different when the slider is used. A side effect can be that the image soon can grow too big for the surrounding text. When editing in this way it is better to make use of another button: popupimage.

This is an example of a line where there is a larger popupimage behind it when clicked.

Such a popupimage in the text can also be made by creating a smaller version (a so called thumbnail) of it. Like so: The standard thumbnail. Within these editing procedures you can make all kinds of different adaptations that will be explained to you after your web site is ready.

Finally in short the 2 remaining PivotX buttons.

The first button offers the possibility to insert a file to the text that can be downloaded by the visitors. Like this: Download this image! and the same file with a text link Image.

Some files get the right icon right away: PDF sample DOC sample DOCX sample ODT sample TXT sample ZIP sample RAR sample XPS sample XYZ sample (default icon)

The last button is one to add so called tags directly to the text (in contrast to the general tags that are defined separate for the publication). These are keywords that belong to the Entry or Page. These tags are used when searching and to related publications to each other. This looks like this: . An URL can also be added to the tag so it turns into a link. An example of an urltag: .

Gebruikte Tags: editor texttag urltag


  • EN
Selecteer stijl: 
Kleur : Blauw
Lettertype: Times New Roman

Let op! Scherm verschuift
even gedurende wisseling
Kleur : Geel/Oranje
Lettertype: Arial

Let op! Scherm verschuift
even gedurende wisseling
Kleur : Paars
Lettertype: Verdana

Let op! Scherm verschuift
even gedurende wisseling
Kleur : Cyaan
Lettertype: Comic Sans MS

Let op! Scherm verschuift
even gedurende wisseling
Kleur : Groen transparant
Lettertype: Lucida

Let op! Scherm verschuift
even gedurende wisseling

Volg Remark Webdesign! Volg Remark Webdesign!



Copyright 2012-2020 © Remark Webdesign