imcreator by Junior Ho

IM Creator | How to Create a Website

Contents Contents .............................................................................................................................................. 2 Intro ..................................................................................................................................................... 5 Start..................................................................................................................................................... 5 Choose a Template or Start from Blank ............................................................................................. 6 Choosing a Template .......................................................................................................................... 7 Customizing a Template ..................................................................................................................... 8 Customizing - The General Idea ......................................................................................................... 9 The Editor.......................................................................................................................................... 10 General Actions ................................................................................................................................ 11 Save / Save As .............................................................................................................................. 11 Preview .......................................................................................................................................... 11 Publish ........................................................................................................................................... 11 Open .............................................................................................................................................. 11 Help ............................................................................................................................................... 11 Editing & Adding Elements: .............................................................................................................. 12 Pictures ............................................................................................................................................. 13 Adding a New Picture .................................................................................................................... 13 Replacing a Picture ....................................................................................................................... 14 Cropping a Picture ......................................................................................................................... 15 Inserting a Title / Description to a Picture ..................................................................................... 16 Adding a Link to a Picture (or any other element) ......................................................................... 16 Text: Paragraph / Title ...................................................................................................................... 17 So, whatâ&#x20AC;&#x;s the difference between Title and Paragraph? ............................................................. 17 Adding new text ............................................................................................................................. 17 Editing Text ................................................................................................................................... 18 Copying text from other sources ................................................................................................... 19 Fonts.............................................................................................................................................. 19 Languages ..................................................................................................................................... 19 RTL / LTR ...................................................................................................................................... 19 Linking Elements ............................................................................................................................... 20 Adding a link to an element ........................................................................................................... 20 External Website ........................................................................................................................... 20 Internal Page ................................................................................................................................. 21 2

IM Creator | How to Create a Website

Scroll to element ............................................................................................................................ 21 Email.............................................................................................................................................. 22 Phone ............................................................................................................................................ 22 File download ................................................................................................................................ 23 Extra Options / Right-Click Menu: ..................................................................................................... 24 Align............................................................................................................................................... 24 Arrange .......................................................................................................................................... 24 Replicate to All Pages ................................................................................................................... 25 Donâ&#x20AC;&#x;t scroll with page .................................................................................................................... 25 Attach to page bottom ................................................................................................................... 25 Videos ............................................................................................................................................... 26 Adding a YouTube video ............................................................................................................... 26 Replacing a video .......................................................................................................................... 27 Adding a Vimeo video ................................................................................................................... 27 Picture Galleries ................................................................................................................................ 28 Adding a new gallery ..................................................................................................................... 28 Managing the gallery ..................................................................................................................... 28 Adding a new picture to the gallery ............................................................................................... 29 Slideshows ........................................................................................................................................ 30 Adding a new slideshow ................................................................................................................ 30 Managing the Slideshow ............................................................................................................... 30 Adding a new picture to the slideshow .......................................................................................... 32 Contact Form .................................................................................................................................... 33 Adding a standard contact form .................................................................................................... 33 Adding a customized JotForm Contact Form ................................................................................ 35 HTML (Embed Code) ........................................................................................................................ 36 Line ................................................................................................................................................... 37 Area................................................................................................................................................... 38 Widgets ............................................................................................................................................. 39 Twitter feed .................................................................................................................................... 39 Vimeo ............................................................................................................................................ 40 Google Maps ................................................................................................................................. 41 SoundCloud ................................................................................................................................... 42 JotForm (customized forms) ......................................................................................................... 43 Facebook Like ............................................................................................................................... 45

IM Creator | How to Create a Website

Facebook Comments .................................................................................................................... 46 Facebook Likebox ......................................................................................................................... 47 Menu & Pages .................................................................................................................................. 48 Adding a new blank page .............................................................................................................. 48 Duplicating an existing page ......................................................................................................... 48 Managing and renaming pages ..................................................................................................... 50 Hidden Pages ................................................................................................................................ 51 Adding a secondary menu............................................................................................................. 52 Page size and color ....................................................................................................................... 53 Websiteâ&#x20AC;&#x;s background ................................................................................................................... 53 Changing the background color .................................................................................................... 54 Embedding a picture as background ............................................................................................. 54 Adding a ready-made background ................................................................................................ 56 Website Settings ............................................................................................................................... 57 Page size and color ....................................................................................................................... 57 Favicon .......................................................................................................................................... 58 SEO................................................................................................................................................... 59 Connecting a Domain to Your Site ................................................................................................... 60 Website Analytics (Google Analytics) ............................................................................................... 61 Publishing Your Site .......................................................................................................................... 62 Free vs. Premium - subscription plans .......................................................................................... 62 Connecting a new domain or buying an existing one ................................................................... 62 New Domain .................................................................................................................................. 63 Existing Domain ............................................................................................................................ 63 Domain connection troubleshooting .............................................................................................. 64 Signup ............................................................................................................................................... 65 Login ................................................................................................................................................. 66 Forgot your password? .................................................................................................................. 66

IM Creator | How to Create a Website

Intro IM Creator is a new way to create your website: choose a design, insert your content and publish it to the world – all in one simple, clear and seamless process.

Start To start building your site on IM Creator, click the blue “Start Now” button located on imcreator.com‟s home page. No registration necessary!

IM Creator | How to Create a Website

Choose a Template or Start from Blank After clicking the Start Now button, you will have 3 options: Choose a Template, Start from Blank or go to My Sites.

Choose a template: Browse through our template collection categorized by themes and choose the one that fits you best. Clicking on a template will open it in the editor, where you will be able to customize and change it. Start from Blank: Choose to start with a blank canvas. If this is the first time you are building a website, we recommend using one of our templates rather than starting from blank. My sites: In this folder you will find your saved sites.

IM Creator | How to Create a Website

Choosing a Template There are dozens of templates you can choose from. Choose the one that fits you the most, think how you want your website to look like and what it should contain. We strongly recommend starting with a small, simple and effective website - and expanding it over time. The right template will allow you to complete a wonderful website quickly and effortlessly.

Keep in mind that IM Creatorâ&#x20AC;&#x;s templates are 100% flexible. Everything can be replaced and modified; you can insert your own pictures, text, videos, pages and more.

To better understand how a certain template looks and feels, roll over its thumbnail and click the Preview button. A new preview-window will open in which you can move between the different pages and explore all the parts of the template. To switch to edit mode and start building your site, click the blue Customize Now button at the top right corner of the page. You can also always start editing right away without previewing the template by clicking the Edit button when choosing the template.

IM Creator | How to Create a Website

If you don't find a template you would like to work with, you can always start from a blank page (but take into account it can be quite a challenge!). To start from a blank page - click the Start from Blank button, located on the upper left part of the screen.

Customizing a Template To customize a template, click the Customize Now on the upper right corner after choosing the template. You can change any element in a template: text, picture, video etc. and add new ones. Our platform is Dragâ&#x20AC;&#x;nâ&#x20AC;&#x;drop, just click and modify. You can also delete any element by clicking on it and pressing the Delete button on your keyboard.

IM Creator | How to Create a Website

Customizing - The General Idea There are several basic concepts lying in the heart of IMC’s platform:

1. Website, Pages and Elements – Your website is a collection of pages. The pages contain content elements (text, pictures, gallery etc.). That‟s it, as simple as that. You can move between the different pages by clicking the menu. 2. Everything is Editable – all the elements can be dragged and resized freely. Just click on an element to edit it. It‟s a true what-you-see-is-what-you-get (WYSIWYG) platform. 3. Click and Modify – Any item has its own control panel: Once you click on an element, a black panel will appear on the upper part of the editor. The most relevant action will be marked with a blue button. The more advanced options will appear in grey. Double-clicking on an item will also open the most relevant action. Double-clicking on a picture will open the replace-picture menu and double-clicking on a text box will allow you to edit it. 4. Managing Pages & Menus – The main menu of your website shows by default all the visible pages on your site. Managing the pages will affect the menu‟s appearance on all pages and viceversa. To change the title of one of the menu items, simply change the page‟s name (located under Pages > Manage Pages. There, you can also add more pages or delete them). Advanced users can add multiple menus, to find out more about this option see - Adding a secondary menu 5. Save and Publish – You can save your site any time while building it. Next time you will login, you will find the last saved version of your site under the “My Sites” section (Start > My Sites). Changes will be seen on the live website only after publishing it. You can keep editing your site, saving your work, and only when you‟re ready to make these changes live, click Publish. After the site is published, click Publish to have the changes take effect on the live site. Clicking Publish allows you to connect your site to an existing domain or buy a new one. After publishing, you will also see your free i-m.co domain in the form of i-m.co/yourusername/yoursitename 6. Right click – Right-click on any element to get advanced options as align, reorder and replicate. Read more about these options - Extra Options / Right-Click Menu:

IM Creator | How to Create a Website

The Editor IM Creator’s editor is a simple yet powerful drag’n’drop one. Add videos, pictures, text, social media, maps and more – no HTML or technical skills required.

The editor is constructed of several areas: IMC‟s General Menu

Control Panel Page Site menu

Selected item

Background

IM Creator | How to Create a Website

General Actions

Save / Save As To save your work, click Save. If this is the first time you are saving, you will be asked to name your site. Your site’s name will be part of your free i-m.co domain: i-m.co/yourusername/yoursitename This is your free URL. After publishing your site, you can always connect it to an existing domain or a new one by clicking Settings > Domain. More about connecting your site to a domain Connecting a new domain or buying an existing one

Preview At any point while editing your site, you can click Preview to see your site in “live” mode

Publish When you are ready to connect your site, click on the blue Publish button on the upper-right corner in the editor. A dialog box will appear with your free i-m.co domain and our subscription options, required to connect your own domain. The i-m.co domain is a temporary address you can share with others.

Open When clicking Open, a new window with your saved websites will appear.

Help Need help? Visit IMcreator.com/support

IM Creator | How to Create a Website

Editing & Adding Elements: In this section, you will learn how to edit and add elements to your website: pages, pictures, text, videos, galleries, widgets and more.

- Images: Upload, set info, crop, link, align - Titles and Paragraphs: Edit, add fonts, align, link and advanced settings - Videos: Adding videos from YouTube and Vimeo - Picture Galleries: Upload, arrange, set info and light-boxes - Picture Slideshows: Upload, arrange, set info and light-boxes - Contact Form: Initial setup and settings - Embedding external HTML: Scripts and troubleshooting - Line: Adding and modifying size and width - Area: Adding, setting and containment - Widgets: Adding and customizing - Vimeo - Google Maps - SoundCloud - JotForm - advanced contact-forms, surveys and payment-forms - Tumblr - embedding your blog - Facebook like, like-box and comment-box

IM Creator | How to Create a Website

Pictures Adding a New Picture 1. Click Add an Element located on the upper grey bar.

2. Click the Picture element. A generic picture will appear.

IM Creator | How to Create a Website

3. Click the blue Replace Pic button, located on the upper black picture menu bar, choose the picture you wish to insert from your computer and click Open.

The system will upload your new picture, a progress bar will appear on the lower-left side of the screen (note: pictures larger than 512 kb will be resized, so your website will load faster. This might take 5-10 seconds. We donâ&#x20AC;&#x2122;t recommend uploading pictures larger than 1MB or over 1000 px h/w)

Replacing a Picture 1. Click on the picture you would like to replace. 2. Click Replace Pic located on the upper black picture menu bar (Tip: you can also doubleclick on the picture) 3. Choose the picture you would like to insert from your computer and click Open. The system will upload your new picture, a progress bar will appear on the lower-left side of the screen (note: pictures larger than 512 kb will be resized, so your website will load faster. This might take 5-10 seconds. We donâ&#x20AC;&#x2122;t recommend uploading pictures larger than 1MB or over 1000 px h/w)

IM Creator | How to Create a Website Cropping a Picture 1. Select the picture you wish to crop. 2. Click Crop located on the upper black picture menu bar. 3. A cropping-frame will appear:

4. Drag and drop the cropping frame or the picture itself to adjust the cropping area. 5. Use the scale-slider to adjust the zoom of the picture.   

Click 1:1 to reset the picture to its original size. Click Fit to have the entire picture visible inside the frame. Click Fill to fill the frame entirely (please note that some parts of the picture will be cropped).

IM Creator | How to Create a Website Inserting a Title / Description to a Picture 1. Click on the picture you would like to add a title/description to. 2. Click Set Info in the upper black picture menu bar.

A Set Info dialog box will appear. In the Set Info box you can add a title, description and a link. This information will appear every time a mouse hovers over the picture.

Adding a Link to a Picture (or any other element) 1. Click on the picture you would like to add a link to. 2. Click Set Info in the upper black picture menu bar. A Set Info dialog box will appear. In the Set Info box you can add a link to the picture. Tip: You can also click on the hyperlink symbol at the top of the picture element box.

IM Creator | How to Create a Website

Text: Paragraph / Title So, what’s the difference between Title and Paragraph? The content of the title will automatically resize to the size of the title box, while the content of the paragraph will keep its original formatting (text will not automatically resize) Use titles for shorter texts, or bold typography, and paragraphs for longer blocks of texts. If you‟re not sure what to use – use Paragraphs.

Adding new text 1. Click Add an Element located on the upper grey-bar. 2. Click the Paragraph or the Title element.

That‟s it - a new Paragraph or Title will be added to your site.

IM Creator | How to Create a Website Editing Text 1. Double-click on the text or click once on the text and choose Edit Paragraph located on the upper black paragraph menu bar.

2. The text editing menu will appear, containing all the standard text settings: Font, Size, Style, Link, Alignment etc.

3. Select the text you would like to modify and change its settings using the text editing menu.

When you are finished modifying the text, click anywhere outside the text box to finish editing the text.

IM Creator | How to Create a Website Copying text from other sources Generally, we recommend copying text from word documents (.doc, .docx etc) and not directly from an external website since HTML text copying sometimes comes with extra „styling‟ data. If your pasted text behaves “funny”, select it and click the Clean Text button.

Fonts IM CREATOR comes with a ton of great fonts, free for both commercial and personal use. If you are looking to add new fonts – please email us at support@imcreator.com and we will consider adding them to our next version (we will make sure their license permits it before that…)

Languages We support all.

RTL / LTR Working with Right-to-Left/Left-to-Right text is fairly simple. First - be sure to clean your text after pasting it (see: Copying text from other sources), then switch the entire text to the right direction by clicking the "Right to Left" or “Left to Right” button.

IM Creator | How to Create a Website

Linking Elements Adding a link to an element 1. Click on the picture you would like to add a link to. 2. Click Set Info in the upper black picture menu bar.

A Set Info dialog box will appear. In the Set Info box you can add a link to the element. Tip: You can also click on the hyperlink symbol at the top of the element box.

There are several types of links that can be attached to an element:

External Website Link to an external website, just insert the URL and choose how the link will open: in a new window or in the same one as your website (it will open in the same window and your visitor will not see your site anymore).

IM Creator | How to Create a Website

Internal Page Link to one of your websiteâ&#x20AC;&#x;s internal pages â&#x20AC;&#x201C; just choose the right page from the dropdown and click OK.

Scroll to element Allows the browser to scroll down or up to a certain element. This one is a bit tricky but gives a great modern result and is highly recommended for one-pagers and landingpages. 1.

If you want to link element A to scroll to element B, once adding element B, click on it > Set Info > under "Anchor" name the element. 2. Once adding element A, click on it > Set Info > insert the name you chose for element B under "Scroll to element".

3. Preview your site and click the element with the link, you will see how the browser will nicely scroll to the linked element.

IM Creator | How to Create a Website

Email add a link that will automatically open your visitors‟ mail. Just add the email you would like the emails to be sent to and click OK. Please note that since most users are using cloud-based email-clients (Gmail, Yahoo etc.) and not their default local email-client, this option will actually open their outdated outlook program. Consider using the contact form element instead or just write down your email. For mobile sites: this option is great and recommended – it will open the right e-mail app immediately.

Phone Add a link that will automatically call a number (only when viewed on mobile phones!) – just add your number and click OK.

IM Creator | How to Create a Website

File download Great for downloadable PDFs, large docs etc. Add a link that will allow your visitor to download a certain file. Click the upload button and upload your file, then click OK. Please note that we have a 5MB limit for the downloadable files. If you want to allow the download of a larger file, please upload it to an external service and use a regular external link instead.

IM Creator | How to Create a Website

Extra Options / Right-Click Menu: Align If you want to align an element to the right/left, centralize it etc., right click on the element and choose the alignment you want.

Arrange If you want to bring an element to the front or back of other elements, right click on the element and choose Arrange. The elements in our templates are layered, so you can arrange them as you wish.

IM Creator | How to Create a Website Replicate to All Pages If you want an element to appear in the same spot on every page in your site, right click on the element when it is in the right position and choose Replicate to All Pages. Please note that any change you make to the element will be replicated to the element across on all other pages.

Don’t scroll with page If you want to set an element and not have it scrolled with the page, right click on the element and check the „Don‟t scroll with page‟ box. Great for pages that use the scroll-to-element links or for your header, menu and logo.

Attach to page bottom If you want to attach an element to the bottom of a page, right click on the element and check the „Attach to page bottom‟ box. The element will keep its distance from the lower end of the page – great for footers.

IM Creator | How to Create a Website

Videos You can add YouTube or Vimeo videos to your site. Adding a YouTube video

1. Click Add an Element located on the upper grey bar. 2. Click the Video element. A generic video will appear. 3. Click Embed a Video, located on the upper black „video‟ bar. A Video Setting box will appear. 4. Copy & Paste the URL of the video you want to insert to the YouTube video URL box and click OK.

IM Creator | How to Create a Website Replacing a video 1. Click on the video you would like to replace. 2. Click Embed a Video, located on the upper black „video‟ bar. A Video Setting box will appear. (Tip: you can also double-click on the video) 3. Copy & paste the URL of the video you wish to insert to the YouTube video URL box. Choose Autoplay and Loop settings and click OK.

Adding a Vimeo video 1. Click Add an Element located on the upper grey bar. 2. Click on the Widget element.

3. Click Vimeo. A generic video will appear.

4. Click Setup, located on the upper black „widget‟ bar. Insert the Vimeo ID and check the Autoplay and Loop boxes if you‟d like in order to add these to your video.

IM Creator | How to Create a Website

Picture Galleries Galleries allow you to show multiple images easily. You can also include a description and a larger preview of the single images, all in a single click.

Adding a new gallery 1. Click Add an Element located on the upper grey bar. 2. Click the Gallery element. A generic gallery will appear.

Managing the gallery 1. Click on the Gallery you would like to modify. 2. Click Manage located on the upper black â&#x20AC;&#x17E;Galleryâ&#x20AC;&#x; bar (Tip: you can also double-click on the Gallery).

3. The Reorder dialog box will appear: 28

IM Creator | How to Create a Website



Drag’n’drop any of the pictures in the list up and down the list to reorder them. You can also use the arrows located on the left side of each picture.



Enter a title inside the picture name field. This information will appear every time a mouse hovers over the picture.



Click the Set Info button, a Set Info dialog box will appear. In it you can add a title, description and a link to each picture. This information will appear every time a mouse hovers over the picture.



Click the Duplicate button to duplicate a picture. A new copy will appear right under the original one.



Click the Delete button, to delete a picture. The picture will disappear from your gallery.

Adding a new picture to the gallery 1. Click Add a Picture located on the upper black „gallery‟ bar. You can also add a picture from inside the Reorder dialog box. 2. Choose the picture you would like to insert and click Open.

The system will upload your new picture, a progress bar will appear on the lower-left side of the screen (note: pictures larger than 512 kb will be resized, so your website will load faster. This might take 5-10 seconds. We don’t recommend uploading pictures larger than 1MB or over 1000 px h/w) That’s it - a new picture will be added to your Gallery.

IM Creator | How to Create a Website

Slideshows Slideshows enable you to show multiple images easily. You can also include a description and a larger preview, all in a single click.

Adding a new slideshow Click Add an Element located on the upper grey bar. Click the Slideshow element. A generic Slideshow will appear.

Managing the Slideshow Click on the Slideshow you would like to modify. Click Manage located on the upper black Slideshow menu bar (Tip: you can also double-click on the Slideshow).

IM Creator | How to Create a Website

The Reorder dialog will appear:



Drag’n’drop any of the pictures in the list up and down the list to reorder them. You can also use the arrows located on the left side of each picture.



Enter a title inside the text input field. This information will appear every time a mouse hovers over the picture.



Click the Set Info button, a Set Info dialog will appear. In it you can add a title, description and a link for each picture. This information will appear every time a mouse hovers over the picture.



Click the Duplicate button to duplicate a picture. A new copy will appear right under the original one.



Click the Delete button, to delete a picture. The picture will disappear from your slideshow.

IM Creator | How to Create a Website Adding a new picture to the slideshow 1. Click Add a Picture located on the upper black „gallery‟ bar. You can also add a picture from inside the Reorder dialog. 2. Choose the picture you would like to insert and click Open.

The system will upload your new picture, a progress bar will appear on the lower-left side of the screen (note: pictures larger than 512 kb will be resized, so your website will load faster. This might take 5-10 seconds. We don’t recommend uploading pictures larger than 1MB or over 1000 px h/w) That’s it - a new picture will be added to your slideshow.

IM Creator | How to Create a Website

Contact Form You can either use our standard form or use JotForm to customize your form in a way that will fit your needs (JotForm is free!). Adding a standard contact form

1. Click Add an Element located on the upper grey bar. 2. Click the Contact element. A generic Contact form will appear. 3. To connect a contact form, click Connect on the upper black contact form menu bar.

IM Creator | How to Create a Website

The Contact Form Settings dialog box will appear:

  

Enter an e-mail address inside the Target E-mail input field. This will be the address forms will arrive to. Write a message inside the Success Message input field. This message will be an automatic reply received after someone sends you a message. You can change the titles in the form by inserting the text you wish inside the matching input field

IM Creator | How to Create a Website Adding a customized JotForm Contact Form 1. Go to www.jotform.com and create the form you want. Write down your JotForm ID which you will need to insert to the editor. 2. Click Add an Element located on the upper grey bar. 3. Click the Widget element.

4. Click JotForm. A generic contact Form will appear.

5. Click Setup. A Widget HTML Settings dialog will appear.

6. Enter your JotForm ID into the info field and click OK.

Tip: add only the JotForm ID, not the URL

IM Creator | How to Create a Website

HTML (Embed Code)

You can add an HTML code for practically anything in your site - search bar, password protected area etc. 1. Click Add an Element located on the upper grey bar. 2. Click the HTML element. A sample HTML code will appear. 3. Click Edit HTML, located on the upper black „HTML‟ bar.

4. Enter the HTML code you wish to embed to your site and click OK.

Tip: you can copy&paste the HTML code through ctrl+c/ctrl+v. No need to type it in. 36

IM Creator | How to Create a Website

Line

1. Click Add an Element located on the upper grey bar. 2. Click the Line element. A sample Line will appear. 3. Click Line Settings, located on the upper black „Line‟ bar to set the width and color of the line.

4. Drag‟n‟Drop the line to set its location. Tip: you can change the line to be horizontal/diagonal/vertical by clicking on the line and dragging it to the direction you want

IM Creator | How to Create a Website

Area

1. Click Add an Element located on the upper grey bar. 2. Click the Area element. A sample Area will appear. 3. Click Box Settings, located on the upper black „Area‟ bar. A Settings dialog box will appear.

In the dialog box you can set Background Color, Border Radius, Outline Color, Outline, Width and padding.

4. Drag‟n‟Drop the Area box to set its location. Tip: you can make an area box round by changing Border Radius

IM Creator | How to Create a Website

Widgets

Twitter feed 1. Click Add an Element located on the upper grey bar. 2. Click the Widget element. 3. Click Twitter feed. A generic twitter feed will appear.

4. Click Setup, located on the upper black â&#x20AC;&#x17E;Widgetâ&#x20AC;&#x; bar. A Settings dialog box will appear.

5. Enter your Twitter username in the input field. In the dialog box you can set the number of posts shown, background color, text color, link color and whether you wish to show an avatar or not. Click OK.

IM Creator | How to Create a Website Vimeo 1. Click Add an Element located on the upper grey bar. 2. Click the Widget element. 3. Click Vimeo. A generic twitter feed will appear.

4. Click Setup, located on the upper black „widget‟ bar. A Widget HTML Setting box will appear. Check the Autoplay and Loop boxes in order to add these options to your video.

IM Creator | How to Create a Website Google Maps 1. Click Add an Element located on the upper grey bar. 2. Click the Widget element. 3. Click Google Maps. A generic map will appear.

Click Setup, located on the upper black Widget menu bar. A Settings dialog box will appear.

Enter the address you wish to be displayed in the input field.

In the dialog box you can set the zoom level of the map and add a satellite image.

Click OK.

IM Creator | How to Create a Website SoundCloud

To add music to your site, you can do so by adding a SoundCloud widget. 1. Go to www.soundcloud.com and upload or record the music you want. Write down your SoundCloud URL which you will need to insert to the editor. 2. Click Add an Element located on the upper grey bar. 3. Click the Widget element. 4. Click SoundCloud. A generic music player will appear.

5. Click Setup, located on the upper black „Widget‟ bar. A Widget HTML Settings dialog box will appear.

6. Enter the SoundCloud URL in the input field. Check the boxes to choose between ArtworkPlayer or MiniPlayer, and if you want your music to be auto played. You can also choose the color of the player.

Click OK.

Tip: if your music is located on an external site or in a podcast, you can always add a text/picture element and link it to an external site 42

IM Creator | How to Create a Website JotForm (customized forms) 1. Go to www.jotform.com and create the form you want. Write down your JotForm ID which you will need to insert to the editor. 2. Click Add an Element located on the upper grey bar. 3. Click the Widget element. 4. Click JotForm. A generic contact Form will appear.

5. Click Setup. A Widget HTML Settings dialog will appear.

6. Enter your JotForm ID into the info field and click OK.

IM Creator | How to Create a Website

Tumblr 1. 2. 3. 4. 5.

If you don‟t have a Tumblr blog yet, go to www.tumblr.com and create one. Write down your Tumblr URL (in the form of username.tumblr.com ) Click Add an Element located on the upper grey bar. Click the Widget element. Click Tumblr. A generic blog will appear.

6. Click Setup, located on the upper black „Widget‟ bar. A Settings dialog box will appear.

7. Enter the Tumblr URL in the input field and click OK.

IM Creator | How to Create a Website Facebook Like

The Like button lets your site‟s visitor share your content with their friends on Facebook. When they click the Like button in your site, a story will appear on the visitor's wall with a link back to your website. To add a Facebook “Like” button: 1. Click Add an Element located on the upper grey bar. 2. Click the Widget element. 3. Click Facebook like. A generic Facebook like box will appear.

4. Click Setup, located on the upper black „Widget‟ bar. A Settings dialog box will appear.

5. Enter the URL you wish your visitors to like in the input field. Set whether or not it will show faces.

6. Click OK.

IM Creator | How to Create a Website Facebook Comments

Comments Box is a social plugin that enables your site‟s visitors to comment on your site. 1. Click Add an Element located on the upper grey bar. 2. Click the Widget element. 3. Click Facebook Comments. A generic Facebook comments box will appear.

4. Click Setup, located on the upper black „Widget‟ bar. A Settings dialog box will appear.

5. Enter the URL of your Facebook page in the input field. Set the number of posts shown.

6. Click OK.

IM Creator | How to Create a Website Facebook Likebox

The Like Box is a social plugin that enables you to attract and gain Likes from your own website directly to your Facebook page. 1. Click Add an Element located on the upper grey bar. 2. Click the Widget element. 3. Click Facebook Likebox. A generic Facebook Likebox will appear.

4. Click Setup, located on the upper black „Widget‟ bar. A Settings dialog box will appear.

5. Enter the URL of the Facebook page you wish your visitors to ‟like‟ in the input field.

6. Click OK.

IM Creator | How to Create a Website

Menu & Pages Each template comes with an existing menu which appears on all pages of the website. You also have the option to add a completely new menu.

Adding a new blank page 1. Click Pages located on the upper grey bar. 2. Click Add Blank Page, located on the upper black „Pages‟ menu bar.

Duplicating an existing page

1. Click Pages located on the upper grey bar. 2. Click Add Page, located on the upper black „Pages‟ menu bar. An Add Page dialog box will appear.

3. Add a duplicated page by selecting the thumbnail of the page you wish to duplicate.

IM Creator | How to Create a Website

IM Creator | How to Create a Website Managing and renaming pages 4. Click Pages located on the upper grey bar. 5. Click Manage Pages, located on the upper black â&#x20AC;&#x17E;Pagesâ&#x20AC;&#x; bar.

The Reorder dialog box will appear:

IM Creator | How to Create a Website

Arrange pages: Drag‟n‟drop any of the pages in the list up and down the list to reorder them. You can also use the arrows located on the left side of each page.

Rename page: Rename the pages by entering the new name in the info field. This will be the new name of the page that will appear on the menu.

Duplicate page: Click the Duplicate button to duplicate a page. A new copy will appear right under the original one.

Delete page: Click the Delete button, to delete a page. The contents of the page will be deleted and the page will disappear from your menu.

Hide page from main menu: Uncheck the checkbox next to a page to hide a page. By unchecking, there will not be a “regular” menu button leading to the page and it will be accessible only by a link. Do this to keep contents on a certain page and just have it deleted from the main menu.

Hidden Pages If you want to create your own menu, using your own design, link the element you wish to use as a menu button (text / picture) to hidden pages. See here more on how to do this - http://support.imcreator.com/entries/20350881-adding-a-link-toa-hidden-page

IM Creator | How to Create a Website Adding a secondary menu Secondary Menu allows you to create an independent menu, which you can manage and reorder without affecting the website‟s pages. Secondary menus are great as sub-menus in inner pages and for bilingual websites. It also allows you to add external links as menu items or add “anchor links” (read more about anchor links and scrollable pages in “Links, anchor links” - here).

1. Click Add an Element located on the upper grey bar. 2. Click the Menu element. A generic menu will appear.

IM Creator | How to Create a Website Page size and color 1. Click Settings located on the upper grey bar. 2. Click Page Size & Color.

3. A Page Size & Color dialog box will appear.

In the dialog box you can set canvas color and transparency, page width and page height, centralize the website and disable horizontal scrollbar on narrow devices. 4. Click OK.

Websiteâ&#x20AC;&#x2122;s background For the background you can choose a single color, a picture or use a preset background from our collection of backgrounds.

IM Creator | How to Create a Website Changing the background color 1. Click Settings located on the upper grey bar. 2. Click Background.

3. A Website background dialog box will appear - Select Background Type: Color.

4. Click on the Background Color icon to open a color pallet, move a mouse to select a color, click done.

Embedding a picture as background 1. Click Settings located on the upper grey bar. 2. Click Background. 54

IM Creator | How to Create a Website

3. A Website Background dialog box will appear - Select Background Type: Picture.

4. Click Upload. 5. Choose the picture you would like to insert and click Open.

IM Creator | How to Create a Website Adding a ready-made background 1. Click Settings located on the upper grey bar. 2. Click Presets.

3. Choose the Preset background you wish to add.

IM Creator | How to Create a Website

Website Settings Page size and color 1. Click Settings located on the upper grey bar. 2. Click Page Size & Color.

3. A Page Size & Color dialog box will appear.

In the dialog box you can set canvas color and transparency, page width and page height, centralize the website and disable horizontal scrollbar on narrow devices.

4. Click OK.

IM Creator | How to Create a Website Favicon A Favicon, also known as a shortcut icon, website icon or bookmark icon, is the small icon you see on the browser‟s tab or when you bookmark a site. To set your website‟s favicon 1. Click Settings located on the upper grey bar. 2. Click Favicon and choose the picture you wish to insert as the favicon and click Open. That‟s it!

IM Creator | How to Create a Website

SEO You can include keywords and description for your website (as well as name it), that will help optimize your search engine results. 1. Click Settings located on the upper grey bar.

2. Click SEO. A dialog box will appear.

3. Enter a site title into the Title info field. 4. Enter a site description into the Description info field. Enter selected words that are related to your siteâ&#x20AC;&#x;s theme into the Keywords info field, separate this words using a comma ( , ). Itâ&#x20AC;&#x;s highly recommended to add 5-10 keywords. 5. Click OK.

IM Creator | How to Create a Website

Connecting a Domain to Your Site After completing the steps to connect your site to a domain on imcreator.com/wizard, make sure it is connected in your site‟s settings as well: 1. Click Settings located on the upper grey bar.

2. Click Domain. A Publish dialog box will appear.

tip: If you finished connecting your site and your domain directs to IM Creator’s start page, click Settings → Domain, enter your domain and click Connect.

IM Creator | How to Create a Website

Website Analytics (Google Analytics) Google Analytics helps you track the visitors in your site, measure their activity and keep improving your site and achieve your online goals. To track the analytics, you need to open a Google Analytics account (create it here http://www.google.com/analytics/ using your Google Apps username and password) and set the settings in your site: 1. Click Settings located on the upper grey bar.

2. Click Website Analytics. A dialog box will appear.

Enter your Google Analytics tracking ID into the info field. Having trouble finding your Google ID? Click here to learn where to find it : http://support.google.com/googleanalytics/bin/answer.py?hl=en&answer=55603

IM Creator | How to Create a Website

Publishing Your Site Free vs. Premium - subscription plans IM Creator‟s tools, designs and support service are all free. Once you complete your site and click "publish", you will get a free domain in the form of i-m.co/yourusername/yoursitename (you will see the address at the top of the Publish pop-up window, unveil it by clicking the “like” button).

Once you wish to connect your site to your own “www” domain, you can choose one of our subscription plans. Connecting your site to a domain will allow you and your visitors to find your site easier using a catchy and marketable domain-name. Websites which are connected to a domain appear higher in Google searches and can be shared more easily using the various social networks.

Connecting a new domain or buying an existing one

IM Creator | How to Create a Website New Domain If you don‟t have a domain, you can buy one through us for $10/year. Your payment goes directly to the domains registrar, with no extra fees charged by us. How do you buy a domain? Well, once you click Publish, choose a subscription plan and complete the payment, you will have the option of either connecting an existing domain or buying a new one. Choose „buying a new one‟ and follow the instructions. You can also check out our domain wizard http://imcreator.com/wizard

Existing Domain If you have a domain, you can easily connect it to your IM Creator site. Once you click Publish, choose a subscription plan and complete the payment, you will have the option of either connecting an existing domain or buying a new one. Choose “connect an existing domain” and follow the instructions. You can also check out our domain wizard - http://imcreator.com/wizard

IM Creator | How to Create a Website Domain connection troubleshooting I connected my site and now see IM Creator’s “Start page” under my domain This means the connection is almost complete, you just need to link your site: In the editor, go to Settings → Domain, enter your domain name (no “www”) and click Connect

I see a message that my site is already taken by another IM user. This might happen because you have a site in your account that is already connected to this domain. You need to disconnect the site you first connected in order to connect the new one: Open the site you first connected with the Editor. Click Settings → Domain, enter a “fake” domain such as xxxxxxxxx.com and click Connect.

Open the site you wish to connect with the Editor. Click Settings → Domain, enter your REAL domain and click Connect Site not found If you see this message trying to access your site immediately after you connect it, don‟t worry. It usually takes up to 48 hours for a website to be activated globally.

IM Creator | How to Create a Website

Signup To register and start building your site on IM Creator: 1. Click LOGIN on the upper right corner of our Home Page or here http://app.imcreator.com/open 2. Insert your email and choose a username and password.

Tip: your username will be used as part of the name of your free i-m.co site You will receive a „welcome email‟ from us to the email address you signed up with. You can also browse through our templates first by clicking START NOW on our home-page and register later when clicking ‘customize now’ in one of the templates.

IM Creator | How to Create a Website

Login Once you register, you will only be asked to login, using your username and password (no need to insert your email again).

Forgot your password? Click forgot your password at the bottom of the Login dialog box.

Registered through Google Apps? Make sure you login through â&#x20AC;&#x153;Joined using Google Apps? Click here to loginâ&#x20AC;? in the login page.