How to Use Sitefinity’s Content Editor for Website Updates

How do you edit the text on your website?

If you use a CMS, you’ll open a certain page & use an editor. It’s the part of the CMS that lets you type or paste in text.

Sitefinity has such an editor too. But it’s much more than a place where you enter text.

Sitefinity’s built-in webpage editor has a few names – Content Editor, RAD Editor, Text Editor. We’ll use Content Editor today, while we take a dive into its functions. You’ll find there’s a lot of power contained in this one little CMS component.

What is the Content Editor?

The Content Editor is a component that facilitates updates for webpages, news items, blog items and shared content.

Many content management systems employ a text editor for making website updates. Sitefinity’s editor is unique though, for a couple reasons.

  1. The editor is actually a complete “control” – like a mini-app – which received dedicated development alongside Sitefinity.
  2. It was modeled after Microsoft Word, to make its use both powerful and intuitive.

How You Use the Content Editor

Opening the Content Editor only takes one step.

Click “Edit” on any content block on a webpage, OR
In the News/Blogs/Shared Content library, click the item you want to edit.

You’ll see this Editor box pop up.

Sitefinity Content Editor

From here, you can type in text, paste text in, add images/video, and style the content how you want.

The editor box may look slightly different, depending on where you are in Sitefinity. For instance, the Content Editor on a webpage may look slightly different than the Content Editor for a blog post.

You’ll note that the editor in this image only has 1 line of commands and a “More formatting options” button above the text field. That’s the default setting in Sitefinity. At any point you can click the button to reveal the remaining buttons.

Quite a few buttons, in fact! So many I need to list all their names.

From left to right, these are the buttons on the Content Editor.

Content Editor Commands

LINE 1: Bold, Italic, Numbered List, Bullet List, Add Link, Remove Link, Add Image, AJAX Spellchecker, Paste from Word, Paragraph Style (Dropdown)

LINE 2: Align Left, Align Right, Align Center, Justify, Indent, Outdent, Font Name, Font Size, Foreground Color, Background Color

LINE 3: Media Manager, Flash Manager, Document Manager, New Paragraph, Insert Table, Insert Symbol, Horizontal Rule, Superscript, Subscript, Format Stripper, Find and Replace, Print, Toggle Full Screen Mode.

As I said earlier, Telerik designed the Content Editor to work like the toolbars from Microsoft Word.

Most of Line 1 you’d use for text formatting. Line 2 helps you organize your content on the page.

A few of the Line 3 buttons need a little more explanation.

  • Media Manager – This button lets you add a video into content. Only use it you want to surround a small video with content. Any other time you want to put a video on a page, use the Video widget instead.
  • Flash Manager – Lets you add Flash content to the page.
  • Document Manager – This button you’ll use if you want to add a file, such as a PDF, into the content.

More on the Content Editor’s workings: Content Editor Section on Sitefinity Docs

Design/HTML Modes

Above the Editor’s Save button, we have “Design” and “HTML.” Design is selected by default. Hmmm. What are these for?

These are the Editor’s two modes – Design Mode and HTML Mode.

Best way to explain these is:
Design Mode – What You See is What You Get (WYSIWYG)
HTML Mode – Raw HTML Code

Design Mode acts like Word. If you underline some text, you’ll immediately see it underlined.
Select Heading 3, and the text changes before your eyes.

No surprise most of our customers only work in Design Mode.

(One catch though – look at the button names in Line 1 again. See “Paste from Word?” If you copy text within Word, and want to paste it into Sitefinity’s Content Editor, you must use this button. Don’t just paste the text in with a Ctrl-V. If you do, all the Word formatting gets pasted in too, which can seriously mess up how the text looks.)

If you’re comfortable working with HTML, HTML mode lets you do so. You put [strong] tags around some text, it will bold the text. But you won’t see the change until you click over to Design Mode, or click Save.

That’s an extra step, but trust me, having HTML right there helps! Countless times I’ve had to fix a broken webpage by going into HTML Mode and finding where some text didn’t get formatted properly.

Modifying the Content Editor

Can you modify the Content Editor? Yes, but you probably don’t need to.

Like nearly every aspect of Sitefinity, the Content Editor is customizable. However, most customization requests we’ve heard didn’t require any modifications.

Branding your website? The Content Editor only shows up in the backend; no site visitor will ever see it. No need to brand it.

Want a certain functionality? It may already exist elsewhere in Sitefinity–another widget, for instance. If it doesn’t, you can make a custom control more easily than modifying Content Editor.

Caution: Stylesheets May Override Content Formatting

There is one aspect of web design you won’t see when using the Content Editor: stylesheets.

If your website uses global stylesheets, you won’t see their styles in the Content editor. They take effect once you click Save. You should see the content styled on the webpage afterward.

Keep stylesheets in mind when editing content! If you format some text one way, but the global stylesheet wants to format it differently, the global stylesheet’s styles will override your formatting.

Here’s how you can check this. Use this method to test your content before you publish any changes too.

  1. When you’re done entering content, click the Save button. The Content Editor will close, returning you to the webpage.
  2. Look at how your content appears (“renders”) on the page. If it doesn’t look quite right, re-open Content Editor by clicking Edit & making your changes.
  3. When the content does look right, click the Publish button at the top to publish your newly-updated page.

As I said before, many of our customers prefer to work in Design Mode. I like working in HTML Mode because I can change formatting fast.

Either way is fine! Sitefinity’s Content Editor lets you update your website how you like.

What do you like about Sitefinity’s Content Editor? What frustrates you about it? Please comment or email your responses.

Until the next post!

How to Find and Use Themes in Sitefinity

We start off 2016 with a question from a customer!

The question was:

“We need a new Sitefinity website fast. What can we do to speed up the normal design and development process?”

The first idea that came to mind was, “Work with Sitefinity experts who can rapidly design and build your Sitefinity instance and help you populate it.”

The next idea was, “Try a Sitefinity Theme.”

It’s the second idea we’ll discuss in today’s Sitefinity Insider post.

A Refresher on Themes

A theme provides the look/feel and page templates for a Sitefinity website.

Theme Overview – Sitefinity Documentation

Theme elements include images, layout elements like icons and bars, and stylesheets. Themes determine things like:

  1. What colors you’ll use
  2. The styling for page layouts
  3. Page element styles & positions (headlines, navigation bars, etc.)
  4. How images are displayed
  5. How lines, boxes, etc. are displayed
  6. What display changes to make when viewed on a phone or tablet (Responsive Design). This is shared with the templates as well; you may have phone-specific stylesheets, for example.

Where Do I Get a Theme?

Sitefinity does include a basic theme by default. But it is very basic. That way you can create your own look for your own site.

You can get themes two ways: Download pre-existing themes or have a custom one designed for you.

With a pre-existing Sitefinity theme, you will reduce your web design costs by a great deal and speed up your development process. The drawback is that in most cases, it’s fairly evident that it’s a template site. Plus the themes have varying degrees of responsive design for mobile and tablets so you may spend additional money making your site responsive.

Here are some websites where you can review and download Sitefinity themes:

Tornado Applications – Sitefinity Templates
Sitefinity Marketplace: Themes and Templates
Sitefinity-Templates.com

Some themes are free; others you’ll pay for. We recommend the paid themes, as they’re generally better quality and you can get some support from the maker.

Please Note: Sitefinity’s continuous advancement can render some themes out-of-date. You should check a theme’s compatibility with your version of Sitefinity, and the date of its last update, before you choose it. Otherwise the theme may cause trouble in building the site.

How to Apply a Theme

Once you have a theme downloaded or created, it’s rather easy to apply it to your website.

Step 1: Register the Theme Within Your Sitefinity BackendWhere to Put the Theme

  1. Place your theme’s files inside any of Sitefinity’s “App_Themes” folders. For example: “/App_Data/Sitefinity/WebsiteTemplates/YourTemplate/App_Themes/Theme1”. You can do this via FTP or within Sitefinity, under Administration/File Manager.
  2. If you haven’t already, log into Sitefinity’s backend (http://www.yourwebsite.com/sitefinity).
  3. In the main menu, click Administration/Settings.
  4. Click “Advanced” on the right of the page name. The full Settings page will appear.
  5. In the left menu, expand the “Appearance” section.
  6. Click “Frontend Themes”.
  7. Click the “Create New” button on the right. A form will appear.
  8. In the “Name” field, enter a name for the theme. Whatever name will identify it to you works best.
  9. In the “Path” field, enter the path to your theme we made in Step 1 (~/App_Data/Sitefinity/WebsiteTemplates/YourTemplate/App_Themes/Theme1). Don’t forget the tilde (~) at the beginning.
  10. Click “Save Changes” to finish.

Register a Theme – Sitefinity Documentation

One theme registered! Now Sitefinity knows it’s there. Next, you’ll apply this theme to the Page Templates you’re using (or plan to use).

Step 2: Apply the Theme to Page TemplatesApply Theme to Template

  1. On the main menu, click Design/Page Templates.
  2. Click the name of the template to which you want to apply the theme.
  3. In the upper-right corner, click the “Theme” button.
  4. You’ll see a dropdown menu. In the menu, select the new theme.
  5. Click “Publish” to save the changes. The new theme will now apply to all pages using this template.

Apply a Theme – Sitefinity Documentation

Save Time on a New Sitefinity Website with a Theme

Here are two examples of customers’ websites built using a Sitefinity theme.

drugrehabhome
Support Systems Homes Drug Rehabilitation Programs

sttheresaparentsclubhome
St. Theresa School Parents’ Club

Again, if you want a truly unique-to-you website, you’ll want a Sitefinity design and development team to create a custom theme for you. Some businesses need a custom website; others can get away with a pre-existing theme—it’s all industry and company specific.

I asked last month, but it’s worth repeating: Is there anything you’d like to read about on the Sitefinity Insider for 2016? If so, please leave a comment or email us.

Join us back here next month for more Sitefinity how-to!

Sitefinity Templates: What is a Responsive Design Template?

The last post of 2015 is the last post in our “Sitefinity Templates” series.

At the bottom of the Design menu in Sitefinity, you’ll find “Responsive & Mobile Design”. This section contains the Responsive Design templates.

Responsive and Mobile Design

By now you’ve heard of Responsive Design. (If not, here’s an Overview of Responsive Design at Sitefinity.com.) Without it, we either have to design separate mobile-only versions of our websites, or display the exact same website on every device out there.

Which usually results in a “squished” website on your phone, right?

So today we’re talking about what the Responsive Design Template does in Sitefinity. And how you make good use of it. Onward!

Definition of a Responsive Design Template

The Responsive Design Template is a little different from the other templates in our series. It’s defined as a group of rules for how to display a website when viewed on a certain device, or device category.

99% of the time, the template is used to alter (or “transform” in Sitefinity lingo) websites for smartphone screens or tablet screens. Almost all smartphones & tablets can resize a website to fit their screens (at least partially) by default. What a Responsive Design template does is help you determine exactly how you want those devices to display your site. You’re not relying on the device to do it for you.

Using Responsive Design Templates in Sitefinity

You don’t apply Responsive Design templates to individual pages. They apply to all pages which use the Page Templates you select. Responsive Design sits like a layer of frosting on top, giving an extra set of guidelines.

In this example, a Responsive Design template is applied to two of the website’s Page Templates.

Templates Using Responsive Design

Any pages which use “Home” and “SecondLevel” here, also use the Responsive Design template when loading.

What elements are affected by Responsive Design? Here’s a list.

  • What type of device
  • Whether to transform your website’s layout, or direct visitors to a mobile version of your site (no longer recommended)
  • Do you use a device-specific CSS stylesheet, or one universal stylesheet?
  • How to transform the website’s elements (columns, rows, images)
  • How to transform the navigation menus

This screenshot from a recent website project shows some of the elements.

Responsive Design Elements

NOTE: To use Responsive Design Templates on Sitefinity, you must install the Responsive & Mobile Design module. Refer to the Sitefinity Docs page on Activate and Deactivate Modules for help in doing so.

Customizing Responsive Design Templates

Since Responsive Design templates are groups of rules, customizing them involves changing those rules.

For example – Say your website has 3 columns laid out side-by-side. (Many news sites use this layout.) How do you want them to display on a phone? Should the columns stay side-by-side? Should they stack vertically? Should they collapse into small boxes with scrollbars?

Up to you.

You can do this within Sitefinity itself, or through extra stylesheets added in. We’ve done both in the past year. Using extra stylesheets gives you more flexibility to customize placement of elements. But it’s a little tricky to make those customizations work within Sitefinity’s framework smoothly.

Think of it like someone taking a test, using two different instruction manuals. If you have conflicting instructions in each manual, your test-taker is bound to mess up an answer or two!

Caveats & Cautions

Responsive Design is not optional. Not anymore. No matter your business or organization, you must employ some form of Responsive Design. In Sitefinity, that’s fairly simple. In other CMS it may not be.

Design for mobile-first. Designing for a laptop-sized screen, and then trying to compress that design into a mobile screen, often doesn’t work. The site looks cramped, choppy, and may violate critical user experience standards. It’s much easier to design for a mobile screen first, and then expand it to larger screen sizes. (Cleaner, too!)

Testing is REQUIRED! When using responsive design, you must test how the website looks on a range of mobile devices. Repeatedly. It’s the only way to make sure your templates work as desired. Trust me, at the start, they won’t!

If you have some phones & tablets available to view the website during development, great. If not, use the QuirkTools Screenfly Tool. It can emulate most phone/tablet screen sizes, and it’s free.

Consider the future of your website. Mobile took over as the #1 Web browsing platform worldwide in 2014. Your website needs to work as well (if not better) on mobile than on a desktop.

That’s it! The end of our “Sitefinity Templates” series. If you liked it or plan to use it for future reference, please send us a comment with your thoughts.

And since this is December – What topics would you like to see the Sitefinity Insider cover in 2016? Please comment or email your ideas.

Hope everyone has a Happy Holiday! We’ll see you back here in January. (Don’t forget to subscribe! We wouldn’t want you to accidentally skip over this blog when making New Year’s Resolutions.)

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.