Page Creation
New pages in the Umbraco can be created using Content Pages. They are nodes which are used to build content on the website and alter the URL structure of the website. All new pages should be created on the Development environment and then transferred to Stage and Live environments.
Every page in the Umbraco under the Home Page (a page with a house icon, just under the Website node) represents the overall structure of the website. New pages created using Content Pages creates a new URL path on the website, thus, be cautious when creating new pages as that will impact the overall URL structure of the whole website. An example below showcases what a basic website structure might look like and the URLs that the pages represent.
Basic website structure in the Umbraco Backoffice
Page content
This page is split into two parts:
How to create a new empty page?
In this section we will use a website example above to create a new blank game page under Games node (URL - /bingo/games) called bingo60.
Step 1. To create a new bingo60 page, we will right click on the Games node and select Create... button. This will create a page under /bingo/games URL.
Step 2. Then, we need to select the type of node that we want to create. In this case, we only have on option and will select the Content Page.
Step 3. In the next screen, we need to select whether we want to create a blank page or a page from a content template. As we are creating an empty page, we will select the Blank option.
Step 4. After Step 3, a blank page will appear on the right hand side of the Umbraco editor. Now it's time to create a name for the page which will represent and create the page URL.
In this case, we want the page to be under /bingo/games/bingo60 URL. By creating the page under Games node we already placed the page under /bingo/games URL, thus, to get the /bingo60 part, we name the page bingo60. It's important not to leave any spaces between the name because every space will add a hyphen (-) to the URL. For example, naming the page bingo 60 (with a space between bingo and 60) will make the page URL to /bingo/games/bingo-60.
Step 5. The next step is to fill in the SEO section Page Title and Page Description. The information about how the meta Page Title and Page Description should be filled in can be found on Search Engine Optimization page.
Step 6. After the basics are sorted a good thing to do would be to save the progress. The Save button can be found on the bottom right of the page. After clicking Save we will see that the bingo60 page appeared as a translucent node on the left hand side.
Also, after saving the bingo60 page, at the bottom right of the page, Save and preview button will appear which will let you preview the page before publishing and making it live.
Step 7. After the page is saved, it's time to create some content for the page. To do this, click on the Content section and click Add content button.
This, will open up a selection of available Section Layouts to choose from. All Page Components which are used to create content on the page need to be in a Section Layout, which are used to define the initial bone structure of the page. Let's select One Column Section Layout.
Step 8. After selecting One Column Section Layout we created the first Section Layout on our page. The Section Layout on it's own won't do anything, we need to create a Page Component to display some content on the page. Thus, let's click Add content again, but this time on the Section Layout instead of the root of the content.
This, will open up a selection of available Page Components to choose from. Let's select Rich Text page component to create some text content on the page.
Step 9. Selecting the Rich Text page component will open up the Page Component content section (this will happen when we create any Page Component). Let's fill in some text to display.
After we're happy with the text, let's press Create button at the bottom right corner and then Save and preview button to see the page results.
Step 10. Clicking Save and preview button will open up a new browser tab and will display the whole page. Let's see how it looks like.
Everything looks great! But what if we want to change the text background color? To do this, we will need to go into the Section Layout which holds the Rich Text page component settings.
Step 11. To find the settings we need to come back to the Umbraco Backoffice and hover over the created Section Layout. By hovering over the Section Layout a settings button will appear on top of the component on the right side, let's click it.
This will open up a selection of available component settings. Let's scroll down, find the setting for the Section Background Color, select tombola green, click Submit button and click Save button on the page again.
Step 12. Let's come back to the page and see the results.
We can see that the Section Layout color has changed together with the text color. Changing the color of the Section Layout will always make the text automatically change to an accessible and easy to read version. This happens with a range of other Page Components as well, because we want to keep our site accessible to the widest range of players.
Let's repeat the Step 11 again and see how the background color impacts the text. Changing the Section Layout color to tombola dark teal gives us the following result:
Changing to tombola bright teal this:
Feel free to check out the rest of the colors on the Section Layout page.
Step 13. Let's repeat Steps 7-12 by creating different Section Layouts, Page Components, and applying different settings to reach the desired page that we like. In the end we get something like this in the Umbraco Backoffice:
And the page looks like this:
Step 14. Once we are happy with the page, one of the last things we need to do is to enable the page routing and publish the page so it would be available on the website Development environment, as now it's only available on the Umbraco but not on the website.
To do this, let's click on Routing section and disable Disable Route toggle (this should be disabled and have Route Enabled written on the toggle to make the page active, as by default, the toggle is on - as shown on the picture below). Disabling the Disable Route toggle will make the bingo60 page available on the website under /bingo/games/bingo60 URL.
Let's click Save and publish button at the bottom right of the page (if you can't see this button, please click Send to publish and ask the website Publisher to approve and publish the page for you). By going to the URL on the website Development environment we can see that the same page is displayed:
Step 15. The final step to make the page fully live on the website (as it's currently only available on the Development environment) is to transfer it to the Live environment. To do this, follow the Content Transfer guide page.
How to create a new page from the Content Template?
Similarly as in the How to create a new empty page? section, in this section we will use a website example at the beginning of the page to create a new game page under Games node (URL - /bingo/games) called bingo60, but this time we will use Content Template to do this. The Content Templates will have some the main layout prefilled with some Section Layouts and Page Components created for us, we will only need to change the content to fill our needs and mostly leave the Section Layouts and settings as it is.
The steps below are very similar to the How to create a new empty page? section steps when creating a page from the Content Template. However, if it's your first time creating a page from the Content Template, it's highly recommended to go over this section as well.
Step 1. To create a new bingo60 page, we will right click on the Games node and select Create... button. This will create a page under /bingo/games URL.
Step 2. Then, we need to select the type of node that we want to create. In this case, we only have on option and will select the Content Page.
Step 3. In the next screen, we need to select whether we want to create a blank page or a page from a content template. As we are creating a game page, we will select the Game Page option.
Step 4. After Step 3, a page with some content will appear on the right hand side of the Umbraco editor. Before going changing the content, let's create a name for the page which will represent and create the page URL.
In this case, we want the page to be under /bingo/games/bingo60 URL. By creating the page under Games node we already placed the page under /bingo/games URL, thus, to get the /bingo60 part, we name the page bingo60. It's important not to leave any spaces between the name because every space will add a hyphen (-) to the URL. For example, naming the page bingo 60 (with a space between bingo and 60) will make the page URL to /bingo/games/bingo-60.
Step 5. The next step is to fill in the SEO section Page Title and Page Description. The Content Template will have the Page Title and Page Description fields prefilled with placeholder text ([META PAGE TITLE] | tombola and [META PAGE DESCRIPTION]), however, this must be changed. The information about how the meta Page Title and Page Description should be filled in can be found on Search Engine Optimization page.
Step 6. After the basics are sorted a good thing to do would be to save the progress. The Save button can be found on the bottom right of the page. After clicking Save we will see that the bingo60 page appeared as a translucent node on the left hand side.
Also, after saving the bingo60 page, at the bottom right of the page, Save and preview button will appear which will let you preview the page before publishing and making it live.
Step 7. After the page is saved, it's time to edit the prefilled content for the page. To do this, let's click on the Content section and click on the first component - Rich Text.
This, will open up the Page Component editor view, in this case it opens a Rich Text page component editor. We need to change the text with the square brackets to what we need. We can see that it indicates that we need to add the website breadcrumbs. Let's add Home / Bingo / Games / bingo60 (the website breadcrumb path to the page) in the place of the [BREADCRUMBS] and click Submit button on the bottom right to save the component.
Step 8. After modifying the first Page Component to with the information that suits us, we need to do the same with the next one. Let's click on the second component on the page - Image.
This, once again, will open up the Page Component editor view, but in this case it's Image page component editor. Similarly as we done in Step 7, we need to change the prefilled content to suit our needs. In this case, we need to change the Image and Content Description. Let's add bingo60 image and add tombola bingo60 game banner with bingo card in the background to the Content Description field and click Submit button to save the component.
Step 9. After changing the Rich Text and Image prefilled content we need to do the same with the rest of the components. This means that Step 7 and Step 8 will need to be repeated until every component is checked and the prefilled content is changed. Thus, every place where square brackets ([TEXT]) or placeholder text is shown (Lorem ipsum dolor sit amet, consectetur...) needs to be changed.
This can be tedious at times but the benefit of using the Content Templates is that we won't need to edit any Section Layout or Page Component settings.
Step 10. Once Step 9 is finished and prefilled content on every component has been changed let's click Save and preview button on the bottom right to save the progress and check our results:
As you can see, we didn't need to touch the Section Layout and Page Component settings to make the page look great because everything was already set up for us, we only needed to switch the placeholder content to the content that suits us! However, what if we want to change the yellow button color to a different color? To do this, we will need to go into the Button component settings.
Step 11. To find the settings we need to come back to the Umbraco Backoffice and hover over the Button component. By hovering over the Button a settings button will appear on top of the component on the right side, let's click it.
This will open up a selection of available component settings. Let's scroll down, find the setting for the Button Color, select tombola teal, click Submit button and click Save button on the page again.
Step 12. Let's come back to the page and see the results.
We can see that the Button color has changed. We can do this as many times as we like until we are happy with the results, but now, let's leave it this way.
Step 13. If we're not happy with any other Page Component or Section Layout on the page, we can repeat Steps 11-12 by applying different settings to the component to reach the desired page that we like.
In the end the page on the Umbraco Backoffice should look something like this:
Step 14. Once we are happy with the page, one of the last things we need to do is to enable the page routing and publish the page so it would be available on the website Development environment, as now it's only available on the Umbraco but not on the website.
To do this, let's click on Routing section and disable Disable Route toggle (this should be disabled and have Route Enabled written on the toggle to make the page active, as by default, the toggle is on - as shown on the picture below). Disabling the Disable Route toggle will make the bingo60 page available on the website under /bingo/games/bingo60 URL.
Let's click Save and publish button at the bottom right of the page (if you can't see this button, please click Send to publish and ask the website Publisher to approve and publish the page for you). By going to the URL on the website Development environment we can see that the same page is displayed:
Step 15. The final step to make the page fully live on the website (as it's currently only available on the Development environment) is to transfer it to the Live environment. To do this, follow the Content Transfer guide page.
Go back to