Get started with Dynamicweb

Dynamicweb is a CMS system with many useful tools. This guide will help you get the basics right and get you started.

A Dynamicweb solution consists of two things:

• The frontend is what everyone else outside can see – the outward look of your website that you want to look pretty.
• The backend is where all administrative work is done such as adding pages, paragraphs, or uploading files and images.

To work with all of the tools and options for creating and managing content on your website, you must login to the Dynamicweb administration backend (Figure 1.1).

Figure 1.1 Login to the Dynamicweb 'backend'

To access this login screen, you must write the address of your website in a browser (we recommend Chrome) followed by /admin - like this:

• www.yourwebsite.com/admin

Once you see the login screen, write your username and password and optionally change the backend language by clicking Change language.

Finally, click Sign in.

Once you have logged in, you will see the Dynamicweb administration interface, also referred to as the backend (Figure 2.1).

The backend consists of an Area menu with different nodes (1) and a Content pane (2). The Content pane is where you will do work, such as create new paragraphs, change settings, etc.

In this screenshot, the content pane contains a dashboard with useful and customizable information displayed by widgets.

Figure 2.1 The administration interface

In the upper right corner (3), you can log out, edit your password, and change your user profile (Figure 2.2).

Figure 2.2 Edit your profile, change your password, or sign out of the backend

If you click one of the nodes in the Area menu, an Area tree will appear (Figure 2.3). In this screenshot, the Content tree has been opened – it contains information about the content of your website.

Figure 2.3 An area tree - here the content tree

A page is a way to structure your content – for instance, you can have an ‘about’ page, a ‘my profile’ page, and a ‘shop’ page.

A page is usually shown in a menu or navigation in frontend, and is responsible for the title in frontend and its URL address.

The content on a page is added using paragraphs – you can add an infinite number of paragraphs to a page (resulting in a very long page in frontend). Paragraphs can contain text, images, and apps – e.g. a product catalog, a forum, and so on.

To work with pages and paragraphs click the Content area to open the Content tree (Figure 3.1):

• At the top of the Content tree is a dropdown menu with all of your websites (1). Select the website you want to create/edit pages and paragraphs for.
• When a website is selected, a list with the associated pages and folders is rendered below (2).
• At the bottom of the page list, you can find the Recycle bin and the search tool:
  • The Recycle bin is a tool to find and restore deleted pages and paragraphs.
  • The search tool is a tool to search for pages and paragraphs using either a Page ID, Paragraph ID or a text string.

Figure 3.1 The Content tree

When you click one of the pages, details about the specific page and a list with its associated paragraphs is shown in the page view (3) (Figure 3.2).

As you can see, the website MyFancyWebsite contains a number of pages e.g. Home, Store and News. When the page Home is selected, its content is shown in the Content page. This page contains a single paragraph called Welcome.

Figure 3.2 The paragraph list

To create a new page, open the Content tree menu and click New Page (Figure 4.1).

Figure 4.1 Creating a new page

After clicking New Page:

• Select Blank Page as your page type
• Enter the title of the page and
• Choose whether you want your new page to be published, hidden in menu or unpublished (Figure 4.2)
• Click OK

Some solutions may have more than one page type, but that varies from solution to solution.

Figure 4.2 Enter a title and select a page status

The content pane will now change to show the page view of the new page (Figure 4.3).

The page view consists of:

• A ribbon bar (1) with tools related to the page
• An empty paragraph list (2) – this is where you add and organize the paragraphs containing your content. Notice the Content-header – this is a content placeholder. Content placeholders are used to organize paragraphs.
• A page footer (3) which contains useful information about the page, such as the page ID and the template which is used to render the content in frontend.

Figure 4.3 The content page for a new page

Paragraphs are used to add content – text, images, and the like – to a page.

To add a new paragraph:

• Open the page
• Click New paragraph in the ribbon bar (Figure 5.1) - you may also need to select the Paragraph type.

Figure 5.1 Creating a paragraph

The Content pane now shows the paragraph view for the new paragraph (Figure 5.2).

The paragraph view consists of:

• A ribbon bar (1) with tools related to the paragraph
• An area (2) containing a headline field, a rich text editor, an image selector, and an image settings section – this is where you add content to the paragraph
• A footer (3) containing useful information about the paragraph – chiefly the paragraph ID and the template used to render content from this paragraph

Figure 5.2 Creating a paragraph

Here you can:

• Write a title
• Use the rich-text editor to add text
• Select or upload an image using the image selector

When you’re done, click Save or Save and close in the ribbon bar.

You can set the publish state for a page. This is useful if you want to work on a page, put keep it hidden from frontend users. You can hide pages so they won’t be seen in the navigation pane in frontend but can still be accessed through a sitemap, or you can hide them completely.

Open the Content tree by clicking the Content node, and click on your page to open the page view (Figure 6.1).

Figure 6.1 Publish states control whether a page is published, hidden, or unpublished

In Publication section in the ribbon bar, you can choose a publish state. By default, newly created pages are set as published on your website.

You can choose between the following publish states:

• Published – included in both the navigation and the sitemap
• Hide in menu – included in the sitemap and can be accessed using the direct URL
• Unpublished – not included i the navigation or the sitemap, and cannot be accessed using the direct URL

In the Content tree, you can find the Recycle bin tool, where you can restore deleted pages, paragraphs and whole websites.

When clicking the Recycle bin tool, you are shown a list with all deleted items (Figure 7.1).

Figure 7.1 The Recycle bin tool

From here, you can:

• Restore items by clicking the arrow under Restore for separate items
• Select multiple items and either restore or delete them from the Recycle bin by clicking Restore/Empty selected items in the toolbar at the top
• If deleted pages have paragraphs, you can fold out the page to access its content.

You can also choose which types of content to show in the list by using the dropdown menu (Figure 7.2):

• Language/Area shows deleted websites
• Page shows deleted pages from all of your websites
• Paragraph shows all deleted paragraphs

Figure 7.2 Filtering content in the recycle bin

The File manager in Dynamicweb enables you to save and structure your images and other file types in an easy and intuitive manner.

​To access the file manager, click the Files node in your Area menu – this will take you to the Files area (Figure 8.1).

Figure 8.1 The Files area

The files area consists of:

• The folder tree (1) from where you navigate to and from your folders and subfolders
• The file manager toolbar (2) which lets you perform various file or folder operations, e.g. upload files
• The content area (3) where the files within a particular folder are displayed and can be worked with

When you click on a folder in the folder tree, a list view of the folder content opens in the content pane (Figure 8.2). Broadly speaking, the content pane here consists of a file manager toolbar (1), a files list (2) with filtering at the top, and a file upload area (3).

Figure 8.2 The contents of a folder shown in the content pane

Your solution can only have the 5 default folders (Files, Images, System, Templates and Cache) as top folders. Other top folder must be created on the server.

To create a new folder from the backend, you must create a subfolder to one of the top folders.

To do so, click the menu button for the specific folder to open the folder menu. Click New subfolder.

Figure 9.1 Creating a folder

Name the folder and click OK. This opens the content area for the new folder (Figure 9.2).

Figure 9.2 Creating a folder

You can use the toolbar to switch between list view and thumbnails view (Figure 9.3) – for info on the more advanced features, please consult the manual.

Figure 9.3 Switching between list & thumbnails view

To upload a file, you can either click the Upload button in the file manager toolbar or drag and drop a number of files in the file upload area (Figure 10.1). Clicking any of the two buttons will open the usual file selector window on your computer.

Figure 10.1 Uploading files

After you have uploaded a file, you can right-click it to open the context menu for the specific file (Figure 10.2).

Figure 10.2 The Files context menu

You can:

• Preview the file
  • If the file is an image, a small pop-up window will open with a preview of the image
  • If the file is a text file, the file will open in a new tab, displaying pure text (the same as when clicking Open in browser)
• Edit the file
  • If the file is an image, the Image editing window opens where you can resize, crop, rotate, and flip the picture
  • If the file is a text file, an Editor window opens where you can edit the file with syntax highlighting (or choose Simple editor to enable this), fix HTML automatically, or convert the file to XSLT or Razor
• Rename the file
• Move or copy the file to another destination or copy it to the same destination (Copy here)

You can also open the file in a browser, download the file, or delete it – for more advanced functionality, please see the manual.

If you need more advanced options when uploading files, click the Upload manager button in the toolbar to open the upload manager tool (Figure 11.1).

Figure 11.1 The Upload Manager

Click choose file in the toolbar and select your file(s) – they will appear in a list, so you have a chance to review them before uploading.

Use the settings in the toolbar to:

• Overwrite existing files with the same name as the uploaded files
• Set the quality and/or activate the image resize option, and define the max width/height
• If you’re uploading a zip file, you can choose to extract archives
  • You can then choose to create to create the folder structure from the zip file in the folder tree and place all files in the original folders

When you’re done, click Upload.

Dynamicweb contains tools for creating and managing users - both backend users (e.g. editors and admins) and frontend users (e.g. customers).

Click the Users area to display the Users tree (1) (Figure 12.1) – here you can see a list of user groups, as well as smart searches and repository queries. You also have access to a Search tool, which allows you to search through all users in the system.

If you click a user group, the appropriate users will be shown in a user list (3) in the content pane with a User toolbar at the top (2).

Figure 12.1 The Users area

To create a new user group, open the User tree menu (Figure 13.1) and click New group.

Figure 13.1 Creating a user group

In the content pane, you can now edit your new user group (Figure 13.2).

• You must provide a name for the group
• You can also directly add users to your group using the user selector
• When you’re done click Save at the bottom

You can also add information on the group itself using the Information fields, but these are for the group only, and are not inherited by the users in the group.

Figure 13.2 Creating a user group

The new group is now available in the Users tree – and all user groups have their own context menu (Figure 13.3), so if you click the menu button, you can:

• Edit or delete the group
• Move the group to a different location (e.g. make it a subgroup)
• Create a new subgroup to the current user group
• Add a new user directly to the user group
• Sort users in the group
• Import and export users by using an input file like an xml document.

Figure 13.3 A User group context menu

To create a user, click the menu button on a user group to open the context menu, when click New user (Figure 14.1).

Figure 14.1 Creating a new user

The user view will then open in the content pane(Figure 14.2) – it shows the (many) options and properties on a user. The ones you must fill out are:

• User name – this is typically used when logging in
• Password – this can be encrypted by checking Encrypt

You don’t have to fill the following, but it’s typically a good idea:

• Name, first name, and last name
• Email – click the icon to the right of the email field to validate the email
• Email permission – when checked, you are allowed to send mails to this user

Figure 14.2 Creating a new user

When you are done, click Save and close. You are redirected back to the user list of the user group, where you can now see the new user (Figure 14.3).

Figure 14.3 A newly created user

If you like working in Excel, you can also export a set of users to Excel, edit them, and then import them to your solution again.

To export users to Excel:

• Click the menu button on a user group to open the menu (Figure 15.1)
• Click Export users

Figure 15.1 Exporting users to excel

Now you will see the export users view (Figure 15.2).

Here, you must:

• Choose ExportUsersToExcel as export users activity to create an Excel Worksheet file with the users
• Select which data columns you want to export – everything is selected by default.
• Click Export users at the top.

Figure 15.2 Exporting users to Excel

You now have an Excel file with your users (Figure 15.3).

When you’re editing the file, keep in mind that the excel provider has these limitations:

• Worksheets must not contain whitespace
• Do not use merged cells – they will be converted as null or an empty string.
• First row must contain headers
• The worksheet you are importing must have the file name “AccessUser”

Apart from that, you can edit the data as you’d like.

Figure 15.3 Exporting users to Excel

To import users from an Excel Worksheet file, click the menu button for a user group and click Import users (Figure 16.1).

Figure 16.1 Importing users from Excel

You will be directed to the import users view (Figure 16.2), where you must:

• Select ImportUsersFromExcel as your import users activity.
• Select your .xlsx file (this must be uploaded beforehand in Files)
• Click Import Users

Figure 16.2 Importing users from Excel

Dynamicweb includes a full suite of marketing tools, but as an editor you will mainly work with the Email Marketing tool.

This tool basically takes a page from your content tree and sends it as an email to a list or group of users you select.

To really pin out the process:

• First, you create the email page – text, images, etc. – as a page in the content tree, usually within an emails folder
• Second you open the Email Marketing tool and create the email

Assuming you have already created a page to send as an email:

• Click Marketing in the Area menu
• In the Marketing tree, fold out the Email Marketing area (1) (Figure 18.1).
• Click any of the email folders, e.g. All emails - this opens the email list (2) with useful short information about your emails.

Figure 18.1 Creating an email

• Click the menu button on a top folder in the list
• Click Create new email (Figure 18.2).
• Select Blank email as email type and write a subject for your email.

Figure 18.2 Creating an email

In the content pane, you can now set up your email (Figure 18.3):

• Give the email a name (internal name) and subject (what people will see in their mailbox) (1)
• Choose recipients of the email and specify the sender’s name and email (2)
• Select the page you created with the emails content and select a domain – the website you are sending this from) (3)
• When you’re done, click Save

Figure 18.3 Creating an email

Before you can send an email, everything except the pre-header must be specified.

Once everything is ready to go, click Send in the toolbar (Figure 19.1).

Figure 19.1 Sending an email

You can then send the email instantly by clicking Send now. If you want to schedule when to send the email, click Scheduled send and a Scheduling window will appear (Figure 19.2).

Here you can choose the time and date to send the email and choose if the email should be sent repeatedly e.g. every month. When you’re done, click Schedule.

When the email is sent, it is moved from the Drafts folder to the Sent folder under the folder you’re working in.

Figure 19.2 Scheduling an email

Sometimes you delete old pages from your website, or you move a page from one place in the content tree to another. If a visitor then clicks on an URL to the old location, they will see a 404-error that the page doesn’t exist. This can be very frustrating for your visitors.

To make sure that doesn’t happen, you can set up a redirect – a shortcut which redirects visitors from the old URL to the new URL:

• Click the Settings node in the Area menu
• Fold out the Web and HTTP section in the Settings tree (Figure 20.1)
• Click the Redirects node

Figure 20.1 Redirects

Click Add and you’ll see the Edit window (Figure 20.2).

Figure 20.2 Creating a redirect

To create the redirect:

• In Path write the old address – without the website URL – like this /api-docs/Dynamicweb.Analytics
• In Link select the page you want people to be redirected to
• Select the type of redirect:
  • Maintain path keeps the URL as the user typed it, but loads the new page
  • Forward to link forwards the visitor to the new URL, and tells search engines whether this is a permanent or temporary redirect
• Check Active
• Click Save

Forms for Editors is an app which makes it easy for you, as an editor, to create forms on a page – feedback forms, signup forms, etc. – and collect data from your visitors in a structured manner.

 A simple form could look like Figure 21.1.

Figure 21.1 A simple form

Forms are created in the backend and then published in frontend using a Forms for Editors app.

You can read more about the Forms for Editors app here.