Navigation Tips to Improve Your Website

Demosphere Navigation Module

Help your members navigate your website with ease by using Demosphere’s content navigation module. This tool is designed to enhance your website visitor’s overall experience. Visitors browse the website using the tabs and dropdown menu items found within your site. 

Website admins can add menus to any container within the site. The Demosphere graphics team will typically setup the initial top level menus during the design process.

To edit the main navigation content from your homepage,  hover over the right side of the module and the edit tools will appear: 

Edit Navigation

 

A new window will open titled Edit Menu. The default tab, manage navigation links & menus, is where you will work to add the departments that may have been previously built within the site map. Click on the green add item button located below the menu display preview, within the menu builder container.

Add Navigation Items

 

Menu Options:

A new window opens titled add new menu item. There are three item type choices to choose from:

  • The Link option is best used when adding menu items that you want to be clickable and redirect to a page outside of your website
  • The SubMenu option is best used when adding menu items that you do not necessarily want to be clickable, but have dropdown menus below
  • The Copy from Site Map option allows you to choose from any of the departments available within your sitemap. Keep in mind, if your Site Map changes, you will also need to update your navigation menu items

Navigation Options

 

When adding menu items from your site map, select the department to build your menu, and then click the green + button to the left of the department or sub-department that you want to add to the navigation module. Save your changes and proceed with adding the next menu items:

Navigation from Site Map

 

 

Cloning Menus:

The cloned instances tab is where you can easily clone the navigation module to additional locations on your website. I recommend cloning the navigation module to all design template locations. Click on the green clone to additional location button

Clone Nagivation

 

Scroll down until you see design templates, and click on the templates that have a green + next to it. If there is not a green + next to the design template then that means the navigation module item has already been cloned to that design template. Save the additional location.

designtem

Finally, you will be redirected to the new location to place the menu on the page. An orange ‘orphaned content’ box appears at the bottom of the screen, hover over the item and use the yellow drag icon to drag the module item to it’s new location. All departments that use the design template will be updated.

Furthermore, your website can have unlimited navigation modules. Feel free to play around with adding vertical navigation menus to the side containers of your interior pages! Remember, you can always set the publishing options to “pending” to see how things will look before they’re live!

Lastly, navigation modules are full responsive, so they’ll look great on any device!

Happy navigating!

 

 

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!

Demosphere Tip of the Week: Collecting Donations

Collect donations for your organization using Demosphere’s Donations feature. By placing the donation link on your public website, existing members and new sponsors will be taken to your secure donations page, where they can log into an existing account or create a new one. The user will immediately be directed to the donation step of the public registration process so they can quickly and easily make their contribution. The organization will then have access to various reports to track donation amounts by members and sponsors. Below are the steps to utilize these tools:

1. Donations Setup
  1. From the Registration dashboard, go to the Registration Settings tab
  2. Click Donations Settings
  3. Click Edit Donations                    Donation Settings
  4. Set “Donation Collection is currently” to ON, insert customized donation message, select appropriate Accounting Code from drop down menu (codes are defined via the Accounting Code settings under Registration Settings) then click Save.         

Note: A clear message reminds the donors of the importance of their contribution and why they should be compelled to donate. It also presents them with a clear value proposition. Non-profit organizations should remind donors that their contributions are tax deductible, including the legal name and tax ID for tax purposes.

Edit Donations Collection Option

2. Post Donations Link

From the Registration Settings tab, go to View Public Registration Link and copy the URL under Donation Only and place link in desired location on your website.

Donation Only Link

3. Collect Donations Online

Members and sponsors will enter their information and donation amount via a secure login process:donation

4. Donation Reports

To access donation reports, go to the Financial & Banking tab and click Run Financial Reports

Financial Reports

 

 

 

 

 

Select from various reports including the Discount Codes Report, Accounting Reporting by Code and the Payment Transactions Historical Data.

The Donations Data report provides admins with donations that have been paid and deposited. In this report you can view donation details such as Deposit Date, Order Date, Order #, Amount, Remark etc.

The Accounting Report by Code will provide details such as Sales Amount and Totals for the corresponding accounting code that was selected in step 4 of the donations setup.

The Payment Transactions Historical Data report can be filtered by the “DONATION” Item Type to view all donations within a defined Order Date range. This report will allow admins to see Order Date, Household Name, Item Type, Item Amount, Item Amount Paid, Item Amount Due, as well as Remarks.

To start taking advantage of this feature on your website, contact us at sales@demosphere.com.

Social Media: Supercharge Your Sites Part 2

Welcome back to “Social Media: Supercharge Your Sites.” This is the second installment of the two part series, which will cover a few ways to integrate Twitter with your website. If you missed part 1, and want to learn how to leverage your Facebook pages/posts within your website, go check it out. Like part 1, we will be implementing these examples using some example Demosphere content. Let’s get started!

Social Media Tip 1: Embedding A Single Tweet (5 mins.)

Tweeted a great photo of your team? Travel? A sunset? Showcasing tweets with engaging imagery on your site is best done by embedding a single tweet (including the photo). Before adding the tweet to your site, consider where you want to place the new content. Tweets are generally short, even if they include a photo or video. A great place to include this kind of content is in a sidebar or narrow container. In our example we will add the tweet to a sidebar.

  1. Find the tweet you want to embed. pic1
    Twitter makes this pretty easy by having a button to choose what you would like to do with a tweet.
  2. Copy the code. pic2
    For this example we want the imagery, so we leave “Include media” checked.
  3. Add the tweet to your site. pic3
    Now that you have the embedded tweet code it’s time to add the content to your site. If you have a Demosphere site, then you can accomplish this easily through the rawcode content type. If you are not on the Demosphere platform, see if you can add the embedded tweet code to your site through your content management system’s editing tools.
  4. View public version pic4
    Congratulations! You just embedded a tweet on your site for the first time.

Social Media Tip 2: Embedding A Single Video (5 mins)

If you have an exciting video of a game winning goal, buzzer-beater, or a message you want to convey to your audience through video, then you can share that content between twitter and your site. The process is very similar to embedding a normal tweet, but video content requires more room than a normal tweet. In this example we will add the video from twitter to the main content container of our page.

  1. Find the video you want to embed from twitter. pic5
  2. Copy the code. pic6
  3. Add the video to your site. pic7
    Videos are not embedded with a title, so you’ll want to add a title that grabs your audience’s attention.
  4. View the public version. pic8

Social Media Tip 3: Embedding A Timeline (10 mins)

If you want to embed your entire Twitter timeline on a section of your site, you’re in luck because Twitter has that feature. You’ll need a Twitter account and will have to sign into Twitter to use this feature. Let’s get started!

  1. Head over to Twitter’s publishing tool https://publish.twitter.com
  2. Add the url to the timeline that you want to embed. This is normally the url of your Twitter page. In this example we will use Demosphere’s Twitter pagepic9
  3. Choose your display template. pic10
    Depending on your Twitter content, your display options will vary. Experiment with various templates at your leisure. In this example we will use the embedded timeline option.
  4. Edit the display options. pic11
    With an embedded timeline your content will cause your page to scroll due to the length of the timeline. We’ll add a height display option to have our content scroll within it’s own section once embedded on our page.
  5. Add the timeline to your site. pic12
    You can do this via rawcode if you are using the Demosphere platform. In our example we will hide the title for our timeline because the embedded timeline includes a title.
  6. View the public version pic13

More On Twitter

Want to see what else Twitter can do? Explore their embedded content APIs here.

What next?

Now you have the knowledge to supercharge your websites! Like many things in life, content curating is an art that has no right or wrong answer. Always remember, “because you can does not always mean you should,” so be conscious if you are overloading your site with too much content from your social media. Have fun and continue learning!

I hope you enjoyed this introduction series to getting your sites integrated with Facebook and Twitter. Leave a comment below and check out Social Media: Supercharge Your Sites Part 1, where we go over how to integrate Facebook with your site.

Social Media: Supercharge Your Sites Part 1

If you manage a website or blog, then it can be challenging to consistently create engaging content through writing articles; however, social media posting has become pretty natural.  Luckily, we can leverage all the work put into your social media channels by embedding that content on your Demosphere website.  This two-part guide will show you all you need to know to integrate your Facebook page and Twitter account with your website. Let’s get started!

Social Media Tip 1: Facebook Pages

You can share all kinds of social media content between Facebook and your website including: timelines, messages, and events. Embedding your Facebook page on your site is an easy way increase your online presence. This section will cover how to connect different pieces of your Facebook page with your site.

1) Navigate to the Facebook Developer Page Plugin page.

social media page plugins

2) Scroll down until you see an input for, “Facebook Page URL,” and enter the url for the page from where you want to use content. In this guide we will be using Demosphere’s Facebook page as an example.

3) Choose the tabs you want to include in the input labeled, “Tabs”. Available options are: timeline, messages, and events. You may include as many tabs as you wish by separating each tab with a comma (example input “timeline, events”). In our example, we’ll use all 3.

social media page plugins

4) Configure the appearance of your page plugin. The nice people at Facebook have made this process very simple by exposing common configurations as checkboxes and text inputs. You can experiment with the look and feel of your plugin by previewing the content underneath the configuration settings. It is best to leave width and height empty, as well as leaving the checkbox for “Adapt to plugin container width” checked to ensure your plugin looks great on all device screens. For the guide’s example we are going to use the settings below:

social media page plugins

5) Get the code. You can get all of the code to put on your site by clicking the “Get Code” button beneath the plugin preview. You will need to copy both snippets of code from the tab “Javascript SDK” and put them on your page in the order they appear. Our example’s code snippets are below:

social media embed code

6) Add the code to your page. Add the snippets to your Demosphere website as “Rawcode” (shown below). If your site is not hosted by Demosphere, then you can add your code snippets to the source code of the page in the order shown above.

social media embed code

7) Check your public page:

social media public

Social Media Tip 2: Showcasing Specific Posts

Sometimes you will want to highlight a specific post from Facebook. You can accomplish this using Facebook’s Embedded Posts Plugin. We’ll walk through how to accomplish that below.

1) Start by logging into Facebook and navigating to the post that you would like everyone to see. In this example, we will use one of the posts from Demosphere’s Facebook page. Click the arrow at the top right of the post and choose the “Embed” option, then “Advanced Settings”.

social media post embed

2) Configure the post plugin. Facebook Embedded Post Plugin page should look familiar to the Facebook Page Plugin page. Set the pixel width option to “auto” as shown below.

social media embed post

3) Get the code. Click the button “Get Code”. If you’re following along from the last section and are not using the Demosphere platform, then you don’t need to copy the first snippet.

social media embed code

4) Add the code to your page. Like the previous section, you can add the code to a Demosphere page using “Rawcode”. If you are not using the Demosphere platform, then you can add the code snippets to your page’s source code.

5) Check your public page

social media public

What Next?

If you’ve been following along, then you have successfully integrated different elements from your organization’s Facebook page. Take some time to experiment with what you have learned in Part 1 of this guide and explore the various plugins that Facebook has to offer. Most of them can be implemented by simply embedding the code they provide into your site.

Having trouble? Did you setup an awesome social media steam? Leave a comment below and be on the lookout for Social Media: Supercharge Your Sites Part 2, where we will go over how to integrate Twitter with your site.