Create a 'landing page' with no Header or Menu (website add-on only)

Modified on Tue, 24 Sep at 12:56 PM

Quick Links

Adding Cover Image Element Blocks to get the landing page look

Introduction

Sometimes, you may wish to create a Page within the broadcast.radio website platform, that does not have a Header section (and therefore menu). This type of Page is often refered to as a 'landing page' and is commonly used in websites as the very first thing a visitor would see.

Take a look at the example page below:

As you can see, there is no Header section or Launch Box, just a large, striking image and an invitation to 'Learn More'.

Let's take a look at how to make a Page like this!

Turn off the Launch Box

The first thing to do is turn off the Launch Box as this is normally displayed at the top of the Homepage. If the 'landing page' you are creating is not the Homepage then you can skip this section!

Follow these steps:

Login to your broadcast.radio account.
Click on Settings > Site Layout > Options then click on the Design Options button.
Untick the Use Modern HOmepage Layout (Launch Box) option. This will turn off the Launch Box on the Homepage.
Click on the Save button to save the changes.

The Launch Box will now not be displayed on the Homepage but usually this would mean it would be replaced with the standard Header & Menu at the top of the page so we also need to disable that!

Disabling the standard Header & Menu bar

In order to get the clean look you want for a landing page, you also need to disable the standard Header & Menu bar which is displayed on the top of every page ()except Homepage) by default.

To do that follow these steps:

Login in to your broadcast.radio account.
Click on Content > Pages and select the page you want to work on (in this case it is the Homepage).
This will open the Edit Page window for the selected Page.
Click on the Show advanced settings option on the right hand side panel. This will expand the panel to show more options.
Click on the Advanced tab and then scroll down to the Layout Options section.
In order to get the look we want change the options as shown in the image above. The key thing is that the Show main menu at top of page option is off but we also do not want to display the Page Title or Page Image.
Finally, toggle the Use wider page layout option to 'on' so that the Element Blocks added to the Page will stretch from edge to edge.
Click on the Publish button to save the changes.

Adding Cover Image Element Blocks to get the landing page look

Now all the settings are in place for the 'landing page', all that is left is to create the page elements themselves. This will be a design choice for you to make and there is no right or wrong way to do it but let's take a quick look how we achieved the landing page used at the top of this article.

So how exactly was this section of the page constructed?

The key to achieving this look for the landing page is the Cover Image Element Block.

The Cover Image Element Block is a special type of image that can be added to your pages. It has two important properties that we are exploiting to get the look we want.

Cover images will stretch to cover the whole width of the page.
Cover images also have section in the centre that can be used to add other Element Blocks to. By default the Cover Image Element Block has a Paragraph Block in the centre to allow you to add a section of text but you can add additional Element Blocks as can be seen in the image above.

So let's follow the steps to recreate the page above.

In this example, we will assume we are staring with a new 'empty' custom Page.

Make sure you have switched off the options to display the Main Menu, Title & Image as well as switched on the option to use Wider Layout (see previous section).
Click on the '+' button to add a new Element Block.
Type 'cover' into the Search box to easily find the Cover Image Element Block (or you can scroll down to manually find it!).
Click on the Cover Element Block to add a Cover Element to your page.
Next you need to set the background image. You can click on Upload if you need to upload the image or Media Library if the image has already been uploaded. In this example the image is already in the library so we will click on Media Library to select the image.
Here you can see the Cover Image on the page but there are a number of other things we need to do in order to replicate the original example.
Firstly, on the Menu Bar for the COver Image, click on the Use Full Height option which changes the cover image to be the full height of the image used.
Next we want to change the Focal Point which is the point in the image that will appear central in the Cover Image. You can see in the screen shot below that the Focal Point is in the centre of the image but that is not where the microphone is in the image. By adjusting the Left and Top settings we can reset the Focal Point so that the microphone in the image is central.
You can also set a coloured overlay in this section as well as the level of opacity for the overlay. In this example we do not want an overlay so we will set the Opacity to be 0.
Now the background image is correct, it is time to start adding the design Element Blocks to be added to the centre of the Cover Image. Let's start by adding am Image Block to add add the Myriad Anywhere logo. We will initially add it below the 'Write Title' Block but change the order in a minute. Click on the '+' button directly below the 'Write title' block and find the Image Block from the list.
This will add a new Image Block to the Cover Image Block. We will assume that the logo we need has previously been uploaded so we can use the Media Library option to select the logo we want.
Having selected the correct logo, we can see it is much too big. To change the size, select the logo and then scroll towards the bottom of the options section (right hand side) and adjust the size accordingly.
The image is also left aligned right now so select the Image and then use the Alignment option on the Menu Bar to change to centre alignment.
Finally, this image needs to be above the text so we need to use the Block Up / Down button on the Menu Bar to move the Image Block up one row.
Now that the Image Block is in place, we can add the text below it. As you can see there is already a Paragraph Block there that we could use but we will need to reduce the text size a little bit. First of all, select the Paragraph Block and type in the text you want to be displayed.
With the Paragraph Block still selected, set the Font Size using the Paragraph Block option on the right hand side.

You can also set a different Font Colour if you wish. You can also use the Bold option on the Menu Bar if required.
The final Element Block that we need to add to complete the design is the Buttons Block. Once again, click on the '+' button below the Paragraph Element (we just edited) and select the Buttons Block from the list of available Element Blocks.
This will add a new Button to the design but once again we need to make some adjustments to get it looking the way we want.
First, select the Button and set the alignment to be Centre Aligned using the Menu Bar.
Next, select the Button to access the options on the right hand side. Here you can set the Fill/Outline options, Font Size, Colour (text and background) and button size. Adjust these settings until the button looks the way you want.
When you have adjusted all the button settings, click on the button itself and type in the text you want to appear on the button.
The final step for the button is to add a Link so that when visitors click on it, it will goto a new page or anchor. Select the Button and click on the Link Button on the Menu Bar.

Type in the URL or Page Name you want to load when a visitor clicks on the button.
You can also use the Open in new tab option to decide whether the new page should replace teh current page or open on a new tab.