#01 Add & Edit Blocks
The Blocks Tab
Blocks Tab
Each page created with Websheet is built with Blocks. You can insert them on your page by adding them into your sheet.
Choose an empty cell in which you wish to insert your Block. On your website, your Blocks are then displayed in the same order as they are in your sheet. If the footer setting is enabled, these Blocks will then be added to the end of your site.
You can review the Blocks available in the Websheet sidebar, or go to blocks.websheet.cc for a more comprehensive overview.
Adding Blocks
Select Block
To add a Block, simply click on the one you want to use to insert it into the chosen cell.
Editing Blocks
Edit Block
You can then edit your Blocks at any time with the Block editor. To do so, simply select the cell containing the Block you wish to edit, and select Edit Block in the sidebar.
#02 Pages Explained
The Pages Tab
Pages Tab
You can manage your pages in the pages tab of the sidebar. Here, we'll look at how to:
  1. Add a page
  2. Change the properties of a page.
  3. Set a page to be your homepage.
Add a Page
Press +
It's very simple to add pages! Just click the icon and select the sheet you would like to convert into a page.
Page Properties
Page Properties
After you've chosen which sheet you want to convert into a page, the page properties for said page will open. Read through the different settings that you can configure and set the values you want. You can then edit your page properties at any time – just click the triple dot icon next to the relevant page and choose Properties.
Set a Homepage
Set a Homepage
You are free to set any page as your homepage specifically. Just click on the triple dot icon next to the page and select Make Home Page.
Now your pages are good to go – nice and simple!
#03 Site Settings Explained
The site settings view allows you to configure the appearance and general behaviour of your website. Here, we'll briefly explain where to find this and how to navigate inside the settings.
To open site settings, click on the triple dot icon at the top of the sidebar, followed by Site Settings.
In the site settings view, you'll see 6 tabs:
  •   ➔ Adjust the behavior of your menu.
  •  ➔ Set default colors for your Blocks and menu.
  • ➔ Set default fornts for your Blocks and menu.
  • ➔ Upload your logo, set a custom domain and subdomain, and set search engine settings.
  •   ➔ Set up a cookies message and page. Languages
  •  ➔ Add languages to your site – go global!
Please note – changes to site settings are saved inside your spreadsheet. This means if you duplicate your sheet, they'll also be duplicated across.
#04 Add & Style Your Menu
With Websheet, you can add a custom menu to your website. Let's take a quick look at how to add and style a menu here:
Firstly, choose the empty cell in which you wish to insert your menu.
In Blocks in the sidebar, select the menu category and click on WEBMENU01.
Now you can open the menu editor by clicking Edit Block in the sidebar. Here, you can add menu items and set up the linking for your menu.
After you've saved, go to site settings to customize the style for your menu, e.g. colors, effects, and more!
#05 Edit Blocks Extra Usage
Edit Block can be found in the sidebar. Don't let the name fool you – it can be used for more things than just editing the settings for a particular Block! Here we'll look at a couple of these other uses…
Editing Hex or rgba Color
Color Picker
If you click on a cell containing a color value (either in rgba or hex format), the Block editor will open with a color picking, allowing you to edit the color specified with ease.
Editing Image
Editing Image
If you edit Block on a cell containing an image formula, you'll open the image formula, allowing you to replace the image should you wish.
Editing Text and Empty Cells
Text Editor
If you click on an empty cell or a text cell, the Block editor will open with a text editor. Here, you can enter advanced HTML into the selected cell, which can then be referenced and reused in other Blocks (e.g. list Blocks).
#06 Insert Image Into Cell
Currently the only ways to reference an image is to provide an direct link or to use FORMULATEXT(C10), where CellReference
Inserting Images
Insert Image in C2
You can insert an image from the sidebar. Simply click on the top triple dot icon followed by insert image. Once you've selected an image, it will then be inserted into the cell you've currently selected.
Upload Image
File Browser
You will now be asked to upload or browse, which will open an modern file picker where You can upload Your files into directories or select an already uploaded image.
You will now need FORMULATEXT() formula with refence to the IMAGE() formula cell. This gives you a preview of the image and a valid url for referencing inside blocks in the next cell. Here shown in D2.
#07 My Projects Explained
The publish controller helps you to review all the sites published with Websheet.

You can open Publish Control by clicking on the top triple dot icon in the sidebar. Here, you'll be able to:
Unpublish any of your websites, which will also mean they are deregistered with our system. Pause or unpause automatic updates for your sites. Find the url of a spreadsheet or connected website should you need to find these.
#08 Import Template
A template is a spreadsheet that we have created for you to use as a basis for your site with Websheet. We already have a whole range of templates ready for you to use, modify, or draw inspiration from! To see a list of all templates, check out templates.websheet.cc and once you have found one that fits your needs, click on the link to open it.

There are 3 ways of using a template – we'll walk you through the options briefly here:
Duplicate a Whole Spreadsheet
Make a Copy
A) Duplicate the entire spreadsheet.

This will copy the whole template, including the site settings – and is usually the way we would recommend. To do this:

  1. After opening the sheet containing your template, go to File, and then select Make a Copy.
  2. In your copied sheet, open Websheet from the Add-ons menu.
  3. Click Launch in order to register your sheet.
  4. You should now see a dialog prompting you to review your template.
  5. Use to adjust the template however you need.
  6. Use Site Settings to upload your own logo and set up your site with your own custom domain.
Copying an Individual Sheet
Sheet Copy
B) Only copy the sheets.

1. Open the sheet you want to copy, and right click on the tab for that sheet specifically.
2. Then choose copy to. You can set up another sheet before hand to copy the sheet to.
3. Choose the destination. Then you'll need to add the new sheet to your spreadsheet.
4. You may need to fix the references within the copy sheet manually using the editor.
Copying Individual Cells
Copy Cells
C) Only copy selected cells or rows.

1. Choose the cell or cells you would like to copy.
2. Copy them as you usually would using ctrl + C.
3. Paste them into your own sheet using ctrl + V. Remember – you should be copying formulas rather than values!
4. You may need to fix the references within the copy sheet manually using the editor.
#09 Expression Mode Explained
Let's refence D10
Expression mode is one of the ways of inputting data and information in the Block editor. It allows you to easily reference your data from custom formulas or any other ranges. It's a powerful tool, giving you the ability to create truly advances websites!

Let's look at an example here of the steps you would take to use text from the cell A1 inside your Block title with expression mode.

Follow the next steps to explain how to use A1 Text inside Your Block Title, by using the Expression Mode.

Open any Block in the Block Editor on the any field. In this Example Description Tab.
Switching to Expression Mode
Tool Icon > Expression Mode
Click on the tool icon, and select expression mode.
Expression Mode Limitiations
Expression Mode
Now, you can enter a formula in the same way as you would when editing a formula. Just keep in mind – your formula must be error-free, or you won't be able to save.
Entering an Expression
Enter Formula
If you write D10 here, it will then use the text from the cell D10. After saving, you'll then see the cell reference below the text field in the preview. The value of the expression will then be displayed on the website.
Other Limitations
Block using Reference
Use data in an accepted format within a given field.

Example Format - Accepted Values - Example:

Text - Text - "Text"
Image - Image Url or FORMULATEXT(IMAGE(Image Url))
Link - url as text - "https://www.google.com"
Hidden - bool Value - TRUE or FALSE

Click here to see more example field values.
#10 How to Refence a Table
Why You Should Reference Ranges
Example Table
The easiest and quickest way of adding existing data from your sheet to your site is to reference it. Let's take a look here at how to do this!
Adding Named Ranges
Select Table & Add a Range
Ensure that your table has a header row in addition to unique names for each column. Select the range of the table you wish to reference, right click on any cell, and then choose "define named range". Then click on "+ Add a range" and name it however you wish.
Inserting Blocks with List
Inserting WEBPLAN10
You'll now need a Block to display your data. To do this, open the insert tab. Choose the cell where you'd like to insert the Block.

Most Blocks that support lists can be found under the categories list, index, planning, product, and team.
Editing Block
Tool Menu
Choose the cell containing the Block formula for the Block you wish to edit, and click in the sidebar. This will then open the Block editor – happy editing!
Refencing a Named Range
Matching Rules
Inside the Block editor, open the list tab. Click on the first tool icon, and then click on Named Ranges. Then choose the Named Range you previously defined.
Then you just need to save your changes – simple!
Set Matching Rules
Matching Columns
You now need to match each column! Any field here that you don't need you can just ignore.
Verify Your Changes
Table Online
Save your changes once more. After a few seconds, you should then see the push message pop up in the bottom right-hand corner with the published message. You can then review your edited page to see how your changes look! just use the view icon to do so.
From now on, all changes inside your Table will be automatically updated on your website. Magic!
Optional – Alternative Way of Referencing
Expression Mode
(Optional) Another way of referencing tables, is to use normal cell references with expression mode rather than Named Ranges, e.g. WEBITEMS(A1:F10). Keep in mind that your table reference then needs to be inside a WEBITEMS() formula.
#11 Websheet Formulas
Special Formulas
Formula Cat.
In addition to our Block formulas, which you'll find in the Tab, we've also compiled a list of special formulas with unique functionality. You'll find these under the categories Menu and Formula.
  • WEBHOME() ➔  This formula generates a url for your site’s homepage. Put it within a HYPERLINK formula for it to look good.

  • WEBPAGE() ➔ This formula is very similar to WEBHOME(), except it generates a link to the sheet it is currently inside rather than just the homepage.

  • WEBROWHIDE() ➔  Use this formula to hide all cells within a row of a given Block.

  • WEBSHEETID() ➔  This formula returns the spreadsheet url and GID of any given sheet. It can be used as a direct link.

  • WEBITEMS() ➔ This formula is used in our list blocks. It converts a second array into a string. This then should be used in the expression mode of a block’s list field. The reference within WEBITEMS needs to be the second array of a table with a header row, for example, WEBITEMS(A1:F10).

  • WEBTRANS() ➔  This formula allows you to add translations! For this to work, you must add at least one language under your site settings. There are two modes you can use (note – the following examples show a site with 2 languages):

    1. Put translations in the correct respective order for your site, e.g. WEBTRANS(“Hello”,”Hola”). 
    2. Put translations in any order, but use the 2 letter language code to specify which language each string is, e.g. WEBTRANS({"en","Hello";"de","Hallo"})

  • WEBMENU() ➔  This formula is for storing menu items. To edit menu items easily, use the Block editor. Please note – you may only have one menu per page;

    If you want to populate your menu items exclusively with references, please read the following steps regarding the structure of WEBMENU - WEBMENU accepts an array of menu items. One individual menu item is constructed like this: 

    1. Menu type and placement, e.g. Menu.1, Top.1 or Cont.1
    2. Menu item title, e.g. “Home”
    3. Link with a row – any links to other pages on your site are represented here as a spreadsheet url. You can also link to another row specifically by just adding &ROW('Sheet'!A0)[optional]            
You insert formulas in the same way you insert Blocks:
  1. Select a cell.
  2. In the inset tab, choose the Menu or Formula Category.
  3. Select the formula you wish to insert.
  4. Confirm by clicking on the formula name or image.
#12 Text Styling
Blocks, Font, Color, Size with Site Settings
Clear up styling
Under your site settings, you can set a default font, color, and base size for all of your Blocks together. For this to work successfully, you'll need to:

  1. Remove all formatting within the text editor. You can use the clear formatting icon to do this quickly.
  2. Remove the color.
  3. Set your font to default. Then – save your changes.
#13 Defined Color Ranges
Have colors that repeat throughout your site? A good way to deal with this is through using defined ranges. That's why you'll often see a defined color ranges section with up to 4 colors within our templates.

Here, we'll walk you through how to set a specific background color for a group of Blocks.
Firstly, choose a cell in which you'll store the color value that you'll be using later. If you're using one of our template, we'll have already done this for you, so you can ignore this step and next step.
Next, right click on the cell, and select Define Named Range. You'll be prompted to enter a name for the range. In this case, let's use Color_1.
In the sidebar, click on the triple dot icon, followed by Site Settings. In the colors tab, choose a color for Color_1, and save your changes. After closing site settings, you should then see the color value inside the respective cell.
Now choose a Block in which you would like to use your custom color. Open the Block editor, and then settings Tab. Here, click on the tool icon next to Background field. Choose Named Ranges, followed by Color_1. This should now appear in the expression mode edit line. After you click save, the preview should then update with your color.
You're then free to repeat this for other Blocks! That's how simple it is to implement a consistent background color for a group of Blocks. Happy coloring!
#14 Translations
It's simple to add translations for your site with Websheet – and in fact, there are several different ways of doing so. Here we'll briefly explain each:
Firstly, you'll need to add extra languages under the Languages section of your Site Settings.

The first language in your list will be your default, used whenever other translations are missing. You can add equivalent translations for images and links in addition to texts.
After you've added languages, you'll see a translation field in the Block Editor with the relevant language code. Here, you can add a translation within each field – or simply leave empty to display the original default instead.
Translating lists works similarly to translating other elements. For a longer list, we recommend using a table reference to add translations. For each coloumn, you can then match a column for each extra language as a quick way of adding translations for longer lists within your sheets.
You can also use the WEBTRANS() formula to translate each cell or Block. This works with regular cells as well when using the page property Display Regular Cells. Read more about it here.
Websheet'smissionis to help you easily create the website of your dreams. Explore the thousands of possibilities.