Notifications
A client asked how to feature businesses on a page. This tutorial is one idea for creating a page via admin and then adding the content or business to feature via an HTML widget. You'll need to be logged in to your admin panel.
Things needed (read the below tutorials if you've not before):
Step One
Follow the tutorial for creating a page (have it open in another tab). Here are the details for a page named Featured Businesses. You can name it however you want. For this one though, we will feature businesses.
We edited the Page Url, Page Title and Page Name as shown below. Note that you can't see the "Save Changes" button in the screenshot below in the "Edit Page Info" but you'll need to also click that to save your changes.
With the above, we now have an easy url to find this page to view it at (site.com)/pages/featured-businesses . We can easily add this to the menus by following the menu tutorial linked above. It'll look like this:
The above has a font awesome icon chosen. You can choose any icon you want or not have one.
Step Two
Add an HTML Block or Rich Text block if you are not familiar with HTML. For our task we will use HTML as we can style it with custom CSS.
We put the Title as Featured Businesses, this does show to members. The Admin title is for our own reference and doesn't show to members.
As we wanted to make this look nice, we used some Bootstrap cards. You can do your own html code or use the following examples. Here's how ours looks, the code will follow after the screenshot.
There are two external links in the screenshot above, and the third one is to a business listing in the site. Here's the code we used:
<div class="card-group">
<div class="card">
<div class="card-header">
SocialEngine
</div>
<div class="card-body">
<p class="card-text">The best software for building communities. Customizable, awesome features, easy to
use!</p>
</div>
<div class="card-footer">
<a href="https://socialengine.com" class="btn btn-outline-primary">Visit SocialEngine</a>
</div>
</div>
<div class="card">
<div class="card-header">
BryZar Web Services
</div>
<div class="card-body">
<p class="card-text">BryZar Web Services is where Literary Social is hosted. Fully managed Cloud VPS and
Dedicated hosting. Awesome prices! Lots of free goodies too!! It is co-owned by Literary Social's
founder.</p>
</div>
<div class="card-footer">
<a href="https://www.bryzar.com/" class="btn btn-outline-primary">Visit BryZar Web Services</a>
</div>
</div>
<div class="card">
<div class="card-header">
SocialNetworking.Solutions
</div>
<div class="card-body">
<p class="card-text">Professional services for SocialEngine. Themes, plugins, support and customizations.
Sister company to SocialEngine.</p>
</div>
<div class="card-footer">
<a href="https://stdev.mamp/businesses/1/1/socialnetworkingsolutions" class="btn btn-outline-primary">View
SocialNetworking.Solutions' Page</a>
</div>
</div>
</div>
This is pretty basic and can be changed however you want it. You could use the Bootstrap card image and add an image to your block. 
So that code would be like this, using just the one card for SocialEngine:
<div class="card">
<img class="card-img-top" src="https://urltoimage/14a08c8feef9ce1d22ba03112e8cfd8f.png" alt="Card image cap">
<div class="card-header">
SocialEngine
</div>
<div class="card-body">
<p class="card-text">The best software for building communities. Customizable, awesome features, easy to
use!</p>
</div>
<div class="card-footer">
<a href="https://socialengine.com" class="btn btn-outline-primary">Visit SocialEngine</a>
</div>
</div>
Note the image code we added (and you would replace the image src url with your own):
