Editing Pages in broadcast.radio (website add-on only)

Modified on Tue, 24 Sep at 12:57 PM

Quick Links

Introduction

Accessing the enabled Pages on your website

Editing Pages

Rows & Columns

What are Element Blocks?

Adding Elements

Move, Copy Or Delete Elements / Columns / Rows

Previewing a Page

Publishing a Page

Introduction

The website add-on for broacast.radio allows you to publish a full website for your radio station via the broadcast.radio platform.

Each broadcast.radio website comes complete with a starting template that includes common features for radio station websites but you will need to edit the contents of these 'pre-built' pages in order to make your website unique for your station.

In this article we will cover the basics for editing Pages but it is not possible to cover all options so we strongly advise that you experiment with all the options available to create the website you want for your station.

Accessing the enabled Pages on your website

To edit an Enabled Page on your website follow these steps:

Login to your broadcast.radio account with a username and password with permission to edit the website.
Click on the Settings option on the left tab.
Expand the Site Layout drop down menu.
Click on Enabled Pages.
The list of Enabled Pages will be displayed in the main window. Each broadcast.radio website will have a number of these pages enabled by default.
To edit a page, click on the Edit Page button for the Page you wish to edit.
This will open the Page Editor window which can be used to edit the content for a Page.

Editing Pages

Once the Page is open for editing, you can view the current content, edit the details and add new content via Element Blocks.

Rows & Columns

Pages are divided into Rows & Columns.

Rows: These are horizontal 'contains' that contain one or more Element Blocks (text, pictures etc).

Columns: Columns are vertical contains within a Row. A standard Row only has a single column (that spans the entire Row) but you can have more than one Column in a Row to allow you vertically split the content within that Row. Columns can also contain any Element Block.

What are Element Blocks?

Element Blocks are specific blocks of content that will be displayed as part of your Page. If you look at the example below, the simple 'About' page is actually made of a series of different Element Blocks that each include a particular type of content.

The most common types of Element Block are listed below although broadcast.radio websites include a much larger list of Element Blocks for you to use on your webpages:

Common Element Blocks Include:

Paragraph - This is a block of text that can be formatted as required.
Headings - Displays text as headings.
Lists - Display a bullet pointed list of content.
Image - This block contains a single image.
Gallery - This block contains multiple images that visitors can click on.
Columns - Allows you to split your Rows into multiple vertical Columns.
Buttons - Displays a graphical button that links to another page or URL when a visitor clicks on it.
Video - Video elements allow you to embed videos from a number of platforms including YouTube.
Spacer - Allows you to easily add vertical space between your Element Blocks.
Cover Image - Full width image with text imposed over the top.
Custom HTML - Allows you to add 3rd party HTML code to your Pages.

There are many more generic Element Blocks available to allow you to build your Pages.

In addition to these more generic Block Elements (that you will find on most site builders), broadcast.radio website Pages also include some Special Element Blocks that are designed to allow you to quickly add radio station specific content to your website.

Examples of these include:

Schedule - Displays your station schedule.
MixCloud Grid - Displays a list of your latest posts to MixCloud.
On Air Grid - Display Shows or Presenters.
Playlists - Shows a list of Artists & Songs you want to highlight (can be manual or automatically generated from a Myriad 5 Playout Category).
Advanced Posts Grid - Can be used to display categories content such as 'what's on' or competitions.
News Grid - Displays latest local or national news (which can be manually added or automatically imported from selected subscription services).
Contact - Provides a simple way for visitors to get in touch via email.
Blog Posts - Display your latest articles.
Feature Lists - List of content you want to display in a prominent position in your site.
Weather Widget - This 3rd party widget will display weather in your local area.
Advert Banners - Allows you to simply add advertising banners to the Pages in your site. (Please note these are enabled on a site level)
Web Player - You can embed your web player on any Page although there is a web player included on every page by default.

Each Block Element has it's own settings and options which are not covered in this article. We suggest experimenting with the options to work towards your final Page design.

Adding Elements

Block Elements can be added to Rows or Columns by clicking on the '+' button that appears below existing Elements.

In the example above, clicking on the '+' button would add a new Element Block bellow the website address (but still within the same Column).

In the example below, clicking the '+' will add a new Block Element at the bottom of the page.

Let's add a new Paragraph Block Element to add a new section of text.

Click on the '+' button.
A list of available Block Elements will be displayed. You can scroll through the list or search for a specific Block Element using the Search option at the top. In this case we can see that Paragraph is the top most Block Element so we can easily select it.
The Paragraph Element will be added to the bottom of the Page.
You can now type in the text that you want to be displayed into the Paragraph Element box. You can also use the menu bar that floats above to format the text or add a Link.
You can also change more generic options for this Element using the options window on the right hand side. The contents of this window changes depending on the selected Element, in the case of a Paragraph Element, the settings include Font Size, colour and Drop Cap settings.
Let's add another Element Block but this time we will add a Column Block with two columns and then add an Image Block to the left column and a Paragraph Block to the right.
Click on the '+' again to add a new Block.
Select Columns from the list of Blocks.
The Columns Block is a special case as before it is inserted, it asks you to confirm the amount of columns and the formatting of the columns. In this example we will select the 70/30 split which will create two columns but the left column will be twice the width of the right column.
Now you will sew that the two columns have been created and each has it's own '+' button to allow use to choose the Element Block or Blocks to go inside the column.
First let's add the image to the left hand column. Click on the '+' button on the left column.
As this is an Image Element, you need to tell it what image you want to be displayed. You can choose to Upload a new image, select an existing image from the Media Library for the site or link to an external image URL. Let's assume we have an image on our desktop that we want to use. Click on the Upload option.
You can then browse to the location of the image you want to upload.
The image will be uploaded to the site and added to the Element Block. In the example below you can see that you can also alter the shape of the image to be displayed, the dimension and the text using the options on the right hand side.

If we had selected Media Library, we would of seen a list of all images previously uploaded and could of selected the image from the list. You can also upload a new image into the Media Library if if you need to.

You can also see that you can add a caption for the image if you like.

For more details on Image options see - Media Library - Adding images & searching for images online (website add-on only)
Now that we have the the image added, let's add the text to the right column. Click on the '+' on the right column and select Paragraph from the list.
In the screen shot below, we have added a couple of Paragraphs of text but let's say we want to add a button that will go to an external website.

Click on the '+' button below the last line of text and find Button in the Element list. Let's use the Search option to find it!
Click on the Button Element Option to insert a Button.

You can now use the options to set the text, URL, style and colour options for the button.
We have now completed adding Elements to both columns and can see how the full Row will look.

You can continue to add and combine Block Elements to your Page using the same steps and selecting the appropriate Element Blocks.

Move, Copy Or Delete Elements / Columns / Rows

Sometimes you want to move an Element or Row to a different position in your Page. You can do that be using the Up/Down buttons located on the Edit Bar for the Element. Make sure the full Row is selected if you wish to move all the Elements in the row Up or Down.

You can also use the Drag option on the Edit Bar to drag the Element to a different location in the Page.

If you wish to duplicate an Element or a Row / Column, you can do so using the options drop down on the right hand side of the Edit Bar.

You can also use the same menu to Remove an Element Block. In the example below, we have a Advanced Grid Element that we do not want on the Page so let's remove it!

Now the Page is how we want it!

Previewing a Page

One the Page is setup to display all the Element Blocks that you want, it is worth previewing the Page before you publish it and make is visible to visitors to your website.

To preview a page, click on the Preview button.

The Page will be displayed in a floating browser window that is displayed over the top of the Edit Page.

Here you can see the finished page, but wait, it looks a lot different to the Edit Page!

That is because the overall site Design Theme has now been applied to the Preview and on this site, the default background colour is black and the text is white. That is fine but now our button we added does not work as we set that to be dark text so we need to go in and edit the settings for that to make it more visible - good job we previewed first!

Close the Preview window, fix the button and try again! Once we are happy with the page, it is time to Publish it.

Publishing a Page

Once you are happy with your Page, it is time to Publish it to make visible to visitors to your website.

Publishing your changes should only take a view moments. Once complete you can view your updated page straight away.

If you are not happy with the changes you have made, you can use the Click To Discard option BEFORE YOU CLICK ON PUBLISH to close the Page without saving any of the changes.

Normally, broadcast.radio saves changes in real time so if you close the browser window before you Publish the page, the changes you have made will persist when you reload the Page in the Editor so that you can Publish them or Discard them.

You should now be able to start editing Pages and building your website.

For more details on Image options see - Media Library - Adding images & searching for images online (website add-on only)

Attachments (32)