Sitefinity Templates: What is a Widget Template?

Widgets come up frequently on this blog. And for good reason—Sitefinity uses them to build in a huge assortment of capabilities.

Like webpages and blogs, widgets use templates. Widget Templates are a different animal though. A widget template acts in a similar manner to Page Templates. But it does things Page Templates don’t.

Definition of a Widget Template

A widget template is a set of rules for how to display a widget. All widgets must have a template for use in the Sitefinity CMS–both the default widgets included, and any custom widgets you create.

Examples of default widget templates are:

  • Content Block (Displays text/HTML)
  • Blog Posts (displays blog posts)
  • Navigation (displays a navigation menu)

Using Widget Templates in Sitefinity

Widget templates, like their Page counterparts, are accessible under Design in the main CMS top navigation. There’s a “Widget Templates” section just for them.sfinsider_widgetsmenu

Each template lays out how the widget looks & works on the webpage. Many govern how the site’s content works. So in using widget templates, you have control over what your content does.

Each default widget already has a template; nothing you need to do here. Think of these templates like a miniature page template, inside a normal page template.

Except for one thing: Widget templates can perform actions in response to a user’s actions.

When you open a page in the Page Editor, you’ll see a list of widgets down the right side.

Each time you drag a widget out onto a webpage, it’s displayed according to the template pre-assigned to that widget type. You can modify the widget once it’s in place. In some instances, you can modify the template from here (within the widget) as well. Other times though, you’ll want to customize the widget template first.

Customizing Widget Templates

Widgets have a little bit more customization capability than other Sitefinity elements. You can customize their templates, and many widgets include built-in customization.

Let’s take the Navigation widget for an example.

Editing the Navigation widget lets you customize how many navigation levels it presents, in what order, etc. Maybe you want three levels to show up, and the menu needs a blue color.

Modifying its widget template lets you change the navigation style, orientation, etc. Do you want the “About Us” link in navigation clickable, or not?

Customize the Navigation Widget – Sitefinity Docs

Widget template customization does require development work. You’re changing the backend code – the markup – of the template itself.
http://docs.sitefinity.com/for-developers-customize-widget-templates

You customize a widget template one of two ways:

  1. Modify the existing widget template.
  2. Create a new widget template file & upload it.

widgettemplatelist—List of widget templates, both default and custom

We often take the B approach for new custom widgets. It gives us control over every display aspect, without messing up other widgets in the process (a caveat common to modifying templates, as we’ve referenced in past Sitefinity Template posts).

If you’d like to see how to create & apply a new widget template file, here’s how: Use external widget template file – Sitefinity Docs

Caveats & Cautions

You can use HTML to customize widget templates. However, to really modify them you’ll need scripting skills. Sitefinity uses ASP.NET and JavaScript in its coding. If you want to do major modifications to widgets & their templates, hire a Sitefinity developer to do them. Saves a lot of time.

widgettemplatesamplecode—Sample of widget template code

Changing the only copy of a widget template WILL change how all widgets using that template on your site look. The same caution I’ve mentioned about Blog and Page templates. It’s still true here, so be careful what you change!
—-

Next up, let’s talk about responsive design templates. That’s a big one.

Do you use custom widgets in Sitefinity? What do they do? Please comment or email the URL. This is one area where you’re pretty much limited by creativity only, so I’d love to hear what you’ve built!

Sitefinity Templates: What is a Blog Template?

A blog can take one of two roles: part of a website, or a whole website. Now, Sitefinity can devote an entire website to a blog. But doing so limits the usability of its other web tools.

With Sitefinity, a blog works best as part of the website. www.domain.com/blog sort of thing. Great for SEO and for conversations with your audience.

Whatever form your blog takes, it’ll need a template. That’s what we’re talking about today.

Definition of a Blog Template

A Blog Template in Sitefinity acts just like a page template – mostly because it is. It’s a Page Template you’ve dedicated to use for a Blog.

You can use one template for all blogs, or one template for each blog.

Using Blog Templates in Sitefinity

Sitefinity allows the creation of multiple blogs within its backend. Most businesses only use one blog. But the functionality is there for as many as you want.

In our July 2015 post on creating blogs, we began the process by creating a “blog homepage”. This page must use a Page Template, like all other pages. The actual blog posts are organized like News items in their own section. (It’s under Content, below News.)

However, since this is for a blog, you can (and should) create a new Page Template, and designate it for the blog. What we usually do is take one of the existing Page Templates and modify it to display blog posts.

Here’s an example of a blog homepage template:

cromerblogtemplate

And how the “live” blog page looks:

cromerbloghome

Obviously the template looks “unfinished”. Open spaces where content will be. That’s how Sitefinity identifies areas where you can put content blocks. Like a list of blog posts.

Customizing Blog Templates

If you’re using a custom Page Template, additional modifications are easy. Since Page Templates are designed to display content according to the company’s brand, changing it to display blog posts is no big stretch.

Refer to the previous post, “Sitefinity Templates: What is a Page Template?”, for how to customize a page template. With one notable difference.

Blog List View vs. Blog Post View: Most blogs we’ve created for customers use the same template for the blog list view, and the blog post view. This results in the blog post displaying in a central block on the page. The same spot they saw the list of blog post titles, one click beforehand.

Here’s another example:

AIFABlogList

List of Blog Posts

AIFABlogPost

Individual Blog Post

Like you’d find in a WordPress blog, the blog post itself takes on the CSS styling of the blog homepage. You can of course customize styling within the post itself, using HTML and inline CSS. Otherwise, it will look the same as other content on the website.

Caveats & Cautions

If you do use a Page Template used by other pages, the blog will display any changes you make to that Page Template. For this reason we recommend using a separate template ONLY for the blog. No other pages. It can look almost identical to those other page templates…but it’s still separate.

Pay attention to mobile rendering with blogs. Since many blogs will display a list of recent posts alongside the post you’re reading, the template needs to decide where those lists go on mobile. Most websites will wrap post lists underneath a blog post on phones & tablets.

Sitefinity does have Responsive Design built into its latest versions. But you’ll still have to test. After all, blog posts appear differently than regular webpages. If someone wants to read your blog on an iPhone and it has an image which stretches off the phone screen…well, you’d rather fix that before anyone sees it, right?

Next up we’ll discuss Widget Templates.

Does your Sitefinity website run a blog? What’s the topic? Please comment with the URL; I’d love to take a look.

Sitefinity Templates: What is a Page Template?

In a previous post, we listed several common terms used in Sitefinity, and what they mean. One such term was “template”. The definition was as follows:

Template
A template is a collection of layout elements. It contains the structure of a webpage’s look and feel. In Sitefinity, you apply a template to a page after it’s been created. It then takes on the structure and characteristics you want to see. Content is entered after you set the page’s template. Templates are also used on widgets.

But there’s more to Sitefinity’s templates than this. In fact, this is the first post in a new Sitefinity Insider series focused on templates.

Today we’re starting with the most fundamental template: the Page Template.

Definition of a Page Template

We’ve used templates in different software applications for years now. Document templates in Word, spreadsheet templates in Excel, etc. A Page Template in Sitefinity does much the same thing for a webpage – it lays out a predefined page structure for you to fill in.

This is not the same as a theme, though. A theme is a collection of styles and colors which are applied to pages using a certain template. In Sitefinity, themes are part of Page Templates.

Let’s use this image to illustrate:

Mansion of Sitefinity

Page Templates are the walls of a house.
Themes are the colors used on the house’s walls.
Content, what people read on a webpage, is the furniture inside the house.

How Sitefinity Uses Page Templates

Page Templates provide the foundation for all of the pages on a website. Every time you create a page in Sitefinity – Home, Services, Product 1, Contact Us – it’s built on a Page Template.

You manage templates through Sitefinity’s Templates page. There’s no limit to the number of page templates you can create, but we recommend you create no more than 5 for your website.

Examples of Page templates we’ve built for customers are:

  • Home Pages
  • Standard Webpage (about 50 varieties!)
  • News Pages
  • Galleries (Photos, Videos, Portfolio Samples, etc.)

Page Template 101: What do I do with these?

Every page created in your website must use a template. Accordingly, you’ll need at least one before you start creating pages. Sitefinity does include several “basic” templates by default. You can use these, or customize new ones (see the next section for more on that).

When creating new pages on a website, you’re prompted to choose a Layout before you can enter content. Right here:

Page Template Work 01

In this case, I’ve selected a page template named “SecondLevel.” Or, if I want something else, I can click the Select Another Template button and see this popup window:

Page Template Work 02

Here you see 3 custom templates, and several “basic templates” below. Select one with a click.

We normally use a separate template for the Home page and other webpages on a website. Why? It’s easier to make the homepage unique. Also, if you want to modify the other webpages’ layout, you don’t hurt the Home page layout at the same time.

Customizing Page Templates

You don’t have to stick with the basic templates. No, you can customize the Page Templates within Sitefinity. Or use Page Templates others have created. Or make your own!

There are 3 ways to create a Page Template.

  1. Using the Sitefinity Template Builder
  2. Use a “Master Page” (the basis for page templates)
  3. Uploading a Custom Page Template

If you’d like to use a pre-made Page Template created by professional developers, here are some to try out: Themes and Templates – Sitefinity Marketplace

And of course, you can hire a Sitefinity developer to create custom page templates. We include custom templates in all of our customer website projects, but we’ve designed page templates separately too.

Caveats & Cautions

Since the Page Template is a foundational element site-wide, there are a few things to keep in mind when using them.

First and foremost – Changing the Page Template affects ALL pages which use it. If you want one page to have a different structure than the others, you must use a separate page template on that page.

This is why it’s good practice to review all the pages which use a Page Template, after you modify the template. Sometimes a certain page will interpret the change differently, and you may need to fix it.

Second – Make sure your Page Templates are responsive BEFORE building pages & adding content. Since the Page Template is the structure on which pages are created, you must make sure they render well on phones, tablets and desktops before anything else!

Otherwise your pages will become a jumble on mobile devices and you’ll lose development time fixing the templates.

For more details on Page Templates, visit Sitefinity’s documentation: Page Templates (Overview) – Sitefinity Documentation

Next up we’ll discuss the Blog Template.

If you know anyone who would benefit from receiving our Sitefinity CMS Blog posts, they can sign up on the right and receive them via email once a month.

How to Create & Manage Blogs Within Sitefinity CMS

Does your business have a blog yet? If not, why not?

These days the #1 most powerful tool businesses have is a website. And the most adaptive, effective type of website is the blog.

Blogs serve many purposes when used by businesses: To establish authority, two-way communication with an audience, speak on issues in real time, provide support, etc. Our customers use blogs for sharing articles from their email newsletters, conversations with segments of their own customer base, and even technical support. Blogs are immensely useful, on their own or as part of a larger website.

When using Sitefinity as your CMS, you have a built-in blog engine ready & waiting. Sitefinity’s Blogs module includes all the expected tools: comments function, post management, permissions, Categories & Tags, and even Sitefinity’s revision history.

Let’s go through how to set up a blog in Sitefinity CMS. And what to do with the blog once it’s in place.

How to Set Up a Blog in Sitefinity

*NOTE: These steps apply to Sitefinity 7.x. You should have no trouble following them in Sitefinity 6.x or 8.x, but there may be minor differences.

Part 1: Create the Blog Page

Sitefinity Content Menu

  1. Start by creating the blog’s page. In the Pages section of Sitefinity, click the New Page button.
  2. Enter a name. “XYZ Corp. Blog” or something similar.
  3. Under “Put this page…” click the option you want for the blog’s location. Many people put their blog at top level, which gives you a “www.domain.com/blog” kind of URL.
  4. Enter a title for the search engines. Make this one detailed – talk specifically about what you want readers to know about the blog. Good for SEO.
  5. Under the Template section, choose the template you want to use. The template you currently use for the rest of your site is fine, or you can create a custom blog template. (These take some web design and coding and will ideally match the look/feel of your website for consistent branding. Contact Us if you’d like help.)
  6. You can change other metadata & page options under the remaining sections. The defaults however, should work fine.
  7. Click the “Create and return to Pages” button at the bottom. This creates the page, but leaves it empty. Which is what we want – we’ll populate it with the Blog widget soon.

Part 2: Create the Blog

  1. Click the Content menu. In the dropdown list, click Blogs.
  2. You’ll see an empty page, prompting you to create a blog! Click the Create a Blog button.
  3. Enter the blog’s title. This can be the same title you used for the blog’s page.
  4. Under Default Page, click the Select a Page button. A window with a page list will appear. Navigate to the blog page you just created, select it and click Done.
  5. If you would like to set a different URL for the blogCreate a Blog Post Button than the blog’s page URL, then click the Change button under Blog URL. Otherwise, leave this alone.
  6. “Include in sitemap” should be checked by default. If not, check its box.
  7. If you click “Alternative Publishing (RSS)” you’ll see a checkbox for “RSS Feed”. I advise leaving this checked. RSS feeds may be a little bit old in terms of web technology, but they’re still commonly used in desktop & mobile apps to update blog trackers.
  8. Click the Create This Blog button.
  9. Poof! Your blog is created. You should see it in the Blogs list.
  10. Click the “Create a Post” link to add posts to the blog. Add as many as you like for now.
  11. But we have one more step to go before people can see the blog. We must connect the new blog to the blog page you created.

Part 3: Connect the Blog to the Blog’s Page

  1. Return to the Pages menu.
  2. Click the blog page to open it. You should see a blank page, with your page template applied.
  3. In the control bar along the right column, look in the Content menu. You should see a widget named “Blog Posts”.
  4. Drag the Blog Posts widget onto the page.
  5. Click Edit. The Blogs options window will appear.
  6. Since you have only the one blog created, it will show by default (“From all blogs” is the default option). You can change this to showing only one blog, List Settings for how the posts display, etc. Click Save when you’re finished.
  7. Click Publish. You’re done!

Repeat these steps to create as many blogs as you need. (Why would you want multiple blogs? We’ll come back to that.)

Managing Your Blog/Blogs

As you’ve seen already, adding blog posts later on is easy. Return to Content > Blogs, click the blog you want, and click “Create a Post”.

Blog posts are entered in Sitefinity just like you would page content. Type or paste in text, add images & links via the built-in editor, and voila.

However, there are a few additional things to do with a blog post. For one, do you want comments? Then make sure the “Allow Comments” box is checked under More Options. Do you want to assign blog posts to categories, or add tags? Use the options under Categories and Tags to do so.

NOTE: In some Sitefinity instances, I’ve noticed that the Preview function won’t always work properly for new blog posts. You’ll see a preview, but Sitefinity may “forget” the content you entered afterward. It’s not consistent, and we’ve reported it as a bug. Just making you aware.

Use of a Blog Page is only one method of showcasing your blog. Using Sitefinity, you can build blogs into your site at almost any point, and link to them from anywhere else! Homepage, sidebar – wherever you want to place the Blog Posts widget.

Here’s a brief example of a Blog feed from a homepage:

Cromer.com Blog Box

We configured the widget to feed the most recent post’s title and summary in the lower-right box. Click the button and you’re taken right to the blog.

When Would You Want to Set Up Multiple Blogs?

While many websites focus on one blog – or are nothing but one blog – there are times when having multiple blogs makes sense. Consider the following:

  1. Do you have multiple audiences you’re targeting?
  2. Do you want to establish a conversation on more than one topic?

If so, multiple blogs make sense for your business.

Let me point out our own blogs as examples. This blog is devoted entirely to the Sitefinity CMS. Our other blog, The Skype 4 Business Insider, is devoted to the Lync Server/Skype for Business Server communications platform.

Keeping them separate allows us to focus on each topic & talk with respective users. Many of you have posted great comments and sent emails on both blogs. Please continue to do so!

Our new website (coming soon!) will likely have 1 or 2 more blogs devoted to specific technical topics. If you’re on our subscriber list here, you’ll see announcements for them when they’re live. (Signup box is on the right. Hint hint.)

Do you currently use a blog on your business website? What’s it about? Please comment or email us. Even if it’s not running in Sitefinity, let’s hear about your blogs.

How to Connect Your Sitefinity Website to Google Analytics

You’ve set up a new website in Sitefinity. Pages are finished, content is in place. Ready for the Web.

Did you remember your analytics?

Sitefinity has an Analytics module built into it. This module allows you to connect that new site to an analytics solution, and collect data on what your users are looking at.

All of our Web Development customers receive Google Analytics integrated into their new Sitefinity website. It’s free, tracks huge amounts of user data, and produces detailed reports to help your marketing.

How do you set Google Analytics up in Sitefinity? It’s very easy. Here’s the how-to.

How to Connect a Website to Google Analytics, Step by Step

*IMPORTANT! These steps can only be followed after you have created Page Templates within Sitefinity CMS. Make those first.

  1. First, register for Google Analytics if you haven’t done so already. Click this link for instructions:
    Google Analytics – Register/Sign In
  2. Enter your site’s profile. Click the “Admin” tab.
  3. Click “Tracking Info” under the Property column (in the center).
    GAinsert1
  4. Click “Tracking Code”. You’ll see a new window with a block of code labeled “This is your tracking code.”
  5. Copy the entire code block. Save this in a text file if you want, but it’s not necessary. You’ll be pasting it into Sitefinity shortly.
  6. In another browser tab/window, log into Sitefinity’s Administration Dashboard.
  7. Click Design > Page Templates.
  8. Click on the first page template you’ll use on the website, to open it in Sitefinity Editor.
  9. Locate a content block near the bottom of the page. It does not have to be empty.
  10. In the Widgets menu on the right-hand side, click “Scripts and Styles” to open its menu.
  11. You should see a “Google Analytics” option.
    GAinsert2
  12. Click and drag “Google Analytics” into the block you’ve selected.
  13. You’ll see a line that says, “Set Google Analytics” in the new content block. Click it.
  14. A new window will open.
  15. Paste the Google Analytics tracking code into the new window.
    GAinsert3
  16. Click Save.
  17. Click the Publish button to save the template changes.
  18. Repeat these steps for any additional Page Templates you plan to use for your site.

Want to Add Another Analytics Engine to Sitefinity?

“What if I don’t want to use Google Analytics? I prefer Clicky/Piwik/etc.”

That’s fine. Most of the same steps still apply.

Since many other analytics solutions use JavaScript for their tracking scripts, the process to add them into Sitefinity is the same. With one alteration.

  1. Instead of using the “Google Analytics” option under “Scripts and Styles” in Step 10 above – you’ll use the “Java Script” option instead.
  2. Then, when you open the window to Set Java Script, click the “Write JavaScript” line at the top of the window.
  3. You’ll see a box where you can paste in the Analytics tracking script.
    GAinsert4
  4. You’ll also see three options under “Where to Include in HTML?” below it: In the Head Tag, Where the Widget is Dropped, and Before the Closing Body Tag.
    • Any of these options should work fine. Choose according to your site’s current design.
  5. Don’t forget to hit Publish when you’re done!

Google Analytics is Up and Running! Now What?

Sitefinity will now send its visitor data to Google Analytics (or the other analytics solution you prefer using).

*Important Note: This method works whether or not the Analytics module is activated in Sitefinity.

If the Analytics module IS active (You’ll see “Analytics” under the Marketing dropdown menu), please read Sitefinity’s documentation for assistance with it: Set Up Analytics – Telerik Sitefinity Documentation

Not sure how to make good use of Google Analytics data? These tutorials will help:
Get Started with Analytics – Google Analytics Help
50 Resources for Getting the Most Out of Google Analytics – KISSMetrics Blog

What kind of visitor data would you most like to gather from your audience? Length of time on the site? Which pages they read? Please comment or email with your thoughts. Both Google Analytics and Sitefinity can help you collect and make use of visitor data.

Common Terms Used in Sitefinity, and What They Mean

In every software platform you’ll find special terms. Some are well-recognized – for instance, “App” or “Download”.

Other have varying definitions depending on the system or industry. You’ll find some used in Sitefinity’s administrative backend. Some of these terms are commonly understood; some are not.

Today I’d like to explain the terms Sitefinity uses. Cover the definitions we as web developers use day to day.

Inspiration for this post came when we spoke to a new web development customer a few weeks ago. We were about 20 minutes into our meeting. I was describing Sitefinity’s capabilities when they stopped me and asked, “What’s a module?”

Hit me right away. They hadn’t encountered the term before, and I hadn’t explained it before using it. Of course I explained what a module was, and how it’s used in Sitefinity. They understood and we moved along.

But I made a mental note of that question. If one person didn’t understand what a Sitefinity Module is, there are others who don’t as well. This post aims to fix that.
2015-05-08_11-00-18

Definitions for Terms Used in Sitefinity CMS

Content
The word “content” is both universal and confusing. Why? Because it has multiple definitions, depending on who you ask. Some people consider only the text on a website as content. Others lump images & videos in as content too. Still others will define whole Web properties as “content”.

Sitefinity takes an overarching approach to content. I would define “Content” as, “The unique elements on your website which speak to your customers’ needs.”

This includes text (both on a single webpage and shared throughout the website), images, videos, documents, files, categories and tags.

Content Block
Last August, in the post How to Update Your Site Using the Sitefinity Desktop App, I defined a Content Block as:
“…A piece of content which you can add to multiple pages, news items, wherever the content serves your readers’ needs. Most often our customers will use them to create a piece of content, and then share that content across several pages.”

This most often is done with text – a testimonial, an ad. However content blocks can easily contain images, file download links, even videos.

News Item
A News Item is an individual news post. An announcement, a press release, etc. They’re organized in their own Library (see below for the Library definition) so you can quickly disperse them throughout the website. News Items may need to appear on the homepage, the News page, and other places. It’s much easier to control when & where news shows up this way.

Plus it’s easy to categorize & tag (again, see below) news items if they’re in their own Library.

Template
A template is a collection of layout elements. It contains the structure of a webpage’s look and feel. In Sitefinity, you apply a template to a page after it’s been created. It then takes on the structure and characteristics you want to see. Content is entered after you set the page’s template. Templates are also used on widgets.

Widget
A “widget” in Sitefinity displays content on a webpage. Telerik labels them like this: “Anything you want your page to do, you must do it with a widget.

Widgets are placed on the page while editing, and configured to display certain content. Sitefinity comes with several widgets built-in, like the Image Gallery and Video Gallery widgets.

More on Widgets at Sitefinity Documentation.

Module
The term “module” is central to much of Sitefinity’s administration. It’s a backend component in the CMS, from which users can create or modify certain types of content. There are two types of modules: built-in modules (those created by Telerik & installed by default in Sitefinity), and custom modules (modules you create using the Module Builder).

Built-in modules include Events, Forms, Lists, and Blogs.

We often create custom modules, or modify built-in modules, to meet our customers’ unique needs. For example, we modified the Events module to act as a registration tool for training classes.

More on Modules at Sitefinity Documentation.

Library
In Sitefinity, a Library is an organizational grouping in the CMS. Libraries exist by default for Images, Videos and Documents & Files. These are defaults only; you can create sub-libraries within them to organize your files (in fact we recommend all customers do this!).

Tag
Here’s a term with lots of definitions! Most of us may think of a tag in relation to a blog or social media – “this post was tagged as ‘headphones’ ” on a blog, or “#WowWhatanIdea” on Twitter.

In Sitefinity, tags aren’t just used for tagging blog posts (though you do have that option as well). You can also use tags to organize images, documents & other Libraries. We’ve used tags to sort which news items were displayed on a homepage too.

Category
In a blog, the Category is the organizational element used to group similar posts. The category name itself is often a keyword, usable for search.

In Sitefinity, a Category is used much the same way – but more broadly. Categories can sort blog posts, pages, search results & content blocks.

Categories and Tags work well together. Use a couple Categories to organize groups of content, then identify different content elements within those categories using Tags.

Classifications
Sitefinity uses Classifications to organize content items. A Tag is considered a Classification. So is a Category.

There are two main types of Classifications: Hierarchical (multiple levels of grouping) and Simple (one flat grouping level). Tags are Simple Classifications; Categories are Hierarchical.

You can also create custom Classifications within Sitefinity. They’re great for populating drop-down lists, organizing blogs…however you want your content presented to readers.

Bookmark This Post for Future Sitefinity Reference

There’s our list of definitions! Hope this proves a useful reference for all Sitefinity users and those interested in moving their sites to Sitefinity.

Have you run across a term in your CMS (Sitefinity or otherwise) which wasn’t well-defined? Please comment or email with the term. Let’s see what we can discover.

Sitefinity 8.0 is Here – New Features to Expect

On March 25, Telerik announced the Version 8.0 Release of Sitefinity CMS.

marketing-dashboardTelerikDECImage courtesy of Telerik.com

You can see the overview page at: http://www.sitefinity.com/product/see-also/what%27s-new

What does Sitefinity 8.0 have to offer that’s new & improved? Well, that’s why we’re here.

Many of its improvements are developer-focused. Meaning that the new/updated tools help a web developer build a Sitefinity website more efficiently. Which translates into a faster development schedule & better costs for you.

The rest are features useful to business users & managers. Let’s review those right now.

Digital Experience Cloud

Billed as a “marketing command center,” the Digital Experience Cloud helps you understand & optimize customers’ journeys through your websites. It supplies you with data on each customer’s activity, and connects it to marketing goals you set (e.g., funneling leads into a sales pipeline).

Using this “digital marketing platform” you can personalize the customer’s journey and measure the results of your marketing work.

We’ll bring you more details about the Digital Experience Cloud in a future post.

Pages Precompilation Tool

This tool enables precompilation of Sitefinity pages before deploying a site to production (what we call “go live”). It was introduced in Sitefinity 7.3 and updated in 8.0.

What this “precompilation” means is that loading webpages puts less stress on the server’s CPU. It also skips a “warm-up phase” when going live. Essentially it’s a timesaver for you and stress relief for your web server.

Improvements to Multisite

A “Multisite” is an instance of Sitefinity CMS which contains multiple inter-related websites. I mentioned one of our clients’ multisites in the “How to Implement Silo Search” post.

8.0 adds some improvements to Multisite:

  • Applying different taxonomies (Categories, Tags, and so on) per site
  • Selecting the site and language when creating a workflow
  • More functionality added to Site Sync (perform Site Sync for selected sites’ content only)

New/Enhanced Widgets

With nearly every release, Telerik adds more widgets (or more functionality to existing widgets). 8.0 is no different.

Social Share – Drop it on a page & choose which social media network it will display: Facebook, Twitter, LinkedIn, Tumblr, StumbleUpon, and more.

Login/Logout Button – Gives users the ability to login/logout. When logged in, information about their account is displayed (first & last name, avatar icon).

Registration, Profile, Account Activation – Together, these three widgets enable the setup of a members-only section on a website. You have the ability to register an account, create a profile, and activate the account via confirmation email.

The Enhancements lists is much longer. Here are the major changes:

  1. Content Block widget – Improvements to the Image & Hyperlink Managers.
  2. Navigation widget – External URLs in the navigation? Handy!
  3. News widget – More sorting options to organize your news announcements.
  4. Page selector – Now the Page selector will indicate page status by label (is the page unpublished or a draft?).
  5. Libraries (Images, Documents & Files, Videos) – Fixes for inability to delete a Library from its Edit Properties menu, and to relocate a Library even if it’s been relocated once before.
  6. Fixes for Pages, Media, Multisite, Dynamic Content, Events and Page Templates

What All These Updates Mean for Businesses

From our experience, Telerik has a two-tier upgrade schedule for Sitefinity CMS.

  • Incremental Updates (7.1, 7.2, 7.3…) add fixes and minor performance tweaks. Might add a new feature for developer use.
  • New Versions (6.0, 7.0, 8.0…) make major changes to the CMS’ structure and capabilities.

8.0 is definitely a major change to Sitefinity. It gives businesses whole new ways to create experiences for their customers, and to incorporate their responses into ever-sharper marketing campaigns.

We have just started our first Sitefinity 8.0 project. We’ll be sure to report on anything we come across that can help our Sitefinity customers leverage their website investments.

If you’re interested in trying out 8.0 yourself, here’s a demo link: http://www.sitefinity.com/try-now/sign-up-for-demo

More questions? Please leave a comment or email us at this link.

How to Import Content from Word to Sitefinity (Without Issues)

How should you upload content into Sitefinity?

Well, you can type it directly onto a page (or in a content block).
You can copy/paste plain text in, and then dress it up with HTML commands.
Or you can copy/paste text in from Word.

The last one is pretty common.  Word is, after all, extremely common in offices.
However, importing content from Word directly into Sitefinity—especially with older versions of Sitefinity—is not the best idea.

Why not?

Because with versions before 7.x, your pasted content will look exactly like it does in Word.

Which means whatever styling, fonts, colors, etc. your website has…they won’t show up. It will look like you dropped a Word document right in the middle of your site. Chunky text, the wrong colors, and so on. Your content becomes an eyesore.

Why This Happens: Word Formatting Sneaks into the Copy/Paste

Word uses its own formatting language “behind the scenes.” It’s based on the XML standard, and it applies whenever you select a Style from the Ribbon. “Normal”, for instance, often defaults to Calibri font, Size 11 text, Black color.

When you paste text from Word into another application—like Sitefinity’s Editor—this formatting comes with it.

See, Sitefinity tries to style content you enter according to one of two standards:

  1. CSS, the overall styling of the website.
  2. The formatting elements you enter in the Editor.

Formatting elements will typically override the website’s CSS. But this isn’t always a good thing. Styling is there for a reason: to make the overall site look consistent. If you break it with carried-over Word formatting, your site becomes less effective. (And ugly.)

What do we do? Best practice is to only upload clean text into Sitefinity. So we need some ways to clean your Word-formatted text, don’t we?

2 Ways to Import Clean Text from Word into Sitefinity

A. There is a “Strip Word Formatting” option in Sitefinity 7.x. You find it by opening the Page Editor.
Click the “More Formatting Options” button (top right). Locate the Format Stripper. It looks like this:

Strip Word Formatting

Click the arrow next to it, and select “Strip Word Formatting.”

This should clean out Word’s sneaky in-the-background formatting. However, it doesn’t always work perfectly. That’s not really Sitefinity’s fault; there’s just so much it can strip out before it finishes pasting.

If you still see Word-style formatting imposing itself on your content, switch to HTML Mode in the Editor and remove the unwelcome code. (Fair warning, there might be a LOT of it!)

B. You can also strip the Word formatting before you paste any content into Sitefinity. (This is what I do.)

You have two methods for accomplishing this:
–Paste into the HTML Mode window in Sitefinity’s Page Editor, or
–Use a stripping utility.

What I do is use a stripping utility – Notepad++. Pasting any Word text into a basic notepad utility, like Windows Notepad or Notepad++, automatically removes all formatting elements. You’re left with plain text. Which you can then paste into the Page Editor.

The same thing happens when you paste directly into the HTML Mode window in Sitefinity. Just plain text, nice and clean.

I take the extra step of pasting into Notepad++ because it lets me see if there’s any weird spacing or unnecessary symbols before I switch to Sitefinity. Plus I can enter HTML code around the text if I want to test out how the HTML will look.

Telerik has also provided a stripping utility. It’s on their Demos site:
Cleaning Word Formatting in WYSIWYG Editor for ASP.NET – TelerikUI

It gives you two windows: one for automatically stripping out Word formatting, the other for doing so manually. This has the added bonus of seeing what your content will look like in the Page Editor, without opening the Page Editor. Useful for testing HTML or playing with CSS styling before you upload anything to your site.

Cleaning Text is an Extra Step, But It Winds up Saving You Time

When building (or rebuilding) a website, you’ll need a lot of time to populate the content. Battling with leftover formatting can drain away hours…hours you really can’t afford to lose during population.

Stripping out Word formatting before you upload content into Sitefinity may be an extra step. But trust me, it won’t take nearly as much time as skipping it would!

Do your Sitefinity friends a favor. Forward this post to them before they start building their next website. It will save them time!

How to Implement Silo Search in Sitefinity CMS – and How it Makes Everyone’s Site Visit Easier

A healthcare customer of ours (we’ll call them X Pharma) runs half a dozen websites for all of its products & services. They asked for help rebuilding all the sites in a single Sitefinity CMS – what’s called a “multi-site instance.” (Yes, Sitefinity can run multiple websites all at once—from the same interface!)

We got to work. But while we were busy rebuilding sites, X Pharma had an additional request. Could we put silo search in too?

What is Silo Search?

2015-02-17_12-27-16In terms of content and websites, a “silo” is a collection of content dedicated to a specific purpose. Think of a silo like a grain storage tower (which is where the term ‘silo’ comes from). In one tower you have corn, another you have wheat, etc.

When you perform a search on a website, the results normally come from all its sections: pages, blog posts, news items, and so on.

Silo Search narrows the focus. When you a Silo Search, you see results only from the specific silo container – designated groups of content from 1 website, in this case.

Why did X Pharma want this? Because their visitors included both healthcare professionals and patients. Some of their websites contain content meant only for healthcare workers. Other content is meant for patients.

By putting their content in respective silos, they can prevent a patient from seeing information not intended for (and thus confusing) to them.

Silo Search is popular among many privacy-minded organizations for this reason. Other healthcare companies, local governments, businesses who must maintain confidential records for customers, etc.

The Challenge: Implement Silo Search for All 6 Sites Using Custom Code

Here’s where we hit the snag. See, Sitefinity’s normal Search function does separate its results out by site. If you do a search on Site1.com, it will show you results from Site1.com. Even if it’s running half a dozen other websites in the background.

But the Search function doesn’t have the ability to “silo” its results – it can’t limit its search to certain groups of pages within that one site. In other words, if it finds some relevant content in both the HealthCare Professionals section and the Patients section, it will display both results.

This is why X Pharma asked us for help. They didn’t want to confuse visitors with content not relevant to them. Not to mention potentially violating patients’ privacy!

We had to develop a custom method to make Silo Search work. Here’s how we did it.

Coding a Solution: Redirecting the Search Command

Here’s where it gets technical. I’ll explain the steps as clearly as possible.

In order to accomplish a Silo Search, first you need a silo. In Sitefinity, you do this by creating search indexes. An index here is much like one of Google or Bing’s search indexes – it’s a list of pages.

Now, we have to store the available content in the right index. Sitefinity would do a good job of creating indexes, but data privacy mandates that we develop the sharpest possible organization.

What we did was code some instructions for Sitefinity. Essentially we told it how to recognize where we want a page to go, based on certain criteria. For example, is the page a child of the Patients page group? The Healthcare Professionals page group? Or is it part of the mobile website section of pages?

Which index the page goes into is based 100% on that criteria. Then it’s able to return specific results for, say, the Healthcare Professionals silo.

Next we built a custom Page Inbound Pipe. This is an event handler for publishing events. It’s invoked when you create a new page in Sitefinity, or change an existing page.

Why customize a page pipe? It connects to the instructions from before. Customizing the page pipe allowed us to “pipe” pages into their proper indexes, based on the aforementioned criteria.

This new Page Inbound Pipe was configured to access the separated search indexes, using the instructions. Think of this like putting in a new pipe fitting under the sink. Instead of leading down to one big pipe, the new fitting splits water between two smaller pipes. Depending on where you tell it, water only flows into one of the pipes.

But in order to make the pipe fitting do that, it needs the instructions. This part has to be done by a developer, because it involves creating specific code & adding it into Sitefinity.

Our developer wrote a custom C# class which inherits the base class of the default Page Inbound Pipe into the custom Pipe. That means it can do anything the original Page Inbound Pipe can do. Then, he wrote in an override of the “PushData” method. This event is called whenever a publishing event occurs: Create a Page, Edit a Page, Search the site…

With this method in place, the custom Inbound Pipe can do something new: It scans the URL of the page from which the search was entered, and determines which criteria the page must be routed toward. When it knows that, it knows which index – which silo – it should place the page reference in.

Result: Silo Search Every Time a Patient or Healthcare Pro Accesses the Site

With this Silo Search function in place, X Pharma now knows their site visitors will see content relevant to them when they click that Search box.

This is what happens when they type in a search term and click “Search”:

  • Depending on which section of the site the user is on, the search form tells the server which index to return results from.
  • The user enters the search term they would like to search for.
  • Also depending on which section of the site they’re on, the page pipe routes the search query through the selected index. Are they on pages that have been indexed in the Healthcare Professionals section? Then the pipe returns results from the Healthcare Professionals index.
  • The same applies to the Patients, or Mobile sections of the website that have been added to the search silos.
  • If the search coming from a page not in the Healthcare Professionals or Patients sections? Then the pipe returns results from the default index for that site.

Boom, search results show up. Relevant to the search term and where the visitor is.

The process of a Silo Search working happens behind the scenes. Visitors don’t see any of this happening. But the results they get come back tailored to the kind of content they want to see.

Silo Search doesn’t have to be implemented to protect customer privacy. You can also use it to avoid confusing visitors with too many search results. Or use silos to restrict information behind a members’ section. And plenty more.

If you implemented Silo Search on your website, what would be its purpose? Leave a comment or email with your ideas! If you have questions about using Silo Search, please leave those too.

Sitefinity’s Built-In HTML5 Video Player: Play Your Business’ Video Files and YouTube Videos on Any Device

HTML5 is the latest version of the HTML language – the foundation of the Web. It’s designed to make websites and apps run smooth and clean on just about every platform out there: Windows, Mac, Linux, iOS, Android, etc.

One particular value to HTML5 is video rendering. In the past, video sites like YouTube used an extra piece of software called Flash to run their videos. (YouTube has recently added an HTML5 version of its player.)

What’s this have to do with Sitefinity? Well, the team at Telerik built something into the latest Sitefinity CMS: a dedicated HTML5 video player.

The Sitefinity 7.0 Video Player Basics

Officially, it’s called the “Telerik RadMedia Player”. You place it on a webpage by dragging & dropping the “Video” widget.

Video Widget – Telerik Documentation

Sitefinity has had this widget for a while. It’s only in Version 7.x that we’ve had the HTML5 version of the video player.

It supports playing the following video formats:

  • .WEBM
  • .OGV
  • .MP4

The .AVI and .MOV formats are not supported. Try to upload them and you’ll receive an error. If you do have AVI or MOV videos you want to use in your Sitefinity website, you can do one of two things. Convert the video file into .MP4 format using a software tool or web app, or upload the file to YouTube.

We’ve talked about embedding videos from YouTube on a webpage before. But this new video player gives us a better way.

An Alternative to YouTube Embedding

The new video player gives two major advantages over past versions:

1. Since it’s in HTML5, the load time is faster, and its display is cleaner.
2. The new player can play videos hosted within Sitefinity–and play videos directly off of YouTube!

Now we’re talking. This a big advantage over YouTube embedding – it means you have much finer control over how the video displays on your site.

The YouTube embedding code is helpful – lets you put videos just about anywhere. But it tends to break certain page layouts, especially on mobile devices. Then it just looks ugly.

HTML5 is specifically designed to avoid that. Using Sitefinity’s player, you control how big a video is, and how well it blends into a page.

So how do we use this fancy new HTML5 video player? If you’re running Sitefinity CMS 7.0 or higher, this is how.

Part 1: Upload a Video in Sitefinity, or to YouTube

Just as straightforward as it sounds. Either upload a video to your YouTube channel, or navigate to the “Videos” library under Sitefinity’s Content menu. Both locations make it easy to upload your video files. (Remember the format limitations listed above.)

Refer to these posts if you need any help:
http://sitefinityinsider.com/how-to-post-videos-to-your-sitefinity-website-part-1-of-2/
http://sitefinityinsider.com/post-videos-sitefinity-website-part-2-2/youtubevideowidget

Part 2: Insert the Video Widget

To post the video you’ve uploaded to a webpage:

  1. Open the webpage in Sitefinity for editing.
  2. Drag the “Video” control to the location you want it on the page.
  3. Click “Edit” to open the widget for editing.
  4. For videos uploaded into Sitefinity:
    • Click “Select Video”. Click the icon of the video you’ve just uploaded in the next window.
    • Click Done. You’ll see the video load in the original window.
    • Click Save.
  5. For videos uploaded to YouTube:
    • In the lower-right corner, click the “Advanced” button.
    • If you want to play a single YouTube video, in YouTubeVideoURL, enter the URL of the video.
    • If you want to play a YouTube playlist (yes, you can even load entire YouTube playlists!), in YouTubePlaylistID, enter the YouTube playlist ID.
    • Click Save.
  6. At the top of the page editor window, click Preview to test your video. (Videos will not load within the page editor – this is disabled, since it slows down the page.)

Part 3: Configure the Video Player Options

This part is optional. You do not have to configure the video; it will obey standards already set in place on your site. If you do want to exercise more control though, this is what you do.youtubevideowidget2

  1. Click “Edit” on the Video widget. Click the “Advanced” button again. The other fields you see? They control things…many things! Options like:
    • AutoPlay: If you want the video to play automatically when the page is loaded, change the value to “True”.
    • FullScreen: Loads the video in full-screen if set to “True”.
    • Height: Changes the video player’s default height.
    • Width: Changes the video player’s default width.
    • StartTime: Changes the start time at which the player starts playing. Value is in seconds, so you’d enter “10” to start at 10 seconds in.
    • StartVolume: Is your video too loud/too quiet? Change this number to change its starting volume (measured in percent, from 1 to 100).
    • EnableSocialShare: Displays social sharing buttons, to let visitors share your video on Facebook, Twitter, etc. True/False value. (If you want to configure which buttons show up, use this resource: Social Sharing.)
    • And more.
  2. Click Save.
  3. At the top of the page editor window, click Preview to test your video.

A demo video and features list for the HTML5 video player are located here:
Telerik RadMedia Player – Demo

All that capability, built into one widget in the Sitefinity CMS. Makes adding videos to pages both fast and flexible.

And since it uses HTML5, your videos show up the same on an iPhone as they would on your laptop.

What are your thoughts? Would you host videos directly on your site, if your site had a video player with all the power of YouTube – and more?