General
Comment Text, each blog entry will have a link on the bottom to allow readers to send comments. The default text is 'Send Comments', but you can change this to anything you like. If you leave this field blank, no link will be displayed. Comment Email, specifies the email address where the comments will be send to. To add a new entry to your Blog, click the Add button. Give you blog entry a title and then type your blog's message in the text area. Optionally you can insert an image and a link to a related web page.
Pagination
Paginate displays a small subset of the items art any one time, while allowing the user to move through it with navigation buttons. The 'Items per page' property specifies how many items will be displayed per page. Click the Style button to change the appearance of the paginate buttons
Order
Specifies the order of the items on the page ('Ascending' or 'Descending').
Columns
Specifies whether to display the blog items in columns. This option is responsive, so each breakpoint can have different number of columns.
Related online tutorial:
http://www.wysiwygwebbuilder.com/blog.html
Style
The style page allows you to modify the style of the Blog, each individual item such as Comment, Date, Subject and background can have its own color and font. The Divider image can used to separate blog entries horizontally.
Layout
This controls the appearance of the blog items. More than 10 different layouts are currently available.
You can also create your own layouts (with HTML/CSS templates). The templates are stored in the folder Documents\WYSIWYG Web Builder\system\blog\
Enable Responsive Fonts
When this option is enabled the text object can have different font sizes in breakpoints. This can be useful if you need a larger font for smaller screens. Each breakpoint can have a different text size.
Note however that when this option is enabled, you can only use one font-family and font-size for the entire text object!
RSS Feed
Optionally you can enable to generate a RSS Feed for this blog. The RSS Feed Properties are identical to those of the RSS Feed object.
Carousel
The Carousel object (also known as horizontal sliding panels) displays images or any other objects by scrolling the content from right to left using a smooth sliding animation (with several optional easing effects). Users can step to any specific panel on demand using the pagination icons or browse the carousel sequentially by using the back/next buttons. You can also think of the Carousel as a multiple layer slide show. It’s a very effective method to increase the web site usability and engage the user. You probably have seen this effect on many popular websites, such as Apple or Blackberry.
When you first insert the Carousel to your page, you will see a blank area with two buttons and a pagination control. The buttons can be used to go to the next or previous panel. The pagination control displays a 'dot' for each page in the carousel. You can directly jump to a specific page by clicking the dot.
The colors and size of the pagination control is configurable and of course you can select your won images for the next/back buttons as well.
Advanced users can even use events to create custom buttons outside of the Carousel!
To add new content the the current page, simply drag and drop objects within the Carousel area. To add objects to another page, first go to the page (either by using the pagination controls or next/back).
Another cool feature of the Carousel is support for mobile devices. On the iPhone/iPad/Android you can use slide gestures to switch between pages!
General
Pages
This will set the number of pages for the Carousel.
Pause time
Specify the number of milli seconds to pause before displaying the next panel in the sequence.
Animation duration
Specifies the duration of the slide animation in milli seconds.
Easing
You can select from more than 30 easing functions to control the animation process. This option can be used to (for example) create bounce or elastic effects.
Enable navigation buttons
Specifies whether to display the navigation buttons.
Next button
Specifies the image to be used for the 'Next' button. If you leave this field empty a default image will be used.
Margin
Specifies the margin between the border of the Carousel and the buttons.
Enable pagination
Specifies whether to display the pagination controls. The pagination controls will be displayed on the bottom of the Carousel. The user can click the icons to quickly go to the specific panel.
Color
Specifies the color of the pagination icons.
Border color
Specifies the border color of the pagination icons.
Size
Specifies size of the pagination icons.
Padding
Specifies the padding around the pagination icons.
Style
In this section you can modify the appearance of the object. For more details about object styling please read Style.
How to control the slides through events?
You can use the Slideshow Next and Slideshow Previous actions in events to create external navigation.
It's also possible to directly jump to a specific page:
1. Add the Carousel object to your page.
2. Take note of the ID. The default value is ‘Carousel1'’.
3. Add an image, shape or other object with event support to the page.
4. Open the properties and select the ‘Events’ tab.
5. Click ‘Add’ to insert a new event.
6. Select ‘Event’: OnClick and set the ‘Action’ to JavaScript function.
To show the dialog enter this JavaScript:
$('#Carousel').carousel('goto,1');
where Carousel1 is the ID of the Carousel.
goto,1 jumps to the first slide goto,2 jumps to the second slide.
etc...
To show the next slide you can also use this JavaScript:
$('#Carousel').carousel('next');
To show the previous slide use:
$('#Carousel').carousel('prev');