After installing OpenCms with the Mercury template, a frequently asked question is how to create a new website using it. This step-by-step instruction guides you through all the required steps for setting up a new site in OpenCms, configuring it to use the Mercury template, and creating the basic configurations for your own header and footer.
The first step is to create a new website in OpenCms.
- Go to the launchpad and select the Websites app.
- Click on the "New" icon in the toolbar.
- Enter the website name (Title), e.g. "MyOpenCmsWebsite" and the server URL.
→ The folder name is set automatically based on the website name, but can be changed manually if required. - Make sure that the "Template" field contains:
/system/modules/alkacon.mercury.template/templates/mercury.jsp - Click on "OK" and OpenCms will create the website and the required basic files.
You have now created a new, "raw" website in OpenCms. The next step is to configure it to use the Mercury template.
To tell OpenCms that a site should use the Mercury template, set up the site's "Master configuration" as follows:
- Switch to the Explorer view.
- Select your newly created website (e.g. "MyOpenCmsWebsite") in the site selector.
- Edit the file
/.content/.config. - In the first tab "Content elements", in the field "Master configuration", enter the following:
/system/modules/alkacon.mercury.template/configuration/mercury.master.xml
The master configuration file contains all the necessary definitions for the Mercury template. Configuring it makes the Mercury content types and formatters available in the "Add Content" menu.
The next step is to set up a template model so that new pages can share a common layout.
A template "model" is basically a master that is copied when a new page is created. Template models are later used by content managers to create new pages in the OpenCms Sitemap editor.
A template model typically contains several "Model groups". These are blocks of shared content. This means that any changes you make to the model group are automatically reflected in all pages that use that group. Common use cases are model groups for "Header" and "Footer".
Creating the model groups
To create "Header" and "Footer" model groups for your template model:
- Switch to the Sitemap editor.
- Select "Templates" from the sitemap mode selector in the toolbar.
→ You see a "Default Model for site MyOpenCmsSite" below Templates and no entry below the Model groups. - Create a new model group for the "Header" by pressing the plus button on the right.
→ Set both "Title" and "Description" to "Header". - Create a new model group for the "Footer" in the same way.
The Mercury template provides a special function that can create many different header layouts, including a logo, navigation bar, and other elements. The initial configuration is a little bit complex, but fortunately it only needs to be done once for the whole site.
To configure the header group:
- Click on the model group "Header".
→ You now see an empty page with a red container. - Click on "New" in the toolbar and select "Template elements" below "Types".
- Click on "Layout group" and drag & drop "Mercury header with flexible layout option" into the red container.
→ You now see a green empty container and an orange message box. - Click on "New" in the toolbar again and select "Advanced Elements" below "Types".
- Click on "Dynamic Function" and drag & drop "Header Configuration" into the green container .
→ The page will automatically reload and show four new containers, which we will use later to place some content elements in our header.
The "Header Configuration" function defines the overall structure of the header. It determines which containers are available and how content elements within them are arranged.
- To adjust the layout, click "Settings" next to the "Header Configuration".
- Here you can:
- Set the size and layout of the page logo.
- Enable and arrange the header links.
- Show and style the page title.
- Adjust the layout of the navigation.
- And more....
We'll stick with the default settings for the rest of this guide, but feel free to explore these options to see how they affect your layout.
- Press "CTRL-E" (or "Command-E" on Apple computers) until you see the message "Switched view: Template elements".
- Go to the edit point in the top right, select "Settings" and choose "Reuse elements" as the group type .
→ The box at the top of the page now displays "Reuse Group".
To complete the header, different content elements have to be placed in the four containers of the header.
- Click on "New" and choose "Content Elements" below "Types".
- Drag and drop a new "Link Sequence" into the top right container, this is the only place where you can place it.
→ These will be the top header links, so you should just add a title and some dummy values in there now. You can change them to the real links later once you have created some pages you can link to. - Click on "New" and choose "Content Elements" below "Types".
- Drag and drop a new "Content Section" into the top left container, this is the only place where you can place it.
→ This will be the header image and website title, so enter a title, image and link in this content. - Click on "New" and select "Advanced Elements" below "Types".
- Drag and drop a new "Navigation" into one of the other containers.
→ This will add the main navigation or breadcrumb (depending on which container you dropped it in). Edit the content and enter a title. - Click on "New" and choose "Advanced Elements" below "Types".
- Drag and drop a new "Navigation" into the last remaining container.
→ This will add the main navigation or breadcrumb (depending on which container you dropped it in). Edit the content and enter a title.
Again, you can customize the header quite a bit using the options in the "Header Configuration" function. We encourage you to try them out.
Once you are done with the header configuration, return to the Sitemap to create the Footer group.
The footer group can be configured with containers for footer links and other info boxes.
To configure the footer group:
- In the sitemap editor, click on "Footer".
→ You will now see an empty page with a red container in it. - Click on "New" and select "Template elements".
- Click on "Layout group" and drag & drop the "Mercury footer full" to the container.
-> This will now show two orange containers which we will later use to put content elements in our footer. - Press "CTRL-E" until you see the message "Switched view: Template elements".
- Go to the edit point in the top right, select settings and choose "Reuse elements" for the group type.
→ The box at the top of the page now displays "Reuse Group".
The footer allows a lot of flexibility in its layout and content. It can easily be modified for other appearances.
We start with adding some rows first:
- Click on "New" and select "Template Elements".
- Click on "Layout Row" and drag & drop the "Row 3 Columns (4-4-4)" into the upper container.
- Click on "New" and select "Template Elements"
- Click on "Layout Row" and drag & drop the "Row 1 Column (12 -full)" into the lower container.
These containers can contain all kinds of different elements like content sections or link sequences. For example, you could fill the containers like this:
- Click on "New" and select "Content Elements" below "Types".
- Drag and drop a new "Content Section" into the upper left container.
- Add some text and a headline there.
- Click on "New" and select "Content Elements" below "Types".
- Drag and drop a new "Content Section" into the upper right container.
- Add some text and a headline there.
- Click on "New" and select "Content Elements" below "Types".
- Drag and drop a new "Link Sequence" into the upper middle container.
- Add some links to it.
- Click on "New" and choose "Content Elements" below "Types".
- Drag and drop another new "Link Sequence" into the top bottom container.
- Go to the edit point of the last link sequence, select "Settings" and choose "Link sequence page element" as formatter and "in a row" for "Display".
Once you are done with the footer configuration, return to the Sitemap to configure the template model.
To create the template model, we will use the header and footer model groups we created in the previous steps.
- In the sitemap editor, click on "Default model for site MyOpenCmsWebsite".
→ You will now see an empty page with a red container in it. - Click on "New" and select "Template elements".
- Click on "Layout area" and drag & drop the "Area - One row" into the page.
→ You will now see a new orange container. This is the area where the individual page content will be entered later. - Click on "New" and select "Advanced elements".
- Select "Model group" and drag & drop the "Header" model group above the layout area from the previous step .
- Click on "New" and select "Advanced elements".
- Select "Model group" and drag & drop the "Footer" model group below the layout area.
You now have a template model that can be used to create new pages in the Sitemap.
With the template model created in the previous steps, you and your content managers can now use drag and drop to create new pages in the Sitemap Editor.
- Select "Sitemap" from the sitemap mode selector in the toolbar.
- Click "New" in the toolbar, then drag and drop a "Default model for site "MyOpenCmsSite" into the sitemap.
→ The new page is now called "page", you can rename it by directly clicking on the name. - Click on the newly created page, it will open in the page editor, showing the header and footer you have created.
- Click on "New" and select "Template Elements".
- Click on "Layout Row" and drag and drop any layout row into the orange container. You can add multiple layout rows below each other to create the structure of the page you want.
→ New blue containers show where content elements can be placed. - Click on "New" and select "Content Elements". Select the type of content you want to use and drag and drop it into one of the blue containers of the page.
If you want to use a particular row structure on many of your pages, you can also add layout rows directly to your template model. All pages created with this model will have the same row structure, but you can still change it after you create a new page.
You can also create additional model pages for your site, with a different layout row configuration, or a different header or footer, as needed.