Creating your first Website Builder site - Revision history

Ccroft: /* 3. Creating a New Page */

2013-11-28T23:20:08Z

3. Creating a New Page

← Older revision		Revision as of 16:20, 28 November 2013
Line 138:		Line 138:


	As you have seen, website builder creates a few extra pages for you initially with some common purposes, but these aren't required and you can create additional pages for other purposes, such as an [[Form \| order form]], or a page for a specific component or components.		As you have seen, website builder creates a few extra pages for you initially with some common purposes, but these aren't required and you can [[Create a New Page \| create additional pages]] for other purposes, such as an [[Form \| order form]], or a page for a specific component or components.

	~~In this section, we will create a new page per the above example - an order form for a small business.~~


	~~As before, simply click [[Add To Page]] on the [[Toolbar]] and locate the Component.~~

	~~After selecting this Component, you will be able to choose exactly where you want to add it as we did with the single image previously~~.


	[[Category:Using The Website Builder]]		[[Category:Using The Website Builder]]

Ccroft: /* Adding a Component */

2013-11-28T23:16:55Z

Adding a Component

← Older revision		Revision as of 16:16, 28 November 2013
Line 131:		Line 131:
	When the upload is complete you will be able to view your image and make any edits, such as cropping, adding a border, etc.		When the upload is complete you will be able to view your image and make any edits, such as cropping, adding a border, etc.

			[[Image:Example1.PNG]]

	After you click on "Insert Image", the image will be embedded into a [[TextorContentBlockComponent \| Text or Content Block]] for further customization before it is added to your page.		After you click on "Insert Image", the image will be embedded into a [[TextorContentBlockComponent \| Text or Content Block]] for further customization before it is added to your page.


	~~[[Image:Example1.PNG]]~~

	~~<small>Our website with a customized Content Block and inserted image.</small>~~

	==3. Creating a New Page==		==3. Creating a New Page==

Ccroft: /* Adding a Component */

2013-11-28T23:14:38Z

Adding a Component

← Older revision		Revision as of 16:14, 28 November 2013
Line 119:		Line 119:


	Because this is a new account and we haven't uploaded any images, we will need to do this first using the [[File Manager]]. Click on the "~~upload~~ a ~~new file~~" link to access it.		Because this is a new account and we haven't uploaded any images, we will need to do this first using the [[File Manager]]. Click on the "Upload a New Image" link to access it.


Line 127:		Line 127:
	We will assume you want to upload an image you have on your computer and are not wanting to use an external image or an image located in your [http://www.flickr.com Flickr] account.		We will assume you want to upload an image you have on your computer and are not wanting to use an external image or an image located in your [http://www.flickr.com Flickr] account.

	Clicking the "~~Add~~ Files" button will allow you to browse files you have locally on your computer to be uploaded. Once you have located your image ~~file~~, ~~click on "Upload" at the bottom of the page to complete the process~~.		Clicking the "Select Files to Upload" button will allow you to browse files you have locally on your computer to be uploaded. Once you have located and selected your image, it will automatically upload.

			When the upload is complete you will be able to view your image and make any edits, such as cropping, adding a border, etc.


	~~You will return to the main first area with your uploaded image chosen as your image selection.~~		After you click on "Insert Image", the image will be embedded into a [[TextorContentBlockComponent \| Text or Content Block]] for further customization before it is added to your page.


	After you click on "Insert", the image will be embedded into a [[TextorContentBlockComponent \| Text or Content Block]] for further customization before it is added to your page.

Ccroft: /* Adding a Component */

2013-11-28T23:08:05Z

Adding a Component

← Older revision		Revision as of 16:08, 28 November 2013
Line 113:		Line 113:


	Let's suppose you want to [[Single Image \| add an image]] to this page. Simply click [[Add To Page]] on the [[Toolbar]] and locate the Component.		Let's suppose you want to [[Single Image \| add an image]] to this page. Simply click [[Add To Page \| Add Content to Page]] on the [[Toolbar]] and locate the Component.

Ccroft: /* Page Elements */

2013-11-28T23:00:32Z

Page Elements

← Older revision		Revision as of 16:00, 28 November 2013
Line 58:		Line 58:
	'''3. [[Site Heading]]''' - Main site title and sub title.		'''3. [[Site Heading]]''' - Main site title and sub title.

			<div class='note'>
	You can easily style your website's title and subtitle without going in and editing your CSS by going to "'''Edit Theme'''" and selecting "'''Edit Fonts'''".		'''Note:'''<br />
			You can easily style your website's title and subtitle without going in and editing your CSS by going to "'''Edit Theme'''" and selecting "'''Edit Fonts'''". You can edit all your site fonts from the same screen.
			</div>

	[[Image:Headerstyle.JPG]]		[[Image:Headerstyle.JPG]]

Ccroft: /* 1. Choosing your Theme */

2013-11-28T22:59:47Z

1. Choosing your Theme

← Older revision		Revision as of 15:59, 28 November 2013
Line 18:		Line 18:


	All available Themes can be viewed here. You can ~~sort by popularity, date added or filter by key word or description. Suggested filters are listed along the left column, however we invite you to~~ filter by a word or description of your choice ~~as well. Clicking in "View all themes"~~ will reset the filter and bring you back to the main page. Icons representing '''~~Available~~ layouts''' are ~~also~~ displayed ~~here~~ to give you a quick look at how each theme can be configured.		All available Themes can be viewed here. You can filter by a word or description of your choice, clearing the Search box will reset the filter and bring you back to the main page. Icons representing '''Page layouts''' are displayed when you mouse over a theme to give you a quick look at how each theme can be configured.


	~~The filter is smart in that it will give you keyword suggestions as you type. Try it out!~~

	<div class='note'>		<div class='note'>
	'''Note:'''<br />		'''Note:'''<br />
	Clicking on a Theme thumbnail will not immediately apply it. You will be able to take a closer look before choosing it by clicking on "~~Use this Theme~~".		Clicking on a Theme thumbnail will not immediately apply it. You will be able to take a closer look before choosing it by clicking on "Install".
	</div>		</div>

			Simply mouse over the Theme you would like to use and click the "Install" button. [[Choosing a New Theme]] later is quick and easy, so don't worry about making a permanent choice here.

	~~Simply click on the Theme you would like to use and click the "Use this Theme" button. [[Choosing a New Theme]] later is quick and easy, so don't worry about making a permanent choice here.~~

			<div id="editor">

	~~<div id="editor">~~
	==2. The Website Editor==		==2. The Website Editor==
	</div>		</div>

Ccroft: /* 2. The Website Editor */

2013-11-28T22:55:15Z

2. The Website Editor

← Older revision		Revision as of 15:55, 28 November 2013
Line 59:		Line 59:


	'''3. [[Site Heading]]''' - ~~The~~ title ~~of the current page. This will also display in your browsers~~ title ~~bar~~.		'''3. [[Site Heading]]''' - Main site title and sub title.

	~~''A [[Site Sub-Heading]] element is also available below the heading, however it is empty by default.''~~

			You can easily style your website's title and subtitle without going in and editing your CSS by going to "'''Edit Theme'''" and selecting "'''Edit Fonts'''".
	You can easily style your website's title and subtitle without going in and editing your CSS by ~~hovering over the heading or subheading~~ to ~~access it~~'~~s toolbar, then clicking on the~~ "'''~~style~~'''" ~~button:~~

	[[Image:Headerstyle.JPG]]		[[Image:Headerstyle.JPG]]

	You can change the font size, letter spacing, line height, font color and font style. Everything is done with easy sliding and ~~draging~~ - no typing required!		You can change the font size, letter spacing, line height, font color and font style. Everything is done with easy sliding and dragging - no typing required!

Shanker: /* Adding a Component */

2012-02-20T18:13:42Z

Adding a Component

← Older revision		Revision as of 11:13, 20 February 2012
Line 120:		Line 120:

	You will see all available [[content locations]] it can be added - on the current page only (content locations in Gold), on every page (content locations in Red), or on every page under the current page directory (content locations in Blue. For example - if you are editing a page called "About", the blue content locations would allow you to add this component to all pages under the /about/ directory).		You will see all available [[content locations]] it can be added - on the current page only (content locations in Gold), on every page (content locations in Red), or on every page under the current page directory (content locations in Blue. For example - if you are editing a page called "About", the blue content locations would allow you to add this component to all pages under the /about/ directory).


	~~[[Image:Insertimagemf.PNG]]~~


Line 146:		Line 143:

	<small>Our website with a customized Content Block and inserted image.</small>		<small>Our website with a customized Content Block and inserted image.</small>



	==3. Creating a New Page==		==3. Creating a New Page==

Shanker at 21:30, 17 January 2012

2012-01-17T21:30:29Z

← Older revision		Revision as of 14:30, 17 January 2012
Line 32:		Line 32:


			<div id="editor">
	==2. The Website Editor==		==2. The Website Editor==
			</div>

	You should now be viewing a nice looking page to be customized to your specifications. That was easy!		You should now be viewing a nice looking page to be customized to your specifications. That was easy!

Shanker at 19:44, 17 January 2012

2012-01-17T19:44:38Z

← Older revision		Revision as of 12:44, 17 January 2012
Line 11:		Line 11:

	Immediately after completing registration, you will be given the ability to select your Theme.		Immediately after completing registration, you will be given the ability to select your Theme.

			''Note: If you are using a third party host which uses our builder software and have already selected your theme, you will not be presented with this theme selection page and can ignore this section and move on to the '''Website Editor''' section below.''