IM Creator Website Builder Guide

Introduction

IM creator is simple, quick, and easy to use.  It provides you with a drag and drop editor and templates with options that allow you to build any website you desire.   Another aspect of simplicity is that IM creator only offers a handful of plans.

Figure 1:  Plan types.

Figure 1:  Plan types.

The free plan offers you a subdomain of IM Creator (imxprs.com/free/yourusername).  You can host up to 50MB of data, can use any template, and get basic support.  The premium plan offers you to connect your site to a purchased domain, host any amount of data, get unlimited bandwidth, get up to 10 email addresses, and get premium support.  This plan costs $9.95 a month if you want to pay twice a year, $7.95 a month for one year, $6.95 a month for two years, and $5.95 a month for three years.  Make sure you’re committed to this site before you commit to a large number of years for a lower monthly rate.  Finally, you can purchase a Pro plan for $350 a year.  This removes all XPRS branding, and allows you to get your own branded builder.  You can also get a reseller control panel and tracking, and you get pro support.  This option is really only for those who feel the need for their own personalised website builder.

Once you’ve made a decision about which plan is right for you, go to imcreator.com and choose “cool, start now”.

Getting Started

The first thing you’ll need to do is choose a template for your page.  You can choose from a variety of template categories:  Popular, Business, Photography, Professionals, Cover Pages, Restaurants, Weddings & Events, Fitness & Health, Stores, One Pager, Portfolio, Landing Pages, Real Estate, 4min Sites, Creative Arts, Fashion, Apps, Hospitality, Reseller, and Video Cover Page.  Clicking on a category will bring up a tiled view of all templates in that category.  Hovering over a template will tell you the template’s name, and give you a “view” button.  Clicking on the template will choose it for your page, and bring you to the website editor.  You should note that none of these pages actually have you create an account on the site. To do so, go to the following link and then choose “Create a new account”.  Otherwise, your website’s progress will not be saved, as you are only a guest on the page.

Figure 2:  Create a new account.

Figure 2:  Create a new account.

The only fields you need are your email and “nickname” (username).  Then, you’re ready to build your own website.

XPRS Editor

In the XRPS editor, any element on your page can be selected for modification.  You can also add new sections from here

Menu Bar

The menu bar appears at the top of your page, and allows you global control of your website.

Figure 3:  Menu Bar

Figure 3:  Menu Bar

Main Menu (1)

From here, you can log in to your account or sign out of an account.  You can also view a list of all of the sites associated with this account, or download the app for updating your site via mobile device with the “edit with phone” option.

Pages (2)

View and modify your different pages from here.

Figure 4:  Pages menu.

Figure 4:  Pages menu.

  1. View a different page.
  2. View the home page.
  3. Rename the current page.
  4. Duplicate the current page.
  5. Change the search engine optimisation for this page. You can choose if it is visible to search engines, the title, keyword, description, favicon (which appears in the browser next to the URL), social image preview (which appears when the page is shared on social media), and Google analytics ID (if you have one).
  6. Add a new page. It will ask you for a title, which type of page you want to create (blank or a set type from your template), and if you want to add it to your menu bar.
  7. Manage the pages on your site. You can order, clone, rename, or move your pages.  Hover over a page with your cursor to get these potions.  You can also create a new page from here.
  8. Manage menu. You can use “manage” or “arrange” to set the order of pages, and “add link” to create a new link on your page menu.  It will ask you if you want to add a link or add a link to a page on your site.  There are also a variety of tabs for menu modification.  The type tab lets you choose your menu layout.  You can choose if it is at the top, fixed, overlaid, centred, on the side, hamburger default, hamburger fullscreen, hamburger side, or hidden.  Hamburger means there are three lines, and when the user clicks on this icon the menu is brought up (either normal, full screen, or on the side depending on the option you choose).  The settings tab lets you choose which elements are visible above the menu bar (title of the website, subtitle of the website, and logo), the spacing between menu buttons, the height of the menu buttons, and the colour of the menu background (the default options are based upon your theme, but you can choose any colour you wish by selecting the “more” option).  The arrange tab lets you rearrange the order of your pages on the menu bar.  Colour and effects let you choose a button effect when clicked on (clear, colour stretch, jump, underline, colour slide, colour fade, grow, or shadow), the colour of the effect, the border around the menu bar (its colour, width, and radius), and the idle vs hovered on appearance of the menu buttons (their background colour and text colour).  The pro tab lets you choose If the buttons are boxed or stretched, the maximum width, the centre width, the overall width, the stripe padding, and the text box spacing on each side.  You can change these settings at any time by clicking on the men in your page editor and selecting “settings”.
  9. Add a popup. This lets you prompt the user to sign up for your mailing list when the page loads.  When you choose to add a popup, it’ll ask you if you want to use the default popup format for your template, or create your own.  The popup menu has three tabs.  You can view the HTML code of the popup, the settings (if the layout is dynamic height or centred, the background colour, and the content padding), and the parameters.  The parameters let you view and select a popup preset from a variety of templates, choose the email for replies, choose the text displayed after the form is submitted successfully, choose the location on the page, choose the width and height of the popup, and choose when it is displayed (on a timer, on scroll, or on exit).  Additionally, similar to your site, you can click on any of the items on your popup to modify their appearance, similar to the items on your webpage.

Help (3)

From here, you can choose to contact support, view tips, view the knowledge centre, or view videos.  These are meant to help you effectively use IM creator.

Settings (4)

Settings has three tabs.  In SEO, you can choose how your site is described on search engines.  You can choose its visibility, title, keywords, description, favicon, social media preview, and Google analytics ID.  Pro settings lets you add HTML header code to your page.  Finally, page settings brings up the page settings menu.  Here, you can choose the page background and menu layout under the settings tab, the scroll effects (clear, slide, grow, or fade in) under the “scroll fix” tab, and see the current apps you have on your page in the “apps” tab (clicking on any of them will bring that app up for modification).

Preview (5)

This opens the preview of your page as either a desktop, tablet, or mobile device.  It’s a live working preview of how your website will function upon publication.

Save (6)

This lets you save any changes you’ve made since loading the website editor.

Publish (7)

This allows you to publish your web page.  It will ask you to either buy a domain, connect an existing domain, or update the temporary URL (where you’ll save this site to your account).

Website Style

You can access this menu by clicking on the gear icon permanently fixed to the left of your page.  This edits style options for your entire website.  Up top, you can choose to manage your pages or add a new page.  On the style tab, you can choose if you want a wide or narrow site (if it takes up the entire screen or not).  You can also choose the default fonts for the title and subtitle (and reset to the theme’s default).  Finally, you can view your current menu layout type and decide on a page background.  The first two icons on page background let you upload a photo from your computer or choose one from the media centre.  The menu tab lets you choose which type of menu layout you want.  The scroll fix tab lets you choose the scroll effects.  And the page apps lets you view and modify the apps on your page.

Add a new section

Anatomy of a Section

No matter what section type you add, it will have a variety of options associated with it.

Figure 5:  Section Layout

Figure 5:  Section Layout

  1. Add a new section.
  2. Change your page settings.
  3. Add a new item to this section.
  4. Add/change the current image for this section (not an available option for sections without an image background).
  5. This lets you modify the background of your section. From here, you can also choose a new image from your files or the media center (which has a variety of properly formatted HD images to serve as your section’s background), or you can remove the current image.  You can also select from a variety of colors to create an overlay on the image, and choose that overlay’s opacity.  You can choose if the image is fixed (scrolling down scrolls the section but not the image), normal (scrolling down moves the image with the section) or create a parallax effect.  You can also change the background opacity, crop the image, or apply a variety of filters.
  6. This lets you turn the section image into a link. You can link to a page, an external URL, a location on the page, or a light box (for image display).  This is not an available option for sections without an image background.
  7. Change the section’s settings. If the section has a background image, it is a “slideshow” type.  You can manage the slideshow and duplicate, remove, or travel between slides.  You can also choose “add slide” to create another slide in the slideshow.  Under settings, you can choose the visible elements (title, subtitle, body, and/or icon), the layout of the elements in the section, if the elements are boxed or stretched, and decide on the window height.  Under slideshow, you can choose if it autoplays or is manually operated, and choose the duration before slides automatically switching.  Under f/x, you can choose the enter f/x and hover f/x (3d bottom/top/right/left, right/left/bottom/top, shrink, or grow), the effect color, the image filter, and the image opacity.  Under pro, you can choose the layout of the items (image at right, image all around and overlayed, or image at left), the maximum width of the section, the slide padding, the stripe padding, and the content width.  You can also choose the spacing of the individual items in the section from this menu.  You can choose the element’s padding relative to other elements in the upper and lower left-hand corners of the section.  The “stripe” settings for non-image sections are the same, but without the slideshow options.  The “feature” settings (grid-like sections) let you choose the number of items in a row, the space between items, the items height, and if a header is present.
  8. Add a buy now button to this section (useful if the image is of something you are attempting to sell). This is not an available option for sections without an image background.
  9. Remove either the element (the background image), or the section.
  10. Another way to view section settings.
  11. Copy this section to the clipboard.
  12. Swap the section with the one above it.
  13. Swap the section with the one below it.

Section Types

Header

This lets you add a header to your page.  It typically consists of a background image, some text, sometimes some subtext, and occasionally a button.  It is of the “slideshow” type.

Projects

This lets you add a section describing your projects to the page.  It displays a grid with several image and text pairings so you can display your various projects that your company is working on.  It is of the “features” type.

Services

This lets you add a section describing the various services that your business provides.  It is of the “feature” type.

Features

This lets you display several columns of text to side-by-side information.  It can be used to display features that your company offers.  It is of the “features” type.

Gallery

This lets you display a grid of images.  It is of a unique gallery type.  It is similar to the features type but with images.  You can also choose if the gallery has all images regular size, if they are fit to the image size, or if they are masonite arrangement.

Pricing

This lets you display a pricing plan for your business’s plan.  It consists of a grid of items and text as well as buttons.  It is of the “features” type.

Team

This segment is meant to display the members of your business team.  It includes images with nearby text to display and describe your team member.  It is of the “features” type.

Article

This lets you add large amounts of content to your page.  Its primary function is to add written articles with a title, subtitle, content, and images.  It is an article type, where you can modify the alignment, if it is boxed/stretched, the background, and the “pro” settings.

Text Block

This lets you add a block of text to your page.  It is of the “stripe” type.

Bio/CV

This lets you add a quick view of your biography of previous work to your page.  This is best suited for personal web pages.  This typically consists of an image and a variety of text blocks describing your previous work.  It is of the “stripe” type.

Store

This displays items on your page with an image, price, and description.  It also displays a “buy now” button for the user to purchase the item from your page.  Its settings are the same as a gallery, but also allows you to access the store dashboard.

Figure 6:  Store Dashboard

Figure 6:  Store Dashboard

Summary (1)

On the summary page, you can view the number of sections your store had, the number of products, the number of orders (and the number placed today) and the money earned (and the amount earned today).

Sections (2)

This lets you view the different sections in your store.  Clicking on a section lets you view the products available in that section.

All Products (3)

For each product, you can modify it by clicking on the pencil icon next to its name after hovering over it.  Here, you can change the description and name of the product, the image, the subtitle, the body text, the price, the discount percent (if any), and its type.  You can also choose if the item is sold out, and if clicking on the item opens its product page.  You can also set the flat rate shipping cost.  You can preview what your product looks like, and you can save the changes you have made.  Hovering over the image can also let you delete or rearrange items.  At right, you can view the name, SKU, type, price, subtitle, and description.  The plus sign at the bottom lets you add new items.

Orders (4)

This lets you view current orders that have been placed.

Communication (5)

This lets you build an email that thanks the user for their order.  You can choose where it comes from, the subject, and the content.

Transfers (6)

This lets you set up transfers to your bank account once items have been purchased, as well as view your current unclaimed balance.

Settings (7)

This lets you change your store settings.  You can choose your store name, currency, flat shipping rate, the email that gets notifications, and view your store and IMOS id number.

Blog

This lets you display your blog feed.  It has similar settings to a gallery, but you can manage and add posts to your blog from the settings menu.  Most blog posts have an associated image, tittle, subtitle, teaser text, and a read more button.

Forms

This lets you add a form so that users can either fill out surveys or sign up for emailing lists on your website.  It is an item with identical settings as a “feature” type.

Slideshow

This adds a slideshow of images to your page.  It consists of a variety of images and their descriptions.  It is of the “slideshow” type.

Social

This adds a variety of social media icons to your page so that others can follow you on social media.  It is of the “features” type.

Call to Action

This is typically the location of the contact information for your page.  It often provides a phone number, an email, and/or a button to link to a contact for your page.  It is of the “stripe” type.

Testimonials

This lets you add a variety of text boxes to your page.  You can input multiple pages of text that are navigable similar to slideshow images.  It is of the “slideshow” type.

Logos

This lets you add a group of small images to your page.  This can be used to display brands you work for or have agreements with.  You can also use it to display locations to download an app you have created.  It is of the “features” type.

Maps

This lets you display a map for your business location, with a text area to show your name and address to the side.  It is of the “slideshow” type.

Apps

From here, you can add a variety of different apps to your webpage.  These are:  OpenTable reservations, Facebook commenting, PDF viewers, a Google calendar display, and a SoundCloud music player.  It is of the “slideshow” type.

Elements

This lets you add individual elements as their own section instead of adding them on top of another section type.  You can still modify the background behind the element.

Add a new element to an item

Any added section can be modified by clicking on it once it has been added to your section.  The element display is typically controlled by the section’s properties, and are automatically aligned for optimal aesthetic appeal.  Double click on an element to modify it.

Title

This lets you add a title text to your section.

Clicking on it once brings up the element menu.  Form here, you can head to the edit text menu, choose to turn the text into a link, access the section settings, and swap the element with the one above or below it.

Figure 7:  Title editor

Figure 7:  Title editor

  1. Choose if the text is displayed in the style of the website (your template’s style), or a custom style.
  2. Choose a font.
  3. Choose a font colour.
  4. Push the font to the right.
  5. Change the font size.
  6. Bold, italicise, or underline the text, as well as choose to remove all formatting.
  7. Change the spacing between lines of text.
  8. Change the spacing between characters.
  9. Choose if the text flows left to right or right to left in the box.
  10. View your text’s display here, as well as change what that text says.
  11. Increase or decrease the distance from the text and the top of the box.
  12. Increase or decrease the distance from the text and the bottom of the box.

Subtitle

This lets you add a subtitle to the section.  It has the same options as above, but has a different default style appearance.

Body

This lets you add a subtitle to the section.  It has the same options as the title, but has a different default style appearance.

Quote

This lets you add a quote.  Quote elements can only be added as an element type section.  It has the same options as the title, but a different default appearance.

Picture

This lets you add a picture to the section.  You can either add a picture to the background of the section, or a “draggable” picture to any section that is able to be placed by you within the section frame.  Its options allow you to either replace the image, choose to set it as “cover” or “fit”, choose a filter, change its settings using the “slideshow settings” menu, or remove the image.

Video

This lets you embed a video in your section as your section background.

Figure 8:  Video editing options.

  1. Edit your video using the media centre. From here, you can choose a YouTube or Vimeo ID for your video option, choose if the video is on autoplay, choose if it is “cover” or “fit”, mute the video, and loop the video.
  2. Choose a colour to overlay over the video, as well as choose its opacity. You can also select filters from this menu.
  3. Turn the video into a link.
  4. Open the slideshow options menu for the video.
  5. Remove the video.

Link/Button

This adds a link button to your section.

Figure 9:  Link button options.

Figure 9:  Link button options.

  1. Choose the link’s destination.
  2. Edit the label on the button using the standard text editing options.
  3. Edit the button style. Choose if its effects upon click are clear, colour stretch, jump, underline, colour slide, colour fade, grow, or shadow, and a colour for this effect.  Choose if the button is custom or website style.  Choose the border colour, width, and radius.  Finally, choose the background and text colours when the button is idle vs hovered over.
  4. Change the section’s settings.
  5. Rearrange this element with those above or below it.
  6. Add this as a button to buy an item (typically displayed near the button) on your page.
  7. Remove this item or remove this section.

Icon

This lets you add an icon to your page, which can be changed through the media centre or file upload.  You can also re-size the icon, choose filters (white, grey, or black), or turn the icon into a link.

Map

This lets you add a Google map displaying your business location (or any location).  Editing the map allows you to choose what location it is centred around.  You can also choose to modify the settings for text associated with the map.  Finally, you can choose to turn the map into a link.

HTML/Raw

This lets you add a snippet of HTML code to your section.  You can choose “code” (to input the HTML code), “Settings” (to change if the layout is dynamic height or centred, the background colour, and the margins), “Parameters” (if any are required by your code), and “Other Apps” (which allows you to choose to input an app as raw code from a variety of selections).

Social

This lets you add a row of social buttons to your page.  Under the “arrange” tab, you can choose the order of the social media links, as well as choose to add more or delete some.  Under the “settings” tab, you can choose the size of the social icons, and the spacing between them.  Finally, under the “theme” tab, you can choose the appearance of the icons (default, squared colour, round colour/black/grey, float black/colour/grey, or round light.

Price

This lets you add a “buy now” button to your page, which will then associate the button with a new store item.  You can then set an image using the “edit product” tab, or modify more properties about this item using the e-commerce dashboard (which takes you to the store dashboard).

Divider

This lets you add a divider in your section.  Editing the divider lets you choose if it is custom or website style, the colour, the alignment, the percentage of the section that it covers, the style (different types of dashed or solid lines), the spacing between the line and other elements, and the direction of flow.

Summary

Overall, IM Creator is an easy to use website builder that makes it quick and simple to create a professional website.  They provide a lot of beautiful templates, and the pre-made sections make it easy to create content commonly seen on professional business sites.  The downside is that more in-depth customisations may be difficult to perform, as items cannot easily be placed anywhere on the page and must be placed in sections.  However, for the average individual that wants to create a beautiful and professional website, IM Creator would make a great choice.