Tutorial 1: Pages, Paragraphs & Websites

Welcome to the Dynamicweb 9 tutorials!

You are probably here because you are just starting out with Dynamicweb, or because you are looking to refresh some dormant knowledge about how Dynamicweb works. If that is the case, you have come to the right place!

In this tutorial, I will guide you through some of the most fundamental operations in Dynamicweb:

  1. Creating a new website
  2. Creating a page
  3. Creating a paragraph
  4. Creating a language layer

This means, that by the end of this tutorial you should be able to create and manage content across both websites and language layers.

A Dynamicweb solution can consist of one or more websites – collections of web pages – that can exist as fully independent sites, even if they run on the same solution.

To create a website:

  1. Log in to your solution and click on the Content area (1). This will open the content tree (Figure 2.1) – notice the website selector at the top of the tree
  2. Open the content tree menu and select Websites (2)
Figure 2.1 Website overview

This opens the website management view (Figure 2.2) from which you can create, manage and configure your websites.

  1. Click New website in the toolbar (3)
Figure 2.2 Creating a new website

This opens the website settings (Figure 2.3) for your newly created website.

  1. Name your website and select a regional setting (website language) – in this case, choose English (United States) (4)
Figure 2.3 Access the website settings

Now, you must set the default design for the website.

  1. Switch to the Layout tab
  2. Select a basic design (here BasicDesign: BusinessToday has been selected) (5)
  3. Click Save and close (6)
Figure 3.1 Select the design for the website

Your website will now be visible in the websites management overview, and will be automatically selected in the content tree (Figure 3.2).

Notice that the new website is empty – so how about we add a little content to it?

Figure 3.2 Website overview with the new website

Pages have a very specific function in Dynamicweb; they provide structure to your content by acting as containers for paragraphs, which contain actual content like text, images, products, etc.

Creating a page is pretty straight forward – follow these steps:

  1. Open the content tree menu and click New page (Figure 4.1)
Figure 4.1 Creating a page
  1. Select blank page as your page type
  2. Enter a page name (e.g. Home) and select a page status (e.g. published) – then click OK

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

Figure 4.2 Page overview with the new page

The page view consists of:

  • A ribbon bar (1) with tools related to the page – notice the different tabs; Content, Tools, Workflow & Marketing. They let you access more advanced tools, but leave them be for now.
  • 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. You will learn more about content placeholders in the next tutorial.
  • 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.

Create a second page called Store and a third called About us – we will use them in later tutorials.

Your pages won't render in frontend yet as they have no design applied - this is the subject of the next tutorial. In this tutorial you can concentrate on creating and organizing content in the backend.

While pages provide the structure for a website, paragraphs provide the content:

  • Paragraphs can contain text, images, links, etc.
  • Paragraphs can have apps attached, such as a product catalog or a gallery, which is used to publish content from other parts of Dynamicweb

Create a paragraph on your Home page - Click New paragraph in the ribbon bar.

The view in the content pane will change to show the paragraph view for the new paragraph (Figure 6.1).

 

Figure 6.1 Creating a paragraph

The paragraph view consists of:

  • A ribbon bar (1) with tools related to the paragraph – note the different tabs; Content, Options, Advanced & Marketing. Leave them be for now
  • 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

Add a title (e.g. 'Welcome'), some text, and an image to the paragraph, then save and close it to return to the page view.

Create a paragraph with appropriate content on your Store and About Us pages as well.

And that’s it – you’re done for now! In the next tutorial, you will learn how to make the content you just created show up in your frontend.

During Tutorial 1 you have learned:

  • How to create new websites
  • How to create a structure for your website using pages
  • How to create content for your pages using paragraphs
  • (Extra) How to easily manage multi-language solutions using language layers

In the next tutorial you will learn the basics of working with designs & layouts in Dynamicweb, including:

  • How to apply a design to a website
  • How to create a new design from scratch
  • How to make a design dynamic using content and navigation placeholders
  • How to download, install and apply an external design

Extra exercises

If you have extra time, or you’re extra curious, consider doing one or more of the extra exercises below.

Language layers are structural mirrors of a website, which means that pages and paragraphs created or deleted on the master website are also created or deleted on the language layer.

This means that you can translate, add or delete text and images within paragraphs – but you cannot create, copy, move or sort pages or paragraphs on a language layer, as the structure must always follow the structure of the master website.

Create a language layer:

  1. Open the content tree menu and click Websites to open the website management view
  2. Select your website on the list of websites
  3. Click New language in the ribbon bar (Figure 9.1)
Figure 9.1 Creating a language layer

In the New language dialog, you must:

  • Name the language layer
  • Select a regional setting (language) – this should be different from the master website language, obviously.
  • Check copy permissions
  • Click OK

You language layer will be created under your master website (which is marked by a globe icon on the list).

  1. Go to your master website and create a new page or paragraph – then switch to your language layer using the websites dropdown above the content tree and see that it has been mirrored
  2. Open the page or paragraph and modify the content – translate a title or switch an image for another – and verify that your master paragraph has not changed.