Documentation
Barisco Helpcenter
Video Tutorial – How to use Interactions
Using free background patterns in Barisco
How to prepare designs in Photoshop for Barisco
Video Tutorial – Explanation of Barisco’s editor user interface
Video Tutorial – How to use the scroller
Video Tutorial – How to create overlays or pop-ups
Video Tutorial – How to create groups
Video Tutorial – How to use the Position & Size panel
Free interface templates in Barisco
Different interfaces for different platforms.
What features are not supported in Internet Explorer?
How can I optimize the load time of my project?
Why do fonts appear differently across different browsers and de
How to add your own domain name?
Does Barisco support Android?
How to duplicate pages to a different edition
Video Tutorial – Interfaces 2/2 – How to design a custom interfa
Video Tutorial – Interfaces 1/2 – Using default interfaces
Release 2.0.0.0
Optimize your publication for SEO
Direct Share to Social Media Channels
Embed your Project
DOOH (Narrowcasting)
Release 2.1
Improved Group settings for desktop and mobile views using one U
Improvements Release 2.2.5
How to create pixel perfect mobile web pages without coding?
Making a mobile ready site in 5 steps:
Reset your Profile
Animate Layers in the Scroll when Visible
Use now animated GIF in Barisco.
Integrating YouTube video’s in your Barisco projects is easy!
How to create a landing page or vertical scrolls in a page.
Release 2.0.1.0
Implement Youtube original player (control)
New! Dimensional scrolling features for landing pages micro site
UX improvements
Orientation options on publication settings
New Features for creating templates in the restricted editing
Video Tutorial – Explanation of Barisco’s editor user interface
Intro
Welcome to this video tutorial! Whether you are a beginner, intermediate or advanced Barisco user; it is always useful to know all the features in Barisco, so that you will be able to use those features when you need them.
This video tutorial will be specifically about Barisco’s editing tool – or “editor” as we call it. The video has been divided into different parts. The first part will identify each section of the editor. The parts following will each detail a different section. Let’s get start started with the first part of this video.
Part 1 – User Interface Sections
As with most extensive user interfaces; Barisco’s editor has been divided into different sections. Each section has its own name and purpose. Let’s start by identifying each section so that you will learn each section by its appropriate name.
First, this area at the top is called the Ribbon Menu. Then the bar on the left here is the Toolbar. Then, here we have the Property Panel. Next to the Property Panel, we have the Layers Panel. Then when you switch to the Library Tab, you will see the Library Panel. Here in the center of the editor, we have the Stage Area. On top of the Stage Area, we have the Page Tabs. And here at the bottom you can find the Status Bar.
Now that we have identified the different sections of the Editor’s user interface, we will go through each section. And have a look at the features that are present within these different sections.
Part 2 – Ribbon menu
When you enter the Barisco application, you will need to navigate to the Editor Tab on the Ribbon Menu in order to get the editor. So by now you have undoubtedly used the Ribbon Menu’s tabs already. Below the tabs you will find several groups of features on the Ribbon Menu. Each of these feature groups has its own name. The feature groups of the Editor are: Page, Selection, Align, Options, Preview and Help.
The Page group contains 3 buttons related to the page. With the Save button you can save the current page.
Next there are the Undo and Redo buttons. These buttons allow you to undo and redo the steps you have taken. For example if you would like to move the image back to its previous position, all you need to do is press Undo.
Then if you decide that the image should after all be in the position that you move it to, you can use Redo to simply cancel out the Undo command that you had given earlier.
The next group is the Selection group. The selection group allows you to perform actions related to the selected objects. The Selection group buttons will only be enabled for use once you have selected an object on the Stage Area. So if I select and then deselect the image on the Stage Area, you will see that the Selection group’s buttons will switch from available to unavailable.
The Cut, Copy and Paste features allow you to perform clipboard actions. Now if I select the image and click on Cut you will see that the image has disappeared from the Stage Area. This image is now in fact placed on the clipboard. To get the image back from the clipboard on to the Stage Area, all you need to do is click on Paste. As you can see the image has now returned to Stage Area.
The Copy feature allows you to create additional instances of the object that you have selected. So if I once again select the image on the Stage Area and then press Copy and Paste, you will see that there are now two instances of the image.
The Group feature allows you to group objects together. Once you have grouped objects together, you will be able to move the objects as a single object. This feature is especially useful when making complicated layouts.
And lastly we have the Remove feature. This feature will remove whatever object that was selected at the time you click the remove button. Please be careful when using this feature, as this feature will not move the object to the clipboard like the Cut feature. If you use the Remove feature and decide that you need to the object back, you can use the Undo feature to undo the removal of the object.
The next group on the Ribbon Menu is the Align group. The Align group can be used to position objects on the Stage Area. For example if you want the image to be aligned at the top of the page, all you need to do is simply press Align to Top. Now if you also wanted to align the image to the left, center or right hand side of the Stage Area; you can use the Align Left, Align Horizontal or Align Right features.
The Distribution features can be used to distribute objects across the Stage Area. So for instance if you have 3 images that need to be horizontally distributed with equal spacing between the objects; you can use the Distribute Horizontally feature.
At the bottom of the Align group you will find the Align to stage option. All the Align features can be used relatively to the Stage Area or relative to each other. This means that if you have some objects that need to be aligned to each other, instead of to the aligned to the Stage Area, you can disable the Align to stage option. This can be easily illustrated, if you have several objects that have different dimensions. So for example: if this image in the center is larger than the other two, you will see that the smaller two images will be aligned to the left, center and right hand side of the larger image.
The next group is the Options group. The first button is for the Animation feature. This feature allows you to animate objects using either Preset Animations or Timeline Animations. Next to the Animation button, you will find the Reveal Objects feature. Reveal Objects can be used to reveal objects when you have hidden or overlapping layers.
The Page Background feature allows you to focus onto the Page’s background. The Property Panel will then display the relevant properties for the Page’s background.
The Preview group can be used for previewing your page. If you press the Display button, a window will appear that contains an example of the current page. This feature is similar to the Preview features from the Editions Overview, with the exception that this feature can be used for testing a single page, without having to go through all pages.
The last group allows you to get help from the Help Center and the User Guide. So if you in the process of creating your page and you need help, you can use these features to ask questions or find additional information.
Part 3 – Toolbar
As I have shown in Part 1 of this video tutorial, you can find the toolbar on the left hand side of the Editor’s user interface. The first tool on the Toolbar is the select tool. With the select tool you can select objects and also drag objects across the Stage Area. The second tool is the Transform tool. The Transform Tool is quite similar to the select tool, but with a few additional features. The Transform Tool allows you to also resize and rotate objects.
Next is the Zoom Tool. The Zoom Tool can be used to zoom in and out on the Stage Area. This is especially useful when working with layouts that require you to look into smaller details, or when you have large objects on your Stage Area. The Hand Tool can be used to move the Stage Area around. This is especially useful when you are zoomed in and the Stage Area is not entirely visible. Next there are the draw tools. With the first being the Text Tool. With the Text Tool you can draw a Text Object, in to which you can then enter text.
Below the Text Tool we have the Rectangle Tool and the Ellipse Tool. These Tools can be used for drawing rectangles and ellipses. The next group of buttons; allow you to insert objects, such as an Image, Slide Show, Video Player, Scroller, Button, Page Thumbs and Edition Thumbs.
Part 4 – Property Panel
The Property Panel contains the properties of the currently selected object. At the top of the Property Panel you can see the type of object that you have selected and the name of the object. The name of the object also corresponds with the name that you can see in the Layers Panel.
Below the type and name of the object, you will find several sections that each have a unique purpose. In this case I have selected a rectangle. Rectangles have 3 sections available: Position & Size, Style and Interactions.
The Property Panel can be used to set nearly all settings for the object that you select, with the exception of Animations.
Part 5 – Layers panel
The Layers Panel can be used to see the depth of objects on the Stage Area. Each layer in the Layers Panel represents an object on the Stage Area. On the left hand side of each layer you can find the Hide and Show option. This option can be used to hide objects. Please note that this is not the same as the Visible property at the Style section of the Property Panel. In case the object can contain child objects, such as a group, the layer will display a triangle. The triangle indicates that you can expand and collapse the child layers within the parent layer. The depth of layers can be changed by dragging the layer to a different position on the list of the layers.
At the top of the Layers Panel there are 3 options available: Disable Rendering, Lock Position and Lock Layer. Disable Rendering can be used to make sure that the object will not rendered in the viewer. This can be used for objects that you wish to keep in your layout, but not use at this time. Lock Position can be used to lock the position of the object, without losing the ability to change any of the other properties. Lock Layer can be used to completely lock the layer. When using this feature you will not be able to edit the object, until it has been unlocked.
Part 7 – Page tabs
The Page Tabs can be used for editing multiple pages at a time. When you open multiple pages, you will be able to switch between the pages and even copy objects from one page to another. The asterisk on the right hand side of the page’s name indicates that page has unsaved changes. Pages can be closed by clicking on the cross on the right hand side of each page tab.
Part 8 – Status bar
The Status Bar displays the current zoom level and the page weight indicator. The current zoom level can be changed by using the Zoom to Fit feature and the Zoom to Actual feature allows you to zoom the page to its actual size. The current zoom level can be changed by using the Smart Property.
The Page Weight indicator is a feature that indicates the complexity of a page for browsers. When the page weight is low, it will take relatively little effort for a browser to handle the page. And when the page weight is high it may take more effort from the browser.