How to Connect to Google Analytics in Sitefinity 9

First off, I’d like to announce the all-new PlanetMagpie.com!

Completely redesigned from the ground up in Sitefinity 9. Built mobile-first with fresh content and a neat Personas engine right on the homepage. It lets you select what content you want to see, right away. Please hop over there and give it a spin. There’s a neat pop-out Contact form if you have feedback to give.

Now, let’s get to today’s post.

One of Sitefinity’s foundational Digital Marketing tools is its Google Analytics connector. Once you connect Sitefinity to your Google Analytics account, you can view analytics data about your website within its own CMS. Saves you a step–you can see how well the website’s doing without going anywhere.

The only hitch is, you have to connect the two first. And that’s a bit of a process.

These are instructions for connecting Google Analytics to Sitefinity: Register the Analytics Module – Sitefinity Help

They are a little out of date – Google has changed a few of the steps – but they’re still mostly correct. However, in the interest of clarity (and since we just did this with our new website), I wanted to document the process I used.

Connecting Sitefinity to Google Analytics, Step-by-Step

  1. In the Marketing menu, click Analytics.
    sf9_01configanalytics
  2. Click “Configure Analytics.”
  3. You should see a screen titled, “Authenticate to Google API,” asking you for a Client ID and a Client Secret number.sf9_02authenticate
  4. In order to get these two numbers, you must authenticate the Sitefinity CMS within Google’s Analytics API. Click the link that says “Google API Console” to open the console in a new browser window.
  5. From here, you’ll click “Create a Project.”
    createaproject
  6. Name the project and click Create.
  7. Once the new project appears in the API Console, you’re presented with a list of APIs. We want the “Analytics API.”
    analyticsapi
  8. You’ll see an “Enable” button. Click to enable the Analytics API.
  9. You’ll see a warning message like this.
    gotocred
  10. Click the “Go to Credentials” button.
  11. “Add Credentials to a Project” window. You want to click the “Client ID” link instead of choosing an option.
    addcred_clientid
  12. You’ll see a message saying you must first set a product name on the Consent Screen.
  13. Click the button.
  14. On the OAuth Consent Screen, enter a product name (e.g., “Your Website’s Analytics”), and your website’s URL. Click Save.
    consentscreen
  15. Now that we have a product name in place, we create a Client ID.
    createclientid
  16. Select “Web Application” from the list. Enter a Name in the field below. (You can reuse the product name from before.)
  17. In this window, under AUTHORIZED JAVASCRIPT ORIGINS, enter your website’s URL (http://YourWebsite.com).
  18. Under AUTHORIZED REDIRECT URIS, enter this URL:   http://YourWebsite.com/Sitefinity/marketing/Analytics
  19. Click Create.
  20. A window will popup with your Client ID number, and a Secret ID number. Copy both of these.
    clientid_clientsecret
  21. Return to Sitefinity.
  22. Paste in these ID numbers in the Authenticate box. Click Login to Google.
    (Important Note: If you experience an error here, go back to “Authorized Redirect URIs” and enter the non-WWW version of your website’s domain name. Like this:

    http://www.domain.com/Sitefinity/marketing/Analytics
    http://domain.com/Sitefinity/marketing/Analytics

    That way both are authorized in Google.)

  23. You’ll see an authorization screen like the below image. Click Allow.
    sf9_03accessgoogle
  24. Select the Google Analytics account you want to view in Sitefinity, and the domain (the same domain for the site you’re on). Click Save Settings.
    sf9_04analyticsacct
  25. Next you’ll see a screen with your Google Analytics tracking code. Paste in the tracking code (if you haven’t already done so) on all pages you want to track.
    sf9_05trackingcode
  26. Click Save, and voila! Access to Google Analytics within your CMS!
    sf9_06analyticsdashboard

 

If you need more details, check out last year’s post:
How to Connect Your Sitefinity Website to Google Analytics

Why Connect the Two? Search Data and Marketing Value, That’s Why

Why connect Sitefinity to Google Analytics? If you have your website tracked in Analytics, you can just go there to get all the statistics & reports you want. Isn’t this unnecessary?

You don’t HAVE to connect the two. Your site won’t break without this. But it does gain a few boosts, as does your digital marketing productivity.

I see three areas (at least) where accessing Google Analytics within Sitefinity helps out:

Time-saver. As I said earlier, it saves the time of logging into Google Analytics and looking up your site’s account. We manage analytics data for a bunch of customers; it takes a while to dig through all that data!

Site Search. Analytics includes a dashboard under the Content section titled, “Site Search.” Does your site have internal search? (It should.) If so, Sitefinity can track it. From there you can learn what kinds of search terms are popular, how well search is working, and so on. Valuable information.

Helps the DEC. The Digital Experience Cloud provides you with customer activity data and marketing tools. Hmmm, what would help these tools do their job better…how about analytics data?

That’s why I consider connecting Google Analytics up with Sitefinity a useful undertaking.

 

Would you like to see more “Sitefinity Connectors” posts? Please comment or email your ideas if so. I do have some reader requests for email marketing and marketing automation software. But more is always welcome!

How to Set Up Basic Website Elements in Sitefinity 9.0

Since we went through a number of Sitefinity 9.0’s improvements last time, I thought I’d dig a little deeper. We recently set up 9.0 for a new website in the works. I have full access.

So I’ve gone through the CMS and performed many basic tasks for building a website – creating pages, adding news items, and so on. I’ve documented the steps involved for these tasks below. Consider this a how-to for basic website build-up in Sitefinity 9.0.

Creating a Page

After logging into Sitefinity, click Pages in the top toolbar. Click the Create a Page button.

Create a Page in Sitefinity 9 01

Enter a Name for the page. From here you have multiple options to select.

Create a Page in Sitefinity 9 02

Not all are required though. Only these:

  • “Put this Page” – Where do you want this page within your site? Either leave it at top level (the default), or click “Under parent page…” and select an existing page under which you want the new one to reside. (You can change this later.)
  • Show in Navigation – Checked by default. If you uncheck it, the page will create, but nobody will see it on the website. This is helpful if you want to make a new page, but don’t want it to display publicly yet.
  • Title for Search Engines. This field populates with your page’s name automatically. (See screenshot below.) You may want to add more detail here – this is the title people see when someone searches for your site in a search engine. It’s important. The title needs to state what the page is about, and why they should click.
  • Template. Two options here, “Use Template” and “Don’t use template (start from scratch).” If you have Page Templates in place, click “Use Template” and you’ll see an option to select one of those templates.

Create a Page in Sitefinity 9 03

Everything else on the New Page window is either optional, or pre-set by templates. It’s useful stuff to know, though…in fact, I may dedicate a later post to all the ins & outs of page creation. Comment below if you’d like to read one!

Once you’ve entered the information you want, click the “Create and Go To Add Content” button. This opens the Page Editor, where you populate the page with images and content. (That’s another post too.)

Creating an Email Mailing List

In the Marketing menu, click Mailing List.
Click “Create a Mailing List.” In the Create a Mailing List form, enter a Title.

Create a Mailing List in Sitefinity 9 01

You also have options to setting a “From” address, subject line, unsubscribe page, or an automatic Welcome email.

Create a Mailing List in Sitefinity 9 02

Click the “Create this mailing list” button when done.

Add Users

In the Administration menu, click Users.
Click the “Create a User” button.
Enter the user’s username, password, and email address.
In the bottom 2 boxes, select the checkboxes beside the permissions levels you want to assign.

For example:

  • This user will create pages, add templates, and do administrative work? Check the “Administrators” box.
  • This user will enter content, but will not modify any pages or templates? Check the “Authors” box.
  • This user will only review pages, and not make any edits? Uncheck the “This user can access site backend.” box. Check the “Users” box in the list below it.

Add a User in Sitefinity 9

Use caution when assigning user permissions. If you give a person too much power, they may break something and not even know about it. Make sure your website host keeps good backups!

Add a Page Template

We covered what a Page Template is in the post, “Sitefinity Templates: What is a Page Template?

Once you have a page template to add, click Page Templates in the Design menu. You’ll see a button, “Create a Template.” Click it, and you’ll see the Create a Template screen.

Create a Page Template in Sitefinity 9

This screen is similar to the Create a Page screen. You’ll only need to fill in a name, a thumbnail image, and select some options. Then you click the “Create and go to Add Content” button, just like creating a page.

Create a News Item

In the Content menu, click News. Click the Create a News Item button.

Create a News Item in Sitefinity 9 01

Enter a title. Make sure the title’s unique; Sitefinity cannot use a title more than once.

Below the Title field is the news item body. Enter your content here. Use the toolbar and Design/HTML switches to customize its design.

Create a News Item in Sitefinity 9 02

Below the news item body is a Summary field. Click to add a short summary of the news item. This is optional, but a summary is useful as a short description of the item.

Below the Summary field are several options boxes. The defaults are “Categories and Tags,” “Additional Info (Author, Source),” and “More Options (URL, Comments).”

Create a News Item in Sitefinity 9 03

These are all optional, but again, useful for display. Click each box to open it.

  • Under Categories and Tags, click checkboxes to select which news categories you want to apply (you must set up Categories beforehand). Tags are used like keywords – type in whatever descriptive words/phrases you want, or select from an existing list of saved tags.
  • Under Additional Info, type in the news item’s author. The Source Name field is open to you – if you created the news item, you can put your organization’s name. If it came from another outlet, enter theirs (it’s only fair). Enter a link to their site in Source URL too.
  • Under More Options, there’s a button to change the default URL. Most of the time you don’t need to do this. There’s also options for allowing comments and including the news item in the sitemap. They are checked by default, and unless you really don’t want any comments, it’s fine to leave them checked.

Create a News Item in Sitefinity 9 04

That’s it! Click Publish when the news item is ready. It will automatically show up wherever you have a News widget displayed.

These are Basic Website Elements. There are More (and We’ll Cover Those Too)

Most of these tasks remain unchanged from previous Sitefinity versions. Still, we came up with several good examples of how easy Sitefinity 9.0 makes typical website management tasks.

(The biggest change I saw was in configuring Google Analytics—part of which came from Google itself. So much difference in fact, that we’ll do a separate post on connecting Google Analytics in Sitefinity 9+ later on.)

Next time we’ll cover a reader request – connecting a third-party email service to Sitefinity. Which one? How does it work? You’ll have to join us next time to find out!

P.S. – Don’t forget to subscribe to the Sitefinity Insider mailing list, in the signup box on the right. No need to set a reminder for next month that way!

Sitefinity 9.0 is Here – With New Personalization Tools, Form Builders, App Development Tools and More

One year ago, we posted about Sitefinity 8.0’s release.

A year later, Sitefinity 9.0 is here.

Sitefinity 9.0 – What’s New

What does 9.0 bring to the table? Enhancements to its Digital Experience Cloud, form builder, app builder, localization…it’s what we call an “evolutionary release.” Taking the existing tools and making them better.

Let’s go down the list and see just how much better 9.0 is.

List of New and Upgraded Features in Sitefinity CMS 9.0

Improvements to the Digital Experience Cloud
The Digital Experience Cloud (DEC) has more detailed customer profiles, like lead scoring. This helps you see where a prospect is in their journey to becoming a loyal customer, at a glance. It’s called a “360-Degree View.”

There’s now support for importing customer data via CSV. Data is often stored this way by other third-party tools. Now you can add them to Sitefinity & make a more complete picture of the person with whom you’re talking.

Personalization Campaigns
More flexibility in audience segmentation – Split your audience into groups by any category you’d like. Location, industry type, job type, their history with you, common characteristics, etc.

Personalization also includes measurement on conversion rates. You’re able to continually monitor how well your marketing efforts are doing.

Content-driven Mobile Apps (Made in Sitefinity!)
Engage customers on their phones! Build apps driven by your own content with the Sitefinity Mobile Apps Builder.

Not only can you reuse existing content, you can guide customers to what they need, all on mobile.

“Content as a Service” API
Share your content to other systems too! Sitefinity’s new API is based on OData standards, to make integrating your content a simple & modern process.

Operate Internationally
Manage language-specific versions of your website. And now you can include your images, videos, documents and other files.

Multi-Page Forms
Create forms using widgets, like you do pages. Need more information, but requesting it would make the form too long? Split the form into sections! Sitefinity’s Form Builder lets you break forms into smaller pieces for a better user experience.

Faster Feather Work
When you visit a website, you want a fast result, right? You want to locate the information you’ll need right away.

To help you make this happen, Sitefinity 9.0 includes updates to the Feather framework (mobile-friendly development).

Simpler widget development, precompiled views…the kind of help developers can use to shorten their deployment times.

New Interface
Sitefinity 9.0 comes with a new administrative interface. Keeping up with the latest clean design standard, this new interface makes finding what you want to edit nice & quick.

Testing Sitefinity 9.0: It Only Takes Minutes to Add New Features

A free 30-day trial of Sitefinity 9.0 is available: Free 30 Day Trial – Sitefinity.com

I opened a sandbox – a demo of Sitefinity you can activate in 5 minutes – to test out these new features.
First thing I did was enable the new interface. It’s clean and pretty!

Pages View in Sitefinity 9.0

Next I went to the Forms library (under the Content menu). The sandbox has 2 forms prepared for you: a Job Application and Contact Us.

I opened the Contact Us form to test modifying an existing form. All it takes is drag-and-drop. Just like on a Sitefinity webpage.

Form Widget Test

Creating a new form is just as simple. It only took me a few minutes to make a simple Quote Request form.

Quote Request Form Builder

Next, it’s over to the Mobile App Builder.

Selecting content to display only took 3 steps. From there I can publish the app to Sitefinity Box (an app for testing Sitefinity mobile apps), modify it in App Builder, or download the app.

Sitefinity Box

Finally, I went to Personalization (under the Marketing menu). Creating a user segment is just as easy as creating a form. I created an “IT Manager” segment and applied 2 characteristics.

User Segmentation

Manage Your Website and Your Customer Relationships from One Place

This is just with the basic options, too. With a Sitefinity developer available, there’s almost no limit to how far you can customize each and every one of these features.

9.0 shows the Sitefinity development path as focusing on a complete digital marketing platform. Using it, you manage not just your website, but also your lead generation. Your email marketing. Your overall customer relationships from first visit to third sale (and fourth, and fifth…).

What sounds most useful to you about the new Sitefinity CMS? Please comment or email us about which of these 9.0 features appeals the most.

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.