3. Create a page
In HubSpot, navigate to Marketing > Website > Website Pages, then select "Create". Select the type of page you want to create. Then name your page and select "Create page". Find the "Podcastio" theme from the list, click on it and select "Select and continue".
Then select a page and choose "Select template".
4. Edit a page
When editing a page, you can drag&drop the modules from the left sidebar onto the page.
When hovering the modules on the page, you can see a "+" sign between the modules.
If you click that, you can add sections. That will speed up the process.
In the left sidebar, you also have a "Design" -tab. When no module is selected, this tab will give you a link to edit the theme settings (as explained in "2. Theme fields").
When you have clicked on a module on the page, the tabs in the left sidebar are "Content" and "Styles". "Content" is where you add all the content, and "Styles" is where you can modify the styling for the module".
The styling fields vary slightly between modules, but common options are:
- Background (color/image)
- Animation
- Border
- Shadow
- Spacing
- Typography
5. Global header & footer
When editing a page, you can edit the global header and footer by clicking on them. A pop-up will appear, select "Open in global content editor".
There you can edit the header or footer, the same way as pages, by dragging and dropping modules.
6. Blog
To choose blog templates, navigate to "Settings" -> "Website" -> "Blog" -> "Templates"(tab). You can also change the number of posts you want to display on the listing page from there.
6.1 Blog hero
On the blog article pages, you can have three different layouts for the hero. You can do this by selecting the "Blog Hero Banner" module in the left sidebar, then select the "Design" tab.
Under "Background", you can choose Full size background (default), Normal size above title, or Small right of text.
This is what the Normal size above title looks like:
And the small right of text:
Please note, when choosing any of these two - you need to change the text color and spacing as well.
7. PRO Features
With the PRO version of the theme, you can utilize the blog feature to list episodes.
In the hero banner, you can choose to hide/show the publish date and tags, as well as add images and links to the podcast on different platforms.
The featured image can be set under the "Settings"
tab.
Below the hero, there's a rich text module where you can embed the player. The easiest way is to choose Insert -> Embed.
Below the text, there's a form module that you can hide/show.
And below that, is a listing module where you can choose to show related or recent posts. This module can also be used for normal blog posts.
Please note: the Related option is only available on blog posts, but the Recent option can be used on any page.
On the listing page, you can adjust the styling to your liking.
Getting started with the PRO theme
Marketplace themes are locked, meaning that the code can't be edited. In order to be able to make modifications to the theme, you need to create a child theme.
A child theme is a copy of an original parent theme. You can edit the child theme without altering the parent theme.
The child theme will have its own style settings, global header & footer, etc. Therefore, we suggest that the first thing you do is create the child theme! Otherwise, you have to set up those things again at a later stage if you want to have us make any changes to the theme.
We can also set up the child theme for you, but you might want to use the support time for actual styling changes.
How to create a child theme
Start by going to Design Tools (Marketing -> Files and Templates -> Design Tools).
To find the theme, you can either search for "Podcastio PRO" or go @marketplace -> Adepto_Digital -> Podcastio PRO (not Artist as in the image).
Then, right-click and choose "Create child theme".
Set a name for the child theme and choose "Create child theme".
And you're done!
Then, when you're editing the style settings or creating pages, use this new theme you just created.