Components: Difference between revisions

← Older edit
VisualWikitext
mNo edit summary
Jamess (talk | contribs)
17 edits
No edit summary
 
(44 intermediate revisions by 5 users not shown)
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]]. Here is a list of content components that can be styled - click a logo for more information:
<center>
<center>
 
{| class="wikitable" border=1 cellspacing=0 cellpadding=3
{| class="wikitable sortable" border=1 cellspacing=0 cellpadding=3
!colspan="6"|<font size=3>Content Components</font>
|-
|-
! style="background:#C0C0C0" | Logo
| [[Image:Customicon.PNG|link=TextorContentBlockComponent]]
! style="background:#C0C0C0" | Title
| Text or Content Block
! style="background:#C0C0C0" | Description
| Add text and images using a visual editor
|-
| [[Image:Feedicon.png|link=FeedComponent]]
| Web Feed
| Add content from websites that publish feeds of their content
|-
|-
| [[Image:Friendicon.png|link=FriendComponent]]
| [[Image:HeaderIcon.png|link=HeadingComponent]]
| Friend List
| Heading
| Add a list of friends to your site
| Add a customizable text heading using a visual editor
|-
|-
| [[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
|-
|-
| [[Image:Pagecountericon.PNG|link=PageCounterComponent]]
| [[Image:spacericon.png|link=SpacerComponent]]
| Page Counter
| Spacer
| Display your number of unique visits or page views on your website
| Adds a spacer between components
|-
| [[Image:Imageicon.PNG|link=ImageComponent]]
| Single Image
| Place a single image on your page
|-
| [[Image:Imageslideshowicon.PNG|link=ImageSlideshowComponent]]
| Image Slideshow
| Add a slideshow from all of the images in a folder
|-
|-
| [[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
|-
| [[Image:Formicon.PNG|link=FormComponent]]
| Contact Form
| Display a simple form on your site that e-mails you submissions
|-
| [[Image:Feedicon.PNG|link=FeedComponent]]
| Web Feed
| Add content from websites that publish feeds of their content
| Add content from websites that publish feeds of their content
|-
|-
| [[Image:Lastfmicon.png|link=LastfmComponent]]
| [[Image:Googlemapsicon.PNG|link=GoogleMapComponent]]
| Last.FM
| Google Maps
| Display music that you listen to through your Last.FM account
| Display a map with a location on it
|-
|-
| [[Image:Navigationicon.png|link=NavigationComponent]]
| [[Image:Navigationicon.PNG|link=NavigationComponent]]
| Navigation
| Navigation
| Create an extra navigation menu
| Create an extra navigation menu
|-
|-
| [[Image:Redditicon.PNG|link=RedditComponent]]
| [[Image:WorldMapicon.png|link=WorldMapComponent]]
| Reddit
| Interactive World Map
| Display stories from reddit.com on your website
| Display an interactive map with custom markers
|-
| [[Image:Bnetappsicon.PNG|link=BravenetComponent]]
| Bravenet Web Apps
| Add A Bravenet Web App to your site
|-
| [[Image:Guestbookicon.PNG|link=GuestbookComponent]]
| Guestbook
| Allow your visitors to write a message to you!
|-
| [[Image:Pagecountericon.PNG|link=PageCounterComponent]]
| Page Counter
| Display your number of unique visits or page views on your website
|-
!colspan="6"|<font size=3>Blogging Components</font>
|-
| [[Image:Blogicon.PNG|link=BlogComponent]]
| Blog Posts
| Display blog posts you have written as a list, summary or full posts
|-
| [[Image:Blogcommenticon.PNG|link=BlogCommentComponent]]
| Blog Comments
| Display recent comments made on your blog posts
|-
|-
| [[Image:Diggicon.PNG|link=DiggComponent]]
| [[Image:Blogsearchicon.PNG|link=BlogSearchComponent]]
| Digg
| Blog Search
| Display stories from digg.com on your website
| Display a search box so that your blog can be searched
|-
|-
| [[Image:facestaticon.PNG|link=FacebookStatusComponent]]
| [[Image:Blogarchiveicon.PNG|link=BlogArchiveComponent]]
| Facebook Status Updates
| Blog Archive
| Display your recent Facebook Status updates on your page
| Show links to your old blog posts by dates, categories or tags
|-
|-
| [[Image:Gamercardicon.png|link=GamercardComponent]]
!colspan="6"|<font size=3>Multimedia Components</font>
| Xbox GamerCard
| Show off your scores by entering your XBOX GamerTag
|-
|-
| [[Image:Customicon.png|link=ContentBlockComponent]]
| [[Image:beforeaftericon.png|link=BeforeAfterComponent]]
| Text or Content Block
| Before After
| Add text and images using a visual editor
| Show a before and after image
|-
|-
| [[Image:Paypalicon.png|link=PaypalComponent]]
| [[Image:html5videoicon.png|link=HTML5VideoComponent]]
| Paypal
| HTML5 Video
| Display a Paypal "buy now" button on your site
| Display an HTML5 Video on your website
|-
|-
| [[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:Formicon.png|link=FormComponent]]
| [[Image:GDocsicon.PNG|link=GoogleDocsViewerComponent]]
| Form
| Google Docs Viewer
| Display a simple form on your site that e-mails you submissions
| Display a document on your website
|-
|-
| [[Image:Googlemapsicon.png|link=GoogleMapComponent]]
| [[Image:Flickricon.PNG|link=FlickrGalleryComponent]]
| Google Maps
| Display a map with a location on it
|-
| [[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
|-
|-
| [[Image:Twittericon.png|link=TwitterComponent]]
| [[Image:Videoplayericon.PNG|link=VideoPlayerComponent]]
| Twitter Timeline
| Video Player
| Display your recent Twitter updates on your page
| Display a video on your website.
|-
| [[Image:Flashicon.PNG|link=FlashComponent]]
| Embed Flash
| Embed a Flash SWF on your website
|-
| [[Image:Vimeoicon.PNG|link=VimeoComponent]]
| Vimeo
| Display a Vimeo video on your site
|-
| [[Image:Audioplayericon.PNG|link=AudioPlayerComponent]]
| Audio Player
| Let your visitors listen to music on your website
|-
!colspan="6"|<font size=3>Social Components</font>
|-
| [[Image:Sociabuttonsicon.PNG|link=ShareButtonsComponent]]
| Social Sharing Buttons
| Add icons that allow visitors to share your webpages through a variety of social networks.
|-
| [[Image:Lastfmicon.PNG|link=LastfmComponent]]
| Last.FM
| Display music that you listen to through your Last.FM account
|-
|-
| [[Image:Followersicon.PNG|link=TwitterFollowerComponent]]
| [[Image:Followersicon.PNG|link=TwitterFollowerComponent]]
Line 87: Line 133:
| 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:Twittericon.PNG|link=TwitterComponent]]
| Single Image
| Twitter Timeline
| Place a single image on your page
| Display your recent Twitter updates on your page
|-
| [[Image:Githubicon.PNG|link=GitHubRepositoriesComponent]]
| GitHub Repositories
| This component will display a list of recent GitHub repositories for a GitHub user
|-
| [[Image:Tweetbuttonicon.PNG|link=TweetButtonComponent]]
| Tweet Button
| Allow users to share your site on Twitter
|-
| [[Image:facesiteicon.PNG|link=FacebookActivityComponent]]
| Facebook Site Activity
| Show the recent Facebook activity on your site
|-
| [[Image:facelikeicon.PNG|link=FacebookLikeComponent]]
| Facebook Like Button
| Allow users to like a page or item on Facebook
|-
|-
| [[Image:Ebayitemsicon.png|link=ebayItemsComponent]]
| [[Image:facestaticon.PNG|link=FacebookStatusComponent]]
| eBay Listings
| Facebook Status Updates
| Display a list of the items you're selling on eBay
| Display your recent Facebook Status updates on your page
|-
|-
| [[Image:Upcomingicon.png|link=UpcomingComponent]]
| [[Image:Redditicon.PNG|link=RedditComponent]]
| Upcoming.org
| Reddit
| Display upcoming events in your area from Upcoming.org
| Display stories from reddit.com on your website
|-
|-
| [[Image:Bookfreshicon.PNG|link=BookFreshComponent]]
| [[Image:Blogrollicon.PNG|link=BlogrollComponent]]
| BookFresh Online Scheduling
| Blogroll
| Let new and existing clients schedule with your business online
| Display a list of your favorite blogs
|-
|-
| [[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:Friendicon.PNG|link=FriendComponent]]
| Blog Posts
| Friend List
| Display blog posts you have written as a list, summary or full posts
| Add a list of friends to your site
|-
| [[Image:Gamercardicon.PNG|link=GamercardComponent]]
| Xbox GamerCard
| Show off your scores by entering your XBOX GamerTag
|-
!colspan="6"|<font size=3>eCommerce Components</font>
|-
| [[Image:Paypalicon.PNG|link=PaypalComponent]]
| Paypal
| Display a Paypal "buy now" button on your site
|-
|-
| [[Image:Blogcommenticon.png|link=BlogCommentComponent]]
| [[Image:Ecwidsbicon.PNG|link=EcwidShoppingBagComponent]]
| Blog Comments
| Ecwid Shopping Bag
| Display recent comments made on your blog posts
| Create a digital shopping bag for your website
|-
|-
| [[Image:Blogsearchicon.png|link=BlogSearchComponent]]
| [[Image:Ecwidpsicon.PNG|link=EcwidProductSearchComponent]]
| Blog Search
| Ecwid Product Search
| Display a search box so that your blog can be searched
| Create a search box for the products you sell
|-
|-
| [[Image:Blogrollicon.png|link=BlogrollComponent]]
| [[Image:Ecwidplicon.PNG|link=EcwidProductListingComponent]]
| Blogroll
| Ecwid Product Listing
| Display a list of your favorite blogs
| Display products from your Ecwid.com online store
|-
|-
| [[Image:Blogarchiveicon.png|link=BlogArchiveComponent]]
| [[Image:Bookfreshicon.PNG|link=BookFreshComponent]]
| Blog Archive
| BookFresh Online Scheduling
| Show links to your old blog posts by dates, categories or tags
| Let new and existing clients schedule with your business online
|-
|-
| [[Image:Audioplayericon.png|link=AudioPlayerComponent]]
| [[Image:Ebayitemsicon.PNG|link=ebayItemsComponent]]
| Audio Player
| eBay Listings
| Let your visitors listen to music on your website
| Display a list of the items you're selling on eBay
|-
|-
|}
|}
Line 140: Line 212:




Although your Viviti 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.
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://example.viviti.com
 
<hr>
 


===The Basics===


* [[Adding to a Page]]<br>
Want to see these components at work? An example site has been set up to display them all at http://builderexample.com
* [[Editing a Component]]<br>
* [[Deleting a Component]]<br>
* [[Moving Components]]<br>
* [[Collapsing Components]]<br>
* [[Component Toolbar]]<br>
* [[Editing Component Settings]]<br>
* [[Dynamically Generated HTML]]<br>
* [[Adding Third Party Web Tools]]

Latest revision as of 03:02, 18 October 2017

Content Components
Text or Content Block Add text and images using a visual editor
Heading Add a customizable text heading using a visual editor
HTML/Javascript Embed third party widgets or write your own code
Spacer Adds a spacer between components
Single Image Place a single image on your page
Image Slideshow Add a slideshow from all of the images in a folder
Image Gallery Add a number of images to your site in a variety of ways
Contact Form Display a simple form on your site that e-mails you submissions
Web Feed Add content from websites that publish feeds of their content
Google Maps Display a map with a location on it
Navigation Create an extra navigation menu
Interactive World Map Display an interactive map with custom markers
Bravenet Web Apps Add A Bravenet Web App to your site
Guestbook Allow your visitors to write a message to you!
Page Counter Display your number of unique visits or page views on your website
Blogging Components
Blog Posts Display blog posts you have written as a list, summary or full posts
Blog Comments Display recent comments made on your blog posts
Blog Search Display a search box so that your blog can be searched
Blog Archive Show links to your old blog posts by dates, categories or tags
Multimedia Components
Before After Show a before and after image
HTML5 Video Display an HTML5 Video on your website
Youtube Video Display a YouTube video on your site
Google Docs Viewer Display a document on your website
Flickr Gallery Display a collection of images from Flickr in a customizable gallery
Video Player Display a video on your website.
Embed Flash Embed a Flash SWF on your website
Vimeo Display a Vimeo video on your site
Audio Player Let your visitors listen to music on your website
Social Components
Social Sharing Buttons Add icons that allow visitors to share your webpages through a variety of social networks.
Last.FM Display music that you listen to through your Last.FM account
Twitter Followers Display the icons of people following you, or people you're following
Twitter Timeline Display your recent Twitter updates on your page
GitHub Repositories This component will display a list of recent GitHub repositories for a GitHub user
Tweet Button Allow users to share your site on Twitter
Facebook Site Activity Show the recent Facebook activity on your site
Facebook Like Button Allow users to like a page or item on Facebook
Facebook Status Updates Display your recent Facebook Status updates on your page
Reddit Display stories from reddit.com on your website
Blogroll Display a list of your favorite blogs
Friendfeed Display your recent online activity from a variety of other websites
Del.icio.us Display your recently bookmarked websites
Friend List Add a list of friends to your site
Xbox GamerCard Show off your scores by entering your XBOX GamerTag
eCommerce Components
Paypal Display a Paypal "buy now" button on your site
Ecwid Shopping Bag Create a digital shopping bag for your website
Ecwid Product Search Create a search box for the products you sell
Ecwid Product Listing Display products from your Ecwid.com online store
BookFresh Online Scheduling Let new and existing clients schedule with your business online
eBay Listings Display a list of the items you're selling on eBay


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

Retrieved from "https://websitebuilderkb.com/index.php?title=Components&oldid=5267"