Components: Difference between revisions


No edit summary
Line 1: Line 1:
Content Components are chunks of html that are [[Dynamically Generated HTML | dynamically generated]] and inserted into [[Content Locations]]. Each content component can be edited, dragged, or removed dynamically using the [[Component Toolbar]]. Please see [[Adding to a Page | this page]] for information about how to add components to your site. Here is a list of content components that can be styled - click a logo for more information:
==Available Components==
==Available Components==
<center>
<center>
Line 9: Line 7:
! style="background:#C0C0C0" | Description
! style="background:#C0C0C0" | Description
|-
|-
| [[Image:Customicon.png|link=TextorContentBlockComponent]]
| [[Image:Customicon.PNG|link=TextorContentBlockComponent]]
| Text or Content Block
| Text or Content Block
| Add text and images using a visual editor
| Add text and images using a visual editor
|-
|-
| [[Image:Feedicon.png|link=FeedComponent]]
| [[Image:Feedicon.PNG|link=FeedComponent]]
| Web Feed
| Web Feed
| Add content from websites that publish feeds of their content
| Add content from websites that publish feeds of their content
|-
|-
| [[Image:Friendicon.png|link=FriendComponent]]
| [[Image:Friendicon.PNG|link=FriendComponent]]
| Friend List
| Friend List
| Add a list of friends to your site
| Add a list of friends to your site
|-
|-
| [[Image:Htmlicon.png|link=HTMLComponent]]
| [[Image:Htmlicon.PNG|link=HTMLComponent]]
| HTML/Javascript
| HTML/Javascript
| Embed third party widgets or write your own code
| Embed third party widgets or write your own code
Line 29: Line 27:
| Display your number of unique visits or page views on your website
| Display your number of unique visits or page views on your website
|-
|-
| [[Image:Imagegalleryicon.png|link=ImageGalleryComponent]]
| [[Image:Imagegalleryicon.PNG|link=ImageGalleryComponent]]
| Image Gallery
| Image Gallery
| Add a number of images to your site in a variety of ways
| Add a number of images to your site in a variety of ways
Line 37: Line 35:
| Add a slideshow from all of the images in a folder
| Add a slideshow from all of the images in a folder
|-
|-
| [[Image:Lastfmicon.png|link=LastfmComponent]]
| [[Image:Lastfmicon.PNG|link=LastfmComponent]]
| Last.FM
| Last.FM
| Display music that you listen to through your Last.FM account
| Display music that you listen to through your Last.FM account
|-
|-
| [[Image:Navigationicon.png|link=NavigationComponent]]
| [[Image:Navigationicon.PNG|link=NavigationComponent]]
| Navigation
| Navigation
| Create an extra navigation menu
| Create an extra navigation menu
Line 81: Line 79:
| Display your recent Facebook Status updates on your page
| Display your recent Facebook Status updates on your page
|-
|-
| [[Image:Gamercardicon.png|link=GamercardComponent]]
| [[Image:Gamercardicon.PNG|link=GamercardComponent]]
| Xbox GamerCard
| Xbox GamerCard
| Show off your scores by entering your XBOX GamerTag
| Show off your scores by entering your XBOX GamerTag
|-
|-
| [[Image:Paypalicon.png|link=PaypalComponent]]
| [[Image:Paypalicon.PNG|link=PaypalComponent]]
| Paypal
| Paypal
| Display a Paypal "buy now" button on your site
| Display a Paypal "buy now" button on your site
Line 101: Line 99:
| Display products from your Ecwid.com online store
| Display products from your Ecwid.com online store
|-
|-
| [[Image:Youtubeicon.png|link=YoutubeComponent]]
| [[Image:Youtubeicon.PNG|link=YoutubeComponent]]
| Youtube Video
| Youtube Video
| Display a YouTube video on your site
| Display a YouTube video on your site
|-
|-
| [[Image:Vimeoicon.png|link=VimeoComponent]]
| [[Image:Vimeoicon.PNG|link=VimeoComponent]]
| Vimeo
| Vimeo
| Display a Vimeo video on your site
| Display a Vimeo video on your site
|-
|-
| [[Image:Githubicon.png|link=GitHubRepositoriesComponent]]
| [[Image:Githubicon.PNG|link=GitHubRepositoriesComponent]]
| GitHub Repositories
| GitHub Repositories
| This component will display a list of recent GitHub repositories for a GitHub user.
| This component will display a list of recent GitHub repositories for a GitHub user.
|-
|-
| [[Image:Formicon.png|link=FormComponent]]
| [[Image:Formicon.PNG|link=FormComponent]]
| Form
| Form
| Display a simple form on your site that e-mails you submissions
| Display a simple form on your site that e-mails you submissions
Line 121: Line 119:
| Allow your visitors to write a message to you!
| Allow your visitors to write a message to you!
|-
|-
| [[Image:Googlemapsicon.png|link=GoogleMapComponent]]
| [[Image:Googlemapsicon.PNG|link=GoogleMapComponent]]
| Google Maps
| Google Maps
| Display a map with a location on it
| Display a map with a location on it
|-
|-
| [[Image:Flickricon.png|link=FlickrGalleryComponent]]
| [[Image:Flickricon.PNG|link=FlickrGalleryComponent]]
| Flickr Gallery
| Flickr Gallery
| Display a collection of images from Flickr in a customizable gallery
| Display a collection of images from Flickr in a customizable gallery
Line 133: Line 131:
| Allow users to share your site on Twitter
| Allow users to share your site on Twitter
|-
|-
| [[Image:Twittericon.png|link=TwitterComponent]]
| [[Image:Twittericon.PNG|link=TwitterComponent]]
| Twitter Timeline
| Twitter Timeline
| Display your recent Twitter updates on your page
| Display your recent Twitter updates on your page
Line 141: Line 139:
| Display the icons of people following you, or people you're following
| Display the icons of people following you, or people you're following
|-
|-
| [[Image:Imageicon.png|link=ImageComponent]]
| [[Image:Imageicon.PNG|link=ImageComponent]]
| Single Image
| Single Image
| Place a single image on your page
| Place a single image on your page
|-
|-
| [[Image:Ebayitemsicon.png|link=ebayItemsComponent]]
| [[Image:Ebayitemsicon.PNG|link=ebayItemsComponent]]
| eBay Listings
| eBay Listings
| Display a list of the items you're selling on eBay
| Display a list of the items you're selling on eBay
|-
| [[Image:Upcomingicon.png|link=UpcomingComponent]]
| Upcoming.org
| Display upcoming events in your area from Upcoming.org
|-
|-
| [[Image:Bookfreshicon.PNG|link=BookFreshComponent]]
| [[Image:Bookfreshicon.PNG|link=BookFreshComponent]]
Line 157: Line 151:
| Let new and existing clients schedule with your business online
| Let new and existing clients schedule with your business online
|-
|-
| [[Image:Friendfeedicon.png|link=FriendfeedComponent]]
| [[Image:Friendfeedicon.PNG|link=FriendfeedComponent]]
| Friendfeed
| Friendfeed
| Display your recent online activity from a variety of other websites
| Display your recent online activity from a variety of other websites
|-
|-
| [[Image:Deliciousicon.png|link=DeliciousComponent]]
| [[Image:Deliciousicon.PNG|link=DeliciousComponent]]
| Del.icio.us
| Del.icio.us
| Display your recently bookmarked websites
| Display your recently bookmarked websites
|-
|-
| [[Image:Blogicon.png|link=BlogComponent]]
| [[Image:Blogicon.PNG|link=BlogComponent]]
| Blog Posts
| Blog Posts
| Display blog posts you have written as a list, summary or full posts
| Display blog posts you have written as a list, summary or full posts
|-
|-
| [[Image:Blogcommenticon.png|link=BlogCommentComponent]]
| [[Image:Blogcommenticon.PNG|link=BlogCommentComponent]]
| Blog Comments
| Blog Comments
| Display recent comments made on your blog posts
| Display recent comments made on your blog posts
|-
|-
| [[Image:Blogsearchicon.png|link=BlogSearchComponent]]
| [[Image:Blogsearchicon.PNG|link=BlogSearchComponent]]
| Blog Search
| Blog Search
| Display a search box so that your blog can be searched
| Display a search box so that your blog can be searched
|-
|-
| [[Image:Blogrollicon.png|link=BlogrollComponent]]
| [[Image:Blogrollicon.PNG|link=BlogrollComponent]]
| Blogroll
| Blogroll
| Display a list of your favorite blogs
| Display a list of your favorite blogs
|-
|-
| [[Image:Blogarchiveicon.png|link=BlogArchiveComponent]]
| [[Image:Blogarchiveicon.PNG|link=BlogArchiveComponent]]
| Blog Archive
| Blog Archive
| Show links to your old blog posts by dates, categories or tags
| Show links to your old blog posts by dates, categories or tags
|-
|-
| [[Image:Audioplayericon.png|link=AudioPlayerComponent]]
| [[Image:Audioplayericon.PNG|link=AudioPlayerComponent]]
| Audio Player
| Audio Player
| Let your visitors listen to music on your website
| Let your visitors listen to music on your website

Revision as of 10:15, 17 May 2013

Available Components

Logo Title Description
Customicon.PNG Text or Content Block Add text and images using a visual editor
Feedicon.PNG Web Feed Add content from websites that publish feeds of their content
Friendicon.PNG Friend List Add a list of friends to your site
Htmlicon.PNG HTML/Javascript Embed third party widgets or write your own code
Pagecountericon.PNG Page Counter Display your number of unique visits or page views on your website
Imagegalleryicon.PNG Image Gallery Add a number of images to your site in a variety of ways
Imageslideshowicon.PNG Image Slideshow Add a slideshow from all of the images in a folder
Lastfmicon.PNG Last.FM Display music that you listen to through your Last.FM account
Navigationicon.PNG Navigation Create an extra navigation menu
Sociabuttonsicon.PNG Social Sharing Buttons Add icons that allow visitors to share your webpages through a variety of social networks.
Bnetappsicon.PNG Bravenet Web Apps Add A Bravenet Web App to your site
Redditicon.PNG Reddit Display stories from reddit.com on your website
GDocsicon.PNG Google Docs Viewer Display a document on your website
Videoplayericon.PNG Video Player Display a video on your website.
Flashicon.PNG Embed Flash Embed a Flash SWF on your website
Facesiteicon.PNG Facebook Site Activity Show the recent Facebook activity on your site
Facelikeicon.PNG Facebook Like Button Allow users to like a page or item on Facebook
Facestaticon.PNG Facebook Status Updates Display your recent Facebook Status updates on your page
Gamercardicon.PNG Xbox GamerCard Show off your scores by entering your XBOX GamerTag
Paypalicon.PNG Paypal Display a Paypal "buy now" button on your site
Ecwidsbicon.PNG Ecwid Shopping Bag Create a digital shopping bag for your website
Ecwidpsicon.PNG Ecwid Product Search Create a search box for the products you sell
Ecwidplicon.PNG Ecwid Product Listing Display products from your Ecwid.com online store
Youtubeicon.PNG Youtube Video Display a YouTube video on your site
Vimeoicon.PNG Vimeo Display a Vimeo video on your site
Githubicon.PNG GitHub Repositories This component will display a list of recent GitHub repositories for a GitHub user.
Formicon.PNG Form Display a simple form on your site that e-mails you submissions
Guestbookicon.PNG Guestbook Allow your visitors to write a message to you!
Googlemapsicon.PNG Google Maps Display a map with a location on it
Flickricon.PNG Flickr Gallery Display a collection of images from Flickr in a customizable gallery
Tweetbuttonicon.PNG Tweet Button Allow users to share your site on Twitter
Twittericon.PNG Twitter Timeline Display your recent Twitter updates on your page
Followersicon.PNG Twitter Followers Display the icons of people following you, or people you're following
Imageicon.PNG Single Image Place a single image on your page
Ebayitemsicon.PNG eBay Listings Display a list of the items you're selling on eBay
Bookfreshicon.PNG BookFresh Online Scheduling Let new and existing clients schedule with your business online
Friendfeedicon.PNG Friendfeed Display your recent online activity from a variety of other websites
Deliciousicon.PNG Del.icio.us Display your recently bookmarked websites
Blogicon.PNG Blog Posts Display blog posts you have written as a list, summary or full posts
Blogcommenticon.PNG Blog Comments Display recent comments made on your blog posts
Blogsearchicon.PNG Blog Search Display a search box so that your blog can be searched
Blogrollicon.PNG Blogroll Display a list of your favorite blogs
Blogarchiveicon.PNG Blog Archive Show links to your old blog posts by dates, categories or tags
Audioplayericon.PNG Audio Player Let your visitors listen to music on your website


Although your Website Builder theme will work if you do not apply any css styles to the html for the optional content components, you will need to style them if you want to give them a unique design rather than the default style that is applied.


Want to see these components at work? An example site has been set up to display them all at http://builderexample.com