Subscribe to the Blog

Enter your email address:

Delivered by FeedBurner

Search


Introduction
How do I create a new content page with the Component Page Editor?
How to add and edit an image?
How to add and edit text?
How to add a YouTube movie?
How to add a Google Map?
How to add Share buttons?

How to add a Facebook-like-button?

Introduction

componentspageeditor.jpg

The Component Page editor helps you create good looking content pages for your website in the fastest possible way. You choose from a number of template pages, and all you have to do is replace the template text and template images with your own text and images. You can also drag-and-drop all kinds of other components such YouTube, Google Maps, to your page.

How do I create a new content page
with the Component Page Editor?


Create a new content page by selecting the "New Content Page" link on the "Site Management" tab on the top of the page. Then choose one of the predesigned templates as a basis, or choose a blank Component Pageand click Continue. Remember: you can always adjust & edit the templates afterwards. :

choose-a-page-template.jpg

Then type in the name for your page. Also, choose whether or not you want to add a link to page on your website menu. Once you're done, press continue.

choose-a-page-title.jpg

 

This will take you to your new page, which looks like the tempate that you have chosen:

templatepage.jpg

Currently there are dummy images and dummy text. Now you only need to replace them with your own images and text.

Editing & replacing images in the template

To edit & replace an image, simply double click on the (dummy) image you want to replace. This will open up the image gallery of the images you have uploaded. Now just drag-and-drop the image you want where you want it:

drag-and-drop-image-from-gallery.jpg

N.B: If you haven't uploaded any images yet, click on "Upload Pictures"
to add images from your computer to the gallery! :
upload-pictures.jpg

Editing and replacing text in the template page

To edit text, simply double click on the text. This will open up the text editor. Click "Ready" when you're done :

double-click-to-open-text-editor.jpg

 

How to add and edit an image?

From the Components-tab drag-and-drop the image component of your choice (1, 2 or 3 images) to where you want the image.

 

drag-and-drop-image-componenet.jpg

 

Then double click on the dummy image. Now drag-and-drop the image of your choice from the gallery onto the dummy image and your done.

drag-and-drop-image-from-gallery.jpg

To edit the Image Description, simply double click on the text.


How to add and edit text?

From Components drag-and-drop the text component of your choice  to where you want the text to appear.

drag-and-drop-text-component.jpg

Now double-click on the dummy text to edit it.

double-click-to-open-text-editor.jpg

How to add a link in the text?

Double click on the text component to edit it. Then select the text that you want to turn into a link. Then click on the link icon and choose the link.

linkicon.jpg

To adjust the size and other settings, click on the "Settings" button of the text-component.

How to add a YouTube movie?

From Components, drag-and-drop the Youtube component to your place of choice.

drag-and-drop-youtube-component.jpg

Then click on settings to fill in the correct Youtube URL and click Save.

insert-youtube-url.jpg


How to add a Google Map?

From Components, drag-and-drop the Google Maps-component to your place of choice:

drag-and-drop-googlemaps.jpg

Then click on "Settings" and fill in the correct address and click Ready:

googlemaps-insert-address.jpg

 

How to add Share buttons?

From the Components-tab, drag-and-drop the Share-component to your place of choice:

drag-and-drop-sharecomponent.jpg

To adjust the size and alignment, click on the "Settings" button of the component.

How to add a Facebook-like button?

From the Components-tab, drag-and-drop the Facebook-component to your place of choice:

drag-and-drop-the-facebook-like-button.jpg

To adjust the settings, click on the "Settings" button of the component.