START WITH A FREE DESIGN


S01 | E01 | HOW TO MAKE A WEBSITE, LIKE A PRO

Paul Davenport |  5 min read |  4 min video

WEB SCHOOL Design Like a Pro S1 E1

VIDEO IN PRODUCTION. STAY TUNED VIA YOUR INBOX OR SIGN UP NOW

WELCOME TO WEB SCHOOL

You're about to build your very own website with MOBLE, whether your an advanced designer or a business with few design skills, you'll be able to follow this Series to create a website that is crafted to your own specific needs.

In forthcoming Episodes, you will learn how to build websites from scratch, without pre-made designs and without code. Before we get there, we'll begin with the basics and get you underway quickly. In this Episode you'll select a pre-made design and take a few moments to transform it into your own brand. We'll then continue Series 1 with a fly through tour of the features and terminology of MOBLE to ensure you can whiz around and find everything you need.


SELECT YOUR FREE DESIGN

Your first task is pick your design. It's important to note that you can begin with the design that is most similar to your requirements, then after you've signed up, you will be able to completely customised everything.

A core feature of MOBLE's Visual Editor is that you can browse every Layout from every design and drag them on to your page, irrespective of which design you begin with. When you drop layouts on to your page they will instantly transform with your own Fonts and Colours.

  • Visit www.moble.com/web-designs
  • Browse the designs, when you have found the design closest to what you need, click 'Try For Free'.
  • Again, it's important to remember that you can customise everything later. You can swap your Header, Footer, Navigation, Page Structure, and even create your own Widgets for News Feeds, Galleries, Blogs and Events and place them anywhere on any page.


AGENCY HACK! - WIN NEW BUSINESS

MOBLE has been built for our own agency and we now share these tools with the world. The rapid process of choosing a design and branding it for the client was a key feature for our agency to win new business, by creating a 'wow' factor in first impressions. Before sales meetings, presentations and workshops the MOBLE team creates a new website for our clients. Clients are stunned that we've made this effort in advance, then blown away when we show them how easy it is to change on the fly.

Get started quickly with an ever growing selection of Free Website Designs


COMPLETE THE ONBOARDING

The Onboarding steps are aimed at getting your started quickly in a few quick steps

  1. Once you've clicked the 'Try for Free' button, add your details and give your website a Site Name.
  2. If you have a logo drop it on to the page and our bots will pick your colours from your logo.
  3. You can tweak your colours here, or completely change everything at a granular level later... we'll get to that in Series 2.

Start building your website during the Signup process. Simply by drop your logo onto the page.


YOUR SITE NAME & LOGGING IN

Once you've completed the onboarding steps, please make a note of of your Site Name. This is the name you choose while signing up.

Your Site Name is for managing your website, you and your team can preview your website at anytime via your Site Name. Like this:

  • https://your-site-name.moble.site


To login to your website in the future, you must login in via your Site Name with the path /admin. Like this:

  • https://your-site-name.moble.site/admin


You're now ready to login and start tweaking your website design.

Make a note of your Site Name so that you can login anytime.


AGENCY HACK!  - REPLACE STOCK IMAGES

Your new design comes with sample stock photography. Please note, you may visit moble.com/web-designs to find photographer credits for each photo.

It's a great idea to make the initial demo website feel like your business as soon as you can. Therefore, we've created a quick agency hack that will instantly replace all of the demo stock images, with your own images right across your website in one swoop. Again, this is great for Sale Demos, Pitches and Workshops.


Watch the quick hack in the video below and follow these instructions to replace the stock images with your own. Once you've finished this first step your website design will already start to feel complete... and you've only just begun.


  1. Choose 8 images and name them as follows:
    • image-1.jpg
    • image-2.jpg
    • image-3.jpg
    • image-4.jpg
    • image-5.jpg
    • image-6.jpg
    • image-square-1.jpg
    • image-square-2.jpg
  2. Your images must be saved a .jpg not .png.
  3. MOBLE will instantly compress your images when you upload them (which can be great for your search engine rankings).
    • By default your images will be sized to a max length of 1440px and optimised in file size for Google search engines.
  4. Save your images in a .zip file and name it replace-images.zip.
  5. Upload your .zip file in the Files area.
  6. Allow around 2 minutes for the images to upload and compress. If your images are still showing old ones, simply refresh the page until your new images appear.


For more tips on uploading images, jump ahead to Series 4:

Replace the stock images with your own to transform your entire website in moments.


WHAT NEXT?

Now your website is set up, your ready to invite Team Members to help you with your design.

S1: EPISODE 2

NOT SIGNED UP YET?

The following Episodes dive into your MOBLE design tools and show you how you can design and build your new website. If you don't have a MOBLE website yet, be sure to sign up now via the form below. It's free to give it a try, with no credit card required.

What are you waiting for?

TRY FOR FREE

LAUNCH


14 DAY FREE TRIAL

MINI


12 PAGES

PLUS


50 PAGES

PRO


500 PAGES

CUSTOM


UNLIMITED PAGES