Moonfruit Website Builder Guide

Introduction

Moonfruit is a unique website that uses Flash to allow the customisation of your brand new page through a drag and drop website editor.  It has a variety of website building options that make it great for creating a variety of website types.

Moonfruit has four paid plans and no free plan, but you can use a fifteen day free trial to determine if Moonfruit is the website builder for you.  There’s a 25% discount for purchasing an annual plan.

Figure 1:  Payment options.

Figure 1:  Payment options.

The cheapest paid plan is the “lite” plan, which is $6 a month, or $4.50 if you receive the annual discount.  The lite plan lets you have one site, up to five pages, 10GB of bandwidth, and 500 MB of storage.  You get premium support, can sell up to 20 products in your online store, and can create one site admin.  You can make a blog, use google analytics, connect a domain, remove Moonfruit ads, and add custom code.  The standard plan is $12 a month, or $9 if you receive the annual discount.  You can create an unlimited number of pages, get 20GB of bandwidth, get 1GB of storage, and get premium support.  You can sell up to 50 products in your store, and can create an unlimited number of site admins.  You can use a form builder, Getty images, create membership, get domain vouchers, and have access to Google AdWords.  You also get a free domain for one year (if you purchase an annual plan).  The plus plan is $20 a month, or $15 with the discount.  You can create up to 10 websites, get unlimited pages and unlimited bandwidth.  You get 5GB of storage, have access to phone support, and can sell up to 150 products.  You also get 2 free domains for one year if you purchase the premium plan.  Finally, the max plan is $35 a month, or $26.25 with the discount.  You can create up to 20 websites, and get 10 GB of storage.  You get three free domains for one year if you purchase the annual plan, and you can also now sell up to 1000 products on the store.  Once you’ve decided on a plan, it’s time to sign up for an account and create your website.0

Getting Started

The first step is to choose your template.  You’ll see a variety of tiles, and scrolling arrows to flip between pages.  If you click on any of these tiles, a larger view of the template will fill your screen.  At top, you can choose to “use this template” or use the x to close out and pick another.  You can also scroll through the themes in the larger format with your arrows.

If you’d like to view templates by category, you can visit your dashboard by clicking on the menu in the top right hand corner of the screen and clicking on dashboard.

Figure 2:  Arrows pointing to the menu button, the dashboard, and where you go to select a template on your dashboard to view by category.

Figure 2:  Arrows pointing to the menu button, the dashboard, and where you go to select a template on your dashboard to view by category.

The template categories are:  shop, photography, portfolio, craft, business, and personal.  You can, again, click on a template to view it larger on your screen.

Once you’ve chosen a theme, you’ll be asked to choose a site name and address.  It also links you to a page to buy a custom domain name if you so choose.  All domains that are purchased come with WHOIS privacy, 5 email addresses, email forwarding, 1GB of mail storage, and technical support.  Purchasing domains will cost $15.99 per year of domain, with a minimum of two years registered for.

Builder

Once you’ve created a website, you’ll get the builder that looks similar to the image below:

Figure 3:  Website builder

Figure 3:  Website builder

Let’s take a look at some of the tools at your disposal.

Toolbar

Figure 4:  Toolbar

Figure 4:  Toolbar

  1. Navigate between the various pages you have on your website.
  2. Increase or decrease the zoom on your page.
  3. Open your documents to upload a file to your page.
  4. Delete the selected item.
  5. Copy the selected item.
  6. Paste the copied item.
  7. Undo the last change.
  8. Redo the last change.
  9. Add in a snippet of HTML code.
  10. Create a duplicate of the selected item.
  11. Input body text onto your page.
  12. Input title text onto your page.
  13. Insert a link button onto your page.
  14. Customise the items that appear in your toolbar.

Save

Saves any changes you’ve currently made to your website.

Files

Manage the files you have uploaded to your page.  You can create folders to manage these items.  Once you’ve uploaded a file, it will by default go to the “my files” folder, where you can choose to download it, delete it, or use it with the file manager.  The file manager also contains default items that you may find useful for creating your webpage.  The “template images” folder contains images used for the creation of your template.  The “Library” folder contains a lot of different useful folders.  “Image Tools”, “Shapes”, “Apps”, “Menus”, “Link Buttons”, “Shop Widgets”, and “Blog Widgets” are all folders that contain items that you can also place on your page using the “Insert” option.  “Images” and “Getty Images” contain stock images that you can use on your page in place of your own personal images.  “Icons” contains a variety of icons that are helpful for website building.  These include arrows, shopping bags and carts, cameras, x’s, Facebook icons, Google + icons, hearts, magnifying glasses, mail, pencil, pins, Pinterest icons,  speech bubbles, phones, and Twitter icons.

Edit

This allows you to edit the elements that you’ve added your page.  Just click on the item you want to modify.

Figure 5:  Editor.

Figure 5:  Editor.

  1. Edit the page you are currently viewing.
  2. Edit the page master (the background image for each page) or the page footer (which is located at the bottom of each page). You can switch between the two at the top centre of the page.
  3. Use the editor to modify your items. You can select an object by name, or click on the object to edit it.  You can also change its location on the page using x and y coordinates, and change the width and height of the object.  Each object will have its own modification, which will be covered later when we discuss the “insert” feature.
  4. Open the editor toolbar.
  5. Save changes you’ve made to your page.
  6. Upload files from your computer.
  7. Add a body text box.
  8. Add a link button.
  9. Copy the selected item.
  10. Send the object to the back of all other objects.
  11. Open the file manager.
  12. Get help.
  13. Add a title text box.
  14. Duplicate the selected item.
  15. Paste a copied item.
  16. Delete the selected item.
  17. Duplicate the selected item.
  18. Copy the selected item.
  19. Paste a copied item.
  20. Delete the selected item.
  21. Select all the items on the page.
  22. Undo last change.
  23. Redo last change.
  24. Revert to how things were in the last saved state.
  25. Arrange your item’s location relative to other objects. You can send it backwards or forwards one layer, or all layers.
  26. Align objects relative to your selected item. You can also click on the check box to align items to the page instead of the selected object.  You can choose left, right, top, bottom, centre, or middle.
  27. Distribute items relative to one another. You can distribute them horizontally or vertically with a selected gap length.  You can also choose to make them equi-spaced, which instead chooses the interval length.
  28. Show rulers on the side of your page (which helps you find your x and y coordinates).
  29. Automatically snap objects to guides.
  30. Clear guides from your page.
  31. Choose to show or not show off page items.
  32. Customise your shortcuts (in your toolbar).
  33. Choose to automatically determine the layers on your pages.

Insert

This allows you to insert items onto your page.  You can also insert elements to every page or the page footer on each page using “Page Master”.  Click on the item’s name to add it, and then drag it once it’s placed on the page to the desired location.

Basic Objects

Body Text

This adds in a segment of body text.  In the editor, you have font, style, and link tabs.  Under fonts, you can change the font choice, size, colour, and line spacing.  You can also change the alignment of the text within the box, create a bulleted list, or bold, italicise, or underline the text.  You can also reset to global font settings.  Style lets you change the colour of the background or border of the text box.  The link tab lets you make the text into a link.  You can set the link to an external link, a page on your site, a file, an email, a login, a PayPal link, or a shop category.  You can also remove the link from this tab.  Click within the text box to change the words located within.

Title Text

This adds in a segment of title text.  It has the same editor options as above.  Again, you can click within the text box to change the wording.

Form

This allows you to add a form to your page.  In the editor, you have labels, submit, and data tabs.  Labels lets you change the font, size, colour, and whether or not to bold, italicise, or underline it.  You can choose if the labels are above or next to the text field on the form.  Submit lets you change the font, size, and colour of the submit button.  You can also change the background colour, width, height, and corner radii (roundness).  Data lets you choose what email form submissions will be sent to.

If you double click on the form, you’ll get several options that allow you to craft the form.  Although it comes with “Name”, “Email”, and “Message” fields, you can choose to modify or remove these, as well as add more. 

Figure 6:  Form options.

Figure 6:  Form options.

  1. Double click here to change the form’s name.
  2. Drag on these black squares to change the form’s size.
  3. Double click here to change the field’s label.
  4. Click this check box to make the field required.
  5. Click this to delete the currently highlighted field.
  6. Click here to add another field to your form. You can choose:  single line text, paragraph text, email (a single text line that requires email format), checkbox (double clicking near the checkboxes lets you add a different option to each line), radio button (which has the same rules for adding options), dropdown (which also has the same rules), or upload file.
  7. Double click here to change the submit buttons’ text. 

Link Button

This lets you add a button that links to desired content.  The editor has font, style, and link tabs.  Font and link are the same as the tabs when adding a text box.  Style lets you change the text and button colour in the button’s normal and rolled over (with the cursor) state.  From here, you can also change the border size, padding between the edges and text, and the corner radius (roundedness).  To change the editor text, double click on the “Link button” text and type in whatever label you wish.

HTML Snippet

This lets you add your own HTML coding to the page.  The editor has setup and style tabs.  Setup lets you paste in the desired code to embed.  It must begin with <iframe, <script, or <class.  Style lets you change the background and border colour, and you can choose to crop content to the framed area or insert automatic scrollbars.

Image

This lets you input an image onto your page.  It brings up the file manager for you to select a picture.  The editor then lets you choose popup, style, or link tabs.  Popup lets you make the image into a popup on your page by selecting the check box.  You can also insert a caption.   Style lets you choose the image’s degree of transparency.  You can also change the alt text using the “alt tag” button, as well as select if alt text is displayed at all.  Finally, the link tab is the standard tab previously described, and makes your image into a link.

Menu

This lets you add an image to your page using the “Menus” folder in the file manager.  There are a variety of options.

Figure 7:  Menu types.

Figure 7:  Menu types.

The editor menu has setup, font, and style tabs.  Setup lets you choose if the pages are displayed horizontal or vertical.  You can choose the gap between pages, the padding, and the width.  You can also choose to fit the length to the text.  Below, you can choose if all pages are displayed, top level pages only, sub-pages only, or shop categories only.  Finally, the organise pages button brings up the pages menu.  Font has the standard font options.  Style lets you choose the menu text and button colours for a normal state, a rolled over state, and the selected 9current) state.  Finally, you can choose the border and the corner radii (roundness).

Widget Library

This allows you to widgets located in the default library.  There are two categories, blog widgets and shop widgets.  When you click on “widget library”, it will automatically open the file manager to the libraries pages.

Blog Widgets:

Blog RSS Feed

This lets you an RSS feed for your blog onto a different page.

Shop Widgets:

Basket Group

This lets you display the number of items currently in the visitor’s cart.  In editor, under the basket tab you can choose what appears for one item or for multiple items.  The # symbol will display the item count.  To change individual items of this widget, you’ll need to double click on the widget.  This will allow you to choose (using “object name” on the info page), the background, shopping basket, and label.  Once you’ve double clicked on the widget, you can also click on the basket, background, and label individually to change these properties.  The label has font and link tabs that are standard, as well a style tab that lets you change the background and border colour.  The background lets you choose the background and border colour, as well as the corner radius, under the style tab.  You can also turn the background into a link.  The shopping basket’s style tab lets you choose its colour, and you can also choose to make this a link on the link tab.

Cart Icon

This lets you add a shopping cart icon to the page.  It has the same options as the shopping cart icon for the basket group had.

Category Menus

These let you choose category displays for your shop.  They look very similar to the menus options for your page.

Figure 8:  Shop category menus.

These also have identical settings as the normal menus option.

My Files

This brings up the file manager so that you can add a file to your page.  You can add images or files from this menu.  If it’s a file, till create link button with a link type that is file.  An image is the same as selecting the image option from the sidebar.

Shapes

These let you add various shapes to your page.  You can use the black boxes around them to change their sizes.

Square

The editor lets you choose between style, effects, and link tabs.  Style lets you change the background and border colour, as well as the border size.  The corner radius lets you choose to create rounded corners on your square.  Effects let you choose a drop shadow, outer glow, or blur for your square.  Link lets you create a link out of your shape.

Rounded Square

This lets you add a rounded square.  This has the same options as above, but automatically has the “corner radius” set to 20.

Circle

This lets you add a circle to the page.  There is no corner radius option for the circle, either.

Line

This lets you add a line to your page.  The style tab is the only thing different about this option.  You can change the colour, line width, joint style (mitre, round, and bevel), turn dashed on, and choose the number of pixels per dash and the spacing between dashes.

Apps

These let you add apps to your page.  There are a variety of apps displayed, and there are more shown in the “more apps” button at the bottom.  Most need to be double clicked on in order to set up, and are only able to be previewed in the setup menu.

Google Maps

This lets you add a map to your page, which is helpful if you want to display where a business is located.  If you double click on the map, you can set the address and zoom level.

Image Gallery

This lets you add a series of images to your page.  Using the editor, you can add images using the “add image” button, which will open your file manager.  You can choose to crop image or keep the aspect ratio.  You can also choose the number of columns in the gallery, the padding from the edges, and the gap (or choose to have no gap) between images.  Style allows you to choose a background and border colour for your gallery, as well as set a corner radius to round the edges.  You can also double-click on your gallery to select individual images with the editor, as well as get a + sign on the gallery itself to add new images from your file manager.

YouTube

This lets you embed a YouTube video on your page.  Double click on the widget to input the YouTube ID for the video.  This is the letters and numbers located after “YouTube.com/”.

Vimeo

This lets you embed a Vimeo video on your page.  It works the same as the YouTube widget, but requires a Vimeo ID instead of a YouTube ID for the video.

WordPress

This gives an embedded version of a WordPress page of your choice.  You’ll need to enter the WordPress subdomain in order to choose the page to display.  This is the subdomain that appears in the area before wordpress.com in the WordPress page URL.

SoundCloud

This lets you embed a SoundCloud music player on your page.  To do so, you’ll need to enter the name of the artist or path of the playlist or song from the Soundcloud.com URL.  This will be in the format “artist/song-artist/playlist”.

Google Calendar

This lets you embed a Google calendar.  You’ll need to enter the Gmail address associated with the calendar, and it will display all public calendars of this account.

Pinterest Pin It

This can be simply added to your page as an association with Pinterest and requires no setup or modifications.

Google Search

You can enter a Google search bar for your site if you have a Google search ID for the page.  To do so, go to https://cse.google.com/cse/ and click on “create a custom search engine”.

Facebook Like

This can be simply added to your page as an association with Facebook and requires no setup or modifications.

Spotify Playlist

This lets you add Spotify music to your page.  You’ll need to enter the artist’s Spotify URL to add a play button.  This will be in the format of Spotify:artist:code.  In the Spotify application, you can view the URL by clicking on the “more” button.

Spotify Follow

This can be simply added to your page as an association with Spotify and requires no setup or modifications.

Chat Widget

This lets you add a widget for live chatting on your page.  You’ll need to set it up with the editor.  The setup page will send you to http://chatango.com/ to set up an account.  Once you’ve done so, you’ll get a snippet to input to the setup tab on your chat widget page.  The style page of the editor lets you change the background and border colour, as well as if you want to crop content or use automatic scrollbars.

Cookie Banner

This lets you display the notification that cookies are used on your page.  You can choose the banner’s background colour, title text colour, and main text colour.  You can also modify the banner title, main text, main font size, and policy URL (for the details link).

Facebook Comments

This lets you add the ability to have commenting via Facebook profile pages on your website page itself.  You’ll need to put your site URL in the field.

Facebook Page

This lets you embed a Facebook page URL onto your webpage.  This requires you input the part of the URL that appears after “Facebook.com/”.

Instagram Image

This lets you display an Instagram image on your page.  From here, users can choose to follow, like, or comment on the image.  You’ll need to input the URL of the Instagram image.

MailChimp Signup

This lets you add a MailChimp signup page to your website.  This is an easy method to have visitors sign up for a mailing list for your website.  You’ll need to sign up and create a list on MailChimp.com, then choose to create an embedded form.  You’ll need to paste the part of the code in quotes after form action =.  This goes into the “action URL” area.  You can also choose the form title, background colour, and main text colour.

Photosnack Slideshow

This lets you add a slideshow to your page.  You’ll need to add images to your slideshow at http://www.photosnack.com/photo-slideshow-maker-html/quick-upload.  Once you’ve finished, you’ll get the album page, and will need to get the ID (located after “details/” and before “?”).  You’ll then input this into the Photosnack ID area.

Twitter Timeline

This lets you display a twitter timeline onto your page.  You’ll need to insert the Twitter URL.  You can also add a title that will be displayed as a link to that URL if the website is unable to display your timeline.

Wufoo Form

This lets you add a Wufoo form to your page (another way of having a form your visitors can fill out other than the form builder embedded in Moonfruit).  You’ll need to create a form at https://www.wufoo.com/form-builder/.  You’ll need to choose “share form”, then copy the ID (located after /forms/).  Then you’ll also need to input your Wufoo username.

Pages

This lets you modify the pages on your website.

Figure 9:  Pages menu

Figure 9:  Pages menu

Add a New Page (1)

This lets you add a new page to your site.  You can choose from a variety of different page types based upon your theme.  You can choose:  blank page, shop page, gallery small, gallery large, contact page, contact page wide, about page, portfolio, project page vertical, project page horizontal, link, or blog.  Clicking on each page type tells you what you can do on that page.  You can also choose “copy a page” to make the new page identical to one of the pages you already have on your site.  Next, it will ask you to choose a name for the page, which is how it will be displayed on your menu bar.  You can then choose to show or hide the page from the menu.  You can also choose to add the page before or after the page you are currently on, or to add it at the end of the list of pages.  Then, it will take you to the newly created page.

Organise your pages (2)

This is the same page as you see once you’ve successfully added a page.  It shows you your current list of pages.

Figure 10:  Organise Pages

Figure 10:  Organise Pages

  1. Bring up the “add a new page” menu.
  2. This is a list of the numerical order of your pages as they appear on the menu.
  3. This lets you make the page a subpage of the page above it. Note that the set home page (indicated with the house icon) cannot be made into a subpage.
  4. This button will navigate you to that page on your site.
  5. This area lets you change the name of your different pages.
  6. Click and drag from here to rearrange the order of your pages.
  7. This turns on or off page visibility on the menu bar.
  8. This option deletes the page.
  9. Click here to cancel any changes you’ve made.
  10. Click here to apply any changes you’ve made.

Copy a Page (3)

Bring up the “add a page – copy an existing page” options menu.

Delete this page (4)

Bring up the organise pages menu (to choose the trash can to delete the page).

Page Permissions (5)

This brings up a menu to change the permissions of your pages.  You can choose if your site is visible or restricted to only site administrators.  Clicking on a page lets you choose who can view that page:  site admins only, group, members only, or everyone.  If you choose group, you are prompted to select a group.  Below, it will show you members of that group.  You can also choose to edit the group.

Page length (6)

This lets you choose the page length.

Apply to All pages (7)

This lets you choose to apply this page length to all pages.

Page Settings

  1. Hide menu bar on the current page.
  2. Hide page master (items that appear on every page) on this page.
  3. Hide footer on this page.
  4. Hide this page in your menu.
  5. Choose to include this page in your site menu (if it is not already included).

SEO Meta Tags (13)

This lets you change the search engine optimisation tags.  You can choose how page engines will display your page title, description, and keywords.  These tags make it easier for people to find your site.

Design

This lets you set up design options for your entire page.

Figure 11:  Design options.

Figure 11:  Design options.

Default Font Style (1)

This brings up font boxes that lets you change the default title and body fonts for the current page (or all pages, if you use the page master).  Changing the font using the editor within these text boxes will change all present and future text boxes on your page.  You can set font type, size, and colour using the editor.

Site Settings (accessible via 2-5)

Site size.  From the site and margins tab, you can set site width and height, horizontal alignment (left, right, or centre), and vertical alignment (top, centre, or bottom).  Finally, you can set the margins for each segment of the page.  There is also a wallpaper and icon tab.  Here, you can choose the wallpaper image for the background of your page, the tiling options (no tile, tile, horizontal tile, or vertical tile), the background colour, the position of the image on the page, and if the image scrolls with the page.  You can also set a site border colour and width.  Finally, you can choose a favourites icon that appears next to the URL in the address bar.

Show Background (6)

Choose whether or not to display the background on this page.

Background Colour (7)

Choose the background colour for the page.

Blog

This lets you add a blog to your page.

Figure 12:  Blog Navigation

Figure 12:  Blog Navigation

Dashboard (1)

Shown on the screen, it lets you view quick updates about your blog.

Add a post (2-4)

This lets you add a post to your page.  You can choose from one that is text-based, image-based, or article (a combination).

Figure 13:  Add a post menu.

Figure 13:  Add a post menu.

  1. Click here to switch between post types (text, image, or article)
  2. Choose a title for your article.
  3. Choose to make the body text of normal or heading type.
  4. Bold the text.
  5. Italicise the text.
  6. Underline the text.
  7. Add a link.
  8. Add an image (for text posts, this will appear at the bottom as an “add an image” button, and for image posts, this will appear at the top as an “add an image” button).
  9. Insert a snippet of HTML code.
  10. Insert a “read more” break, which lets you choose to break up the article into a preview snippet and a long post.
  11. Input body text for your post here.
  12. Preview the post.
  13. Save this post as a draft.
  14. Publish this post now.
  15. Choose to publish the post immediately.
  16. Choose to publish this post at a set date in the future.
  17. Allow comments on this post.
  18. View the tags associated with the post.
  19. Add a new tag to your post.
  20. Manage the tags for your post. Choose to add to all tags, and choose to add from previous tags to your post.
  21. Change the SEO meta tags for this post.

Add a quick Post (5)

Type here to craft a rapid post onto your page.

Auto-create title (6)

Have Moonfruit automatically generate a title for this quick blog post.

Publish (7)

Publish your quick post.

Last updated posts (8)

A list of recently updated or created posts are displayed here.  Clicking on them brings you to the editor for that specific post.

View all posts (9)

This brings you to the post list.

Latest comments (10)

This lets you view the most recent comments on your blog posts.

View all comments (11)

This brings you to the comment list.

Post list (12)

This shows you the list of all of your blog posts.  You can view the title, published date, list of tags, and number of comments.  To the right of the post, you can choose to edit it, view it, or delete.  You can also choose to add a new post from this page.

Comment List (13)

This lets you view the comments on your blog post.  You can view who posted it, what post they commented on, and the date of the comment.

Settings (14)

Change the settings on your blog page.  You can choose the maximum posts per page, maximum comments per page, and the author listed for the posts.  You can choose if comment moderation is on, if comments are disabled, and if email notifications are turned on.  You can choose the image alignment, target folder for images uploaded to your blog posts, and manage your tags using the tag manager.

Shop

Manage your shop.

  1. View your product list (shown below).
  2. View your different categories. You can choose to delete or hide categories below once you’ve selected them.
  3. Add a new category and name it. Once you’ve selected a category, you can set an image for it.
  4. Drag here to rearrange the product order.
  5. View the different images for your product.
  6. View and change the product name.
  7. View and change the price.
  8. View the product’s status.
  9. Share the product via Facebook or twitter.
  10. Edit, duplicate, delete, or view the product.

Add a new product (11)

Add a new product to your page.

Figure 14:  Add product.

Figure 14:  Add product.

  1. Choose a product name.
  2. Choose a product description.
  3. Set a price for the product.
  4. Enable product options to offer different colours, sizes, or amounts.
  5. Drag here to rearrange the product options.
  6. Name the option.
  7. Choose a price for this option.
  8. Choose an SKU for this option.
  9. Set a quantity for this option.
  10. Set the quantity to infinite.
  11. Set the availability of this option.
  12. Delete this option.
  13. Add another option.
  14. Add an image of your product.
  15. Choose the status of the product. You can choose between available, coming soon, hidden, or sold out.
  16. Delete the item.
  17. View how the item will appear on your page.
  18. Save the changes you’ve made to this product.
  19. Share this product on Facebook or twitter.
  20. Choose a category for your product from the already created category list.
  21. Set the SEO meta tags for this product.
  22. Use the product picker to choose another product to edit.

 

  1. Refresh your product list.

Shop Settings (13)

General settings

This lets you view your payment getaway, email for receiving payment, the shop currency, and the low stock notification (when to email you that you’re running low on stock of something, or not to email at all).  You can turn on product options to set individual colours or sizes.  You can give each of them their own name, price, SKU, quantity, and status.  You can also choose to add images for your product, set the availability, or delete the item.

Shipping settings

This lets you set shipping option and price.  Each shipping option can be editing, duplicated, or deleted.  Adding a shipping name lets you choose the shipping name, fee, and whether additional items and price ranges incur an additional cost.  The regions tab lets you change the names of the regions, as well as delete your regions.  You can also choose to add a new region for its own shipping options.

Promo codes

This lets you add a sale code t your site.  You can name it, choose the code, and choose how the discount works (percentage, fixed amount, or free shipping).  You can also choose to enforce a minimum that must be spent before the code can be used.

Facebook shop

Set up a Facebook shop for a new method to advertise, share, and sell your products.  You’ll need to sign into Facebook in order to customise your shop.  You’ll then be able to set up your shop name, icon, header image, and message.  A preview of how the shop will appear is then displayed below, and a link to view the shop on Facebook is also present.

Adding a new product brings up its own menu.

Mobile

Preview and edit the mobile version of your site.  A phone will appear on your page for the mobile preview tab, and you can use the menu to navigate to various pages.  At left, you can choose the colour of the body text, title text, header text, site background, box background, and header background.  At right if you have the “arrange content” tab selected, on each page you can drag the items up and down to rearrange them.  The breaks between boxes are indicated as breaks between boxes on your site, and you can drag items between boxes.  You can also turn off various items on the mobile version of your site using the eye icon.

The settings tab lets you choose to automatically use the desktop view, the optimised view, or redirected to another site that is your “mobile site”.  You can choose to automatically enable the mobile version of the site for visitors, as well as choose to supply a “view standard version” link.  You can also let mobile users choose which version they would like in a custom popup message.

Services

There are various advertised services promoted by Moonfruit.  They are:  Google analytics (to analyse website viewership), Google webmaster tools (which tells you how well your page is found on Google), Booking bug (which helps you create a reservation system on your page), and Moo business cards (which print out business cards from your images or design one for you).

People

This lets you manage the members of your site.

Members

This tab lets you view a list of your website’s members.  You can view their status, username, click “email” to send them or their group a message, and click the trashcan to delete the user.  You can also choose to download a member list from your files, or create a new member.  To create a new member, you’ll need a username, email, and password.  You can choose if the user will receive emails on the “send a message” tab, choose if they are a site administrator, and choose if you want to send them a welcome email (which has their username and a link to reset their password).  Clicking on a user will let you know their status, when they joined, and be able to edit their email.  You can also choose to remove privileges from an administrator, and to send a reset password email.  It also displays any questions and answers you made the user ask when they joined your site.  Finally, you can choose to add or remove the user from various groups you have created.

Groups

This tab lets you view groups you have created, and create new groups.  Clicking on “add group” lets you add a new group.  Clicking on a group lets you view the group name, choose to email the group, and choose to delete the group.  You can also view members that are and are not in that group to the right of the group listing.

Page Permissions

This lets you manage the permissions for your different pages.  You can choose if your site is visible, or if it is restricted to only administrators.  Clicking on individual pages let you choose who can view the page (admins, groups, members, or everyone).  If you choose group, you can select which group you’d like to have access to this page.  Finally, below you can choose to enable login/logout via the menu bar.  You can also choose the login and logout text label.

Send a Message

This lets you send a message out to your users.  You can choose all members, an individual member, or a group.  If you choose group, you can select which group you want to send the message.  You then input a subject and a message, and click the “send” button to send out the message.

Domain

This takes you to the Moonfruit domain purchase.  From here, you can buy or transfer domains, manage your domains, and set up to 5 mailboxes per domain held via Moonfruit.

Admin

This lets you manage functions related to your site administration.

Figure 15:  Admin menu.

Figure 15:  Admin menu.

Social Preview (1)

This lets you choose an image to set as your preview image for the page on social media.

Site Information (2)

This lets you view your site information.  You can see your site’s name, email address, keywords, and description.  You can also sign up for Google Webmaster Tools from here.

Statistics (3)

These let you view your site’s statistics.  You can see the number of total visitors, when it was last updated, when it was created, and the number of members.  You can also view how much disk space has been used for uploaded files.  There is a button to sign up for Google Analytics here, and you can choose to reset the total number of visitors.

Site Address (4)

This lets you view your site’s current address.  You can then choose to add an address, or buy a domain name.  If you have multiple addresses, you can choose a preferred address, which will automatically redirect other site addresses to that address.

Copy Site (5)

This lets you create a copy of the design and structure of your site.  You can choose a new free Moonfruit address, and a new name for their site.

Transfer Site (6)

This lets you transfer the site to another Moonfruit user.  You’ll just need to use a username and an email.

Delete Site (7)

This deletes your site.

Your Details (8)

This lets you view your username, log in as someone else, and edit your details.  These are:  your first and last name, email, password, gender, age, occupation, postcode, location, opt-in for SiteMaker, and opt-in for Moonfruit partners.  On the details tab, you can also change your password, view site memberships, and view the sites that you own.

Create a New Site (9)

This lets you create a new site using the same Moonfruit username.

Billing (10)

This lets you manage your billing information through which Moonfruit charges your membership.

View My Site

This takes you to your website URL to view it as a visitor would.

Help

From here, you can search the Moonfruit FAQs, download guides, watch tutorials, submit a technical query, and launch a walkthrough with tips.

Conclusions

Overall, Moonfruit is a great, versatile website builder that is easy to use and allows you to create a wide variety of content.  The main downside is that there’s not a free version of the website available to use.