Demosphere Tip of the Week: Content Rotators and Image Sizing

Content rotators are a great way to to showcase articles, pictures, and videos on your website in a slideshow type fashion.  This week we’ll explore the different settings and features available for content rotators as well as some tips on using correctly sized images to keep your website looking sharp!

Content Rotators:

To add a new content rotator to your Demosphere website, go to the page where you’d like it to appear and click the green “Add Content” button in the desired content area.  Next, select the “Content Rotator” type on the dialog to add your rotator onto the page:

Content Rotator

After selecting the “Content Rotator” button a new screen will appear where you can configure the settings for the rotator.  Assign the rotator a title and adjust various options for the rotator under the Display Options tab.  Please see below for information on the different rotator display options:

  • Transition Interval:  Set the number of seconds each piece of content will be displayed before cycling to the next piece.
  • Responsive vs. Basic Rotator: A responsive rotator will adapt content in the rotator to be best displayed across varying screen sizes (e.g. a smart phone vs. a laptop screen).  A basic rotator will not do this and might look out of place when viewed on a mobile device.  For this reason, we recommend always using the responsive rotator type and it is the default setting when adding a rotator.
  • Height:  Set the maximum height (in pixels) for the rotator.  This can be helpful when you want the rotator to be within certain size limits on your website for design purposes.
  • Display Nav Bar:  Toggle on/off the navigation circles in the top left corner of the rotator that convey which piece of content is currently displayed on screen.  It also allows the user to jump to a different piece of content by clicking on one of the empty circles.
  • Size Images Based on:  This setting allows images to be sized based on the width or height when in the rotator.  We recommend trying both ways to see what works best for your design layout and personal preferences.  Choosing the Height option will keep the full height of the image in place while adding some padding to the width so the image does not get skewed from its original dimensions.  Choosing the Width option will keep the full width of the image while shaving some of the top/bottom of the image to keep the original dimensions in place.  For additional details, please see the image sizing section below.
  • Show Article Summaries: Toggle on/off an overlay of text from the beginning of an article.
  • Thumbnail Options: Choose to have thumbnails for the content in your rotator on the bottom, left, or right side of the rotator.  You can also choose to have no thumbnails as well.

Content Rotator

Once the options are set up and the rotator is saved, you are ready to add content to the rotator.  Hover your mouse over the empty rotator and click the green plus sign to add a new article, image, or piece of raw code content.  Once a piece of content is added to the rotator, you can move, edit, or delete the content by clicking on the orange folder icon while your mouse is hovering over the rotator:

3

Image Sizing:

One of the easiest way to ensure a professional looking website is to upload and display images that have appropriate dimensions.  Let’s say you have an area on your website that is wide but not very tall.  If you were to upload an image that was tall but not wide into this area, it would not fit very well.  The system would either zoom in on the image to fill up the width of the area or add padding to both sides of the image so it fits:

4

However if an image is uploaded to this same area that has roughly the same width it will displayed in a much more appealing manner.  The image will not have to have any padding added or be zoomed in to fit the area’s dimensions:

5

This brings up the question of “How do I know the dimensions of an area on my website?”.  If you are using the Chrome browser, you can right click on a content area and choose the ‘Inspect’ option.  This will bring up the developer console as well as show the dimensions for the area you are inspecting:

6

In this example, we can see that the content area is 847.5 pixels wide, so you’d want to have your images be ~850 pixels wide.  The height of the content area can vary depending on the height of the image, so the image height can be flexible in this case.

If you don’t have Chrome as your browser, most modern browsers have similar developer features for inspecting a website.  You can also use trial and error to upload an image, see how it looks, and try another image in its place to see if it works better.  Keep in mind you’ll want to use an image with the same general dimensions or shape as the content area you are adding the image into.  If the area is tall and narrow, use an image that is also tall and narrow for the best appearance possible!

Lastly, there are several tools and applications you can use to help you manipulate your images. Our favorite free online resource is pixlr.com/express – give it a try!

Content Rotators Designed For Every Screen

The new content rotators found within the WebWriter® Content Management System are now fully responsive!

What does this mean for your site? Your content rotators are guaranteed to adjust automatically on various screen sizes and devices regardless of site layout.

content-rotator

Whether your audience is viewing your site on a desktop, mobile device, or tablet – your content rotator will maintain their intended shape and formatting.

For more information about responsive design and our content rotator items, contact support@blog.demosphere.com to speak to a member of Demosphere Support.

Every Site Is Easy-To-Navigate With WebWriter!

Primary Website Goal: help website visitors find the content they’re looking for as quickly as possible.

Something as simple as placing your navigational menu in a common location on the site – either horizontally across the top or vertically down the side – can save your visitors significant search time.

Using obvious labels that describe what will be found on each page can help keep visitors on the appropriate page for longer periods of time.

Having too many items in your navigation bar can be overwhelming to users. Narrowing down the options to seven (or fewer) assures each page receives ample attention from visitors in their decision making process.

Does your site’s current navigation follow the above best practices?

Make sure your website is user-friendly and easy to navigate by constructing intuitive navigation menus of your own.

navigation-item

Start From Scratch

An often overlooked yet effective way to build your navigation menu from scratch begins with the Site Map.

Demosphere suggests constructing your site’s departments in the Site Map section before creating the navigation menu on your page for two main reasons:

  • Building the Site Map can give a clear description of the site’s layout in one visual and an idea of how your site will flow. Drag-and-drop to rearrange departments and subdepartments to solidify the infrastructure before adding menus.
  • Creating your Site Map before setting up your navigation can facilitate the process when adding menu items. Menu items can be drawn directly from a completed Site Map rather than manually added.

Site Map

Manage Design Templates

Once your Site Map has been set up, begin building your navigation menu within the Page Templates section.

After the navigation has been created in one of the templates it can be cloned in the remaining templates. You will not have to rebuild the navigation menu for each.

page-templates

Select one of the templates to work with and locate the top horizontal navigation menu. If a menu already exists within the navigation bar, click the blue edit button in the righthand corner to make changes to the existing options.

If no menu exists, create a brand new menu by clicking the green Add Content button and select the Navigation Module option.

A Menu Display Preview dialog will appear, allowing you to set your menu items, publish options, and clone instances.

Build With Item Types

Menu items can be built directly in this window with three different Item Types.

edit-navigation

Menus can be built using Links or grouping pages in SubMenus. Adding pages as links on the menu bar will redirect visitors to that page when the item is clicked. Submenus will display dropdown menus when a visitor hovers over the item.

Links appear next to a blue link symbol in the Menu Builder, while SubMenus appear next to a folder image with green dropdown arrows.

However, if you have already created your Site Map, selecting the Copy from Site Map option can cut down the time spent creating menus.

copy-from-sitemap

When using the Copy from Site Map item type, you are able to Select a Department from your pre-made Site Map. Selecting one of the departments will automatically add the department, as well as links and subdepartments associated with that department.

choose-from-sitemap

For example, copying the Travel department from the Site Map will also add the Boys and Girls subdepartments along with their corresponding links.

Copy each department from the Site Map to the navigation menu options to save time manually adding link URLs and duplicating the Site Map structure.

Once the navigation menu has been saved, menu items will appear on your page as links and dropdowns according to the specifications that have been set in your Menu Builder.

finished-navigation

For more information on your website’s navigation and menu items contact Demosphere Support at support @ blog.demosphere.com!

FREE Holiday Surprise For New WebWriter Users!

website-evaluationFor a limited time, get a free website content review from Demosphere when you join the WebWriter® family throughout the month of December to optimize your site for 2016!

There’s a new version of Demosphere’s WebWriter® Content Management System  – featuring even more flexibility when it comes to creating, editing, and rearranging content.

Facilitating content creation in as little as three clicks and incorporating a drag-and-drop feature that allows you to move content around your site in real-time are just a few of the new features waiting for you!

To celebrate the holiday season, all new WebWriter users will receive a Free Website Evaluation from Demosphere when registered before December 31st!

Receive honest feedback from a team with over 25 years of experience designing websites for youth sports organizations in areas like:
  • Producing Valuable Content To Drive Registrations
  • Choosing The Right Top Navigation Items
  • The Correct Way To Integrate Social Media
  • Site Map Organization
  • …And More!

Have a personalized evaluation sent directly to your email and start the new year on the right foot with your new WebWriter® site!

How Did They Do That: Images

A picture is worth a thousand words – and with the new and improved Image Content Item in the WebWriter® Content Management System, sharing photos has never been simpler.

One of the newest organizations to join the Demosphere Network, Parkland Soccer Club, is taking full advantage of the new content types within the WebWriter® System to show-off their players and keep the website looking great!

Parkland

Want to share images of your own to add life to your website?

Here’s how it’s done:

1. Add New Content

The WebWriter® CMS lets administrators add eight variations of new content types to their website. To create images as seen above, select the Image option. The System allows for unlimited images and articles to be added to any site.

Add Image

 

2. Select Your Image

An Image dialog box will appear, allowing administrators to customize their image settings. After creating a Title for the image, choose to display or hide that title from Public View simply by checking the corresponding box. Upload photos directly into the system from your computer by browsing through your saved folders. Finally, set the image to serve as a link by including an optional URL and selecting whether to have it open in the same or separate window.

Add Title

 

3. Set Display Options

The WebWriter® Content Management System offers two display options for Images. Choose between having the image display directly on the website or provide a link that leads to the full image.Display Options

 

4. Publishing Options

The publishing options within the WebWriter® System give administrators the option of publishing images immediately to Public View, leaving the articles Pending for future decision, or setting a Publishing Timeframe for time sensitive information.

Publish Options

 

5. Arrange Your Photos

Once published content items appear on the page, administrators can then move each item around using the System’s drag-and-drop functionality. To take advantage of the intuitive movement, simply hover your computer mouse over the content item you would like to move or make changes to. The option to move, edit, or delete will appear.

Changes appear in real-time on the website.

Move Content

And there you have it – the simplest way to add images to any page or section on your website! Keep up the good work Parkland Soccer Club!

Parkland

Interested in more information about the WebWriter® Content Management System or how to add images of your own? Reach out to Demosphere today at sales@blog.demosphere.com for a free demo!