Hub Hack: Divide a Marketing Stream Into Sections

Follow

Learn how to divide a Marketing Stream into distinct sections with their own headings with this Hub Hack.


Warning

Hub Hacks are NOT official Uberflip features. They may not work on all Hubs, or may cause unexpected behavior. Before implementing a Hub Hack on a production Hub, we strongly recommending testing it in a safe environment (such as a staging Hub) if possible.

Uberflip Support is not able to help troubleshoot issues with Hub Hacks: if a Hub Hack is not working correctly in your Hub, Uberflip Support can only help you to disable it.

Before You Begin

  • To follow the instructions in this article, you will need to use the Custom Code feature. To use this feature, you need to be an Account Admin or Content Manager.
  • You should also be comfortable with using the Custom Code feature and working with custom code in your Hub. While not required, a basic familiarity with HTML, CSS and JavaScript is helpful for following this guide.
  • This Hub Hack can only create sections in Marketing Streams. It does not work with Sales Streams or any type of Source Stream.
  • For the purposes of this guide, we will assume that the Marketing Stream you want to add sections to already exists. If not, please create the Stream and add content to it before proceeding.

 

About Stream Sections

What This Hub Hack Does

In certain Streams, it can sometimes make sense to divide the content into sections to make it easier for visitors to navigate.

For example, in the Uberflip Academy, we have a number of training videos that cover various aspects of setting up your Uberflip Hub. The videos are all within a single Stream so that they're easy to browse, but they're also logically organized around the stages of the Content Experience Framework: some videos relate to centralizing content, others to personalizing experiences, and so on.

We wanted to make it clear which videos related to each stage, so we split the Stream into sections that correspond to these stages, as you can see below:

Platform_Training_Videos.jpg

If you have a similar use case in your Hub, you can use the Hub Hack described in this article to create your own sectioned Streams.

How It Works

As with all Hub Hacks, Stream sections are primarily driven by custom code snippets that you'll add to your Hub. But because Uberflip doesn't have a built-in way to create "dividers" between content Items, you'll also need to do some additional setup work to achieve this effect. Specifically, you'll need to create:

  • Link CTAs for every section heading you need
  • A special placeholder Item in a dedicated Stream

Here's how it works:

To create the section headings in the Stream, you will use specially-formatted Link CTAs. Each section heading will be represented by a single Link CTA, and the Tagline/Copy text that you set on the CTA will be used as the section heading text that is displayed within the Stream. For example, this Link CTA:

Hubs___Call-to-Action_Configuration_-_Uberflip.png

Will look like this when used as a section heading in a Stream:

Stream_Sectioning_Example.png

Once created, you can simply put these Link CTAs anywhere within the Stream that you want to place a section heading.

Important

Because this Hub Hack uses Link CTAs to create section headings, it's subject to a Link CTA-related limitation: all Link CTAs must be placed within the first 20 Items in a Stream.

This means that, although you can use this Hub Hack on Streams with any number of Items, your last section heading must appear before the 20th Item in the Stream (or earlier). In other words, you will not be able to place any section headings after the 20th Item.

You will also need to create a placeholder Item in a dedicated Stream. This placeholder Item is needed as a workaround for a placement problem: the Link CTA that represents the first section heading needs to be placed before the first content Item, but a CTA can't be in first position in a Stream. To get around this, you use the placeholder Item to occupy first position in the Stream, with the first section heading CTA in second position, like this:

Hubs___Manage_-_Uberflip.png

Because the placeholder Item will be hidden with custom code, the CTA in second position will effectively be in first position when the Stream is viewed — putting the first section heading at the top of the page, with no Items above it.

The placeholder Item also serves a second purpose by functioning as the "on switch" for this Hub Hack. When you add the placeholder Item to any Marketing Stream, the custom code will look for the specially-formatted Link CTAs within that Stream, and will display them as section headings if they're present. This makes it easy to create additional sectioned Streams later.

 When you're ready to get started, follow the steps below.

 

Step 1: Create a Placeholder Item in a Dedicated Stream

To get started, create a new Blog Stream, then create the placeholder Item inside this Stream. The placeholder Item will be hidden by custom code, and you will use it to enable sections on any Marketing Stream of your choice by simply adding it to the Stream. For details on why this placeholder Item is needed, see above.

For this guide, we will assume you are familiar with Blog Streams and Items, and will not provide step-by-step guidance on how to create a Stream or Item. For detailed instructions, see this article.

Important

You must create a new Stream, and this Stream should contain ONLY the placeholder Item. There are a few reasons for this:

  • It's cleaner: having the placeholder Item in a dedicated Stream makes it easier for others to understand and modify this setup later
  • The Stream itself must be hidden and must not be indexable, so it can't be used for anything else
  • The custom code snippet that powers this Hub Hack hides all content from this Stream, so any other Items you add to it will be invisible everywhere
  1.  Log in to your Uberflip account and navigate to the Hub with the Stream to which you want to add sections.
  2. To begin, create a new Blog Stream.
    • Make sure you choose the "Start from scratch" option when creating the Stream.
    • We recommend calling this Stream something that clearly indicates its purpose, such as "Stream Sections Placeholder Stream", and briefly describing this purpose in the Stream description.
  3. Once the new Stream has been created, open it. Configure it as follows:
    • Hide the Stream (three-dot "meatball" menu in top right > Hide).
    • Turn on No Robots Meta Tag (Options tab > No Robots Meta Tag).
  4. Go to the Stream's Items tab and create a new Item.
    • Again, we recommend using an article title that clearly describes its purpose, such a "Hidden Placeholder Item for Stream Sections".
    • We recommend pasting the following text snippet into the body of the article:
      Do NOT delete this article or remove it from this Stream!

      If you are viewing this article in a Marketing Stream, do NOT change its position in the Stream.

      This article is used to create sections in Streams. For more information, see here:
      https://help.uberflip.com/hc/en-us/articles/360037349611
    • Do NOT use the "Hide" setting (Metadata tab > Status) for this article (ensure it is set to "Show"), as the article will be hidden using custom code in the next step.
  5. While still viewing the new article in the article editor, look at the address bar in your browser. The URL should end with three groups of digits separated by forward slashes (/), like this:
    Hubs___Edit_Article_-_Uberflip.png
  6. Make a note of this article's Item ID, which is the middle group of digits (without the slashes):
    Hubs___Edit_Article_-_Uberflip.png
  7. Also make a note of this Stream's Stream ID, which is the last group of digits (without slashes):
    Hubs___Edit_Article_-_Uberflip.png
  8. Finally, publish the new article.
    • Even though it will never be shown anywhere, the article must be published for this Hub Hack to work.

After publishing the new article, move on to the next step.

 

Step 2: Add Custom Code

The next step is to add the custom code blocks that power this hack to your Hub. You will create two separate code blocks: one for CSS, and one for JavaScript. To complete this step, you will need the Stream ID and the Item ID you noted down in the previous step.

For this guide, we will assume you are familiar with custom code blocks, and will not provide step-by-step guidance on how to create and enable them. For detailed instructions, see this article.

CSS Custom Code Block

Configuration

Name: Stream Sections (CSS) (or any name you prefer)

Description: CSS to enable Stream Sections, as documented here: https://help.uberflip.com/hc/en-us/articles/360037349611 (or any description you prefer)

Privacy Group: None

Placement: Head

Code

CSS Code Snippet
<style>
/*Make items from the sectioning placeholder streams invisible everywhere*/
[data-source-stream-id = "INSERT STREAM ID"] {
display: none;
}

/*Enable sections using CTAs in Streams containing the specified Item*/
#collection-items {
opacity: 0;
transition: opacity 0.3s ease;
}
body.custom-cta-segmentation .description-block {
margin-bottom: 0;
}
body.custom-cta-segmentation .tile[data-id="INSERT ITEM ID"] {
display: none !important;
}
body.single-page .tile[data-id="INSERT ITEM ID"] {
display: none!important;
}
body.custom-cta-segmentation .uf-section-title {
font-weight: 300;
font-size: 25px;
line-height: 29px;
margin-bottom: 20px;
display: block;
clear: both;
background: transparent;
}
body.custom-cta-segmentation .uf-section-title a {
display: block;
position: relative;
top: -120px;
visibility: hidden;
}
@media screen and (max-width: 860px) {
body.custom-cta-segmentation .uf-section-title a {
top: -90px;
}
}
body.custom-cta-segmentation .uf-section-title p {
padding-top: 30px;
padding-bottom: 10px;
margin-bottom: 32px;
position: relative;
display: block;
}
body.custom-cta-segmentation .uf-section-title p:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
height: 1px;
width: calc(100% - 20px);
background-color: #ddd;
}
@media screen and (max-width: 560px) {
body.custom-cta-segmentation .uf-section-title p:after {
width: 100%;
}
}
body.custom-cta-segmentation .uf-section-title:first-child p {
padding-top: 0;
}
</style>

Paste the code snippet provided above into the code box. Make the following changes:

  • Search for [data-source-stream-id = "INSERT STREAM ID"] and replace INSERT STREAM ID with the Stream ID you made a note of in the previous step (make sure to keep the quotes).
  • Search for [data-id = "INSERT ITEM ID"] and replace INSERT ITEM ID with the Item ID you made a note of in the previous step (make sure to keep the quotes).

After pasting in the code snippet, save, then enable the code block.

JavaScript Custom Code Block

Configuration

Name: Stream Sections (JS) (or any name you prefer)

Description: JavaScript to enable Stream Sections, as documented here: https://help.uberflip.com/hc/en-us/articles/360037349611 (or any description you prefer)

Privacy Group: None

Placement: Body Bottom

Code

JavaScript Code Snippet
<script>
window.ctaSegmentationLoaded = false;

$('.single-page .item-prev a[data-item-id="INSERT ITEM ID"]').parent().hide();

var ctaSegmentation = function() {
var spacerTile = $('.tile[data-tags="spacer-tile"]');

if (spacerTile.length > 0) {
// spacerTile.remove();
spacerTile.hide();
}

if (!$("body").hasClass("single-page")) {
$("a.cta-button").each(function(index, el) {
var currentButton = $(el);
if (currentButton.text() === "section") {
$("body").addClass("custom-cta-segmentation");
var sectionTitle = currentButton.siblings("p").text();
var link = currentButton.attr('href').replace(/(^\w+:|^)\/\//, '');
link = link.split('.')[0];
currentButton
.parent()
.removeClass()
.addClass("uf-section-title")
.removeAttr("style")
.html(
'<a id=' + link + '>' + '</a>' + '<p>' + sectionTitle + '</p>'
);
}
});
$("#collection-items").css('opacity', '1');
} else {
var itemPrev = $(".item-prev");
if (itemPrev.find("span.title").text() === "spacer") {
itemPrev.html("");
}
}

};

Hubs.Events.on('load', function(){
if(!window.ctaSegmentationLoaded){
ctaSegmentation();
window.ctaSegmentationLoaded = true;
}

});
if(!window.ctaSegmentationLoaded){
Hubs.Events.trigger('load');
}
</script>

Paste the code snippet provided above into the code box. Make the following change:

  • Search for [data-item-id = "INSERT ITEM ID"] and replace INSERT ITEM ID with the Item ID you made a note of in the previous step (make sure to keep the quotes).

After pasting in the code snippet, save, then enable the code block.

After creating and enabling both custom code blocks, move on to the next step.

 

Step 3: Create Section Heading Link CTAs

Next, create the Link CTAs that will serve as the section headings in your Stream. You'll need to create one Link CTA for every section heading you want to use.

For this guide, we will assume you are familiar with Link CTAs and will not provide step-by-step guidance on how to create them. For detailed instructions, see this article.

Configure each Link CTA as follows:

  • For the CTA name, choose any name you want (it will not be displayed in the Stream, only in the CTA Manager). We suggest indicating the Stream that this CTA will be used in in the name field.
    Hubs___Call-to-Action_Configuration_-_Uberflip.png
  • Layout tab > Tagline/Copy: Type the heading text you want to use.
    • This is the text that will actually be displayed as a heading when the CTA is placed in the Stream.
      Hubs___Call-to-Action_Configuration_-_Uberflip.png
  • Layout tab > Button label: Type in section.
    • This must be only the word "section", in lowercase, and nothing else. This text is what identifies the Link CTA as a section heading to the custom code, and is not displayed.
      Hubs___Call-to-Action_Configuration_-_Uberflip.png
  • Layout tab > Link Action: Type in any website URL you want.
    • This URL is not displayed anywhere, but you must enter something. We suggest entering your corporate website URL.
      Hubs___Call-to-Action_Configuration_-_Uberflip.png
  • Design/Placements/Variations tabs: You do not have to configure anything on these tabs, and can leave them on their default settings. The design of the CTAs is unimportant (as they will not be displayed as CTA tiles), and you will take care of placement in the next step.

After creating all the necessary section heading Link CTAs, proceed to the next step.

 

Step 4: Add Placeholder Item and Link CTAs to Stream

The last step is to add the placeholder Item and the section heading Link CTAs to the Marketing Stream that you want to divide into sections.

  1. Open the Marketing Stream that you want to divide into sections.
  2. First, add the placeholder Item to the Stream and drag-and-drop it into first position in the Stream:
    Hubs___Manage_-_Uberflip.png
  3. Now, click on the CTA button in the menu bar to add the first section heading CTA to the Stream:
    Hubs___Manage_-_Uberflip.png
  4. In the menu that appears, find the Link CTA that represents the first section heading — the topmost section heading that should appear on the page.
  5. In the lower half of the menu, check the box next to Appears After Item, and make sure the number in the field is set to 1. Also, make sure the box next to Repeat After Every is not checked.
    Hubs___Manage_-_Uberflip.png
  6. Close this menu and refresh the page (using your browser's Refresh button). The Link CTA should now appear in the Stream view in the second position (after the placeholder Item):
    Hubs___Manage_-_Uberflip.png
  7. Click on the Open button in the menu bar to preview the Stream. If everything is working correctly, you should see the section heading appear above all content Items in the Stream:
    Stream_Sections_Example.png
  8. Now, return to the Stream Editor, and repeat steps 3-5 above to add the remaining section heading Link CTAs. Make sure to adjust the number beside Appears After Item to place the section heading in the right place in the Stream.
  9. Once you've added all section headings in the right places, you're done!

Tip

Before placing the additional section heading Link CTAs (after the first one), count the number of Items that should appear before each section heading, so that you know what to enter into the Appears After Item fields. When counting, remember to count the placeholder Item, but not the first section heading Link CTA.

 

Troubleshooting

In case it's not working as expected, here are a few things to check:

  • Is the placeholder Item published? It must not be in draft status.
  • Is the placeholder Item set to "Show"? It must not be set to "Hide" under Metadata tab > Status.
  • Is the placeholder Item in first position in the Stream? It must be in first position to ensure everything is placed correctly, and the first section heading appears at the top of the page.
  • Are both custom code blocks enabled? Both blocks must be enabled for the code within to be active.
  • Have you chosen the correct placements for the custom code blocks? The CSS block must be set to Head and the JS block must be set to Body Bottom.
  • Did you specify the correct Item ID and Stream ID in the CSS custom code block, and the Item ID in the JS custom code block? The Item ID and Stream ID specified must be the correct ones for the placeholder Item in the dedicated Stream.
  • Are the Item ID and Stream ID in the right places? Make sure they aren't switched — the Item ID is a longer string of digits.
  • Do all the section heading Link CTAs have only section set as the Button label? The text you type in here must only be section, lowercase, and nothing else.

 

What's Next

Now that you've done all the setup work and created your first sectioned Stream, it's easy to create additional sectioned Streams at any time. All you need to do is:

  1. Add the placeholder Item to any Marketing Stream to enable sections
  2. Create Link CTAs for each section heading you need
  3. Add the Link CTAs to the Stream to place the section headings

In other words, from now on, you only need to complete Step 3 and Step 4 in this guide anytime you want to create sections in any new or existing Marketing Stream.

0 out of 0 found this helpful

Comments

5 comments
  • I like this solution and am using it on a few streams in our hub. However, in my case link CTAs can only be placed within the first 20 items in a stream. I was told there was no way around this, but in your training video example it looks like you found a way?

    0
    Comment actions Permalink
  • Hi Marianne! You're right: unfortunately, it's a system limitation that you can't place a Link CTA deeper than 20 Items into a Stream.

    In terms of this Hub Hack, this means that regardless of the number of Items in the Stream, you can't have more than 19 Items before your last section heading. I actually wasn't aware of this before you pointed it out, so thank you for bringing this to my attention! I'll be adding a note to the article to highlight this limitation.

    The reason this limitation doesn't apply to the example Stream (Platform Training Videos) is that this Stream actually uses a different method than the one described here. That method is more complex and does not lend itself to a Hub Hack, but I included it as an example because it was the best one I had to illustrate the effect this Hub Hack achieves. I understand that this is a bit misleading, and I do apologize for that — I'm trying to find an example Stream I can share which uses this specific method, and will use it to replace the current example as soon as possible.

    0
    Comment actions Permalink
  • Just a quick update for anyone following this Hub Hack: we discovered a bug where the placeholder Item would still appear when viewing an Item in the Stream, specifically in the Next/Previous Item and Item Carousel UI elements that appear at the bottom of the page.

    We've updated the CSS and JS code snippets to resolve this, so if you have previously implemented them (i.e. prior to January 7th, 2020), please copy BOTH of the updated code snippets from this article into your Hub (remember to modify them with the applicable Stream and Item ID).

    0
    Comment actions Permalink
  • This is useful. However, my 'sections' continue to appear as the default CTAs blocks, not as a heading in a marketing stream. I've reviewed the troubleshooting section but I have yet to find out my errors. Can you advise?

    0
    Comment actions Permalink
  • Hi Dan, sorry for the late reply! As with all custom code, it's unfortunately quite difficult to troubleshoot Hub Hacks, because the problem can often be caused by interactions with other custom code running in your Hub. Your best bet is to contact our Support team to see if they can help — but as noted in the warning at the top of the article, they may only be able to offer limited assistance with this issue.

    0
    Comment actions Permalink

Please sign in to leave a comment.