If you are just starting with the unroole go over the topics below which will guide you to the process of administrating an unroole website, creating and editing pages and layouts, and adding content like articles and media files. Administration workflow is reflecting 3 crucial concepts that sets unroole apart from all other CMSs:
1. Easy cross-channel content distribution
All channels have access to the same content, like articles, pages, galleries and assets.
2. Developers are not needed for changing the content logic and structure of the pages
Content creators can make changes like adding new sections on pages, without engaging with the developers.
3. Scheduling and previewing changes
All changes to pages and layouts and themes, can be scheduled to be live in different points in the future. This means that you are never editing live pages and changes made can be previewed, together with the rest of the site, by anyone you decide to share link with.
Create a Channel
First step you should do when logging in for the first time in your unroole account is to create a new Channel. Channel represents a single website.
Multisite setups that work
unroole was designed with multisite setups in focus, which means that all Channels you create will share all the content you add (articles, media files, galleries, etc) and will reflect the changes you make.
New Channels with a single click
To create a channel, click on Channel in the sidebar and + in the slide out menu.
From here you can choose the starting point of your channel, blank or Web startup. Blank starting point sets up a channel with no content and an empty theme. Web startup creates a channel with placeholder content and widgets that you can either use to explore the unroole or to customize for your own website. Chapters below will explore the Web startup starting point.
Add articles and assets
Articles in unroole are not used just for blog and news posts.
One content - many instances
unroole is driven by the content-centric paradigm, which means that content is always one and its instances can be displayed in different parts of your website or websites. Why is this important, you might ask.
On your main website you might have articles about each service your company provides, and also you have separate channels for each service that serve as a landing page that drive segmented visitors to your website. With unroole you only need one piece of content for each service that will be displayed on both main website and dedicated landing page. And when you make changes to the content it is automatically updated in all instances.
This example may be very simple, but in situations where you have hundreds of channels, managing content on each of them should be as simple as managing content on one. This principle applies for all media assets and galleries as well.
Cross-channel sharing is in your command
You can choose wether the content will be available to other channels or not by creating it on account or channel level. All content is available from the Content panel in the sidebar.
Once you add the content it is time to display it on pages.
Create pages
Pages are used to display all your content. Unlike with many others systems, content editors, not developers, are the ones who are deciding and implementing the content logic of the websites. There is no need to engage with the developers to execute your ideas.
Drag-and-Drop interface
Pages in unroole websites are created by adding and configuring widgets via drag-and-drop. Widgets are small blocks that represent different areas of your page. They are coded to pull your content from the database and to style it based on your website design. So you would have a widget that displays your recent blog posts, or navigation, or call to action areas, etc. Page building process in unroole is designed to remove the need for developers when changing the page structure or content logic.
For example, if you would like to change the category of articles that are featured on your homepage, you can simply change the configuration of that widget, and not wait for the developer to hardcode the new category for you. Also if you would like to add or remove some elements on the page you simply add or remove the desired widgets, and again not wait for the developer to do it for you.
Cloning from Blueprints
Pages in unroole can be created in two ways, cloning of the Page Blueprint or creating new page from scratch. Page Blueprints are usually created in theme creation process, and serve as a reusable blueprint for unique pages like homepage, blog articles page, about page, etc. Page blueprints hold necessary widgets for that particular page. But, like we said before, you are not limited by this structure, you can add or remove widgets in Page blueprints on your own.
To create a page from blueprints click on Blueprints in Advanced panel in the sidebar, and in Page blueprints table click on 'Clone this blueprint' icon next to the Blueprint you want.
New page will be added to Pages in Appearance panel of the sidebar. From here, process of configuring and adding widgets is the same as creating the page from scratch, with the difference that you already have all the widgets in place.
Creating from scratch
To create a new page from scratch, just click on New page action button in the Pages section. To add and configure widgets to your new page, open it in Page editor by clicking 'View in page editor' icon next to it.
When in page editor in the bottom tray on the left you will have a widgets tree with all the widgets added to the page. To add a new one, click on 'New' action button, and select the widget from the right section of the tray. Once the widget is added to the tree you can configure it by clicking on it, or rearrange it's position by dragging it to the desired location in the tree.
Create navigation
Creating navigations in unroole is a simple process of adding pages or custom urls as navigation items. You can have as many navigation levels as you wish. To create a navigation click on Navigation in Content panel of the sidebar.
First create a navigation, by clicking Manage navigations action button and then Create navigation.
After that you add new links to navigation by clicking Add Navigation Item action button.
Create a Layout
Layouts are sections of your website that are repeated on every page. These sections usually include header and footer parts of the webpages.
Drag-and-Drop interface
Layouts are created the same way pages are - you are adding and configuring widgets in Layout editor. Also, same like with pages you can create them from blueprints or build them from scratch.
One key difference is that Layouts by default have the Page content widget in its structure. This is a placeholder widget and it denotes the place where pages will be injected in the layout.
Page specific Layouts
You can create as many layouts as you wish, and you can apply different layouts to specific pages. To do so click on edit icon next to a page version.
In Channel layout dropdown select the layout you would like to use. By default all pages will use the layout that is published on the channel level.
Displaying Layouts
To display a Layout on your website you just have to schedule it by clicking Schedule icon next to it in Layouts part of the core.
Schedule versions and create Time Previews
Page versions
Every Page in unroole can have several versions. Versions can contain any sort of change in structure and content. These versions can be scheduled to be live in any point in the future, so you never have to edit live pages. This is an excellent way to test different structure and content logic of your website and find the one that is best suited for your site visitors.
To create a new version of a page, click on New version icon next to a version you would like to modify.
Versions will be live on the date you schedule them, so make sure that you schedule them in future so your changes wouldn't be visible before you want them to.
Scheduling Layouts
Layouts don't have versions, like Pages do, instead you can schedule different layouts at different points in the future.
Using Time Previews
Once you create several versions of several pages, and several layouts and you schedule them it could be quite difficult to review all the changes that will happen once these go live.
That is where Time Preview comes in. With Time Preview you can create a preview of your entire website at any point in the future and evaluate all the changes you made. You will get a password protected link that can be shared with the rest of your team, and previewed on any device. This way more people can be involved in the decision making process and they can have the big picture of how the changes made will be integrated in the whole website.
To create a Time preview click on Scheduling in Advanced menu in sidebar and then Time previews action button.
Here you will have links to all Time previews you create.
Click on a Create new time preview action button and add the necessary info like username and password for viewing the link, description and simulation time, the time when changes you want to see are scheduled to be live.
If you are new to unroole go over the topics below which will guide you trough the process of creating themes and provide you core paradigms of developing websites for unroole:
1. No need for backend ops
As unroole removes all backend operations from developers queue and handles them for you, creating websites in unroole is done with only html/css/js.
2. No set architecture
unroole is information-architecture-agnostic, which means that there are no set formats of the content presentation. All data pulled from the database is in json format so you can have all the freedom when presenting them.
Creating themes in unroole is a process of coding widgets and arranging them on layouts and pages blueprints. As simple as that. As an example we will refer to a Web Startup theme, which comes with every new channel in unroole. Also, you can consult our documentation for more indepth information and coding guides.
Theme structure
Themes for unroole websites are collection of css, javascript, framework and blueprint files. unroole has it's own IDE with this structure already in place. CSS, javascript and frameworks of your choosing are the same types of files you are already familiar with. What is probably new to you are the blueprint files.
Blueprints
Widget Blueprints are used to code the html of the Widgets - building blocks of all your sites content, and arranging them in Page and Layout Blueprints for easy reusability down the road. Every new page on the website can be created by cloning the appropriate Blueprint (i.e. homepage, single article page, or about page) which holds the necessary widgets for that particular page. Same goes for different layouts.
properties.xml
One more file that is unique to each unroole theme is the properties.xml file. This file holds links to all your theme files, and makes sure that everything is in place. It is automatically populated with all new files you add, and in it you can control the load order of your scripts and styles by simply rearranging the files position.
To view Web startup theme files go to Dashboard > Themes and next to Web startup theme, click open in theme editor icon.
Code Widgets
Now that you are familiar with types of files every unroole theme holds, you are ready to start coding. First step is to code some Widgets.
What are Widgets?
As we mentioned before, widgets are building blocks of your website. Think of them as lego blocks - you use different sized and shaped blocks (each widget can be filled with different content) and connect them with other blocks (each widget can be placed wherever the content should be displayed). Widgets are used inside Page/Layout editor to actually build these parts of the website. Widgets are blocks of code in html and liquid and they are corresponding with the areas on the website, ie. you would have a Header widget which holds logo and Main navigation, Main content widget which holds your recent blog posts, call to action areas, etc., Footer widget which holds social networks links and secondary navigation.
Widgets are coded in html and liquid
If you inspect the widgets in Web startup theme, you will see that there are widgets for each segment of the website. You will also notice that they are plain html, and some of theme have additional liquid tags enclosed in {{}}.
Liquid tags are used to:
1. Retrieve content data from the database, filtered by user input
2. Perform loops, string filtering and control flow operations
Every piece of content you add to account has its corresponding liquid object that stores all the data related to that content. When you reference these objects and their properties in your widget code and add the widget to a Page or Layout, you will have the selection options for that type of content. In plain words, if you reference navigation in your widget code (like we have it in the Main Nav widget in Web startup theme), when you add it to a layout, you will have a dropdown to choose which navigation you want to place in the layout.
Apart from gathering and displaying data from the database, liquid tags can gather user input as text, dropdown selections, etc. To get more details on how to create a widget from scratch, head over to Creating a new widget blueprint article in our Documentation.
Create a Layout blueprint
After you create widgets, next step in your unroole website building process is to create a Layout blueprint. Layout is a part of your theme that contains widgets that are repeated on every page of the website. Usually these are populating header and footer areas of the website. Also, by default they contain widgets that create basic html structure, such as html, head and body tags, and pull all your javascript and css files. Because of this, it is recommended that you first build the Layout blueprint, before other pages, so your styles and scripts will be applied to them.
Drag-and-Drop Interface
Layouts are built in the Layout editor by dragging and dropping widgets in their place and making necessary configurations. You can access Layout editor from Theme editor, by selecting the layout and then clicking Layout editor button in top right corner.
Also, you can access Layouts from the unroole core, by clicking Layouts in the sidebar Appearance panel. As mentioned before, by default all Layouts have widgets that build the html structure of the webpage, these are Document, Header, Body and Page Content widgets. The last one, Page content widget, marks where pages are going to be injected in this layout.
Create Page blueprint
Process of creating a Page blueprint is the same as creating a Layout blueprint with the exception that Page blueprints don't have any widgets by default. You access the Page editor, either in Theme editor or in uroole core and you add and configure widgets.
Which Blueprints to build?
Usually you would create a Page blueprint for each unique page of the website like Homepage, Blog posts, About page, etc. Also, most often use of the Page blueprints is to allow content editors to choose overall structure of the page like full-width or with sidebar on the left or the right.
Export to admin
After creating Page and Layout blueprints, in order to clone pages and layouts from them you should export them to the unroole admin. To do so, in Theme editor click on the item you would like to export and in item options click on Export to admin button.
Now all your exported blueprints will be available to you from Blueprints in the Advanced panel of the sidebar.