This document provides step-by-step instructions for building a basic website in 3 hours or less for under $100 using WordPress or Strikingly. It outlines the process of picking a theme, domain, and plan; creating pages and sections; adding a menu, customizing the homepage; adding a blog; and basic SEO and analytics. It also discusses Singapore grants available for website development costs.

1. BUILDING YOUR WEBSITE IN 3
HOURS AND JUST FOR LESS
THAN 100$
FCCS
SEPTEMBER 2015
1

2. PLAN
• Introduction
• Before you start
• Let’s start now!
1. Pick a theme
2. Pick a domain
3. Pick a plan
4. Create your account and enter your dashboard
5. Understand your dashboard
6. Define your sitemap
7. Create your pages/sections
8. Create your menu
9. Customize your homepage
10.Create your « About » page
11.Create a blog & posts
• SEO basics
• Metrics & tracking
• Singapore grants for website design & development

3. AGENCE TESLA
From Conversation to Conversion
 Digital Audience Analysis and Monitoring
Understand your customer behavior in the digital
age and make data-driven decisions thanks to our
social media anlytics reports
 Formations & workshops in Digital Marketing
Catch up with the digital literacy fundamental skills
 Trained in Journalism, Politics & Business
Intelligence
 Offices in Singapore and in Shanghai
 Startups, SMEs, Fortune 500 clients

4. YOUR WEBSITE = YOUR HOME

5. WHAT IS A CMS?
• CMS = content management system
• It allows publishing, editing and modifying content
• Experience in HTML is not required
59%7% 5%

6. BEFORE YOU START
• Domain name registration
– Eg: www.mycompany.com
– Hover, Name Cheap and Gandi (good reviews)
• Hosting your website
– Hosting is a computer that is left on 24/7 running
your website so that people can still visit your
website – even when your computer is switched
off.

7. YOUR TOOLBOX

8. LET’S START NOW !
Choose one CMS, enter your personal details and connect !
www.wordpress.com or www.strikingly.com
BEST FOR : Those who want to
be able to customize their site as
much as possible.
BEST FOR : Beginners who want
an intuitive interface for easy
mobile website building. Single-
page websites only.

9. SINGLE-PAGE vs MULTI-PAGES SITE
• The single-page site is trending in web design
• quest for simplicity
• allows to control the flow of content and the stories
• more immersive and visual
• scrolling well suited for mobile users
• more likely to keep scrolling than to stop and click a link.
BUT :
• risk of stuffing - requires careful visual hierarchy and plenty
of discipline
• less feasable if you have lots of categories and content (e.g:
blog, services, news, products…)
• less search-optimized
• can load slower

10. 1) PICK A THEME
The theme is the look and feel of your website.
A theme doesn't change your content, just the way it is presented.
You can always change it later.

11. HOW TO PICK A THEME?
• Consider your goals
• Review websites you like
• View samples
• Evaluate the features the theme offers
• Test on your desktop and phone
• View the ratings/comments
• Common Issues
– Website Load Times
– Browser Compatibility Issues
– Poor Navigation
– Busy Content
OPTION: You don’t find a suitable theme in the free directory?
• Themeforest.net ($40 - $60 per theme)

12. RESPONSIVE DESIGN = A MUST

13. DESIGN & BRANDING
Do you have a logo and tagline?
What is your color identity?

14. 2) PICK A DOMAIN
Start with a free domain, you will change it later.
Registering a domain through
WordPress.com starts at $18.00 per year
Adding a domain you already own
costs $13.00 per domain, per year.
A custom domain is also included in both
the Premium and Business Plans.
On Strikingly, custom domains are
included only in the LIMITED (8$/month)
and PRO (16$/month) versions.

15. 3) PICK A PLAN

16. 4) CREATE YOUR ACCOUNT &
ENTER YOUR DASHBOARD

17. 5) UNDERSTAND THE
WORDPRESS DASHBOARD
View Site = preview your website
WP Admin = access the back-office of your
website
Plan = upgrade to a different plan
Blog Posts = publish articles on your blog
Pages = create pages for your website
Media = upload pictures, videos
Portfolio = add new projects in your
portfolio
Themes = change your theme
Menus = create menus, links etc.
Sharing = connect with social media pages
Users = invite other people to enter your
dashboard
Plugins = add specific feature to your
website (eg: an e-commerce shop…).
Domains = change the domain name
Settings = change the title of your website,
tagline, allow search engines to index the
site, allow people to comment on articles,
receive emails when so post a comment,
requires manual approvement before a
comment is published...

18. ADVANCED WORDPRESS DASHBOARD

19. 5) UNDERSTAND YOUR STRIKINGLY
DASHBOARD
4 main buttons:
• SAVE : save your work in progress as often as possible
• PUBLISH : publish your website once it’s complete
• STYLES : choose alternative templates
• SETTINGS : change the title, URL, add your own domain name, describe your website (for social media
sharing), advanced settings
PREVIEW: preview the website in large screen or on mobile screen
SECTIONS : a list of separate section and individual page titles, which can be edited to create the framework of
your site. They are initially listed as work, experience, photos, contact and leave a message, with an additional
icon that enables you to add sections and headings.

20. 6) DEFINE YOUR SITEMAP
Home
About
Mission
History
Team
Products /
Services
Service 1
Service 2
Portfolio Testimonials Contact Blog
Category A
Category B
Privacy
policy
A sitemap is a list of pages of a website accessible to crawlers or users.
Multi-page site: Single-page site:
Product/ser
vice
Portfolio
Team
Contact
Blog

21. 7) CREATE YOUR PAGES / SECTIONS
Add the sections you need and rename them
Add pages1
Click on « Pages » - « Add ».

22. 7) CREATE YOUR PAGES / SECTIONS
Edit your page2
• Add your content.
• Change status (publish, draft…) to
control if your page is visible or not.
• Link the page to another section if
needed (« parent page »)
• Set a feature image

23. 8) CREATE YOUR MENU
Your menu items will be created
automatically according to the names of
your sections.
Your menu item can direct to a:
-Page from your website
-Link (external website page)
-Category (all blogposts from a specific category)
-Tag (all blogposts with specific tags)
-Post (one specific blogpost)
-Projects (projects in your portfolio)
Select the menu you want to edit
Add menu items
Go in « Menus ».

24. 9) CUSTOMIZE YOUR HOMEPAGE
Click on « Customize » in the Themes
• Site identiy : Title & tagline are for your
value proposition in just a few words
• Change the image, colors, backgrounds,
fonts to match your brand identity
• Edit all the contents by clicking on it.
• Edit the name of the sections in the left
sidebar.
• Change the texts, images, colors,
backgrounds, fonts to match your identity

25. • Communicate your value proposition
• Clearly answer : WHY – WHAT – HOW ?
• Resonate with the target audience : speak to
the right people in their language
• Include CTAs = call to action
WHAT SHOULD BE THERE?

26. EXAMPLE
WHY ?
The emotional
part
WHAT?
CALL TO ACTION
HOW?

27. • Keep in mind that the time spent on website
is 2-5 min/visit and people viewing things on
their mobile phone are usually on the go
– Short and Sweet
– Use Images & videos
– Get your point across quickly
– Bullet points encourage people to read more
COPYWRITING FOR MOBILE

28. OTHER EXAMPLE

29. OTHER EXAMPLE

30. OTHER COMMON HOMEPAGE
CONTENTS
FOOTER or
SIDEBAR
Add widgets to facilitate
the navigation:
- About us
- Social media links
- Sign up for newsletter
- Archives
- Search box…
-ETC.
BLOGPOSTS
Static front page VS
latest posts

31. WHERE TO CUSTOMIZE IT?
• In the « Customize » section in the Theme
• Select between static front page vs latest
posts
• Select the widgets you want in your
footer/sidebar…
Add/Edit the Blog section and the footer
section by clicking on it.

32. 10) CREATE YOUR “ABOUT” PAGE
• Call it « About » and not something different (!! Think usability )
• Tell the visitors who you are by showing what you can do for them
• Give social proof, testimonials and other authenticity statements
• Show personality
Go in « Pages » - « About » and write your content.

33. 11) CREATE A BLOG & POSTS
Add a new section « Blog »
Click on « Manage the posts » when on the
blog section.
Add and edit your blogposts in the « Publish »
- « Blog posts » section.
For each blogpost you can:
-Change status
-Add tags & categories: that will help you
structure your blogposts per categories or
themes (see menus)
-Featured image
-Social media Sharing

34. WHY CONTENT RULES

35. CONTENT BEST PRACTICE

36. CONTENT BEST PRACTICE

37. CONTENT BEST PRACTICE

38. YOUR TOOLBOX

39. SEO BASICS
– One article = one keyword
– Well organized post structure (h1, h2…)
– Highlight your keywords in the titles and the
content
– Alternate Text for all Images
– Add tags
– Clean URLS
– No Broken Links

40. MOST IMPORTANT METRICS
• Your unique visitors = the size of your audience
• Referrals = where do your visitors come from? Are people
mentioning you and linking back to you? Are your social efforts
paying off?
• Bounce rate = A “bounce” is when someone visits your site and
immediately clicks the back button or closes their browser tab.
What this usually means is that that user didn’t find what they
were looking for on your site and decided to leave.
• Top 10 pages = what types of content your visitors find most
useful and engaging, and which headlines were the most
successful.
• Conversion rate = the % people who achieved a goal on your
site.
Eg: completing a purchase, filling out a contact form, or viewing
a certain page on your site.

41. METRICS & TRACKING
In « Stats » : basic statistics(visitors,
top 10 pages, referrers).
Upgrade your plan to to install Google
Analytics.
Go in « Setting », then « Advanced
Setting », « Analytics » : basic
statistics (unique visitors, referrers).
You can install Google Analytics only in
the Pro version.

42. METRICS & TRACKING - ADVANCED
Step 1: Visit Google Analytics Signup Page and create an account.

43. METRICS & TRACKING - ADVANCED
Step 2: Make sure website is selected.

44. METRICS & TRACKING - ADVANCED
Step 3: Copy the Google tracking code.

45. METRICS & TRACKING - ADVANCED
Step 4:
Paste it in your theme’s header.php right after the <body> tag.
.
Go in “Settings” - “Customized Code”Go in “Settings” - “Analytics”

46. MAPPING OF YOUR DOMAIN NAME
Step 1 : Add domain mapping
Step 2 : Log in to your account at your domain
registrar, and replace any existing name servers with
these three domain name server (DNS) addresses:
NS1.WORDPRESS.COM
NS2.WORDPRESS.COM
NS3.WORDPRESS.COM
Step 3 : Head over to My Domains and make sure
the domain you just mapped is set as your primary
domain. It can take a few hours.
Step 1: Go to you site editor and click Settings >
Custom Domain. Enter your domain name and click
“Upgrade”
Step 2 : Login to the domain registrar.
Forward your naked domain (ex.
yourdomain.com) to your www subdomain
(www.yourdomain.com).
Make sure to use 301/URL forwarding and
that masking/masked forwarding/iFrame is
not selected.

47. MAPPING OF YOUR DOMAIN NAME
Step 3: Add one CNAME record. Go to your
domain's host record settings or zone file editor
(for the domain you want to connect). If you
already have a CNAME or A record for WWW,
make sure to edit/delete those so you end up
with only the one listed below.
Step 4 : Don’t forget to save your settings when
you’re done!
It usually takes a few up to 48 hours for your
settings to kick in.

48. SINGAPORE GRANTS FOR WEBSITE
DESIGN & DEVELOPMENT
• CDG (Capability Development Grant) from SPRING Singapore
– Up to 70% of qualifying project costs (consultancy, training,
certification, equipment costs…)
• iSPRINT Grant from IDA
– For 1st time Infocomm adoption for SMEs
• PIC (Productivity and Innovation Credit) Grant from IRAS
– 400% tax deductions/allowances and/or 60% cash payout for
investment in innovation and productivity improvements (ending in
2015)
• ICV (Innovation & Capability Voucher) Grant from SPRING
Singapore
– Voucher valued at 5000$ to encourage SMEs to take their first step
towards capability development (through consultancy)

49. THANK YOU!
Agence Tesla, a social media agency in
Singapore and Shanghai
Martin.pasquier@agencetesla.com
Follow us on Twitter @agencetesla or
www.agencetesla.asia
Like what you read?
Subscribe for our newsletter