The Without Code

Get-Started-Guide

The Basics

This guide will walk you through the basics of our website builder so you can get up to speed and start building your first site.

You’ll learn how to:

 

  • Pick a template and start building your site
  • Add elements such as text and images 
  • Customize the look and feel of all elements
  • Share your site with clients and team members
  • Publish your site

 


Building and Managing Websites

Website Dashboard

So, you’re ready to build your first site. If you’re not yet logged in, visit app.wocode.com and login to your account; this will bring you to your app homepage where you will see, My Websites, Documentation, and Account.


Click “My Websites” and this will open up your Website Builder Dashboard, which contains all sites you’ve created – both published and unpublished. Each site is assigned a unique ID, but you can rename these for better organization.

Build a New Site

Click “Build New Site” to bring up the template picker. Find the template you are interested in, click “Preview” to get a detailed view in different layouts; you can also select a blank option if you want to build your site from scratch. 

Once you’ve decided on a template, click “Start,” then click “Continue.” This will open up the site editor where you can begin customizing the site.

Site Structure

Without Code sites are made up of rows and columns, sandwiched between a header and footer; every element that you add, or change will be contained within a row or column and each element is customizable. Simply hover over any element to view the container; you can click and drag to move or drag the edge to change the size.

Rows

Rows stretch the entire width of the site. To add a row, hover your mouse and click on the “Row” icon. Click “+” to select to add a row or use the arrows to adjust the position of the row. Adding a new row will add an empty space across the entire site width; you can add content as desired and it will lengthen as needed.

Columns

Columns sit within a row, with up to four per row. Columns allow you to add multiple horizontal sections of content. To add a column, hover your mouse and click on the “Row” icon. Click “+” to select to add a column. Adding a new column will add an empty space to the row where you can add content as desired.

Sections

Sections are an additional option for adding structure and content to your site. Sections are rows containing pre-designed content that you can add to speed up your design. To add a section, hover your mouse between two rows and click the “+”; this will prompt you to “Add Section.”
Select this to view the library of options. Click the desired section and select “Save” to add.

Adding Text, Images and Other Widgets

Once you enter your site editor, you can begin customizing the elements included in the template (or adding new ones if using a blank template). The widget library gives you options for adding features, such as text, images, photo galleries, and buttons. 

Adding Widget

To add a widget, select the “Widget” tab, search for your desired element or effect, select the widget and drag this onto the page. Locate the spot you would like to place this using the “Insert Here” and drop in a desired column, or new row. This is now ready to customize.

Adding Text

You can easily edit text in an existing template by double clicking in the text box, type anything, change the font, text size, the header style. 

To add a text block, click “Widgets” in the left panel and drag the “Text” widget onto the page. Place as desired and double click to edit the text.

Adding Images

You can easily edit images in an existing template by clicking on the image to bring up the customization options. If this is a background image, the row editor will open, and you can click “Replace.” If this is an image widget, it will open the widget content/design window where you can add a new image from the included free stock photo library or you can select an uploaded image of your own.

To add an image, click “Widgets” in the left panel and drag the “Image” widget onto the page. Place as desired and click on the image to add a new image and edit the content/design.

Customize Elements

You can make changes to all content and design elements to ensure the message is communicated and appropriate features are included. 

Content

To edit content, click on any element – row, column, widget – to open the content tab. The options will vary by the element, but will allow you to define the content, such as text, order of items, link, etc.

Design

To alter the design, click on any element and select the design tab. The options will vary by element, but will allow you to change the look and feel, such as layout, style, background color, etc.

Left Sidebar Menu

Design Menu

The design tab opens up your global settings, which allow you to make styling choices for various elements globally throughout the site. This can save you time as you can make certain consistent design choices one time, which will be automatically reflected throughout the site as you add new content. 

Pages Menu

This tab shows your site’s page order, which will be reflected in your navigation. You can add/delete pages, edit their title, change the order, add SEO details, and even add dropdown menus from here. 

Select “+ New Page” to add a new blank page and use the gear icon to change details on that page. 
You can grab any page to drag and drop in a new location, including placing it below another page to create a dropdown menu.

Content Menu

This tab allows you to collect and organize content – images, files, text, info – for the site. This content can be used for various widgets, such as a photo gallery. Select each individual option to add content. 

You can select “+ Import content” to pull content from an existing website and “+ Collect from client” to send the request to your client.

Personalize Menu

This tab allows you to define personalization rules. These include triggers and actions; when the conditions are met (e.g. a user visits the Services page using their mobile device), an action occurs (e.g. a popup encouraging them to contact you is shown).

Store / Blog Menus

Use these tabs to add and manage an ecommerce store, or add a blog to the site.

Settings Menu

This tab allows you to define many elements, including icons, SEO, site backups.

Sharing with Clients

Preview Site

To share a preview link with your clients or team members at any time, enter your site editor, select the info & tools icon, and click “Preview Link.” 

Select the preferred view (desktop, mobile, all) and copy this link to send to relevant individuals.

CMS Users

*Available for Pro / Enterprise accounts only

Adding Users

The Content Management System (CMS) allows you to provide clients or team members with individual accounts, allowing them to log into the website and make changes themselves. 

To add a CMS user to your site, visit your Dashboard, click the gear icon and select “CMS Users.” Click “Add CMS User,” enter a username and the email address.

This will open the CMS User Access Link Email, which you can edit as desired and either:
  • “Send email,” or
  • “Copy to Clipboard” to send via your own email service

Managing Users

You can manage users by clicking “Manage CMS Users,” locate the existing user, and click “Add Site,” and “Select Site.”  You can define permissions for each user as desired.

Publishing Your Website

Once your site design is complete and you are ready to go live, select the “Publish” button, pick your desired subscription and fill in the billing details.
Once the payment is processed, the site will be live!

Custom Domain

When you publish your site, it will have a temporary URL. For step by step instructions on setting up your custom domain, read our Custom Domain Setup Document.

Helpful Resources