Woto Templates
 Designer Guide for Editor 2

Introduction video



Set content area (woto-content-area)



  • Drag the yellow line to set the width of the content area, e.g. 1024px
  • Click on the magician hat located on lower right corner to access the HTML/CSS/JS of the page

You will notice that this generates a similar source code (below is segmented for readability):

<div id="woto-content-area" data-content-width="1024" style="position:relative;width:100%;">
  <div class="woto-main-box"
   style="width: 1024px; height: 200px; margin: 0px auto; position: relative;"
   data-wide-style="{'width':'1024px','height':'200px'}"
   data-tight-style="{'width':'100%','height':'19.53125vw'}"
   data-mobile-style="{'width':'100%'}">
  </div>
</div>

Sections (woto-main-box element)


Pages in this editor comprises horizontal strips, called sections, stacked under one another.


  • Hover over the bottom of the section and click on the (+) button to add a new section below

Check out the source code and notice that each section is represented by the woto-main-box element:

<div id="woto-content-area" data-content-width="1024" style="position:relative;width:100%;">
<div class="woto-main-box"
  style="height: 448px; margin: 0px auto; position: relative; width:1024px;"
  data-wide-style="{'width':'1024px','height':'448px'}"
  data-tight-style="{'width':'100%','height':'43.79277vw'}"
  data-mobile-style="{'width':'100%'}">
</div>
<div class="woto-main-box"
  style="width: 1024px; height: 200px; margin: 0px auto; position: relative;"
  data-wide-style="{'width':'1024px','height':'200px'}"
  data-tight-style="{'width':'100%','height':'19.55034vw'}"
  data-mobile-style="{'width':'100%'}">
</div>
</div>

Section settings (Background)



  • Click on section settings (gear icon) and pick a background colour

Section settings (Narrow/Wide)



  • Click on section settings (gear icon) and switch the section style to WIDE
  • You will notice the impact right away as seen below


Drop a widget



  • Drag the text widget ("Add text") and drop it on the second section you created

Check out the source code, notice the <widget> part added under the second section:

<div id="woto-content-area" data-content-width="1024" style="position:relative;width:100%;">
  <div class="woto-main-box"
   style="height: 448px; margin: 0px auto; position: relative; width: 1023px;"
   data-wide-style="{'width':'1023px','height':'448px'}"
   data-tight-style="{'width':'100%','height':'43.79277vw'}"
   data-mobile-style="{'width':'100%'}">
  </div>
  <div class="woto-main-box woto-strip"
   style="width: 100%; height: 200px; margin: 0px auto; position: relative; background-color: rgb(196, 199, 109);"
   data-wide-style="{'width':'100%','height':'200px'}"
   data-tight-style="{'width':'100%','height':'19.55034vw'}"
   data-mobile-style="{'width':'100%'}">
    <widget type="text" id="w_1421756514807"
     data-settings="{'code':'<p>Click here to start editing your text...</p>'}"
     style="position: absolute; top: 61px; left: calc((79px + 50%)- 511.5px); width: 236px;"
    data-wide-style="{'width':'236px','top':'61px','left':'calc(79px + 50% - 511.5px)'}"
     data-tight-style="{'width':'23.06940vw','top':'5.96285vw','left':'7.72239vw'}">
    </widget>
  </div>
</div>

Widget styles


Add the following highlighted class name colour style to the widget's CSS:

<div id="woto-content-area" data-content-width="1024" style="position:relative;width:100%;">
  <div class="woto-main-box"
   ...
  </div>
  <div class="woto-main-box woto-strip"
   ...
    <widget type="text" id="w_1421756514807"
     data-settings="{'code':'<p>Click here to start editing your text...</p>'}"
     style="position: absolute; top: 61px; left: calc((79px + 50%)- 511.5px); width: 236px;
color: blue;"
     data-wide-style="{'width':'236px','top':'61px','left':'calc(79px + 50% - 511.5px)'}"
     data-tight-style="{'width':'23.06940vw','top':'5.96285vw','left':'7.72239vw'}">
    </widget>
  </div>
</div>

Notice the effect below:


data-wide-style, data-tight-style, data-mobile-style


Woto automatically creates an adaptive version of the page based on your screen size and the woto-content-area width you set.

  • If the user’s screen width is smaller than the content-area width, the tight CSS is used.
  • If the screen size is <480px, the mobile CSS is used.

You don’t have to modify these settings.

Color schemes and Text styles

This option can be used only when creating a Woto template from Woto Admin. It won't work inside Woto Editor.

In a template you can define different color schemes and text styles for page variety. Users can easily switch to another color scheme and/or text style using the Page Design menu of the editor.

Color schemes

  • Click on the magician hat located on lower right corner and access to the CSS/JS pane of the page
  • Select Javascript pane
  • Define an array called "window.woto_template_colorpalettes"
  • Each property of this array must be a Javascript object:
    • Property "c" = name of the palette's class name
    • Property "cp" = string array of the colors forming the palette
  • The limit on both properties is your fantasy, meaning you can define "n" palettes with "n" colors
    (Its recommended to define at least 4 palettes having each 5 colors)

Example:

window.woto_template_colorpalettes = [
 {"c": "class-name-of-palette1", "cp" : ["#69d2e7", "#a7dbd8","#e0e4cc","#f38630","#fa6900"]},
 {"c": "class-name-of-palette2", "cp" : ["#3f0082", "#dfe0db","#ff66cc","#000","#f7f960"]},
 {"c": "class-name-of-palette3", "cp" : ["#000", "#777","#eee"]}
];
  • Once finished switch to CSS pane
  • Create the body CSS for the defined classes above so that the styles can be applied once chosen by user

Example:

body.class-name-of-palette1{
    background-color: #FFFFFF;
}
body.class-name-of-palette2{
    background-color: #000000;
}
body.class-name-of-palette3{
    background-color: #FF66CC;
}
  • Save & reload the template, you can see & test your palette using the Page Design menu as shown below


Text styles

  • Click on the magician hat located on lower right corner and access to the CSS/JS pane of the page
  • Select Javascript pane
  • Define an array called "window.woto_template_textstyles"
  • Each property of this array must be a Javascript object:
    • Property "c" = name of the text style's class name
    • Property "ts" = string array of two items:
      •  1st item: Font family name of header styles (h1-h6)
      • 2nd item: Font family name of paragraphs (p)
  • Again the limit on both properties is your fantasy - we recommend to define at least 4 text styles

Example :

window.woto_template_textstyles = [
 {"c": "class-name-of-text-style1", "ts" : ["\"Open Sans\",sans-serif", "sans-serif"]},
 {"c": "class-name-of-text-style2", "ts" : ["\"Times New Roman\",serif", "monospace"]},
 {"c": "class-name-of-text-style3", "ts" : ["Heading Font Family", "Paragraph Font Family"]},
];
  • Once finished switch to CSS pane
  • Create the body CSS for the defined classes above so that the styles can be applied once chosen by user

Example:

body.class-name-of-text-style1 h1,
body.class-name-of-text-style1 h2,
body.class-name-of-text-style1 h3,
body.class-name-of-text-style1 h4,
body.class-name-of-text-style1 h5,
body.class-name-of-text-style1 h6{
    font-family: 'Header font family'
}
body.class-name-of-text-style1 p{
    font-family: 'P font family'
}

body.class-name-of-text-style2 h1,
body.class-name-of-text-style2 h2,
body.class-name-of-text-style2 h3,
body.class-name-of-text-style2 h4,
body.class-name-of-text-style2 h5,
body.class-name-of-text-style2 h6{
    font-family: 'OTHER Header font family'
}
body.class-name-of-text-style2 p{
    font-family: 'OTHER P font family'
}
  • Save & reload the template, you can see & test your palette using the Page Design menu as shown below


Font family unlocking

This option can be used only when creating a Woto template from Woto Admin. It won't work inside Woto Editor.
Currently the "Blank (for template designer)" template has font family dropdowns unlocked. 

By default, users have no access to the "Font Family" dropdown in Title and Text widgets. 
So text styles defined in template CSS and as preset text styles (as described above), cannot be overridden by users.



You can remove this restriction and unlock the font family dropdown with a single Javascript line on the template:

  • Click on the magician hat located on lower right corner and access to the CSS/JS pane of the page
  • Select Javascript pane, add "woto_template_enablefontstyle=true" as first line and save the template.

Now users will also see (and therefore can change) the font family on Title and Text widgets as shown below.



Important note: to lock the font family on the template again, just delete the line, do not replace =true with =false !

Style dropdown customization

This option can be used only when creating a Woto template from Woto Admin. It won't work inside Woto Editor.

By default, Title widget has 6 header styles which are titled as: "Header 1", "Header 2", ... ,"Header 6". On some templates 6 styles are not enough and instead of "Header X" it can be more user friendly to use a text, e.g "Address".

  • Click on the magician hat located on lower right corner and access to the CSS/JS pane of the page
  • Select Javascript pane
  • Define an array called "woto_template_titleformats"
  • Each property of this array must be a Javascript object:
    • Property "title" = name of the style that will appear on the dropdown
    • Property "tag" = h1...h6
    • Property "classes" = optional class name (in order to define more than 6 styles)
Example :

woto_template_titleformats = [
 {title:"Job Title",tag:"h1"},
 {title:"Address",tag:"h2"},
 {title:"Position","tag:"h2", classes:"c1"}
];
  • Once finished switch to CSS pane
  • Define the CSS for the defined classes above

Example:

h1,h2{
    font-family: 'Header font family'
}
h2.c1 p{
    color: red
}
  • Save & reload the template, and add/edit a Title widget to see the changes

Note that thanks to "classes" property you can define infinite styles, and don't forget that only the classes defined in the array will appear. For example if you define only "h1" then h2,h3,h4,h5,h6 will not appear on the dropdown.

Restricting widgets and containers

Normally every widget placed inside a page can be freely moved, deleted, resized etc. You can restrict any widget or widget container by simply adding a class to it as explained below.

Widgets

  • Select the widget you wish to restrict
  • Click on the magician hat located on lower right corner and access to the Source pane of the page
  • The cursor will focus to the beginning of selected widget  (e.g. <widget type="image2"...)
  • Append (if already exists) or create class="" with one or more of the following classes
    • no-resize   -> blocks resizing
    • no-delete   -> blocks deleting
    • no-drag   -> blocks dragging (moving)
    • no-drop   -> block dropping inside a container (box)
    • no-rddd   -> blocks resizing, drag, drop and delete [instead of using all 4 classes above]
    • no-edit    -> blocks content editing, effective only with Title or Text widgets

E.g. it will become <widget type="image2" class="no-resize no-delete" ... 

Containers

  • Select the container (section, box, circular box or contain area) you wish to restrict
  • Click on the magician hat located on lower right corner and access to the Source pane of the page
  • The cursor will focus to the beginning of selected container  (e.g. <div class="woto-box" ...)
  • Append one or more of the following classes
    • no-c-resize   -> blocks resizing
    • no-c-delete   -> blocks deleting
    • no-c-drag   -> blocks dragging (moving)
    • no-c-delete   -> blocks deleting of any widgets residing inside the container

E.g. it will become <div class="woto-box no-c-delete" ...

Google Fonts usage

If you want to include a Google Font to your design, you can do so by adding a single line to page source.  
Just avoid the "http:" part in the font URL as this is being blocked by the https. So your addition should look like:

<link href="//fonts.googleapis.com/css?family=Lora"rel="stylesheet"type="text/css">

Mobile view


Click on the mobile icon located on the right hand side. This will take you to the mobile view shown below. This gives you a 320x480px representation of your page and how sections and widgets will scale.

Notice how Woto organizes a mobile layout automatically.


Notes:

  • You can resize sections
  • You can move widgets within the section they were dropped in the desktop view
  • You can NOT hide sections
  • You can NOT change the order of the sections
  • We recommend organizing the mobile view AFTER finishing the desktop view, as edited (resized/moved) items on mobile view will not be affected by changes made to the desktop view

Styling errors to avoid


  • Use h1-h6 styles ordered by font-size 
    [so don't create h1{font-size:3.5em;} and then h2{font-size:4em;}]
    This is because h1-h6 styles are rendered in real sizes in the Title widget style selector
  • Do not set different h1-h6 or p styles to .woto-box than body 
    [so don't set body h1 {font-size:3.5em;} and then .woto-box h1{font-size:1em;}]
    This is because grouped items wouldn't work as expected as they are grouped inside a box object

Widget Specific Hints

Text widget

You can add a CSS to a specific Text widget used in the template by following below steps:

  1. Identify the widget
<widget type="text" id="w_1421681981858" 
data-settings="{'code':'<p>My text</p>'}"
style="position: absolute; top: 21px; left: 435px; width: 625px;"
data-wide-style="{'width':'625px','top':'21px','left':'435px'}"
data-tight-style="{'width':'43.79818vw','top':'1.47162vw','left':'30.48353vw'}"
data-mobile-style="{'width':'90vw','left':'5vw','top':'10vw'}">
</widget>
  1. Add a new p class, say "myheader":
.myheader p {
    color:white;
    font-family:arial;
    font-size:20px;
}
  1. Add this class to the widget at the end of the data-settings (be careful to use single quotes and colon)
<widget type="text" id="w_1421681981858" 
data-settings="{'code':'<p>My text</p>','class':'myheader'}"
style="position: absolute; top: 21px; left: 435px; width: 625px;"
data-wide-style="{'width':'625px','top':'21px','left':'435px'}"
data-tight-style="{'width':'43.79818vw','top':'1.47162vw','left':'30.48353vw'}"
data-mobile-style="{'width':'90vw','left':'5vw','top':'10vw'}">
</widget>
  1. Don't forget to clear manually formats if you have been experimenting using the widget as a user.
  2. This styling will be valid only for the Text widget where it applied, so if user deletes the widgets or adds another Text widget it will get lost.