WEBY STUDIO
DOCUMENTATION
DOMAIN
Called Workspaces or SubAccounts, this functionality allows you to separate clients on different areas. You can think of them as folders.
It is especially important if you work with multiple clients because all the team members that you’ll invite (most likely the client at least) they’ll have access to all the projects in that sub account. The invitations happen at the sub account level, not at the project level.
You can rename or delete sub-accounts by hovering one and choosing from the icons on the right side. You can only delete sub accounts that have no projects.
This functionality helps with being organised as well as separate personal projects from client work.
The dashboard overview as below.
1) Workspaces / Sub Accounts: lets you structure your projects in sub-accounts. Best used for the client's sub-accounts.
2) Team Members: lets you invite team members to work together on projects.
3) Account related options: access profile settings, sign out link.
4) Publishing options: access the publishing options for your project.
5) Edit project: starts the Weby builder for the selected project.
6) Project title: edit the project title in place.
7) Preview: lets you preview your project in a new browser tab.
8) Create a new project: creates a new project in Weby Studio.
The projects card.
Projects are the bread and butter of Weby Studio. Every card represents a project.
We use the term “projects” because you’ll be able to create a different kind of projects in the future like a Funnels that you can embed on any website outside of Weby studio. You’ll create it in Weby Studio and have an embed code to put on any website.
Right now you can create Websites & Landing Pages and External Popups & Alerts.
Lets you invite team members to work together on projects. An email will be sent to the user you invite, they need to click a link to accept the invite. They’ll need an account on Weby to join if they don’t have one they can create one for free.
The users will be invited based on Roles that restrict certain things that they can do in Weby Studio.
The Owner has full control.
Viewer
Editor
Designer
Manager
The invited team members can access all the projects created in the sub account so as a best practice you’ll want every client on a separate sub account if you don’t want to give access to all your projects.
The team members functionality is free for all the plans. You can invite unlimited team members.
The Leads functionality is tightly linked with the Contact form. All the contact forms that users are submitting are saved in the Leads section of that project no matter if you set up marketing integrations like Mailchimp, Drip, etc.
Leads can be accessed from here:
They look like this:
This is where the leads are saved when you put a contact form on your Weby page(s) and a visitor of your website submits the form.
If you have the PRO that gives you integrations, and you have let's say MailChimp setup, then the lead will go to MailChimp but also is saved in your Dashboard for future reference.
You can Export or Delete leads from the two buttons on the bottom.
Important: you can collect leads with the Free plan because you get the free contact form included. Only the marketing app integrations are limited to the contact form in PRO.
After you've created a project in Weby Studio, most likely you'll want to publish it. In order to do that you need to press the Publish link:
We have 2 publishing options in Weby Studio: 1st hosted securely on our servers with your custom domain name and 2nd hosted securely on our servers with our subdomain name.weby.live.
Step 4. Done, access your project in the browser
Keep in mind: This publishing option comes with free SSL from us. Takes up to 24 hours to be installed.
Important: We are selling custom domains name. If you don't have a custom domain, buy one when you register the PRO plan account. Please note that IDN domains (domains that contain special characters) are not yet supported in Weby Studio..
Follow these steps to link your custom domain with your Weby Studio project.
Step 1. Click the Publish link on your project
.png "1-1-.png")
Step 2. Select Custom Domain in the popup
Step 3. Enter your custom domain name.
Include the www. as well. We'll use www.mydomain.com as an example.
Step 4. Click the Submit button.
After going through these first steps you need to operate some changes where you have registered your domain in order to create a CNAME Record and A Record redirects that points to your project.
Step 5. Create a CNAME Redirect.
This is done outside Weby Studio, where you've purchase the domain.
This is very simple, all companies that sell domains have these settings, you'll usually find them under NS/DNS Records. Here is an example on how these options might look like on your end:
Follow these steps to publish your project on a weby.live subdomain.
Important: You can use this publishing option for Free and your project will be securely hosted by us on our servers.
Step 1. Click the Publish link on your project
Step 2. Select Subdomain in the popup
Step 3. Choose a custom subdomain
If you are not creating a landing page (one page), you'll want to know how to create multiple pages for your website. Here is how to do it:
Step 1. In the builder, access the Settings from the left sidebar & go to Assets > Pages
Step 2. Press the Add New Page button at the bottom to add a new page.
Step 3. Click on the edit page will prompt to edit the page directly.
Step 4. Click on the page to edit the page title, translate, SEO, social and code, at the bottom you can duplicate, preview and delete the page.
You'll need a Menu on your multi page website. Here is how to create it:
Step 1. Click the menu in the left sidebar and go to Menu tab
Step 2. Create a new menu.
Step 3. Select the pages you want in your Menu and press the Add to Menu button
Step 4. Drag and drop pages to reorder or create dropdown menus
Step 5. Click the Settings icon to edit Navigation Label and more.
Once you create the pages and add them in a menu, you'll want to add that menu on your pages on your website. Here is how to do it:
Step 1. Locate the Menu element in the builder.
Step 2. Drag the Menu element on the page
Step 3. In the Menu element options, select the menu you want to display.
Important: If the name of your menu doesn't appear in the list, update your page and hit a refresh, then try again.
If you are creating a landing page and want custom links in the Menu that point to different blocks in the page, here is how to add them:
Step 1. Go to CMS (hamburger icon)> Project Settings - Menu tab
Step 2. Select the menu you want to add the custom links to, from the drop down
Step 3. Add Custom links from the sidebar.
Step 4. Click on the Settings icon and add the anchor link in the Anchor field.
For example, if you have named the Contact block as Contact, your anchor link will be #Contact.
In the Page Title field, please give a name for your anchor link. Your website visitors will click on this name to go to the specific block. Click on 'Save Changes' at the bottom to save your menu.
The block name is the name you give to your block from the block advanced settings.
A multi page website needs a global header menu on all the pages that can be modified from any page you are working on. Here is how to do it:
Step 1. Set up a header block with the Menu element you want.
Step 2. Transform the block in a Global block, then update the page.
Step 3. Go to Settings > Pages and click the Edit page icon to jump to the next page on your website.
Step 4. Add the header from the global blocks
Step 5. Repeat step 3 and step 4 until you add the global header on all your pages.
Once that is done you can edit the header from any page and the changes will apply across your website.
The External Popup project will let you create a popup or alert bar to use on external websites. You create and edit the popup in Weby Studio and embed it on your website no matter how your website was built.
Step 1. Add a new External Popup project
Step 2. Create and edit your popup
Step 3. Publish your Popup
Step 4. Include the Embed code in your <footer> tag
IMPORTANT: you need to have access to your <footer> tag and include the embed code there. Most of the scripts use the <header> tag, but our popup embed code needs to be pasted in the <footer> tag to work.
In Weby you can add and use Google Fonts (over 950 fonts to choose from). The Google fonts import is available in Free plan too. Here is how to do it:
Adding a Google Font
Step 1. From any text element in the page, click on Add New Font in the options toolbar
Step 2. Select the Google Fonts option
Step 3. Input the name of the Google Font you want to add. You can browse the Google Fonts library here.
Step 4. Click Continue and you are done.
Step 5. The font will appear at the top of your fonts list on any text element.
Keep in mind that you can delete any font from the Fonts Tab after you press the Add New Font button.
You can use your own custom fonts in Weby by uploading it in the builder. This functionality is available only in the PRO paid plans.
Uploading a Custom Font
Step 1. From any text element in the page, click on Add New Font in the options toolbar
Step 2. Select the Upload option. If the Upload option is not available, this means you need to Upgrade to a PRO paid account in order to use it.
Step 3. Give your Fonts a name. Can be anything, but usually the font name you'll upload.
Step 4. Add your first variation and upload your font. If you have a font family that has 3 variations: Light, Normal and Bold, you can upload them one by one.
Keep in mind that you don't have to upload all the files for the font, Usually and most common is .ttf and will do the job. If your file has another extension like .otf, you can easily convert it to a .ttf online for free: https://convertio.co/otf-ttf/
Step 5. Once your 1st variation was added you can add another variation or Continue to install the font in Weby.
Keep in mind that for each variation (Light, Normal, Bold, etc) you'll need to repeat Step 4 and upload each font.
Step 5. Press Continue and you are done.
Step 6. The font will appear at the top of your fonts list on any text element.
Keep in mind that you can delete any font from the Fonts Tab after you press the Add New Font button.
You can simply copy or duplicate your existing projects as you want, at the main Weby Studio dashboard just click the 3 dots on the project card and select duplicate.
You can copy and saved your designed block and use this block at another page or existing page as you want, this will saved your time to redesign the same content/design, and re-use this block again in another pages.
Saved block can be done easily as follow;
Step 1. On your current block , click on the top right menu.
Step 2. Click on the 'love' sign , this will saved your current block in the saved section.
Step 3. You can find the saved block by ; click on + add new block and go to Saved tab. Click on the block will automatically added to your new section.
Note. You can edit this block without overwrite your saved block content, or the block content which already used in other pages.
Give your site a title, a description and a favicon (site icon). Your site identity is important and you should not neglect these options. You set them once and be done with it.
Weby Studio gives you custom controls on how your page will look when shared on social media platforms, like Facebook or others. Access these important options within the Weby builder and set up the info that will be displayed when you share your website on different social platforms.
Use the Code Injection feature in Weby studio to embed any external 3rd party scripts that need to run in the header or footer of your project.
You can add Google Analytics, Google Tag, Facebook Pixel, Hotjar, Payment services or any 3rd party service that requires script embeds.
In Weby Studio you can inject code on 3 levels:
1. At the website level - this includes the injected code in the header and/or footer of all the pages of your website
You can access the Code Injection feature in any project in the Settings page on the Code Inject tab.
Based on the 3rd party service you want to embed, they might need to be included in the header or footer. You'll need to check with them how the services integrate.
If you want to inject scripts in the 'head' tag on every page of your site copy paste the script in the Header area.
If you want to inject scripts in the 'footer' tag on every page of your site copy paste the script in the Footer area.
Save your changes by pressing the Save Changes button.
2. At the page level - this includes the injected code in the header and/or footer only on a particular page
3. Inside a page - this includes the injected code in the content of your pages.
You can do that by copy/pasting the code in an Embed element. Drag the element on the page.
And paste the code into the Embed element.
The Embed element understands JS & HTML.
The Redirects section lets you create 301 permanent redirects from your old URLs to your new ones. This is to be used in specific cases when you want to redirect a specific URL to a new URL. You may want to do this for 2 reasons:
- when you move your current website on Weby Studio and need to create redirects from old URLs to new URLs
- when you decide to change the URL of one page, but already shared the old URL on social media websites or other places on the web.
How to create a redirect
Step 1. Open the Redirects section in the Settings window
Step 2. Write your redirect rules like this
Put every redirect on a new line /old-URL [SPACE] /new-URL, here is an example for 3 different random redirects
/home /
/shop /new-shop
/about-us /team
Let's take /about-us /team rule. This means that yourdomain.com/about-us will be redirected to yourdomain.com/team.
Step 3. Press the Save Changes button to save your changes.
Keep in mind
1. If you move your website from your current hosting to Weby Studio, you don't need to create redirects if you'll recreate the same URLs in Weby Studio.
2. The redirects you are creating are 301 permanent redirects, that means all the SEO juice from the old pages will be transferred to the new URL.
Our missions is to create the first free Cloud CMS. Blogging is the core of any respectable CMS so, the main Weby Studio blogging functionality is FREE to use by everyone and will be included in all Weby Studio accounts: Free and PRO.
The more advanced features like ACF (Advanced Custom Fields), Assets Builder (Custom Post Builder) will be included PRO-only, but the main blogging functionality is Free to use
Adding new blog posts is very easy. You just add a new post and fill in the predefined default fields: Title, Featured Image, and Excerpt. You can change the permalink as well. Don't forget to publish the post and add it to some blog categories.
Dynamic content lets you bring your blog post fields dynamically on a page via dynamic elements and it's very useful when you want to handle multiple posts all at once by creating templates.
Currently we have 4 dynamic Weby elements:
Archive - used to create category post listings;
Posts - used to create related posts blocks;
Title - brings in the title of the asset you are working on be it post, custom post, or page;
Excerpt - displays the excerpt of the blog post or description of the page;
Based on the page you are editing, some elements might not be displayed in the Elements panel. For example, if you are not working on a Category page, the Archive element will not appear since this element is tightly linked with blog categories.
Dynamic elements & single posts
In order to create a template that applies on multiple posts or categories you need to use dynamic elements, global blocks & display conditions. This will enable you to work more naturally with the builder by creating pages and templates at the same time. Every page can be a template as well based on the blocks and conditions you have on that page.
We are treating all assets in Weby Studio (blog posts, custom posts, categories, pages) as regular pages. In other words, if you want to edit a blog category or blog post, you just go and edit it with Weby and the same goes with any asset.
When you want to create a template, you just add the dynamic elements in a block, set the block as global, and use the display conditions to put it across your other categories, or posts, or where you need it.
Use the form integrations to connect your contact form with different marketing apps that let you collect and automate leads. You can also connect an email app that will let you send your leads on your email. Multiple apps can be set at once.
These are the current contact form integrations we have in Weby. Click on any for a step by step tutorial on how to set everything up:
Email:
- Email Notification
Apps:
- Mailchimp Sendinblue Zapier Campaign Monitor Convert Kit
- Active Campaign Get Response Mailjet e-goi HubSpot MailerLite Drip
reCAPTCHA
- reCAPTCHA
Keep in mind: Any contact form that is connected with an app integration also saves the leads in your Leads section of your Weby Studio project.
This is accessible from your Weby Studio Dashboard
The email notification app will send you an email every time a new lead is generated. In other words, every time the contact form is successful submitted.
Here is how you can set it up.
Step 1. Access the App Integrations on the button of any contact form element in the Weby Studio
Step 2. On the Email tab click on Email Notification
Step 3. Give us the email you want to receive the notification on.
You can input multiple emails separated by comas. Set the email subject and give your form a name then click on Continue.
Step 4. You are done.
Your form is connected with the Email notification app. Every time the form will be successful submitted you'll receive an email.
Keep in mind: You can set a custom template for your notification email. We are also generating short-codes for your fields so you can include the lead info in the email.
Important: You can format your email using HTML, use <br> to create a new line and <strong></strong> to bold certain words. Here is an example:
This is how Wikipedia defines webhooks: A webhook in web development is a method of augmenting or altering the behavior of a web page or web application with custom callbacks. These callbacks may be maintained, modified, and managed by third-party users and developers who may not necessarily be affiliated with the originating website or application.
There are two ways your apps can communicate for information: polling and webhooks. Polling is when you go asking the app for some information every time. Webhooks are when the app automatically sends the information over to a specific URL every time it's available.
Webhooks are basically automated messages containing an information payload sent from Weby Studio when something happens. They are sent to a unique URL that you can set up.
Webhooks are similar to APIs—but simpler. An API is a full language for an app with functions or calls to add, edit, and retrieve data. The difference is, with an API, you have to do the work yourself. If you build an application that connects to another with an API, your application will need to have ways to ask the other app for new data when it needs it.
Webhooks, on the other hand, are for one specific part of an app, and they're automated. In other words, a webhook is a simple, one-to-one connection that runs automatically.
In Wey Studio we offer webhooks for all your Assets including custom Assets:
And Actions on Create, Update and Delete.
This means that when the [Asset] (Page, Blog, etc) is [Action] (Created, Updated, Deleted), we automatically send a payload with all the information for that specific Asset to your selected custom URL.
- The information sent is signed and you can find the key on the Webhooks listing page.
You use this signature ID to verify and validate that the data comes from us.
How to create a new asset (custom post type)
Opening the advanced custom field builder is very easy and intuitive, all you have to do is open the Weby Studio CSM in the sidebar and go to Create Custom Assets once inside your project.
In Weby Studio, the Pages, Categories, Blogs, Popups, etc you see in the sidebar are called Assets so when you are creating a new entry there (using the ACF builder), you are creating a New Asset. These in the WordPress world are called custom post types.
Going forward the terms Assets / Collections / Custom Post Types are interchangeable.
This is where you’ll build your new Assets (or Custom Post Type). In my example here I’ve created a new custom asset called Games.
In the first section you’ll fill in basic asset info:
Asset Name (singular) – this is your asset name in the singular form. If you want to create a “Games” asset, for example, you’ll put “Game” here. We use this name in different places in the Weby Studio CMS.
Asset Name (plural) – this is your asset name in plural form. This is displayed in the sidebar and across the Weby Studio CMS in different locations.
Asset Slug – this is the link you’ll see in the browser for your assets, so for our Games example, if you put “Games” in the slug, your URLs will have this structure on the front end yourdomain/game-name
Asset Type – this option lets you decide if your asset is a stand-alone (single asset) or a category (archive asset). In our “Games” example, this will be a Single type asset. If we were building an asset used to categorise other assets, for example, “Genres” for our games then we would have to choose Archive for the asset type.
Asset Icon – choose an icon for your asset. This will be displayed in the sidebar once the new asset is created.
Next, you’ll define the fields you want in your asset by adding fields from the bottom section. You can choose from:
Text – a regular input field, that is primarily used for text but accepts numbers and special characters as well
Rich Text – a paragraph best used for your asset excerpt or description
Email – an email field that accepts only email structured inputs like something@custom.com
Link – a URL field that accepts only URL links
Select – a dropdown select field
Image – an image upload field best used for your asset featured image. Accepts only image extensions.
Number – a number field
Reference – used to link single assets with category assets with a one-on-one relation. For example, link a single asset “Games” with a category asset “Developer”. The one on one relation means one “Game” has only one “Developer”.
Multi Reference – used to link single assets with category assets with a one-to-many relation. For example, link a single asset “Games” with a category asset “Genres”. The one-to-many relation means one “Game” can have multiple “Genres”.
Clicking any field will bring in the options for that field that lets you set the label, description, placeholder. You can also choose if the field is required or change limits based on each field.
Once you clicked the Create & Continue button, the asset will be created and it will appear in the sidebar. The custom post list will be empty since this is a new asset and it doesn’t have any entries yet.
You add a new post (a new Game in my case) by clicking the Add New button. You’ll be able to fill in your fields and add a new custom post.
IMPORTANT: Two fields are added on every asset by default by the Weby Studio CMS and are set in stone, can’t be modified. Those are Asset Title (in my case Game Title) and Permalink.
The custom fields your can use in your assets
Use custom fields to add new dynamic content to your Weby Studio website. You can edit your current assets and add/remove fields, or you can create new assets.
The Weby Studio CMS custom fields are as follows:
Text – a regular input field, that is primarily used for text but accepts numbers and special characters as well
Rich Text – a paragraph best used for your asset excerpt or description
Email – an email field that accepts only email structured inputs like something@custom.com
Link – a URL field that accepts only URL links
Select – a dropdown select field
Image – an image upload field best used for your asset featured image. Accepts only image extensions.
Number – a number field
Reference – used to link single assets with category assets with a one-on-one relation. For example, link a single asset “Games” with a category asset “Developer”. The one on one relation means one “Game” has only one “Developer”.
Multi Reference – used to link single assets with category assets with a one-to-many relation. For example, link a single asset “Games” with a category asset “Genres”. The one-to-many relation means one “Game” can have multiple “Genres”.
Clicking any field will bring in the options for that field that lets you set the label, description, placeholder. You can also choose if the field is required or change limits based on each field.
How to edit your current asset/post type
At any point, you can go back to edit your custom asset by clicking on the gear icon near the asset name in the sidebar.
That will bring in the Weby Studio custom fields builder where you can either add new fields or edit/change the current ones you have. Or delete the entire asset altogether from the bottom right Delete link.
IMPORTANT: Please take care when you delete fields that are displayed on the front end. Those will not be visible any longer to your users.
Clicking any field will bring in the options for that field that lets you set the label, description, placeholder. You can also choose if the field is required or change limits based on each field.
You can also add new fields from the section at the bottom:
Text – a regular input field, that is primarily used for text but accepts numbers and special characters as well
Rich Text – a paragraph best used for your asset excerpt or description
Email – an email field that accepts only email structured inputs like something@custom.com
Link – a URL field that accepts only URL links
Select – a dropdown select field
Image – an image upload field best used for your asset featured image. Accepts only image extensions.
Number – a number field
Reference – used to link single assets with category assets with a one-on-one relation. For example, link a single asset “Games” with a category asset “Developer”. The one on one relation means one “Game” has only one “Developer”.
Multi Reference – used to link single assets with category assets with a one-to-many relation. For example, link a single asset “Games” with a category asset “Genres”. The one-to-many relation means one “Game” can have multiple “Genres”.
How to create & link category (taxonomies) assets
Creating an asset that will be a category for another asset it’s very easy, you just create a new asset from scratch and select Archive in the Asset Type option. This will tell Weby this is an archive type / a taxonomy / a category asset.
I’ve created two new assets: “Developers” & “Genres” for our “Games” and populated them with a couple of developers and popular game genres.
What remains now is to link our “Games” with the “Developers” and “Genres”. Edit the Games custom asset by pressing the gear icon near the name in the sidebar and use the Reference or Multi Reference fields to link your custom asset with your categories.
Reference – used to link single assets with category assets with a one on one relation. For example, link a single asset “Games” with a category asset “Developer”. The one-on-one relation means one “Game” has only one “Developer”.
Multi Reference – used to link single assets with category assets with a one-to-many relation. For example, link a single asset “Games” with a category asset “Genres”. The one-to-many relation means one “Game” can have multiple “Genres”.
Don’t forget to Save & Finish once you are done with your changes.
Now that we’ve added the references for our Games, when you add a new Game you’ll be able to select the Developer and Genre for that game.
This will help you structure your dynamic information and create dynamic Weby pages for your Archive categories (in my case Developers & Genres). From this point, I could easily create a Developer page where I display (via the Archive element) all the games from a certain developer.
How to display your custom dynamic content
Dynamic content lets you bring your custom post fields dynamically on a page via dynamic elements and it’s very useful when you want to handle multiple posts all at once by creating templates.
Display your ACF fields in Weby via dynamic elements like:
Archive – used to create category post listings;
Posts – used to create related posts blocks;
Or use regular elements that can be switched to a dynamic element from the “server” dynamic icon.
Text
Images
Buttons
How to create page templates that apply across your website
The way you usually work with templates in most CMS’s is you add the content somewhere (in the post) and set the templates somewhere else (a template section usually). This is most of the time hard to understand & manage. It’s also hard to explain and introduces a disconnect between editing regular pages and working with dynamic content and templates.
In Weby Studio CMS, we are treating all assets (blog posts, custom posts, categories, pages) as regular pages. In other words, if you want to edit a blog category or blog post, you just go and edit it with Weby and the same goes with any asset.
When you want to create a template you just drag dynamic elements in a block, set the block as global, and use the display conditions to put it across your other categories, or posts.
