How to Create Beautiful Long Form Content in WordPress with StoryBuilder

Recently, one of our readers asked if it was possible to create beautiful long form content in WordPress? Long form content with a storytelling element has proven to be more engaging than plain text and images. In this article, we will show you how to create beautiful long form content in WordPress with StoryBuilder.

Why Use StoryBuilder for Long Form Articles in WordPress?

Users spend just a few seconds looking at a website before deciding whether they want to stay or leave. If you publish long form articles, then keeping users on your site becomes even more challenging.

Adding multimedia and interactive visual aid makes long form content highly engaging for users. Instead of just scrolling down text and images, users can interact with elements on the page.

Here are some of the best examples of long form content with rich storytelling elements.

• New York Times – Riding The New Silk Road


• Washington Post – Washington – A World Apart


• The Guardian – Firestorm


• Pitchfork – Machines for Life

All these long form articles share similar traits of great storytelling. They use immersive media, parallax effects, and interactive UI elements to create engaging content.

Traditional WordPress themes usually don’t let you create such pages or posts. Even if you tried, you will have to use a number of plugins and it may still not work well for your audience.

Having said that, let’s see how you can create beautiful long form content in WordPress with StoryBuilder using any theme and without writing any code.

Creating Your First Long Form Story with StoryBuilder

First thing you need to do is install and activate the Press75 Long Form Storybuilder plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you need to create a new post or page. You will notice the new ‘Enable Long Form Content’ meta box on the post edit screen.

You need to check the box next to ‘Display as Long Form Content’ option and then click on save draft button.

WordPress will reload the page, and you will now see a notice that the long form content is enabled for the page or post. Instead of post editor, you will see a button labeled ‘Edit my Long Format Content Page’.

Click on the button to launch the long form content editor.

A new browser window will open your current page in the WordPress theme customizer.

The right hand pane will show some basic instructions on how to use StoryBuilder. These instructions will disappear once you start editing the page.

The left hand pane contains the Customizer controls including those used to edit your WordPress theme. You will notice two options in the Customizer controls which are highlighted.

Click on the Page Options tab first. It allows you to choose primary and secondary colors to be used in the long form content page you are editing.

It also allows you to choose the fonts you would like to use for the page.

After that, click on the back arrow next to ‘Page Options’ heading in the left pane.

You can now click on the ‘Long format page sections’ tab to start building your long form content.

On the Next tab, click on Add Sections button. It will open up another tab with the list of sections that you can add to your page.

Clicking on a section will add it to your page. You will see the settings for editing that section.

Each section has different settings. For example, the header section asks you for a section title, an image, text to show as main heading and subtitle.

After filling the settings, simply click on the close button at the bottom. You can now add another section to your page.

All the sections will appear on the left hand pane. You can rearrange them with drag and drop.

If you want to remove a section, then simply click on it and then click on the Remove link at the bottom of section settings.

Here is a list of sections that are currently available with the StoryBuilder.

• Navigation Menu – Allows you to add a navigation menu to your story. You can use an existing navigation menu or create a custom menu.


• Callout – A full width callout section with colored background. It uses the primary color you selected in Page Options for the background.


• Content – A single column content area


• Two column content area


• Three column content area


• Full Feature – Allows you to add a full width image with parallax effect, heading, subtitle, and content.


• Section Heading – Adds a section heading row

The content area sections are just like WordPress post editor. You can embed videos, images, blockquotes, embed Tweets or Facebook posts.

Just like the whole page, the multi-column content areas are fully responsive as well. Your content will be displayed in a single column to users with smaller screens.

Once you have added a few sections to your page, click on Save & Publish button at the top. Even though the button says ‘Publish’, your page will still be saved as Draft.

You will need to exit the customizer by clicking on the close button.

This will take you back to the WordPress post edit screen, where you can choose to publish the page or post keep it saved as a draft.

That’s all, we hope this article helped you learn how to create beautiful long form content in WordPress with StoryBuilder. If you liked drag and drop functionality of the StoryBuilder, then you may also want to see our comparison of best drag and drop page builders for WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Create Beautiful Long Form Content in WordPress with StoryBuilder appeared first on WPBeginner.

Make Your Website Beautiful: 20 Must-Read CSS3 Tutorials

alt="Make Your Website Beautiful: 20 Must-Read CSS3 Tutorials" src="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2011/11/css3-500x200_c.jpg" />

With the growing popularity of CSS3 and HTML5, developers are renovating the online world in which we live. As this technology becomes more widespread the websites we create will be more diverse, creative, interactive, and mobile friendly. I have compiled 20 of the coolest CSS3 tutorials available to both inspire you and walk you through the steps on how to develop your websites so it stands out above the crowd!

1. Slide Down Box Menu

href="http://tympanus.net/Tutorials/SlideDownBoxMenu/">class="border" alt=" Slide Down Box Menu " src="http://www.webhostingsecretrevealed.net/images/2011/slidedownboxmenu.JPG" width="750" />

Slide Down Box Menu: Navigation is something all of your visitors will notice. In this tutorial learn how to create a unique sliding box navigation.

2. Elegant Accordion with jQuery and CSS3

href=" http://tympanus.net/Tutorials/ElegantAccordion/">class="border" alt=" Elegant Accordion with jQuery and CSS3" src="http://www.webhostingsecretrevealed.net/images/2011/elegantaccordian.JPG" width="750" />

Elegant Accordion with jQuery and CSS3: Codrops developed another great tutorial outlining how to use jQuery to create vertical accordion tabs that slide out when hovering and CSS3 to enhance the looks.

3. Minimalistic Navigation

href=" http://demo.tutorialzine.com/2010/06/css3-minimalistic-navigation-menu/demo.html ">class="border" alt="Minimalistic Navigation" src="http://www.webhostingsecretrevealed.net/images/2011/minimalisticnavigation.JPG" width="750" />

Minimalistic Navigation: A very simplistic take at navigation with a very easy how-to.

4. Making a Photobooth Web App

href=" http://demo.tutorialzine.com/2011/04/jquery-webcam-photobooth/ ">class="border" alt=" Making a Photobooth Web App " src="http://www.webhostingsecretrevealed.net/images/2011/photobooth.JPG" width="750" />

Making a Photobooth Web App: Learn how to build a photobooth that allows your website visitors to take a snapshot with their web camera and upload it from a neat CSS3 interface.

5. Image Gallery

href=" http://inspectelement.com/demos/css3/3dgallery/ ">class="border" alt="Image Gallery " src="http://www.webhostingsecretrevealed.net/images/2011/imagegallery.JPG" width="750" />

Image Gallery: This tutorial shows you how to create a stunning image gallery in CSS3 that remains compatible with browsers that are not quite up-to-date.

6. Music Player Menu

href="http://www.webstuffshare.com/2010/05/css3-music-player-menu/">class="border" alt="Music Player Menu" src="http://www.webhostingsecretrevealed.net/images/2011/musicplayermenu.JPG" width="750" />

CSS3 Music Player Menu: This tutorial will show you how to create a Music Player Menu using only CSS3 properties instead of using images.

7. Typography

href="http://net.tutsplus.com/tutorials/html-css-techniques/subtle-css3-typography-that-youd-swear-was-made-in-photoshop/">class="border" alt="Typography" src="http://www.webhostingsecretrevealed.net/images/2011/css3typography.JPG" width="750" />

CSS3 Typography: You’d swear this text was created using Photoshop, but no, it’s all CSS3!

8. Drop Down Menu with Integrated Forms

href="http://addyosmani.com/blog/formbox/">class="border" alt=" Drop Down Menu with Integrated Forms " src="http://www.webhostingsecretrevealed.net/images/2011/integratedform.JPG" width="750" />

Drop Down Menu with Integrated Forms: This tutorial will show you how to couple jQuery and CSS3 to integrate forms with a dropdown menu.

9. Animated Vignette Buttons

href="http://www.mightymeta.co.uk/1075/css3-animated-vignette-buttons/">class="border" alt="Animated Vignette Buttons" src="http://www.webhostingsecretrevealed.net/images/2011/vignettebutton.JPG" width="750" />

Animated Vignette Buttons: Using multiple backgrounds in CSS3, this tutorial shows you how to create a unique hover effect.

10. Dynamic Stack of Cards

href="http://designlovr.com/use-css3-to-create-a-dynamic-stack-of-index-cards/">class="border" alt="Dynamic Stack of Cards" src="http://www.webhostingsecretrevealed.net/images/2011/stackofcards.JPG" width="750" />

Dynamic Stack of Cards: This tutorial will help you dive into CSS3 transformations and transitions.

11. My Notes

href=" http://boxtuffs.com/stuff/my-notes/">class="border" alt="My Notes" src="http://www.webhostingsecretrevealed.net/images/2011/mynotes.JPG" width="750" />

My Notes: This is a a handy little tool that allows you to add and edit notes.

12. Contextual Slideout Tutorial

href="http://tutorialzine.com/2010/04/slideout-context-tips-jquery-css3/">class="border" alt="Contextual Slideout Tutorial" src="http://www.webhostingsecretrevealed.net/images/2011/slideoutcontext.JPG" width="750" />

Contextual Slideout Tutorial: This tutorial will walk you through how to create easily configurable contextual slideouts.

13. Cufonized Fly Out Menu

href="http://tympanus.net/Tutorials/CufonizedFlyOutMenu/">class="border" alt="Cufonized Fly Out Menu" src="http://www.webhostingsecretrevealed.net/images/2011/cufonizedflyoutmenu.JPG" width="750" />

Cufonized Fly Out Menu: This unique take on menu adds a little extra flavor to the navigation.

14. Bottom Slide Out Menu

href="http://www.tympanus.net/Tutorials/FreshBottomSlideOutMenu/">class="border" alt="Bottom Slide Out Menu" src="http://www.webhostingsecretrevealed.net/images/2011/bottomblideoutmenu.JPG" width="750" />

Bottom Slide Out Menu: This tutorial offers another unique way to set your navigation apart from normal.

15. Slidebox

href="http://tympanus.net/Development/Slicebox/">class="border" alt="Slicebox" src="http://www.webhostingsecretrevealed.net/images/2011/slicebox.JPG" width="750" />

Slicebox: This is a great new image slider that has a built in fallback for browsers that don’t support the code yet.

16. Multi-Step Signup Form

href="http://webexpedition18.com/articles/how-to-create-a-multi-step-signup-form-with-css3-and-jquery/">class="border" alt="Multi-Step Signup Form" src="http://www.webhostingsecretrevealed.net/images/2011/multistepform.JPG" width="750" />

Multi-Step Signup Form: A simple tutorial to create a multi-step form, including a progress bar!

17. Slide Out Boxes

href="http://tympanus.net/codrops/2010/07/21/related-posts-slide-out-boxes/">class="border" alt="Slide Out Boxes" src="http://www.webhostingsecretrevealed.net/images/2011/slideoutboxes.JPG" width="750" />

Slide Out Boxes: This tutorial will help you make a widget to help your related blogs stand out.

18. Interactive Photo Desk

href="http://tympanus.net/codrops/2010/07/01/interactive-photo-desk/">class="border" alt="Interactive Photo Desk" src="http://www.webhostingsecretrevealed.net/images/2011/photodesk.JPG" width="750" />

Interactive Photo Desk: This is a fun, interactive way to display pictures to your website viewers.

19. Simple Toolbar

href="http://www.pvmgarage.com/2009/12/nice-and-simple-toolbar-for-your-website-with-css3-and-jquery/">class="border" alt="Simple Toolbar" src="http://www.webhostingsecretrevealed.net/images/2011/toolbar.JPG" width="750" />

Simple Toolbar: Toolbars have become very popular on websites and this tutorial will show you how to easily create one.

20. Content Slider

href=" http://tympanus.net/codrops/2010/04/28/pretty-simple-content-slider-with-jquery-and-css3/">class="border" alt="Content Slider" src="http://www.webhostingsecretrevealed.net/images/2011/contentslider.JPG" width="750" />

Content Slider: This tutorial outlines an easy way to rotate the background at the same time the heading and descriptions are sliding in and out.

Page 26 – Web Hosting Secret Revealed

How To Make Beautiful Charts And Infographics For Your Sites?

alt="How To Make Beautiful Charts And Infographics For Your Sites?" src="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-21-500x342_c.jpg" />

Data visualization is an important part of web marketing strategies these days – charts, infographics, or even explainer videos – bloggers and web marketers are doing everything they can to feed users’ love in graphics with meaningful data.

KissMetrics, for example, developed title="KISS Metrics Infographics" href="http://blog.kissmetrics.com/infographics/" target="_blank" rel="nofollow">dozens of sexy infographics to build traffics and attract social media attentions. So are href="http://blog.okcupid.com/" target="_blank" rel="nofollow">OK Cupid, href="http://www.copyblogger.com/history-of-social-media/" target="_blank" rel="nofollow">CopyBlogger, and href="http://www.nytimes.com/interactive/2008/09/29/business/20080929-CONGRESS-VOTE-GRAPHIC.html" target="_blank" rel="nofollow">The New York Times.

With that being said, we will be looking into some of the best resources and tools for data visualization today. No matter you are a casual blogger who simply wants to create some beautiful infographics occasionally or a career designer who need to dig deeper into this field; I am sure you will find this post useful.

Information Architecture

In general, a good piece of data visualization consistes of three main elements: Meaningful data, proper information designs, and beautiful graphics.

Bear in mind that although infographics and charts tend to attract attention from the blogsphere and social media users; they should do more than just brand promotion – Infographics and charts are suppose to deliver boring and messy data in a user-friendly manner in the first place.

Hence, before creating a graph or an infographic, you’ll need to 1) Organize, filter, and refine your data; 2) Decide on how to present your data (aka, data visualization designs).

OpenRefine (ex Google Refine)

Enter OpenRefine – A powerful data mining tool that saves us from organizing our data row by row on Excel Worksheet. Formerly known as Google Refine (and Freebase Gridworks), this tool helps users to explore and clean up data, transforming the data from one format into another, and extending it with various web services.

In case you are working with some massive unordered data, OpenRefine is definitely must have in your toolkit. The tool is currently hosted on GitHub, you can title="GitHub Open Refine" href="https://github.com/OpenRefine" target="_blank" rel="nofollow">visit this page for all the necessary info and helps. For further followup and latest news, You should also check out its newly launched website at title="Open Refine" href="http://openrefine.org/" target="_blank" rel="nofollow">http://openrefine.org/

Presenting Your Data

Once you are ready with your data, it’s time to decide how you are going to present it to the viewers.

There are countless approaches in getting this done: Pie chart, diagram, line graph, histograms, heat map, flow chart, periodic table, and so on.  Each of these approaches fits perfectly for certain type of data (and stinks badly it’s misused).

How should you present your data, so that your statistic is beautiful, eye-catching, and easy to understand?

On this issue, title="Visual Literacy Periodic Table On Data Visualization" href="http://www.visual-literacy.org/" target="_blank" rel="nofollow">Visual Literacy built an extremely handy periodic table on all the options you can use to visualize your data (view below). Note that the periodic table displays a number of interesting examples when you roll over your mouse, so be sure that you view the actual table on the site.

style="text-align: center;">style="text-align: center;" href="http://www.visual-literacy.org/periodic_table/periodic_table.html" target="_blank" rel="nofollow">class="border aligncenter wp-image-367" src="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-5.jpg" alt="Periodic Table On Data Visualization" width="750" srcset="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-5.jpg 600w, http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-5-300x216.jpg 300w" sizes="(max-width: 600px) 100vw, 600px" />

In case you were looking for non-traditional approaches, then you should check out title="Data Visualization: Modern Approaches" href="http://www.smashingmagazine.com/2007/08/02/data-visualization-modern-approaches/" target="_blank" rel="nofollow">this awesome article on Smashing Magazine. The post is published some time ago but still I find it very helpful.

Advance Charting Tools

As soon as you are done with information architecture, it’s time for some real production. Making a good-looking chart out of raw data is never an easy task, fortunately there are countless tools to get the job done.

Yes, countless number of tools for data visualization. There are comprehensive tools that generates interactive graphics out of complex data; there are also easy web applications that do nothing but generate simple 2-axis line graphs.

For practical reason, we are going to look into both sides and list out multiple graphic tools for both advance and casual users.

First, let’s look at some of the advance stuffs.

1. ggPlot2 and R

style="text-align: center;">class="border aligncenter wp-image-375" src="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-9.jpg" alt="R and ggplot2" width="750" srcset="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-9.jpg 600w, http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-9-273x300.jpg 273w" sizes="(max-width: 600px) 100vw, 600px" />

href="http://www.r-project.org/" target="_blank" rel="nofollow">R is a computer language and an environment for data manipulation, calculation and graphical display. href="http://ggplot2.org/" target="_blank" rel="nofollow">ggplot2, on the other hand, is a plotting system for R that helps produce complex multi-layer graphics. The HeatMap above, for example, is built using ggplot2 and R. If you are keen on learning R and ggplot2, title="Learn R on WordPress" href="http://learnr.wordpress.com/" target="_blank" rel="nofollow">LearnR is a great blog for further reading (though the blog has not been updated for some time).

2. jqPlot

style="text-align: center;">class="border aligncenter wp-image-376" src="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-10.jpg" alt="jqPlot" width="750" srcset="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-10.jpg 600w, http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-10-300x225.jpg 300w" sizes="(max-width: 600px) 100vw, 600px" />

href="http://www.jqplot.com/" target="_blank" rel="nofollow">jqPlot is a plotting and charting plugin for the jQuery Javascript framework. jqPlot produces beautiful line, bar and pie charts. The tool comes with some nice features such as generating interactive points that can be adjusted by users on web browsers. However, it’s worth noting that this tool is not thoroughly tested and might not be supported by certain web browsers – namely, Chrome and IE below 7.

3. JP Graph

style="text-align: center;">class="border aligncenter wp-image-371" src="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-7.jpg" alt="JP Graph" width="750" />

href="http://jpgraph.net/" target="_blank" rel="nofollow">JP Graph is a PHP-driven charting tool that support various plot types. In case you are writing a PHP program that needs a graph creating library, this is something that you should look into. I wouldn’t say JP Graph is an easy tool for starters but the tool (or, PHP library) does come very helpful when you need to generate graphs and charts from your web server. JP Graph is free for non commercial use and you will need a web server that supports PHP 4.3.x or above.

4. JS InfoVis Toolkit

style="text-align: center;">class="border aligncenter wp-image-378" src="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-11.jpg" alt="JavaScript InfoVis Toolkit" width="750" srcset="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-11.jpg 600w, http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-11-300x168.jpg 300w" sizes="(max-width: 600px) 100vw, 600px" />

href="http://thejit.org/" target="_blank" rel="nofollow">JavaScript InfoVis Toolkit is a library developed by Nicolas Garcia Belmont. The library comes with a wide range of visualization choices and it’s completely free to use.

 5. Many Eyes

style="text-align: center;">class="border aligncenter wp-image-380" src="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-12.jpg" alt="Many Eyes by IBM" width="750" srcset="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-12.jpg 600w, http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-12-300x193.jpg 300w" sizes="(max-width: 600px) 100vw, 600px" />

title="IBM Many Eyes" href="http://www-958.ibm.com/software/analytics/manyeyes/" target="_blank" rel="nofollow">Many Eyes is a free tool that enables a user to create visualizations from almost any kind of data set. Hosted on IBM servers, Many Eyes does more than just data visualization – it allows users to upload their own data set as well as  generate new visualization model based on any data stored in the server.

6. Google Chart

style="text-align: center;">class="border aligncenter wp-image-383" src="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-15.jpg" alt="Google Chart" width="750" srcset="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-15.jpg 600w, http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-15-245x300.jpg 245w" sizes="(max-width: 600px) 100vw, 600px" />

href="https://developers.google.com/chart/" target="_blank" rel="nofollow">Google Chart is free, powerful, flexible, and is supported by lots of other developer tools. Charting on Google Chart is purely based on HTML5/SVG technology; the tool helps create charts in various formats with beautiful animation and interactive controls.

7. Axis

style="text-align: center;">class="border aligncenter wp-image-393" src="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-22.jpg" alt="Axis " width="750" srcset="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-22.jpg 600w, http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-22-260x300.jpg 260w" sizes="(max-width: 600px) 100vw, 600px" />

href="http://www.axiis.org/index.html" target="_blank">Axiis is an open source data visualization framework developed by Tom Gonzalez and Michael VanDaniker. The tool is specially designed for beginner and expert developers alike. Axiis provides both pre-built visualization components as well as abstract layout patterns and rendering classes that allow you to create your own unique visualizations.

Easy Chart And Infographic Tools

Admittedly, most bloggers (myself included) do not need comprehensive charting tools above for their regular blogging operations. More often, all we need is an easy web application or a simple tool to get the job done quickly.

With that being said, here is the list of creation tools that require very little learning efforts and user friendly.

1. Visme

class="border aligncenter wp-image-19814 size-large" src="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/visme-750x345.jpg" alt="visme" width="750" height="345" srcset="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/visme.jpg 750w, http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/visme-300x138.jpg 300w" sizes="(max-width: 750px) 100vw, 750px" />

href="http://www.visme.co/">Visme is a DIY platform that allows users to create professional presentations and infographics. More than 350,000 individuals and organizations (including users from big companies like IBM and Disney) utilize the tool to communicate better through interactive graphics and presentations.

2. Easel.ly

style="text-align: center;">class="border aligncenter wp-image-373" src="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-8.jpg" alt="Easel.ly" width="750" srcset="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-8.jpg 600w, http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-8-282x300.jpg 282w" sizes="(max-width: 600px) 100vw, 600px" />

href="http://www.easel.ly/" target="_blank" rel="nofollow">Easel.ly helps create and share visual data easily online. The web app comes in a simple interface with some preset templates and drag-and-drop features. Although Easel.ly is still currently in beta mode, but it already has more than 130,000 users-created visuals on its server.

3. Vizualize.me

style="text-align: center;">class="border aligncenter wp-image-370" src="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-6.jpg" alt="VIsualize.me" width="750" srcset="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-6.jpg 600w, http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-6-300x236.jpg 300w" sizes="(max-width: 600px) 100vw, 600px" />

href="http://vizualize.me/" target="_blank" rel="nofollow">Vizualize.me helps create beautiful infographics about individuals (yes, hence the name Vizualize Me). It’s a fun tool to play around with and it creates beautiful resume or profile in just a few clicks. In case you are on LinkedIn, you should really try this out – the tool is able to link with your LinkedIn profile and generates stunning graphics based on your data.

4. Hohli

class="border aligncenter wp-image-381" src="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-13.jpg" alt="Hohli" width="750" srcset="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-13.jpg 810w, http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-13-300x218.jpg 300w, http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-13-750x547.jpg 750w" sizes="(max-width: 810px) 100vw, 810px" />

Need a simple chart builder? Then href="http://charts.hohli.com/" target="_blank" rel="nofollow">Hohli is the place to visit. This web applications support various types of charts in twelve different sizes – all users need to go is to key in the data and design details.

5. Piktochart

style="text-align: center;">class="border aligncenter wp-image-382" src="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-14.jpg" alt="Piktochart Infographic" width="750" srcset="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-14.jpg 600w, http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-14-300x288.jpg 300w" sizes="(max-width: 600px) 100vw, 600px" />

href="http://piktochart.com/" target="_blank">Piktochart is a template-based infographic tools that help non designers to create beautiful graphics and charts. The tool supports drag-and-drop features and it provides a wide selections in preset templates, icones, vectors, and images. If you are looking for an easy graphic tool and do not mind paying a small fees for the service, Piktochart is definitely one of your best choices.

6.  Infogr.am

style="text-align: center;">class="border aligncenter wp-image-384" src="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-16.jpg" alt="Infogram" width="750" srcset="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-16.jpg 600w, http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-16-300x195.jpg 300w" sizes="(max-width: 600px) 100vw, 600px" />

href="http://blog.infogr.am/" target="_blank" rel="nofollow">Infogr.am is an user-friendly web app for making infographics. Create interactive infographics and charts with a few clicks, place them in your article, blog post or share with friends. With some 200 000 infographics created and 10 000 new sign-ups a week it’s the fastest growing data visualization community in the world.

Inspiring Examples Of Data Visualizations

So are you ready to create some of your own infographics? Wait. We still have a little more to go here.

Here are some of the most popular infographics and charts captured from the Internet. I am pretty sure that you have seen some of them on social media networks in the past – which proves that pretty graphics with meaningful data sticks!

Also, there are reasons why infographics galleries are so heavy trafficked these days. By referring on others’ works, we get to learn what works well with the audiences. What is the average size for a popular infographic? What type of topic is most welcomed by the viewers?Should you include as many data as you can into your charts? How many bullet points should you cover in your infographics? What makes this infographic popular? These are the questions to ask when you are browsing around the samples.

href="http://lokeshdhakar.com/coffee-drinks-illustrated/" target="_blank" rel="nofollow">Coffee Drinks Illustrated

style="text-align: center;">class="border aligncenter wp-image-386" src="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-17.jpg" alt="Coffee Drinks Illustrated" width="750" srcset="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-17.jpg 600w, http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-17-300x273.jpg 300w" sizes="(max-width: 600px) 100vw, 600px" />

href="http://www.pcworld.com/article/190172/ss.html" target="_blank" rel="nofollow">Field Guide For Fan Boys 

style="text-align: center;">class="border aligncenter wp-image-387" src="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-18.jpg" alt="PC World Fan Boys Field Guide" width="750" srcset="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-18.jpg 600w, http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-18-300x296.jpg 300w" sizes="(max-width: 600px) 100vw, 600px" />

href="http://www.mikewirthart.com/?projects=best-beer-in-america-map-2008" target="_blank" rel="nofollow">The Best Beer In America 2008

style="text-align: center;">class="border aligncenter wp-image-388" src="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-19.jpg" alt="The Best Beer In America" width="750" srcset="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-19.jpg 600w, http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-19-300x174.jpg 300w" sizes="(max-width: 600px) 100vw, 600px" />

href="http://www.behance.net/Gallery/Periodic-Table-of-Typefaces/193759" target="_blank" rel="nofollow">Periodic Tables Of Typefaces

style="text-align: center;">class="border aligncenter wp-image-389" src="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-20.jpg" alt="Typefaces Table" width="750" srcset="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-20.jpg 600w, http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-20-300x200.jpg 300w" sizes="(max-width: 600px) 100vw, 600px" />

href="http://www.nytimes.com/interactive/2008/09/29/business/20080929-CONGRESS-VOTE-GRAPHIC.html?_r=0" target="_blank" rel="nofollow">Bailout Tracker By NY Times

style="text-align: center;">class="border aligncenter wp-image-391" src="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-21.jpg" alt="Bailout Tracker" width="750" srcset="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-21.jpg 600w, http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-21-300x205.jpg 300w" sizes="(max-width: 600px) 100vw, 600px" />

Digging Deeper

I bumped into dozens of interesting blogs and websites related to our topic when I was doing my research for this post. Seriously, there are so much to read and learn and play with! I never knew there are so much data available freely on href="http://www.gapminder.org/data/" target="_blank" rel="nofollow">Gap Minder and href="http://www.betterworldflux.com/" target="_blank" rel="nofollow">Better World Flux; I have read a lot on informative sites/blogs like title="UX Booth" href="http://www.uxbooth.com/articles/" target="_blank">UX Booth (not entirely related to data visualization, but there are plenty of useful articles on how visualizations improve web user experience), href="http://dd.dynamicdiagrams.com/" target="_blank" rel="nofollow">Dynamic Diagrams, href="http://flowingdata.com/" target="_blank" rel="nofollow">Flowing Data, as well as title="Boxes And Arrows" href="http://boxesandarrows.com/" target="_blank">Boxes And Arrows; and I deeply admire all the stunning works displayed on href="http://www.styleandflow.com/" target="_blank" rel="nofollow">Style And Flow,  href="http://pinterest.com/rtkrum/cool-infographics-gallery/" target="_blank" rel="nofollow">Randy’s Pinterest board,  href="http://chartporn.org/" target="_blank" rel="nofollow">Chart Porn, and href="http://www.coolinfographics.com/" target="_blank" rel="nofollow">Cool Infographics.

If you are merely starting up on data visualization, I highly recommend you to visit the sites and blogs listed above. If you have not href="http://www.webhostingsecretrevealed.net/blog/featured-articles/creating-and-using-simple-infographics-to-increase-your-site-traffic/">leverage the power of data visualizations in your marketing campaign, now is the time to start. And, in case you think I’ve missed out some important tools or resources in this post (which I am certain that there are many), please leave your suggestion in the comment box below.

Page 21 – Web Hosting Secret Revealed