Landing pages are one of the most complex content types you can have on your Open — continue reading
Landing pages are one of the most complex content types you can have on your Open Social platform. Likely, your Home page will be a landing page structured to guide your visitors to the right resources. Previously, we’ve shared some tips on how to optimize your landing page for search engines to help you get more members, instructions to create landing pages and great examples of landing pages (Example #1 & Example #2).
At the time of writing, I am Open Social’s Market Development Representative and one of my responsibilities is creating Open Social demo environments to help educate our prospects on the software’s capabilities, and how it could best serve their specific use case. Since I create landing pages every day, I felt like there was more I could be doing to style the landing pages. And I was right!
In this article, I will share 4 simple tips (and a few extras ?) to help you get the best out of the landing page section blocks and how to re-style a landing page on an Open Social platform. I would like to note that following these tips does not guarantee a beautiful landing page but they can be used to give an extra touch to help you highlight important information and attract your visitors’ attention.
Tip #1: Switch to Full HTML
By default, the majority of section blocks available on a landing page open up in Basic HTML like the Introduction Block. Basic HTML only allows you to make text bold, italic, bullet points, numbered points, add/remove a link and change paragraph style as can be seen on the image below. But often, you just need more than that.
In that case, you need to switch to Full HTML. By switching to Full HTML, you get many more options; you can align your text, insert images, create tables, page breakers, media and much more! You can always switch right underneath the text box:
Tip #2: Make your text colorful
One of Open Social’s benefits is that you do not need to have any developer or high-level technical knowledge. In general, anyone can learn how to work with our system and even a Site Manager does not need to worry about any technicalities. Having said that, knowing a bit of HTML can guarantee the most important information will stand out.
For example, I used to get frustrated that one cannot change the color of the text and the headings, it’s just black. You may have noticed the “Source” button on the Full HTML Text box. This allows you to view your text in HTML and you can enter pieces of code that even the full HTML editor does not allow you to do.
One of those things is making your text colorful. A normal sentence looks like this in HTML:
<p> This is a sentence. </p>
And to make it colorful, you need to insert style=”color:color code;”. For example:
<p style=”color:#ad45ef;”>This is a purple sentence.</p>
Warning: make sure that you don’t go crazy with the colors. If each heading, paragraph and link has a different color, it might do just the opposite of your intention. I recommend sticking to the colors of your platform to achieve a consistent look, perhaps all your headings can be the same as your primary color.
Tip #3: Expand your text to the full width of your page
I’ve heard this many times: “how can we make the introduction take the full width of the page?” I have just the right tip for you!
Normally, text in the Introduction section takes a small amount of the screen and makes the page look empty. On many pages it works well. For example, check out Community Talks: the home page uses the Introduction section to explain what the platform is for and how to use it and it fits the page. Unfortunately, it does not work as well on all pages.
Inserting your text into a Featured Content section allows you to expand your text to the full width of your page. This can be seen on Policy Kitchen and their home page: just like on Community Talks, the first paragraph is used to introduce the platform but on Policy Kitchen, it’s wider. This is because they used the Featured Content section. You can find more about the landing page sections here.
Extra tip: I use the text field instead of the title field to insert my title on the featured content, featured items and accordion sections. In the text field, you can make the text larger, colorful and centered to the page.
Tip #4: Impactful Call-to-Action buttons
Now, Open Social already gives you many opportunities to create internal and external links. It’s important to keep your users in mind when structuring your community; no one wants to land on a page with no links, a dead end. Your users are human, and they want to be guided on their journey in your community. But simple links in the text don’t always pop out and attract attention as we’d like them to.
If you’ve been following the previous tips, your text field will be set to Full HTML already. I don’t see enough platforms take advantage of this: you can make any link into a clickable button. First, you need to create a link in text (on image below it is the “Read more about us” text), then click on Style, and select the preferred color of your link. Default link is a white button with a grey border while primary and accent are the same as the primary and accent colors of your platform.
Extra tip: If you go to Source, you’ll notice your link looks like this:
<p><a class=”btn btn-default” href=”https://www.getopensocial.com/about;”>Read more about us</a></p>
At any time, you can overwrite the style. So instead of “btn btn-default”, you can also change it to “btn btn-secondary” to get the secondary color button.
That’s it for my 4 simple tips to help you style your landing page. I hope these will help you make your landing pages even better!
Did you already know these? I hope I didn’t waste too much of your time but I’d love to know if my tips were too simple for you and if there is anything that I can specifically help you with! Start a chat with me (in the bottom right corner) and share your feedback!
