Category: “How To…”

Why is launching your website so scary?

Nasturtiums and keyboard for launching your website blog

It may not seem as though launching your website requires an act of bravery but, for many of us, it does.

We think that when we press the button and the website goes live, the whole world will be able to see our tiny imperfections.

Trust me – they won’t.

We also have this bizarre belief that the minute it’s live, we will be inundated with demands – the whole world has been waiting for our launch in the same way as people wait for the latest iPhone.

Don’t worry. Unless you have spent a fortune on hyping it all up on every social medium and TV outlet, you will be able to cope with the demand.

For most of our prospective clients, a website is a cross between the online equivalents of Yellow Pages and Who’s Who.

Website visitors want to know three main things:

  • what you are offering,
  • who you are, and
  • how to get in touch.

If you have some testimonials on display – even better. If your colour scheme and fonts all stack-up and you have some nice pictures, they will feel comfortable and like your style even more.

One of our all-time, favourite poems is:

“Come to the edge. We might fall.

Come to the edge. It’s too high!

COME TO THE EDGE!

And they came – And he pushed – And they flew”

Christopher Logue (often misattributed to Guillaume Apollinaire)

If your website has enough on it to be “good enough” (not perfect) then, be brave – and fly.

We set up Flat White Websites because we know how scary it is to launch your first website. We’ve been there! So all our websites comes with a Home Page, an About Page and a Contact Page. You can then choose the best colour and font blend for you.

Check out what we offer here. And you can read more about how our websites work here.

What’s holding you back from launching your website?

Why Meta Data is important for your Website SEO

How to add Meta Data to your WordPress Website blog
Meta Data is the information that is displayed about your website in search engine results.

You can control the information that is shown by editing the meta data within your website’s content management system. Adding keywords will make sure that your website’s SEO is in great shape.

What is Meta Data?

Key point: add keywords to your Meta Data.


How do I edit my Meta Data?

There are two ways to edit your Meta Data:

  1. On individual Pages and Posts:

Top Tip: best for checking that your Title and Description are the optimum length.

2. Edit more than one Page or Post via the Yoast Bulk Editor:

Top Tip: great for checking that all your pages and posts have up-to-date Meta Data.


Here are some useful reminders:

  • Add your most important keywords to your Meta Title and Meta Description.
  • Maximum characters for Meta Title: 60.
  • Maximum characters for Meta Description: 160.
  • Go to the individual page or post to check that the Meta Data fis the optimum length.
  • Use the Bulk Editor to check any gaps, and do quick tweaks.

Sign up to our Website Wisdom newsletter to make sure you can launch your website with confidence.

When is the best time to make your website live?

However much we have planned and however much we like the idea of getting our website live, we all put off the moment of truth with different styles of excuses.

We kid ourselves with questions and answers like:

“Have I uploaded the best possible pictures? A better one might come up next week (or next month) – phew, I can delay again.”

“Is my copy as punchy, detailed, witty, professional as it should be?  If I leave it for a couple of weeks, I might come up with another idea – phew, I can delay again.”

My question to you is, will it ever be perfect or is it good enough now to do the job?

Let’s start by looking at what your website is for.

  • If it is to promote your business, have you defined what your business is?
  • Have you explained why your business will work for your prospective clients?
  • Have you told them how you/your business will help them?

If the answer to all three questions is yes, and you have a some great pictures to make the whole thing more appealing, then it’s time to launch your website.

Bright Website example for website live blog

The following quotations both explain why beautifully:

1. A good plan, ……. executed now, is better than a perfect plan next week. ~~ General George S. Patton, Jr.

2. Le mieux est l’ennemi du bien ~~ Voltaire – (Perfect is the enemy of good).

If you want people to know what you are up to, a website that is “good enough” will do exactly that. One that is still not live and is still seeking the perfection that never, ever arrives, will not.

Be brave – go for it.


Our websites are specifically designed to make it as simple as possible to get your website live. All the basic pages are set up, with the layout ready for you to add your content. Check out an example here. Want some extra hand-holding to get your website ready to go live? Sign up to our Bite Size Website Wisdom, where we send you monthly tips to get you on your journey.

How to use the WordPress Visual Editor

Graphic for WordPress Visual Editor blog

The WordPress Visual Editor is part of every page of your website, and it’s where you can add and edit your content.

WordPress Text Editor

The default setting is “Visual”, and this is suitable for adding a full range of content. If you want to add raw code, you can click on “Text” at the right of the editor box.

WordPress Visual Editor

Below are explanations about the main features, but play around to make the most of the editor.

Full Editor

Sometimes, you might see only one row of icons in the Editor. To show the full range of icons, click on the Toolbar Toggle icon:

Full WordPress Visual Editor

You can also work on a full screen, rather than a box within the page – just click on the icon shown above.

Headings

The default setting for adding text within the Editor is Paragraph. To change this into a heading, click on the arrow alongside the Paragraph/Heading box:

Headings in the WordPress Visual Editor

Headings are used by search engines to rate the understand the relative importance of pieces of content. Heading 1 is already used for the Website name, and Heading 2 is already used for the Page name.  So Heading 3 is a good place to start for your content, with a Heading 4 added as a sub-heading to draw the reader’s eye to any particularly important points. Use Heading 5 – which we are using here for the “Headings”, “Formatting Text”, etc – to highlight a sub list.

Headings are applied to a whole paragraph, not a section of text within a paragraph – just place the curser anywhere within the paragraph you want to change, and the relevant Heading you select will be applied.

Formatting Text

The Editor contains many of the standard formatting options – Bold, Italic, Bullet Points, Alignment. Hover over any of the icons for an explanation, and highlight any text to apply the formatting.

Formatting options in WordPress Visual Editor

Pasting Text

If you are pasting text from another source e.g. Word, click on the “Paste as Text” icon beforehand – this avoids any conflict with formatting.

Plain text in WordPress Visual Editor

Adding a Link

You can add links either to external content e.g. someone else’s blog that you are recommending, or your Facebook page, or to internal content within your website e.g. About Page, or a blog. Highlight the text you want to make into a link, then click the icon shown:

Adding a link via the WordPress Visual Editor

When you have selected the link or added the url, click “Add link” to make sure this is applied to your chosen content.

A useful rule of thumb that we recommend is to tick the “Open link in a new tab” for any external links, but to leave this box unticked for any internal links – that stops people leaving your website unintentionally.

Adding an Email Link

WordPress makes it really easy to make a link go straight to an email. Just write out the email, highlight it, then click on the link button as before:

Adding an email link in WordPress Visual Editor

Make sure you click on the arrow to apply the link.

Saving your Content

Whenever you have added content or edited content, always remember to click “Update” on the right-hand side of your page – otherwise your changes will be lost.


Anything else you would like explained about the WordPress Visual Editor? Get in touch – we are here to help. Or check out our Video Tutorials about all aspects of our Flat White WordPress websites here.


Pin for later:
Introduction to the WordPress Visual Editor
Introduction to the WordPress Visual Editor

Why you need a Coming Soon Page

Coming Soon page on Apple Desktop

A Coming Soon page is the simplest way to get started on a website for your new business.

Any business needs a website – however small. But having all the content ready for a website, when you are just starting a business? That’s hard, and, from talking to lots of people embarking on the daunting journey of setting up their new business, it’s the number one reason why small business owners delay getting their website live.

That’s where a Coming Soon page comes in.

Coming Soon on the To Do list

A Coming Soon Page is a temporary page can alert customers and clients to your new business venture. It can have as little as your contact details on – email address and/or phone number. Already have a website and you are making a new one? Simply add a link to an existing website that you are updating – that way you won’t lose any customers.

Incidentally, Google advises all businesses to use a Coming Soon page until their site is ready. From an SEO point of view, a Coming Soon page needs to be coded correctly to make sure that the bots that search for sites still register the page. That way, when your full website is launched, it is already indexed with search engines. But any good website provider will set up a Coming Soon page with this in mind, so you don’t have to worry about the background details.

As a starting point, a Coming Soon page is a great way to establish your branding. Add your Logo, and use your brand colours, to make a visual impression.

Your Coming Soon page doesn’t have to be all singing and dancing. Choose two or three elements from this simple checklist:

1 Contact Details

First things first: always make sure any visitor can get in touch with you as easily as possible. Include an email address, super-short contact form, or a phone number.

2 Great imagery

Choose a photo that tells people what your business is about – remember, a picture tells a thousand words. And, if you haven’t got your own photos ready to go, choose one from the brilliant royalty-free websites out there – read about our favourites on this Green Ginger Design blog here.

3 Strong copy

Make it short and snappy – this isn’t the place to list all your achievements, or every product and service you will be launching, but it is the place to summarise your business in a sentence or two.

4 Prominent social links

if you have social accounts already set up, add links to your Coming Soon page – this is an extra showcase for your work, and an easy way for potential customers to get in touch with you.

5 Enticing signup offers

Encourage your visitors to sign up for an opening offer or great free download.  Then, when your website is live, you can get in touch and tell them.

Coming Soon Page of Flat White Website

Remember: just because your Coming Soon page is temporary, doesn’t mean you can forget about it – it still needs to be updated. If you mention a product or business launch date, make sure that it is not out of date. Equally, add a timescale to the page as soon as you know it.

If you are using a Coming Soon page to announce a particular launch date for your business or product, don’t make the date too far in advance – 1 month is usually plenty for a business launch, and up to 3 months if it is an event. And if the date changes, make sure you update your page!

All our Flat White Websites arrive with a Coming Soon page already set up for you.  But if your website doesn’t come with a Coming Soon page already built in, there are some great WordPress Plugins designed just for this. WP Maintenance Mode has plenty of features to get you started, including fully customisable images and colours, as well as email subscription and social media icons.  If you want to take your Coming Soon page very seriously, it may be worth investing in a paid plug in with plenty of extra features, such as the Coming Soon Page and Maintenance Mode Plugin by SeedProd.


Pin for Later:

Why you need a Coming Soon page

Why you need a Coming Soon page

Logging in to your Website

Logging in to your Flat White Website

Whenever you want to edit the content on your Flat White Website, the starting point is Logging In to your WordPress dashboard.

To log in, go to your website Home Page or Coming Soon page, go to the address bar, and type in “/wp-admin” after your website address, then Enter: 

Coming Soon page for blog on Logging in

For example, for the Flat White Website login page, we would type in “https://flatwhitewebsites.co.uk/wp-admin”.

Occasionally, cookies will have been used on your website, and the Login page won’t load with this information. If this happens, type in either of these options in to the address bar:

  • “https://flatwhitewebsites.co.uk/wp-login”, swapping your own website name for newflatwhite.flatwhitedesign.pw.
  • “https://flatwhitewebsites.co.uk/login”, swapping your own website name for newflatwhite.flatwhitedesign.pw.

You will then see the Logging In screen:

Logging in screen

Type in your Username and Password. We recommend ticking the “Remember Me” box if you are on a personal computer, but not if you are logging in elsewhere.

You will then land on the WordPress Dashboard:

WordPress Dashboard for Logging In blog

Find out more about the WordPress Dashboard here.

You can watch a video explaining Logging In here.

Any other questions? Get in touch – we are always happy to help.


Pin for Later:

Logging in to WordPress website infographic

Logging in to WordPress website infographic

General Introduction to your Flat White Website

Flat White Website on desktop

We have designed Flat White Websites to be as simple as possible for you to set up.

Your website will arrive with dummy images and content.

Dummy content is included to explain the different sections of the website – edit this before your website goes live.

Straight off, you have 4 pages already set up on your website, which are all included in the main menu.

Home Page

Your Home Page is the place to introduce your visitors to all the different aspects of your business.

1 Home Page Panels

This is the place to add an introduction to your business, or extra information about any particular events or promotions, with the option of adding photos. Or you could add a summary of who you are, with a photo and link to your About Page.You can also add an extra Background Image, which will appear as the visitor scrolls down the page.

2 Services Offered

Here’s the place to catch your visitor’s eye, quickly.  Introduce your different services (up to 6), choosing the icon to match:

Services offered graphic for Flat White Websites

3 Testimonials:

Shout out all the fantastic comments you have from clients – the testimonials will automatically rotate.

Testimonials on Flat White Websites graphic

About Page

Your About Page includes a section for you to write about you, and what you can offer your customers, as well as a photo.

About Page graphic for Flat White Websites

Remember to tell your customers how you can help them, not just list your CV!

You can also add another Testimonial Rotator to the About Page, which can show the same testimonials as your Home Page or different ones.

Blog or News Page

This is the page where your most recent published articles/blogs/news will appear. You can re-name this page to whatever suits your website – we call ours “Website Tips”.

Blog page graphic for Flat White Websites

However regularly you can manage, it’s worth getting in to the habit of publishing content here as it’s a great way of adding regular content to your website.

Contact Page

Your Contact Page includes your contact details, all ready loaded, plus a Contact Form. You can add an introduction for your visitor too.

Contact page graphic for Flat White Websites

And, because we believe that Contact Details are crucial for any website, all our Flat White Websites are set up with contact details in the footer too. If you need to update your contact details, you just have to do this once, and the updates will appear throughout your website.

Menu

All these pages are included in your Main Menu, or Navigation, at the top of your website.

Navigation graphic for Flat White Websites

We have set this up to show you where your menu will appear – you can easily remove any of these pages from the menu, if you aren’t ready to publish all of them straight away.

Footer

Your Contact details are already loaded into your Footer. You also have the option of a second Menu here – this is the perfect spot for extra details, like Privacy Policy or Terms and Conditions.

Footer graphic for Flat White Websites


Any more questions? Check out the “How To….” Videos, or get in touch – we’d be happy to answer any questions you have.

Pin for later:

Introduction to Flat White Websites, website design, website inspiration, wordpress websites

How to Source Photographs for your Website

Example of Photograph on Flat White Website

Photographs are crucial for your website.

Whether it is a Hero Image on your Home Page that introduces your business to your visitor, or a Background Image that is revealed as you scroll down the page, choose your images carefully. The origin of the phrase “Use a picture. It’s worth a thousand words.” is disputed (maybe Tess Flanders in the Syracuse Post Standard in 1911 or Frederick Barnard in Printer’s Ink in 1921). But its relevance is still true a hundred years later, and as true for websites as it was (or is) for newspapers and books.

Think about what sort of images will work best on your website. Is your brand formal or informal? Is the tone of your business friendly or sophisticated? Do you have products to sell, or do you want to promote services? Do you want simple images that add colour and tone, or do you want to tell a story?

Make a list of photos that will enhance your website – start with a short list of, say, 5, and make those 5 count.

Best option: take your own.

Original content is valued by search engines, so original photographs will help your website climb higher up search results. This article on 10 Rules of Photo Composition gives really clear examples, with explanations about why particular photos work.

If you are going to take photos for website, plan them in advance:

  • Where will you use them? Plan out exactly what you will use where. This will affect the proportions of the photos you need – your Hero Image, for example, will need to be landscape format (wider than high).
  • Do you want natural or artificial lighting? Artificial lighting is much harder to achieve without professional equipment.
  • Will you need blank areas within the photo where text will go? Look at Instagram and Pinterest for great examples of photos that work well with text.

Make a list of the photos that you need, and plan exactly how you will take each photo.  If you are using props, gather them all around you before you start your session – that way, you can really focus on the photography.

Glasses on open notebook with pencil

If you need some inspiration, visit Pinterest. Pin images that appeal to you, then use them as models for your own shots, recreating the composition and lighting as closely as you can, without being a slave to the image.

Best paid option: commission a photographer.

This way you still get your original content, but with the help of a trained eye. Katie Vandyck from Excellent Headshots has expert knowledge of website photography, from mood shots to products for ecommerce sites. (Katie has taken some of the photos for our websites, as well as all the photos of us.) Or check out Instagram – photographers are their own best advert, so find a photographer whose photos you love, and work with them.

If you are going to commission photos, it is still important to spend time working out what photos you need, and where you will use them on your website.  The clearer you can be with a brief for your photographer, the more likely the photos will be suit your needs.

Best free option: royalty-free photos.

If you don’t feel confident about taking your own photos yet, make use of the fantastic resources available. There are some amazingly generous and talented photographers out there. They post their photographs online for you to use, for free, as many times as you like, royalty-free.

These are links to three really good sites from which you can download some fantastic royalty-free images. Many resources on the web are given freely. – please make sure that if you use any of them, you credit the owners.

UNSPLASH

PIXABAY

GRATISOGRAPHY

It takes some time and thought to select photographs from these sites as there are so many to choose from, but it can be a rewarding exercise. As they are free, you cannot guarantee that the photograph you want isn’t used by another website, so you don’t score so highly on original content. But they are a great cost-effective starting point, and can transform a website into something with which visitors can really engage.

The same principles apply – make a list of what you need before you start searching for photos.

Now you’ve got your great photographs. Time for a little word of warning.

Photographs increase the time it takes for your website to load, and slow loading is a real turn-off. 47% of consumers expect a webpage to load in less than 2 seconds, and 40% of people abandon a website if it takes more than 3 seconds to load.

So choose your photographs wisely – make each one count.

Pin for later:

How to source photos for your website

Where to use photos on your Flat White Website

Yellow and red stripy tulip

What’s the saying – a picture is worth a thousand words?

Well, photos certainly help to create a mood for your brand, even if you don’t need to rely on them to tell your whole story. This blog explains the different places you can add photos to your Flat White Design website.

We have added photos throughout your website to illustrate how they can be used. You can keep these until you have your own.

Hero Image

The starting point for your website is your Hero Image. The term “Hero Image” can sound intimidating. But it is basically a large image that is designed to fill the screen when your visitor first lands on your website – when someone clicks on “Home”, this is what they will see:

This image will probably be the first time the visitor sees your website, so it needs to pack a punch. If you are commissioning photos for your website, make this the most important one. If your business is not naturally photogenic, then it’s fine to use photos from the many fabulous photo resources that are around. Choose one that creates the right mood for your business.  If you are selling food, then that’s easy – choose something that makes your mouth water! And make sure that it’s something that you actually serve – no point showing a fashionable foodie fad if you specialise in burger and chips.

The Hero Image needs to be a good quality image so that it works on even the highest resolution screens – I recommend a minimum width of 2500px.

Whatever sort of image you choose, you also need to think about where text can go on our Hero Image. Make sure that there is a relatively plain area in the middle. Then, when you add your Site Title or Logo, it will show up clearly. You can choose the Site Title colour so that you get the best contrast – as you can see in the image below, the site title in white shows up much more clearly than the site title in grey.

Remember that it is really easy to update your Hero Image too. If you have a new product or service to launch, why not add a new photo here?

Background Images

Each page on your Flat White Website is designed to have a background image.  This Background Image shows up behind the Page Title, which is at the top of the page, and appears again above the Footer at the bottom of the page. When the visitor scrolls down the page, the image stays in place as the content scrolls – hence the name because the photo appears to stay in the background.

Background Images set the mood for the website, rather than selling individual services or products. Choose an image that is appropriate for each page. For example, for the About Page, a photo of you at work will create extra context for a headshot that you might choose to have on the page.

Background Images are also a feature of the Home Page Panels, which you can add on your Home page. These will appear above the relevant panel.

Again, this is an opportunity to provide more context for the services or goods you offer in your business, and help to make a strong impression of what you offer.

Images on pages

You can add photos within the content of any of your website pages, within the WordPress Text Editor. But use carefully. Choose one really strong image, rather than use too many. Apart from making the website load more slowly, one well chosen image will stay in the mind of your visitor far more effectively than a selection of mediocre snaps.

If you have lots of high-quality images that promote your business, you could add a Gallery within a page – or why not add a Gallery Page, which visitors can view via your Menu?

Whatever images you choose, make sure that they represent the qualities of your brand. And remember – updating your website is really important, and adding new images, regularly, is a really easy and really effective way to do this.  Time to get your camera out!


You can find more information about how to upload and edit photos for your website here. And if you want to find great resources for royalty free photos, these are links to three really good sites from which you can download some fantastic royalty-free images. Many resources on the web are given freely. – please make sure that if you use any of them, you credit the owners.

UNSPLASH

PIXABAY

GRATISOGRAPHY

Pin for later: