Website Editor

Website editor allows you to create or change the content of your website.

To run it from the Dashboard, click the edit button located next to the website name in the Websites section. To run in from a module, click the module name in the right upper corner and select particular website from the menu.

Website Editor is divided into 3 parts:

Page Manager

Page Manager allows you to code particular pages, which together make up your website.

Page Manager is divided into two parts: The right one serves for managing particular selected page. The left one serves for creating individual pages. There are several types of pages you can create. They differ in their function and setting possibilities.

  • Component - a page used to sell products, photos or display articles.
  • Content - the content created with the Code Editor (HTML page).
  • File - a file uploaded from File Manager (an application available directly from the desktop, used to store files such as images, CSS or JavaScript files). The attached file is displayed directly (pictures) or it is offered to be downloaded by the user.
  • Folder - it is used only for a hierarchical tree classification, it does not contain any content.
  • Link (external) - a link to an extraneous page or website, the value is an absolute URL. The user will be transferred to this address.
  • Link (internal) - a link to another page from the tree on the website. The user will be transferred to this page.

Add Page button serves for adding a new page to the page tree. After you click this button, you will select the particular page Type you want to create together with the main settings of this page.

Culture field is displayed only for multilingual Websites - if you are not using the Culture Tree but only a single Culture, this button is not displayed. Otherwise it serves for switching between particular Cultures from the Tree, because you are able to define different content for different Cultures. After clicking it you can see the whole Culture Tree connected to this Website. Select the Culture to which you want to switch by mouse-click. For more info about Cultures and Culture Trees visit this help-site. Preview button is used to display the preview mode in a new tab. In preview mode you can see the current version of your website with all the changes from the Project you are currently working on included.

Preview mode is a crucial tool for any changes you have made to your website, because this is the only way how you can test and see the changes before the approval of the Project (it means that all the changes will be placed on the live version).

Delete button allows you to delete the selected Page from your Page Tree. If you have only one Culture, it will just delete the selected Page. If you use Culture Tree, new window appears. Here you can select if you want to delete the Page from all Cultures or only from the currently selected one.

Super Login button is available only if you have the Super Login option enabled for your user account. It allows you to log in the website as an existing contact.

Files tab

Notice the Files tab which is located between the Pages and Tools and Settings tab. The same as you can edit text files directly in the File Manager, you can also edit them directly in the website editor.

The Files tab is divided into two parts. The upper one displays the folders structure in the File Manager. Select a folder and its content will be displayed in the lower part of this section. If you click on a text file, it will be displayed on the right side of the editor and you will be able to edit it. Right clicking on a text file displays a menu which allows you to rename, delete, download or compress the file. You can also display its properties.

Other filetypes can be downloaded, deleted, or their properties can be displayed with a right mouse click on a particular file. To upload files from your computer, click the right mouse button in a particular folder’s content.

Creating a New Page

New Pages are created in BizBox in the Website Editor. There is a big button named Add Page which allows you to create them. This is standard and also the only way which is used to create Pages. In case you have a multilingual Website (you are using a Culture Tree), there are another 3 ways which are used to create a Page in a Culture where you want to localize your Website.

Copy with Translations

Copy with Translations is used in case you want to create a translated Page. It means that the parent Page (the one selected in the source Culture) must have defined translation strings. Otherwise you will not be able to create a new Page this way. This creation copies all the parent Page settings - all the General Settings (including the name), SEO, Security.

The created Page doesn’t have any content – it is created only by translations. The only thing you can do in the Website Editor is to insert them. Edit the particular Page and on the Translation tab you can insert the Translations. This can be done also in the Translation Center module in the CMS Contents application, where are all of the content translations from the whole BizBox Admin.

You can always change your mind and create content for this Page. Go to the Content tab and create the content. It will be created as a blank Page and you can code it according to your needs.

Copy with Content

Copy with Content is used in case you want to create a copy of the Content tab (from the source Culture). This cannot be used in case the parent Page contains some translation strings – in that case this option is unavailable.

This option creates a copy of the content and you can freely edit it according to your needs, without any restrictions. This can be used in case you want to create different (or a little bit different) content for different languages (Cultures). This option also copies all parent Page settings - all the General Settings (including the name), SEO, Security.

Set Empty Page

Set Empty Content creates a blank Page. This Page has inherited absolutely nothing from the source Page. Please note that it doesn’t even have a Name, which means that this Page was not saved automatically. If you want to save it, you have to insert the Name first. As mentioned, this Page is completely blank.

Content Page

Content Page Type is a Page type that allows you to create your own content. This is the typical web page - you have to use the Editor (Visual or Code) to create the content.

When adding a new Content Page, you have to fill in all the required fields:

  • Name of this Page can be displayed to visitors as a label in navigation in case you do not fill in its Navigation Title.
  • Internal Name can be visible to visitors (in the URL address) in case you will not use an Alias for this page. Internal Name cannot collide with a Culture abbreviation.
  • Selected Parent Page will be located above the newly added one in the Page Tree hierarchy. This hierarchy is important when creating a menus (Navigation Trees) for this Website.
  • In Page Type, you have to select the Content. Selection of a Component Type is not available for this page type.

General tab

General tab includes the basic settings for this page.

Identification

  • Name (required) can be displayed to visitors as a label in navigation in case you do not fill in the Navigation Title field.
  • Internal Name (required) is an unique string that defines this page. It can be visible to website visitors in case you do not create an Alias.
  • The Type field is the type of a Page you selected when creating this site. You are able to change it according to your needs.

Template Settings

You can select one Template for the whole Website in the General Website Settings.

  • Disable Template option allows you to turn off a Template selected in the General Website Settings.
  • Select Template allows you to select another Template that will be used only for this particular Page (regardless the Template settings in General Website Settings).

Navigation Settings

  • Navigation Title will be displayed as the title in navigation trees (it means that this name will be visible to the website visitors). In case you left this field blank, the Name of this page will be used instead.
  • Sitemap option disables (or allows) to display this page in the Sitemap.
  • Dynamic Navigation option is important in case you are using Dynamic Navigation Trees because this setting can turn off the display of this page in this menu type (otherwise you are not able to disallow the display, because Dynamic Navigation Trees are generated automatically according to the settings you added to it).

Configuration

  • Secured Page sets the type of access to this page. This setting depends on the Access Level setting in the General Website Settings. In case this setting is not able to be changed, you have to select the Access Level setting as Secured or Unsecured in the General Website Settings. If this setting is active, you can change the type of access (HTTP or HTTPS) directly on the page level (in the General Website Settings is selected the Page Specific option).
  • Active option (set to YES) will make this page inaccessible. If someone displays it a Special Page (Page Not Found) will be shown instead. If you want to hide a Page, you don’t need to delete it. Just use this setting and turn off its display. Inactive pages are striked through.
  • Archived page setting is unavailable for Content page. It is used only for special type of Content Page - Articles.
  • Search Indexing option sets the availability of this page for searching.

Tags

Every page can have its own tags. Remember that the tags here (Content Page) are only for internal purposes and can be used to mark pages according to your needs (in order to provide some information for oneself or another BizBox Admin user). In BizBox you are also able to display tags on websites (and allow your visitors to work with them), but this feature can be used only in combination with the Articles Component Page (for Articles).

Type all tags (comma separated) you want to assign to this page directly into the prepared field. The Tag Manager button displays management for all tags used in your account and you can add, edit and delete them here.

Content tab

Content tab is for creating content. There are 2 types of editors you can use for that: The Code Editor and the Visual Editor. To discover more about Editors visit their individual help-sites.

Insert HTML and BizBox marks to code the content itself. When you are done or need to see results of your work, save the changes and click the Preview button located in the toolbar. It allows you to display the current live version of this page (this can be used only when this page is currently published and accessible to visitors) and also the preview version. Preview displays all the changes you have made to your current Project. If you are satisfied with your work, you can approve your Project and these changes will occur on the live web version where all your visitors can see them (Project can be approved by clicking the Approve Project button. It can be found after clicking the Project Tools icon next to the clock in the bottom right corner).

SEO tab

SEO tab sets up the Search Engine Optimization. For SEO settings are available two values:

  • Using none you totally disable this setting
  • Page Specific Value activates the field bellow this selection and you are able to define it for this page separately

You are able to set up the SEO settings for every page on your website, including the product details, articles and categories for products and articles.

Every page from your page tree (in the Website Editor) contain the SEO tab. Here you are able to set up the Title, Description, Keywords and Robots settings.

SEO can be defined on the Website Template level.

Aliases tab

Aliases tab lets you create Aliases for this page. Alias is an alternative name for the page used in the URL address and makes it accessible within this Alias. Alias name is always displayed to the visitor in the URL address (in case you don’t set an Alias, an Internal Name will be displayed instead).

Every Page can have as many Aliases as you need and only one main Landing Alias. Aliases depend on the Culture. In case you are creating a multilingual Website (you are using a Culture Tree), you have to create Aliases for every Culture separately. That means that the page can have one Landing Alias for every Culture and as many Aliases as you need.

Alias is an alternative name for this Page which is displayed in the URL address (it makes the Page accessible within this alias) instead of the Internal Name.

Aliases have two main purposes:

  • The first is connected with a multilingual website. If you will not set an Alias, the Internal Name of this Page will be displayed in the URL address instead. This can work in case you don’t have a multilingual website, because the Internal Name is not a translated field. In case you want to display in the URL address a sting that is meaningful in another languages, you have to use an Alias.
  • The second purpose is, that many visitors just try to insert a meaningful string of characters in the browser’s address bar hoping that this attempt will lead to a successful display of the desired page. For example a visitor inserts in address bar http://bizboxlive.com/contact and hopes that a contact page will be displayed. The thing is, that if your Internal Name of this page is “contact-us”, the page is accessible only on http://bizboxlive.com/contact-us. But if you set a “contact” alias for this Page, it became accessible for both of the addresses presented above.

Redirect to Landing setting means a visitor who uses this Alias will be redirected to the Landing Alias (the URL address will be changed to the Landing Alias).

How to create a new Alias:

Click the Add button and fill in all required fields:

  • Alias Name is the name of the newly created Alias that is displayed to the visitors. The Page will be accessible by this name. You can create a Landing Alias for every Culture you are using on the Website.
  • Landing Alias marks the main (landing) alias. In case a Page will be accessed by its Internal Name, in the URL address, the Landing Alias Name will be displayed. Every Page can have only one Landing Alias.
  • Redirect to Landing option set to YES will redirect this Alias Name to the Landing Alias (in the URL address will be the Landing Alias Name displayed).
  • Redirect Code lets you select the HTTP response status code.

Translations tab

This tab is displayed only in case you have a multilingual website (you are using a Culture Tree). This tab displays only the translation strings (text strings covered in translation mark) from this page in the default Culture. You are not able to translate it, because you are in the source Culture - there is just no Culture for which you can translate it.

In case the page you have edited is not in the default (source) Culture, you can see the displayed table is divided into two parts. Original Text the left contains the source strings to which can be directly inserted the Translation Text displayed on the right side. Remember that you don’t have to insert translations using this tab, because there is a complete group of applications intended for translating. It is located in the Translation Center module and you will be able to display here all translation strings from the whole BizBox Admin.

Security tab

Security tab adds Permissions to this page. If you will set some Permissions here, only users with this Permission added to their account will be able to display this page. In case someone of your visitors (that is not logged in) will request this page a Special Page (Login Page) will be displayed instead. You have to create this page first in the Special Page application. It is necessary to insert a login fields into this page. In case the user has no Permission to access this page a Special Page, Access Forbidden, will be displayed. It is also necessary to create this Special Page in the Special Pages application first.

Component Pages

Component Page type is a special type of a page - it consists of more (usually 4) pages (called Views) which together build a complete environment for displaying information from your products (including images) or Author Tools modules.

Thanks to that you can simply create an online store products catalog, blog or online journal.

Component consists of Views (4 subpages). Functional part is built there by particular Blocks. The View is wrapped in Layout - a visual part of the component.

Note

For more info see our section for developers.

Currently, there are 3 component page types in BizBox - Product Catalog, Photoalbum and Articles.

Product URL

If there exists a link to a product which contains a category to which the product doesn’t belong a redirect (301) occurs. The default product category will be used. If there is no such category defined, the deepest category to which the product belongs will be used instead. This is used only if the Category in URL setting (see the product component settings below) is turned on.

Canonical URL

Page canonical URL is available in the parameter request.page.canonicalUrl. For every component part, there is a canonical URL available.

Note

As the canonical URL of a product variant is used its master product. If a master product is added to more categories, the default category will be used.

Filter Parameters

  • Filters: filter
  • Sorting: orderBy
  • Items per Page: perPage
  • Current Page: page

Product Catalog Component

Product Catalog Component is a special type of Page you can create. It allows you to create a product catalog for your e-shop in a quick and comfortable way. All data for this catalog is automatically taken from the BizBox Admin (such as products), which makes your work much easier.

Product Catalog Component is one Page that consists from 4 subpages (Views). The Function Part of these is built by particular Blocks. The View part is wrapped in Layout - a visual part of the Product Catalog Component.

In this component are available data about your product catalog. You can work with it by using the parameter component. For more info about the available parameters see this help-site.

Component URL

Within the component there are system links to the product list:

  • /system/new/ - displays newly created products in the last 60 days (you can change the number of days in the Product Offerings application).
  • /system/newInStock/ - displays newly received products on the stock in the last 60 days (you can change the number of days in the Product Offerings application).
  • /system/withScheduledDelivery - displays products that are included in a confirmed scheduled delivery.

For both views, you can specify additional settings in the Product Offerings application.

Product Catalog Component Settings

For Product Catalog, you are able to define special component settings on the Component Settings tab.

  • Display Subcategory Items allows you to display all items from subcategories of selected category. For example: There is a category “Tea” which contains 2 products “Morning Tea” and “Happy Tea”. This “Tea” category also contains 1 subcategory “Green Tea” and this subcategory contains 2 products “Tamacha” and “Sencha”. In case you set this option to YES, in the category “Tea” all 4 products will be displayed. In case you set this option to NO, in the category “Tea” only 2 products (“Morning” and “Happy” teas) will be displayed.

  • Items per Page is a number which defines the default number or products that will be displayed on the website. Customers can change this default setting thanks to the items per page select box, whose values you can define above.

  • Items per Pages define the values that will be available for selection on the website.

  • Root Category setting is used to specify a category from the Product Categories (application located in the Products module). The category selected here will be used as the root one - all other categories and categories that are not children of the selected one, will always be ignored and Products from it won’t be displayed in the Product Catalog.

  • The Items Sort setting defines how the products in the Product List View will be sorted. There are two sorting directions: asc - ascending (ie from lowest to highest) and desc - descending (ie from highest to lowest).

    • Price is taken from the pricelists. If there are two or more products with the same price, the second sorting criteria is relevance.
    • Name sorts products in alphabetical order.
    • Code sorts products according to the product code (alphabetical order).
    • Rating sorts products according to product ratings.
    • Rating Count sorts products according to the count (number) of total product ratings.
    • Relevance is defined in the detail of a particular product (relevance setting). In case its set on a product detail, it influences all other sorting options.
    • Created sorts products according to its creation date.
    • Category sorts products according to the category hierarchy. If a single product belongs to two or more categories, the category closest to the root category will be used. If a particular category is displayed, it is also used as the root category).
    • Stock Supply sorts products according to its current stock supply. It can be used only when you are using a stock.
    • In Stock sorts products according to its current stock availability (values YES and NO). It can be used only when you are using a stock. Products that are in stock are first, followed by products that are not in stock. In case of master product grouping, master products are ranked according to whether there is at least one variant that is in stock. The “inStock” identifier can be used in web sorting (in a component or when searching through WebApi).
    • Sales sorts products according to the total number of sold products during the last 90 days.
    • All other sorts are considered as a sort by a custom property value.

Note

You can set the default sorting for a particular category from your category tree. Use the Order Settings on the General tab of each settings.

Note

Relevance can also influence the search results for variant (master) products if you use the Group Master Products setting in the Product Component Catalog. In such a case, the product with the highest priority will be displayed as the variant master (other will be grouped as its variant alternatives). This allows you to “select” the variant master product in the search results, because there are no categories in searching so BizBox is unable to work with a category settings.

  • Default Catalog Category is an optional setting which defines that the Product List View will be used as the main, displaying the Products from the selected Category. Products from selected category will be displayed in the Product List which will be displayed as the main (default) View instead of the Catalog View. In case you leave this field blank, the Catalog View will be used as the main View.
  • Category in URL setting allows you to display or hide the category name in the URL address of a particular product detail. If particular category is not defined in the getViewLink() function, the default category will be used instead.
  • Group Master Products setting is used in case of a no-category view (for example the Search View). Option YES displays only the Master product (it means that the master products are grouped together and there is only one record per one master product) and option NO displays all master products separately (every product has displayed its own record).

Views

Views are the main components of the Product Catalog Component. You can’t add your own, you can just use and edit the default ones. As a default in a particular View some Blocks are inserted that handle the function part of the Catalog. For inserting a Block you have to use this twig construction {% include ‘@block/category-menu’ %}. Instead of “category-menu” you have to use the Internal Name of the Block you want to insert.

  • Catalog is a homepage of your Product Catalog. As a default only 2 Blocks are inserted (Category Tree and Search). In case you want to use more or another Block, you can edit this page.
  • Product Detail displays the detail of a product along with a form for adding a Product in shopping cart. In this View are used the Category Tree, Search and Breadcrumb Navigation Blocks.
  • Product List displays items from particular Product Category your customer selects from the Category Tree. The display of the Products from a particular Category is handled by the Product List Item Block that is inserted in the code of Product List View. Apart from this Block, Category Tree (as default), Search and Breadcrumb Navigation Blocks are used also.
  • Search displays the results of performed searches. In this View a form is inserted (buyProduct) that allows customers to add found Products to shopping cart.

For more info about available parameters please display this help-site.

Blocks

Blocks are small components that are used in Views. Used together they handle the function part of Product Catalog Component. Block can typically be a Breadcrumb Navigation, Category Tree or Product List Item. You can add and code as many Blocks as you need. There are 4 default Blocks you can freely edit, but you are not able to delete them. To insert a Block in a View page you have to use special BizBox mark {% include ‘@block/block-name’ %}. Instead of “block-name” use the real Internal Name of the Block you want to insert in a View page.

  • Breadcrumb Navigation is a navigation in the Product Category Tree (nods in navigation are particular subcategories). This Block is used (as a default) in Product Detail View and Product List View.
  • Category Tree is a list of particular Categories and subcategories from your Products, Product Category Tree you have defined in the Product Catalog module.
  • Product List Item displays the content of a particular Product Category Tree.
  • Search is only a form for searching with an input field and a search button. This Block is displayed in the Catalog View as a default.

Layout

Layout is a visual wrap for your Product Catalog Component. As a default you have only one Layout, because typically you will use only one. But for special occasions (such as campaigns or another actions) you can change the Layout as you need, so you can also add and code your own.

For more information about using parameters, Twig functions, forms and names for particular Views, Blocks and Layouts please visit related help-pages.

Articles Component

Articles Component is a type of a page you can add to your page tree. Its purpose is to display articles created in the Author Tools module.

Note

Articles (its content and perex) are not automatically rendered. If you want to use the advantages of Twig in it, you have to insert the article in a template using the template_from_string function.

In case you want to have a blog or a journal, use this component. Remember that this component is vital for work with the Author Tools module (its icon is located on the BizBox Desktop). Without it you are not able to display (or even create) any articles at all. And without particular articles there is nothing to display with this component. You have to use this component together with the Authors Tools module (and the Articles application).

Articles are built by 4 subpages (called Views):

  • Article View displays a single particular article from the Articles application located in the Author Tools. Here you can code what parts of the article will be displayed – author’s name, category, date of publishing, content, tags, label and related articles.
  • Articles Overview is the main (first) view. This will be displayed automatically in case a visitor displays this component page. There can be typically displayed here some featured articles, categories and so on.
  • Article List is the list of all articles from one selected category. In case the visitor displays (clicks) on a particular category (in the Articles Overview View), this view will be displayed. The list usually displays a name, teaser image, perex and publication date of articles.
  • Search is used to search in articles. As a default, this component displays search field, all used tags, list of categories (contains article name, teaser image, perex and paginator), list of articles and info about an article’s author.

For more info about parameters used in this component please see related help-site.

Component Settings

This component has some special settings that can be found on the Component Settings tab:

  • Items Per Page defines, how many articles will be displayed in the Article List as a default
  • Items Per Pages defines the offering that will be able for your visitors to select how many articles they want to display per page. This setting will be displayed only in case you will add the Items Per Page form, that allows the number of articles displayed per one page with articles to be selected.
  • Iems Sort defines how the articles in the Article List View will be sorted as a default. Your visitors can change this settings, if you insert the Item Sorter filter into the code of the Articles component.
  • Items Sort Direction defines the default direction of sorting (and your visitors can be able to change it through the Item Sorter form inserted into the code of the Articles Component).
  • Generate RSS Feed - option YES automatically generates the RSS feed. It will be included into the HTML code of the Article component - <link href=”/cs/feed/rss/nameOfComponent.feed” rel=”alternate” type=”application/rss+xml” title=”RSS 2.0”/>. This code is also inserted into every Article List view for the selected category (<link href=”/cs/feed/rss/nameOfComponent/categoryName.feed” rel=”alternate” type=”application/rss+xml” title=”RSS 2.0”/>) - it means, that only articles from the particular category are included in the feed. It generates the feed for the last 10 articles.
  • Generate Atom Feed - option YES automatically generates the ATOM feed. It will be included into the HTML code of the Article component - <link href=”/cs/feed/atom/nameOfComponent.feed” rel=”alternate” type=”application/atom+xml” title=”Atom 1.0”/>. This code is also inserted into every Article List view for the selected category (<link href=”/cs/feed/atom/nameOfComponent/categoryName.feed” rel=”alternate” type=”application/atom+xml” title=”Atom 1.0”/>) - it means, that only articles from the particular category are included in the feed. It generates the feed for the last 10 articles.
  • Use Article List as Main View - View Article List will be used as the component main view instead of the Articles Overview.

RSS or Atom Feeds for Articles Component

You can create RSS and Atom feeds. It is really simple. Go to the Component Settings (it is a one of the tabs of the Articles component) and turn on the “Generate RSS Feed” and/or “Generate Atom Feed” options (it depends on your preferences and needs). Feeds will be automatically inserted into the HTML code of the component. As a default, last 10 articles are added into the feed.

Photoalbum Component

Photoalbum component is a special page that allows you to sell images which are organized into hierarchical structure of albums located in the Photobank module (that is unavailable in a standard BizBox account and is a part of the Photobank addon). This component can be used only in combination with the Photoalbum module, you are unable to sell a standard products from your product catalog through it.

This component is unavailable in a standard BizBox account, if you want it, you need to have the Photobank addon available in your account. Please feel free to contact us for more information and for the activation of this addon.

For more info about parameters used in this component please see related help-site.

Views

This component consists of 4 Views. Each view is used to display different part of content of the Photoalbum:

  • Album displays the content (images) of the particular selected album. There should not be any particular products displayed, but the images (or, more likely, their thumbnails). In the album detail, all products connected to a particular image are also available.
  • Image Detail displays the details of a particular image selected in the Album view. Here you are able to display all products (all forms) in that this image is available.
  • Photoalbum Overview is the main view that is displayed when customer access this page. Here you should display a menu (navigation) of available albums. When customer selects one of the albums, an Album view will be displayed (with the selected album).
  • Search view displays the results of a search. The search field is available in the Search block.

Note

If you want to change the default view (Photoalbum Overview) to a particular album (Album view), use the Default Album setting on the Component Settings tab.

Blocks

Blocks are pieces of code that are inserted into particular views. The thing is, that you can use one block in more views. Thanks to this your code is more transparent.

You can have as many blocks as you need, just click the Add button in the Blocks section. Remember that to display a block, you have to insert it into a view. There are 4 default blocks you can edit according to your needs:

  • Album Tree displays a simple menu of all albums from the Photobank.
  • Breadcrumb Navigation displays a breadcrumb navigation.
  • Image List is a list of all images from one album. As a default, all products where the images are purchasable are displayed.
  • Search displays a search field. If a customer uses this field, the view Search with the results is displayed.

Layouts

Default layout is the visual wrap for particular views. You can create as many layouts as you want. To display them, you need to assign them to a particular view. Click a view and click the Settings button and select a particular layout which you want to use for it.

File Page

File Type is a file from the File Manager.

When adding a new File Page, you have to fill in all the required fields:

  • Name of this Page can be displayed to visitors as a label in navigation in case you do not fill in its Navigation Title.
  • Internal Name can be visible to visitors (in the URL address) in case you will not use an Alias for this page. Internal Name cannot collide with a Culture abbreviation.
  • Selected Parent Page will be located above the newly added one in the Page Tree hierarchy. This hierarchy is important when creating a menus (Navigation Trees) for this Website.
  • In Page Type, you have to select the Content. Selection of a Component Type is not available for this page type.

General tab

General tab includes the basic settings for this Page.

Identification

  • Name (required) can be displayed to visitors as a label in navigation in case you do not fill in the Navigation Title field.
  • Internal Name (required) is an unique string that defines this page. It can be visible to website visitors in case you do not create an Alias.
  • The Type field is the type of a Page you selected when creating this site. You are able to change it according to your needs.

Navigation Settings

  • Navigation Title will be displayed as the title in navigation trees (it means that this name will be visible to the website visitors). In case you left this field blank, the Name of this page will be used instead.
  • Sitemap option disables (or allows) to display this page in the Sitemap.
  • Dynamic Navigation option is important in case you are using Dynamic Navigation Trees because this setting can turn off the display of this page in this menu type (otherwise you are not able to disallow the display, because Dynamic Navigation Trees are generated automatically according to the settings you added to it).

Configuration

  • Secured Page sets the type of access to this page. This setting depends on the Access Level setting in the General Website Settings. In case this setting is not able to be changed, you have to select the Access Level setting as Secured or Unsecured in the General Website Settings. If this setting is active, you can change the type of access (HTTP or HTTPS) directly on the page level (in the General Website Settings is selected the Page Specific option).
  • Active option (set to YES) will make this page inaccessible. If someone displays it a Special Page (Page Not Found) will be shown instead. If you want to hide a Page, you don’t need to delete it. Just use this setting and turn off its display. Inactive pages are striked through.
  • Archived page setting is unavailable for Content page. It is used only for special type of Content Page - Articles.
  • Search Indexing option sets the availability of this page for searching.

Tags

Every page can have its own tags. Remember that the tags here (Content Page) are only for internal purposes and you can use them to mark pages according to your needs (in order to provide some information to the future self or another BizBox Admin user). In BizBox you are also able to display tags on website (and allows your visitors to work with them), but this feature can be used only with combination with the Articles Component Page (for Articles).

Type all tags (comma separated) you want to assign to this page directly into the prepared field. The Tag Manager button displays management for all tags used in your account and you are able to add, edit and delete them here.

Aliases tab

Aliases tab lets you create Aliases for this page. Alias is an alternative name for the page used in the URL address and makes it accessible within this Alias. Alias name is always displayed to the visitor in the URL address (in case you don’t set an Alias, an Internal Name will be displayed instead).

Every Page can have as many Aliases as you need and only one main Landing Alias. Aliases depend on the Culture. In case you are creating a multilingual Website (you are using a Culture Tree), you have to create Aliases for every Culture separately. That means that the page can have one Landing Alias for every Culture and as many Aliases as you need.

Alias is an alternative name for this Page which is displayed in the URL address (it makes the Page accessible within this alias) instead of the Internal Name.

Aliases have two main purposes:

  • The first is connected with a multilingual website. If you will not set an Alias, the Internal Name of this Page will be displayed in the URL address instead. This can work in case you don’t have a multilingual website, because the Internal Name is not a translated field. In case you want to display in the URL address a sting that is meaningful in another languages, you have to use an Alias.
  • The second purpose is, that many visitors just try to insert a meaningful string of characters in the browser’s address bar hoping that this attempt will lead to a successful display of the desired page. For example a visitor inserts in address bar http://bizboxlive.com/support and hopes that a support page will be displayed. The thing is, that if your Internal Name of this page is “contact-us”, the page is accessible only on http://bizboxlive.com/contact-us. But if you set a “support” alias for this Page, it became accessible for both of the addresses presented above.

Redirect to Landing setting means a visitor who uses this Alias will be redirected to the Landing Alias (the URL address will be changed to the Landing Alias).

How to create a new Alias:

Click the Add button and fill in all required fields:

  • Alias Name is the name of the newly created Alias that is displayed to the visitors. The Page will be accessible by this name. You can create a Landing Alias for every Culture you are using on the Website.
  • Landing Alias marks the main (landing) alias. In case a Page will be accessed by its Internal Name, in the URL address, the Landing Alias Name will be displayed. Every Page can have only one Landing Alias.
  • Redirect to Landing option set to YES will redirect this Alias Name to the Landing Alias (in the URL address will be the Landing Alias Name displayed).
  • Redirect Code lets you select the HTTP response status code.

Object tab

Object tab serves for selecting a File to this Page. You have to select it from the File Manager.

Security tab

Security tab adds Permissions to this page. If you will set some Permissions here, only users with this Permission added to their account will be able to display this page. In case someone of your visitors (that is not logged in) will request this page a Special Page (Login Page) will be displayed instead. You have to create this page first in the Special Page application. It is necessary to insert a login form into this page. In case the user has no Permission to access this page a Special Page, Access Forbidden, will be displayed. It is also necessary to create this Special Page in the Special Pages application first.

Folder Page

Folder Page Type is a folder that influences the Page Tree hierarchy. It can be visible to the website visitors in the URL address. The folder can be used as a parent page for another pages.

When adding a new Folder Page, you have to fill in all the required fields:

  • Name of this Page can be displayed to visitors as a label in navigation in case you do not fill in its Navigation Title.
  • Internal Name can be visible to visitors (in the URL address) in case you will not use an Alias for this page. Internal Name cannot collide with a Culture abbreviation.
  • Selected Parent Page will be located above the newly added one in the Page Tree hierarchy. This hierarchy is important when creating a menus (Navigation Trees) for this Website.
  • In Page Type, you have to select the Content. Selection of a Component Type is not available for this page type.

General tab

General tab includes the basic settings for this Page.

Identification

  • Name (required) can be displayed to visitors as a label in navigation in case you do not fill in the Navigation Title field.
  • Internal Name (required) is an unique string that defines this page. It can be visible to website visitors in case you do not create an Alias.
  • The Type field is the type of a Page you selected when creating this site. You are able to change it according to your needs.

Navigation Settings

  • Navigation Title will be displayed as the title in navigation trees (it means that this name will be visible to the website visitors). In case you left this field blank, the Name of this page will be used instead.
  • Dynamic Navigation option is important in case you are using Dynamic Navigation Trees because this setting can turn off the display of this page in this menu type (otherwise you are not able to disallow the display, because Dynamic Navigation Trees are generated automatically according to the settings you added to it).

Configuration

  • Secured Page sets the type of access to this page. This setting depends on the Access Level setting in the General Website Settings. In case this setting is not able to be changed, you have to select the Access Level setting as Secured or Unsecured in the General Website Settings. If this setting is active, you can change the type of access (HTTP or HTTPS) directly on the page level (in the General Website Settings is selected the Page Specific option).
  • Active option (set to YES) will make this page inaccessible. If someone displays it a Special Page (Page Not Found) will be shown instead. If you want to hide a Page, you don’t need to delete it. Just use this setting and turn off its display. Inactive pages are striked through.
  • Archived page setting is unavailable for Content page. It is used only for special type of Content Page - Articles.
  • Search Indexing option sets the availability of this page for searching.

Tags

Every page can have its own tags. Remember that the tags here (Content Page) are only for internal purposes and you can use them to mark pages according to your needs (in order to provide some information to the future self or another BizBox Admin user). In BizBox you are also able to display tags on website (and allows your visitors to work with them), but this feature can be used only with combination with the Articles Component Page (for Articles).

Type all tags (comma separated) you want to assign to this page directly into the prepared field. The Tag Manager button displays management for all tags used in your account and you are able to add, edit and delete them here.

Aliases tab

Aliases tab lets you create Aliases for this page. Alias is an alternative name for the page used in the URL address and makes it accessible within this Alias. Alias name is always displayed to the visitor in the URL address (in case you don’t set an Alias, an Internal Name will be displayed instead).

Every Page can have as many Aliases as you need and only one main Landing Alias. Aliases depend on the Culture. In case you are creating a multilingual Website (you are using a Culture Tree), you have to create Aliases for every Culture separately. That means that the page can have one Landing Alias for every Culture and as many Aliases as you need.

Alias is an alternative name for this Page which is displayed in the URL address (it makes the Page accessible within this alias) instead of the Internal Name.

Aliases have two main purposes:

  • The first is connected with a multilingual website. If you will not set an Alias, the Internal Name of this Page will be displayed in the URL address instead. This can work in case you don’t have a multilingual website, because the Internal Name is not a translated field. In case you want to display in the URL address a sting that is meaningful in another languages, you have to use an Alias.
  • The second purpose is, that many visitors just try to insert a meaningful string of characters in the browser’s address bar hoping that this attempt will lead to a successful display of the desired page. For example a visitor inserts in address bar http://bizboxlive.com/support and hopes that a support page will be displayed. The thing is, that if your Internal Name of this page is “contact-us”, the page is accessible only on http://bizboxlive.com/contact-us. But if you set a “support” alias for this Page, it became accessible for both of the addresses presented above.

Redirect to Landing setting means a visitor who uses this Alias will be redirected to the Landing Alias (the URL address will be changed to the Landing Alias).

How to create a new Alias:

Click the Add button and fill in all required fields:

  • Alias Name is the name of the newly created Alias that is displayed to the visitors. The Page will be accessible by this name. You can create a Landing Alias for every Culture you are using on the Website.
  • Landing Alias marks the main (landing) alias. In case a Page will be accessed by its Internal Name, in the URL address, the Landing Alias Name will be displayed. Every Page can have only one Landing Alias.
  • Redirect to Landing option set to YES will redirect this Alias Name to the Landing Alias (in the URL address will be the Landing Alias Name displayed).
  • Redirect Code lets you select the HTTP response status code.

Security tab

Security tab adds Permissions to this page. If you will set some Permissions here, only users with this Permission added to their account will be able to display this page. In case someone of your visitors (that is not logged in) will request this page a Special Page (Login Page) will be displayed instead. You have to create this page first in the Special Page application. It is necessary to insert a login form into this page. In case the user has no Permission to access this page a Special Page, Access Forbidden, will be displayed. It is also necessary to create this Special Page in the Special Pages application first.

Content Edition

Code Editor

BizBox offers you two types of editors which allows you to create the content of your pages, templates and e-mails: the Code Editor and the Visual Editor.

The Code Editor is the Ace Editor and allows you to code Content Pages, Website Templates, Code Snippets, E-commerce Templates and E-mail Templates. All Editors for this various content are basically the same, but differ in some details.

In case you want to use this editor as a default, you have to go to the My BizBox module (Personalize section) and select the Code Editor in the Editors settings.

To set up this Editor, go to My BizBox module (Code Editor section) or click the Editor Settings button directly in the Editor toolbar.

It is absolutely necessary to know how to code, because you have to create a well formed XML code. An automatic validation of you code will proceed by clicking the Save button on the toolbar. The Editor uses the Twig template engine with special BizBox Filters and Functions.

Buttons

  1. Undo - Click to erase the last change you made.

  2. Redo - Click to revert the effect of the Undo button.

  3. Paste - Click to insert the data from the clipboard (place your cursor in the right place before).

  4. Cut - Click to remove the selected part of code.

  5. Copy - Click to copy selected part of code.

  6. Insert Link to - Click to insert:

    • Page - Place your cursor in the right place and select (by double-clicking) a Page from your Page Tree, which you want to insert.
    • File - Place your cursor in the right place and select (by double-clicking) a file from your File Manager, which you want to insert.
  7. Insert Image - Click to insert an image. Place your cursor in the right place and select (by double-clicking) an image from your File Manager>, which you want to insert.

  8. Insert Table - Click, specify the number of columns and rows and insert a table.

  9. Insert List - Click, specify the number of items and insert a list.

  10. Insert Code Snippets - Click to insert a Code Snippet. Place your cursor in the right place and select (by double-clicking) the required one.

  11. Insert Special Characters - Place your cursor in the right place and click this button to insert special Symbols.

  12. Translation - Click this button to insert a Translation mark. A Translation mark allows you to create translations for other languages. You can use Translations only on multilingual Websites (which means your Website uses a Culture Tree). To create a translation, you need to place your cursor into other mark, whose content you want to translate and then click the Translation button. A Translation mark labels a part of the content that should be translated. This can typically be one sentence, phrase or even a single word. In the code this mark looks as follows: {{_( ‘Price’ ) }} - Word „Price” is the content that can be translated. All these parentheses, braces, underscore and apostrophes are together creating the translation mark. If you don’t want to type all these marks, there is a button in the Ace Editor which generates it automatically.

  13. Block - Click this button to insert a Block. Block is a specified section of a code on a Content Page. You will use it in the Online Marketing category in Website Editor Settings. Block allows you to define parts of your Content Page that can be visible or not. These Parts are shown or hidden in addiction to Action you want to perform.

  14. Resources - Allows you to insert Resources (CSS and JavaScript files) in your code. You have to define this resources in your Website Settings first.

  15. Format Code - Click to align your code to improve readability.

  16. Check Sources - Click to check the validity of inserted URL links.

  17. Full Screen - Click this button to turn on the full screen mode. To turn this mode off, just click the button again.

  18. Include non break spaces to prevent line wrapping after prepositions and articles.

  19. Editor Settings - Click to set up the Editor. Select suitable font size, color schema and turn on (or off) the display of line numbers, invisible characters, printer margins and indent guides.

  20. Spell Check - Click to spell check the entire code. You can also select the language by clicking the Spell Checker Languages button.

  21. Spell Checker Languages - Select a language for spell checking.

Note

You can also use a keyboard shortcut CTRL + G to insert a translation mark.

Code Editor Settings

Code Editor is set in the My BizBox module in the Code Editor section.

Code Editor section contains the complete settings for the Code Editor you use for coding the Content.

Font and Colors

Font and Colors allows you to set the font size and color theme for the Source Code editor.

View

  • Line Numbers turns on/off the numbering on the side in the Editor.
  • Invisible Characters turns on/off the display of invisible characters in the Editor.
  • Printer Margin turns on/off the display of the printer margin in the Editor. Printer margins are determined by your printers’ limitations.
  • Indent Guides turns on/off the display of tiny vertical lines at each indentation level in the Editor.

Behaviour

  • Include Close Tag turns on/off automatic insertion of the closing tag. It means that you will insert only the first tag and the second (closing) one will be inserted automatically.
  • Code Folding determines how the code folding marks will be used. Code Folding allows you to selectively hide and display code sections (so you can view only the subsections of code that are actually relevant to you). The manual option will hide them and then you must manually mark and hide the sections you want to hide. Mark Begin displays a tiny arrow (code folding mark) in the beginning of the folding, Mark Begin and End displays two tiny arrows in the beginning and the end of the folding. You can click those arrows to hide the content in between them.
  • Fade Folding turns on/off the display of the code folding marks.
  • Soft Wrap Mode determines the automatic wrapping of lines that are displayed on the screen.
  • Use Soft Tab turns on/off the usage of the tabs made up of space characters.

Visual Editor

BizBox offers you two types of editors which allows you to create the content of your Pages, Templates and E-mails: the Code Editor and the Visual (WYSIWYG) Editor.

The Visual Editor is the CK Editor that allows you to simply create the content using WYSIWYG editor.

This editor is used in the Author Tools module and is also available throughout the administration for fields with long content (product description).

Because this is a WYSIWYG editor, you don’t necessary need to know how to code. Editor allows you to format content using the user interface. With this interface you are able to format the content instead of using the code marks. The content the editor displays to you is very similar to the final page (that is visible to visitors).

You can use following buttons to work with the HTML/Twig in this editor:

  • Twig Expression - insert the Twig expression you want to use in the content; it will be automatically wrapped in double brackets (inserted data behaves as a single object when editing).
  • Edit Code Snippet - this button allows you to insert/edit a code snippet (HTML/Twig code).