Drag & Drop page editor

User Interface

Page Editor User Interface

This is the new Vendisto Page Editor. Using it, you could create responsive webpages that are appealing to your customers even without having in-depth knowledge about web development.

The page is built on the Canvas which is visibly divided in twelve columns. The Canvas is surrounded by buttons and menus each having a particular purpose:

1. “Device selector” - By clicking on a device icon, the Canvas will resize to the most common screen width this device has. There are four device sizes:

   1. XS – Smartphones

   2. SM – Tablets

   3. MD – Smaller laptops

   4. LG – Everything larger than a small-screen laptop

2. View modifiers

   1. “Preview” – when clicked, the Editor removes all the added paddings and borders which will not be visible in your web-shop by default

   2. “Full-screen” button – enables full-screen mode

   3. “Hidden stash” - shows components that are hidden. More on hiding will be explained in chapter “The Grid”, sub-section "Row"

   4. “Blocks” - will shows all existing Blocks. Blocks are pre-made HTML elements that are used to build a webpage. By dragging them onto the Canvas you produce HTML

3. “Authorization Profiles” dropdown – changes the active user permissions. More on authorization is explained in chapter “Authorization”.

4. Side-menu views - changes what is displayed on the side-bar:

   1. “Blocks” - will shows all existing Blocks. Blocks are pre-made HTML elements that are used to build a webpage. By dragging them onto the Canvas you produce HTML

   2. “Component settings” – each Block has its own set of settings, that can be edited in this menu

The Grid

There are two general categories of Blocks – Structure and Content. Structure Blocks are the “skeleton” of a webpage. Before setting-up the content, you must lay out the underlying structure. Structure Blocks can be found under “Structure”. Initially, there is the empty Canvas. The layout is built in a grid-like manner. Horizontally, the space is divided in twelve columns (illustrated by the Canvas background). Vertically, you can add an infinite number of rows. Only Rows can be added to the empty Canvas. The space within a row will always be equal to twelve columns. In order to set how many columns a Content block would take we use Cells. Just like only Rows can be the direct children of the Canvas, only Cells can be direct children of Rows

Structure Blocks

Imagine the Cell as a glass and Content as water. The glass is used to contain the water. Without it, the water would spill unpredictably.

There are four ready-made rows with different number of cells inside:

1. Row – adds a Row with a Cell spanning 12 columns

2. Half-split row – adds a Row with 2 Cells spanning 6 columns each

3. Third-split row – adds a Row with 3 Cells spanning 4 columns each

4. Quarter-split row – adds a Row with 4 Cells spanning 3 columns each

You can use the “Single cell” Block to add a Cell to a Row. The new cell will have a span of 1 column. Other Cells will narrow down to accommodate it

Cell

But how does this fit with the Devices introduced earlier? Cells have the following properties:

• On its default Device size (the one you initially added it to) the Cell will have a variable width of 1-12 columns

• On a smaller Device size, the Cell will have a fixed width of twelve columns and Cells within a Row will “wrap"

• On a larger Device size, the Cell behaves as it is on its default Device

“Variable width” means that you can resize the Cell. To do so, select a Cell first. The cell will receive a dark-blue border and a small toolbar with icons on it. Then, click on the “+”/”-“ sign to resize it in the desired direction.

Cells have a few more buttons on their toolbar:

1. “Copy” icon – duplicate the Cell in the same Row.

2. “Trash bin” icon – delete the Cell. If it is the final Cell in a Row, the Row is deleted as well.

3. “Arrow up” icon – select parent Block

All Blocks have a toolbar that is displayed when a Block is selected.

Cells have the following Component settings:

1. Stackable – enables cell to have more than one Content Block inside by stacking them vertically. By default, Cells can have only one Content Block. If a Cell is stackable, it allows for multiple Content Blocks to be added. A stackable Cell behaves like so:

   1. On the initial Device size, it is placed, Content Blocks will be stacked vertically

   2. On a smaller Device (when columns wrap), Content Blocks will be ordered horizontally up to 4, dividing the twelve columns available equally. If there are more than 4 Blocks, they wrap on a new line and divide the horizontal space again.

   3. On XS Device – Cell is full-width and Content Blocks are stacked vertically one by one.

   4. On a larger Device size, the Cell behaves as it is on its default Device

Row

You can select whether a Row should be visible on a Device. To do so, select a Device. Then, select a Row and click the “Crossed eye” icon from its toolbar. You can change whether hidden Rows are still shown on the Canvas (in the editor only. This will not change their visibility in the webshop.) by clicking the “Crossed eye” icon in the Editor top row. The Row will appear greyed-out. To restore its visibility, click on the “Crossed eye” icon in the Row toolbar once again. Visibility differs per Device size. So, a Row, hidden on SM devices, by default, will still be visible on all others

Rows have the following other buttons on their toolbar:

1. “Arrows” icon – move the Row “Copy” icon – duplicate the Cell in the same Row

2. “Copy” icon – duplicate the Cell in the same Row.

3. “Trash bin” icon – delete the Cell. If it is the final Cell in a Row, the Row is deleted as well.

4. “Arrow up” icon – select parent Block

Rows have the following Component settings:

1. Full-width row – Rows can either span the full width of a page or have a padding on each side. Note: both full-width and padded Rows have 12 columns of space

2. Authorization profiles – More on authorization is explained in chapter “Authorization”

Content

Content is added to a layout element by dropping a content block on a cell. The available Content Blocks can be found under category “Content” on the righthand menu.

Text

The “Text” Block is used to add a block of text. The text can be edited by double-clicking an already added Block. This will open the Rich Text Editor toolbar. Text Blocks have the following Component settings:

1. Upload background – set an image as background from your PC

2. Background URL - set an image as background from

3. Href - make the block an active link

4. Target - has two options:

   1. This window - clicking on the block will load the page linked in the same tab

   2. New window - clicking on the block will load the page linked in a new tab

Image

The “Image” block adds an image. Double-clicking it will open the Image Browser. To upload an image, click on the “Upload a file” button. Alternatively, paste an URL into the “Web address” field. Image Blocks have the following Component settings:

1. Href - make the block an active link

2. Target - has two options:

   1. This window - clicking on the block will load the page linked in the same tab

   2. New window - clicking on the block will load the page linked in a new tab

Video

Add a video with the “Video” block. Once added to the Canvas, the Video Block will try to preserve an aspect ratio of 16:9 based on the cell width. To link a particular video copy it’s ID and paste it into the Video ID field in Component settings. You also need to select a provider from the Provider dropdown. Video Blocks have the following Component settings:

1. Provider - can be set to:

   1. YouTube

   2. Youtube (no cookie) - YouTube Privacy Enhanced mode

   3. Vimeo

2. Video ID - used to identify the video from selected provider

3. Autoplay - whether the video will start playing automatically

4. Loo - whether the video will start over once it ends

5. Controls - whether the video controls (Play, Pause, etc.) would be shown

6. Related - whether to show related videos on Pause and after video ends

7. Modest - whether the Youtube logo will be displayed on the Controls bar

Carousel

You can also add a Carousel. To select a slide, use the Carousel arrows on the sides. Alternatively, head to the Component settings and select a slide number from the dropdown. The Carousel Block uses with Image Blocks for slides. Hence, to add a slide image double-click on the Image Block for the selected slide. As another option, click on the “Add Image” button in the Component settings. To add a new slide, click on the “New Slide” button in the Component settings. The Carousel Block has the following Component settings:

1. New Slide - adds a new slide

2. Slide Number - selects a slide

3. Add Image - opens the Image Browser to add an image

4. Slide Href - make the slide an active link

Others

The "Image with Title" and "Image with Description" Blocks are a combination of Text and Image Blocks in different layouts. Both have the following Component settings:

1. Href - make the block an active link

2. Target - has two options:

   1. This window - clicking on the block will load the page linked in the same tab

   2. New window - clicking on the block will load the page linked in a new tab

List template and Item template

The template Blocks are used to build queries which are dynamically “translated” into HTML in the web-shop.

Item template is intended to display a single item. It has the following Component settings:

1. Item type - the type of item to be selected for display (News, Articles, etc.)

2. Select By - dropdown with properties to filter by

3. Filter - the value of the selected property

List template can display multiple items by the given criteria. It has the following Component settings:

1. Item type - the type of item to be selected for display (News, Articles, etc.)

2. Select By - dropdown with properties to filter by

3. Filter - the value of the selected property

4. Number of items - the number of items the list will display (For example, if the items returned given some settings are 10. By setting the number of items to 3 will display only the top 3 items from the sorted set of items.

Template components are always static placeholders in the Editor. The dynamic behaviour is a web-shop specific feature.

Authorization

You can authorize content on a “per row” basis. To do so, select a Row and open the Component settings. Select a profile by clicking on the checkbox next to its name.

Selected profiles describe who CAN see the content.

To view the webpage from the perspective of a customer, select a profile from the “Authorization Profiles” dropdown. Rows having the selected profile will remain visible, whilst all others will become less opaque.

Examples

Add a Row with images

Step 1

When building a webpage, we start with the layout, and then we add content. Add a Row first.

Step 2

Then, add the Image Blocks.

Step 3

Double-click on an Image to open the Image Browser. And then, upload an image from your PC or paste a link to an image in the “Web address” field.

Step 4

You will notice, starting from the left, the first two pictures have the same proportions, while the last is shorter in height. Images in the Editor will always try to keep their aspect ratio. The first two images have the same aspect ratio, so they fit together perfectly. The last one, on the other hand, is completely different, which creates a discrepancy. Therefore, when adding images, you should be careful in choosing their size.

Spacing Blocks

Step 1

Sometimes, you would want to have two Blocks in a Row, but not right next to each other. To add some white space you can use the “Single cell” Block.

Step 2

Then, resize the left Image Block if you want the image to be distributed equally

A note on images

The images in the "Spacing Blocks" example display the digits 900x450. It is logical to assume, this is the size of the images as displayed in the Editor. Perhaps it is confusing then, that when adding a new Cell, the images visibly get smaller. The reason for this behaviour is that in the Editor, images are scaled by their aspect ratio. 900x450 is the original size of the image, which makes the image have the aspect ratio of 900:450 = 2:1. Or, said otherwise, the width of this image will always be twice the size of its height. In the example, we have initially dedicated 6 columns for each image. This results in 686 pixels of width (see the screenshot below). Using the math from before height would be equal to exactly 343 pixels. To change the height of an image, change the width of its cell. The Editor will apply the aspect ratio to the new width and calculate its height.