• Login / Register
  • Login
  • Register / Get a FREE website

1. Home
2. Resources
3. Guides

Getting Started with Webiny CMS

This guide will show you how to make an initial setup of your Webiny CMS. It includes setting up the system, creating content categories, setting up URL structures, image galleries and folders. It also features setting up forms for your site, as well as creating blog posts, footer links and information architecture of the site.

It does not include how to create your Webiny theme and template, if you need this information this is the article you should read instead: How To Create a Webiny Theme. You have full documentation on this page: Webiny Themes & Templates.

Notice: this is quite a large post that shows how to work with Webiny CMS, how to get started and how to maximize the potential you have. Once you set up Webiny CMS, creating and managing your content will be really easy. 

Setting up

The first thing to show up when you first log in is the Dashboard. In this image you can see the complete dashboard with content categories and statistics. Yours will be empty until you set up content categories and create the first pages. 

Search page

On the search page you can setup an URL prefix for each language of your Webiny domain(s). You can also set up your search result page templates (they can be different per language). In a live example it can look like this:

• Domain 1 (4 languages)
  • English - search prefix: "search", template: Search EN
  • German - search prefix: "suche", template: Search DE
  • Italian - search prefix: "risultati", template Search IT
  • Spanish - search prefix: "busqueda", template Search ES
• Domain 2 (2 languages)
  • English - search prefix: "search", template: Search EN
  • German - search prefix: "suche", template: Search DE

This enables you flexibility in design and URL structure.

Date / Timezone

You can use Date / Timezone settings to set up standard display of times on your website. This can be used to display time of comments or posts. You can use European or U.S. standards for your account, depending where the majority of your traffic comes from.

General settings

On General Settings you can name your company and upload your company logo. Notice: this logo will not be used in specific templates such as PDF templates, newsletter and email templates or invoices and vouchers. 

Start page and Language

If you have a multi-website and multilingual installation of Webiny, this is the place to set up main language and start page for each website. 

My Profile

On this page you can setup your profile and change passwords. If you lose your password you can always reset it on the login screen using username or email you provided. 

Email accounts

With each Webiny account you have the possibility to add unlimited email accounts associated with your domains. Input email address, assign password and you can start using your email account. You can access the webmail system through http://www.yourdomain.com/webmail/.

You can also use other email clients (Outlook, Apple Mail, Gmail). When you log in to your webmail, Cpanel will give you the option to configure the email client. Just follow the steps inside your webmail. We also have a more detailed guide How to set up Email accounts with Webiny.

Languages

Webiny is multilingual system that can handle multiple languages on each of your domains/websites. Depending on your licence, you may be able to add a language. Simply put native name, english name, country codes (2 and 3 characters) and assign a flag (this one will not be used in your theme).

Once you've added the languages, you can translate standard terms, for example "search", "advanced search", "homepage" etc. These translations will be used within your themes/templates.

Domains

Depending on your licence, you may have multiple websites / domains inside your account. Click on System Settings > Domains > Add New to add additional domains. You can set up your URL structure as you want it. Some of the examples you may have are:

• {page_url}
  • Resulting URL: http://your-website.com/sample-page
• {page_url}.html
  • Resulting URL: http://your-website.com/sample-page.html
• {language_code2}/{page_url}/
  • Resulting URL: http://your-website.com/en/sample-page/
• {language_code3}-{page_url}/
  • Resulting URL:http://your-website.com/eng-sample-page/

Redirects

With this module you can handle 301 redirects for your domains. To read more about URLs in Webiny, check out this blog post: How Webiny Treats URLs

You can use Redirect module if you have an old website that you want to transfer to Webiny or if you change the URL structure of your pages and blog posts. You can input URLs one by one manually or you can prepare all the URLs (old and new ones) in one CSV file. This way you will not loose your visitors and you will assign 301 redirect that will tell search engines where is the location of your old content.

 

Social networks

Webiny comes with the possibility to add two major social networks (Facebook and Twitter) to your website account. When you connect Facebook and Twitter you can push your pages and blog posts immediately to your Facebook timeline or Twitter stream.

Forms

Webiny comes with form generator. You can add unlimited number of forms that can be used for various purposes: lead generation, submit specific feedback etc. Once you setup form you can use it on your pages as "action item" or you can generate them through API calls in your templates.

Once you've added the form you can choose to input form elements (Name, email, checkbox...). The options you have are:

• Input Field
• Text area
• Radio button
• Checkbox
• Combo select

You can use Webiny to validate form elements (check if the email is correct for example).

Please note that you need to have the forms designed within your theme / templates.

Image Galleries

You can have unlimited image galleries within Webiny. To make it easier for you to handle large image sets, it is important that you organize your image folders in appropriate way. For example, you can name them: Team, Products, Blogposts and so on. 

Additionally, when you setup your theme and templates, you will use certain images in scaled version. Example: we use 2 versions of the same image automatically on our website. Main blog post image is used on homepage in small version (53*40 pixels) and in blog thumb version for blog listing page (120*90 px). We advise that you use same aspect ratio (4:3 or 16:9) on both your pictures and theme so no cropping occurs. However, you can choose the cropping options on automatic image resize in "Image Dimension" option.

Once you've setup the image dimensions and folders, you can start uploading your images. You can upload multiple images and Webiny will take care of the rest. It will automatically resize and crop images to predefined dimensions.

Content Categories

Same as with images, content categories help you manage your website and content inside Webiny. Besides that, you can easily assign specific templates, content box holders and action items to specific category. Example: product page can be one content category (products), that has assigned default template called products (products.tpl). 

Content Attributes and Custom fields

Content attributes and custom fields are used to structurally organize and display your content. For example: You have a website with listing of local restaurants. You want to categorize these restaurants with following properties:

• Type of restaurant
• Type of cuisine
• Price range
• Location

These are content attribute categories. For these content attribute categories you can add options (attributes). For example:

• Type of restaurant
  • Family
  • Business
  • ...
• Type of cuisine
  • International
  • Mediterranean
  • Japanese
• Price range
  • Budget
  • Normal
  • Expensive
  • ...
• Location
  • Location 1
  • Location 2
  • ...

Once you've added these attributes you will be able to input them into your pages and later make a search and filter by these attributes.

Pages

Now you've setup everything and you are ready to publish your first pages. We'll take a look at how content creation and management works with Webiny.

On the main screen you can control:

• Page parent (you can have unlimited parent-child structure of your pages)
• Save, cancel, save & continue editing, preview, publish and unpublish options in the dropdown "Action"
• Page title
• Page URL (Webiny automatically generates URL from page title, but you can change it to whatever you like)

As you can see, Webiny features CK Editor. You can use the following features:

• View and edit source
• Formating (Bold, Italic, Underline, Strike-through, Ordered list, Unordered list, paragraph formatting)
• Add Hyperlinks
• Format of headings
• Add images
• Tables
• Indenting and quotes
• Copy and paste
• Change of colors
• Adding flash
• Adding Google Maps (with location finder)

Our editor enables you full control of your page content.

On the next screen you have Extra options.

Here you can control:

• Anchor text that appears in the auto-generated menus (example: page can be named "About Webiny", but you can display it as "About us" in the menus using anchor control
• Order - control the ordering of the pages in the same structure level (example: you can have "About Us" as parent page and you control the order of the child pages through this control
• Publish on - you can schedule when you want this page to be published
• Comments - enable or disable comments per page
• Template - you choose display template from your theme, usually this is default template for this content category, but you can change it here
• Teaser - used for displaying "intro" of your page if you show page list somewhere on the site (example: news page, category page or blog page)
• Menu association - you can associate the page with predefined menus in your theme / template - it will appear with selected anchor text and order
• Label - also known as tags - they are usually used with blogs, but you can use them in other pages

On the SEO screen you can control SEO options and social media accounts (if you have connected them to your Webiny account).

Here you can control Meta data and Social Media push services:

section of your HTML, we named this "Meta title". One of the most importat onsite SEO attributes - be sure to write a good Title. We also count number of characters as search engines usually display between 65 and 80 characters

• Description - control your meta description here. Also, here we count characters, make sure it's up to 160
• Keywords - although rarely used by search engines, we provided this option too
• Language - you can control language information
• Robots - for each specific page we allow different options (if not selected, Webiny will choose general setting from your theme heading, usually "index, follow"). Through this you can control how will search engine robots index your page and how will they look at the links pointing from that page
  • Index, Follow
  • Noindex, Follow
  • Noindex, Nofollow
  • Index, Nofollow
• Custom tags - you can add unlimited custom tags

On the next tab you can control your page content boxes.

Content boxes are holders of specific information. Depending on your site template you can add unlimited number of content boxes to "template box holders". For example, your page template can consist of 3 areas: left sidebar, below main content, and right sidebar. If you've coded your theme in such manner, you will be able to control boxes that display this content with drag&drop.

Conten boxes can be:

• Simple content (contact data, download button for some PDF)
• Action items (predefined API calls to specific funcions)
  • Menu
  • Poll
  • Page list

How does it work in action? For example, this page on ALH has a content box for displaying left side menu within specific page group (Destinations). Also, this page displays only "5 star hotels in Dubrovnik" which is basically a display of pages with label "5 star" with first image and teaser text. All done with drag&drop and some small template coding.

Action items are like mini-modules or plugins that you can use inside Webiny CMS to add more dynamic content to your website without any coding. The great thing about action items is that they can be inserted almost anywhere inside your theme.

 

To find out more about how Action Items work, take a look at the documentation where you have a nice visual and coding explanation.

As for Content Boxes, you can add them inside "Content Boxes" section and reuse them across your site.

On the Preview screen you can see how will your content render in the page.

As for the documents, they can have pre-defined placeholder and designed buttons in your site's template. On the document tab you can associate documents to your pages. To see how to associate documents to your theme, please see How to create Webiny Theme.

You can handle images in the same way as the documents. You can insert them inside the content (the editor tab), or you can have predefined place in your template to display the complete gallery. 

Image gallery consists of the browser on the mid-left side. You can add images by dragging and dropping complete folder or you can add images by dragging and dropping to a right placeholder one by one. You can rearrange the ordering by moving images in the selected area. You can remove individual image by double-clicking on it. 

Blog and Blog Posts

Blog and Blog Posts are identical as normal pages in Webiny. We just display them differently. You can use normal content editing features to publish your blog content. Extra features you may have are:

• Related posts - done via labels / tags
• Featured post - done via menu
• Rel = "author" - done through template
• Author information - done through template

Basically, to have a blog on your Webiny site requires some template coding. It is not hard or complicated as long as you know what you want to accomplish and follow the documentation.

Menus and Links

You can have unlimited menus with Webiny. In the menu module you can add new menus, but you will have to include them in your theme to display them (see the documentation). 

Menu is usually generated through CMS. If you want to add specific link to a menu, for example to external page, or to a page within your website that isn't usually associated with the menu, use the link function. One of the example is our Q&A Forum that is placed as an external link in our "Resources" menu.

Polls

Polls can be associated with a single page or displayed globally through your website. You can add unlimited polls with unlimited answers. Once you've created a poll you can include it on the page via Action Items.

Documents

To associate documents with the pages, you must first upload them in the Document area. Supported filetypes are:

• PDF
• Word doc
• Spreadsheets
• Images
• ZIP archives
• Mp3
• Other file types

Going further

This guide is all you need to start working with Webiny CMS. Please check our other guides if you need to use more than CMS features. Also, if you have questions about this guide, ask them in the comment section. If you are Webiny user, feel free to ask any question in our Q&A forum where you can login with your customer email and password.