Now that we’ve set up our website, it’s time to decide what content to put on it—this is Part 2 of our three-part tutorial series on creating a website for your small business. In this post, we’ll be addressing our site’s structure and content. If you haven’t read Part 1, click on the following link and take a few moments to read it before beginning Part 2: How to Create a Website for Your Small Business (a three-part tutorial series).
PART 1: PLANNING YOUR WEBSITE STRUCTURE AND CONTENT
Step 1: Structure and Copy
I’ve already given some thought to my site’s structure and content in Part 1:
For my hypothetical small business, which I will call “Made Fresh Juice Bar”, I primarily want basic information about my business on my website: my business name, a section describing what my business is about, information about my juice bar’s physical location with map, hours of operation, contact information (address and phone number), a product menu of my juices, and the latest posts from my two social media feeds, Instagram and Twitter. With this information, potential customers can decide if they want to come visit in person and try out a juice. I’ll aim to engage my customers by offering special deals on my social media feeds, which I’ll embed somewhere on my site.
Now, I’ll work on consolidating this information onto three pages on my simple small business site: a welcome page (which will be my home page), a menu page that describes my products, and a third page to advertise this tutorial series on our parent blog, a8cdesignvoice.wordpress.com.
I’ve outlined some notes on what text and images I’d like to appear on each of my three site pages, so it’ll be easy for me to add pages and content to my site. You can do this offline with pen and paper or in a text document on your computer so you can copy and paste the text you’ll use on your site.
Step 2: Stock photo assets
Since I don’t have my own photography for my business, I’ll search some stock photography websites for high quality imagery of fruits and vegetables. One stock photography site I like in particular is Unsplash.
Here, I’ve searched for the term “fruit” and scrolled through the results until I came across images with a visual style that I like—two photos of fruits by Lauren Lester. It helps to choose photos shot by the same photographer so you can maintain a consistent visual style across your site photography. The two photos I’ve chosen will be used on my home page and my juice menu page:
(link to orange image here, and link to apple image here)
When choosing stock photography for use in commercial contexts, like a business website, it’s important to consider the licensing terms of every photo you use to avoid unpleasant legal repercussions. I’ve used Unsplash before and am familiar with their license:
All photos published on Unsplash can be used for free. You can use them for commercial and noncommercial purposes. You do not need to ask permission from or provide credit to the photographer or Unsplash, although it is appreciated when possible.
More precisely, Unsplash grants you an irrevocable, nonexclusive copyright license to download, copy, modify, distribute, perform, and use photos from Unsplash for free, including for commercial purposes, without permission from or attributing the photographer or Unsplash. This license does not include the right to compile photos from Unsplash to replicate a similar or competing service.
For my third page, “Make your own website”, which advertises this tutorial series on creating a website on WordPress.com, I’ll include an image of a WordPress.com ad that I created a few months ago for our marketing materials which showcases a website across three different devices—a laptop, tablet, and mobile phone.
It’s important to choose a website theme that is responsive—this means it can adapt the content—both text and images—to whatever screen size you are viewing the website on. According to SCORE, 93.3% of small and medium business websites are not mobile-friendly, yet 4 out of 5 people use their smartphone to shop and 96% of people research a product or service on their phone. If 73% of mobile searches trigger follow-up sharing, calls, sales or store visits, it’s clear that opportunities are lost by not having a mobile-friendly site. You can check out all our responsive themes on our Themes Showcase.
Design From Anywhere at Automattic.
PART 2: NAVIGATING THE WORDPRESS.COM INTERFACE: THE “MY SITES” MENU AND CUSTOMIZER MENU
Step 1: The “My Sites” menu
Once you’ve set up your website, you’ll be taken to your site, which will already have a theme chosen depending on what type of website you specified during the signup process. Back then, I chose “Start with a website” to promote my business:
The pre-selected theme that my website starts off with is Dara:
Although this theme looks great and seems really functional, it doesn’t fit what I’m looking for—I’d like a simpler layout that’s more image-driven. There’s also placeholder content here that I don’t need to have on my site, so I’ll be removing that all. But I can worry about that later.
The primary place where I’ll be working to add content and customize my website is under the top left “My Sites” link. When you click this, a side menu appears:
The first thing is like to change is the theme design. I’ll click on “Theme” in the sidebar and look for a theme that fits more what I’m looking for.
Here in the themes showcase, I’ll search for the term “food”. Since there are a lot of food-related theme results, I’ll try something more specific like, “juice bar”. Since that returns zero results, the next closest thing I can think of to “juice bar” is “cafe”, so I’ll search for that. Here are my results:
These results are looking great to me, and I really like the look and feel of Aperitive on the far right in the top row of results.
To activate this theme, I’ll click on the three dots icon, for “more” options, and click on “Activate”.
Because I have the Premium plan already purchased, this theme is free for me to use and further customize the CSS. If I had a Free plan, I’d have to pay $69 to use this theme and I would not be able to customize the CSS at all. With Premium plans, all premium themes are available for free, so I can switch one premium theme for another if I want to at any point in time—this will be helpful if I ever want to update the look and feel of my business.
This particular theme, Aperitive, is made by Themes Kingdom, a small business that specializes in creating WordPress themes that are used both on WordPress.com and by self-hosted WordPress websites. WordPress.com websites are all hosted by Automattic, the parent company of WordPress.com and other products such as Jetpack, WooCommerce, and WordPress.com VIP. WordPress.com offers our customers themes beyond the stock ones created by ourselves (Automattic)—this gives third-party theme creator small businesses an opportunity to profit from our curated theme marketplace and our customers more variety in selecting from many different theme designs.
Step 2: The Customizer menu
When I preview my site with the Aperitive theme applied, I can see that there is a lot of placeholder content already in place. This is useful, but I already know that I’d like to remove this placeholder content and start adding in my own content. I’ll start with the Site Title. To do that, I’ll click on “My Sites” in the top left and then click on the small “Customize” button next to the Themes menu item.
The following screenshot is what the Customizer menu looks like:
To change the Site Title, I’ll click on “Site Identity” and change the placeholder content to my business name and site tagline.
I have the option to upload a logo, but since I don’t have one, I’ll skip that step for now. I also don’t have a Site Icon (also known as a favicon), so I’ll skip that as well. For the Footer credit, I’d like the WordPress.com branding to be less conspicuous, so I’ll set it to the WordPress.com logo.
Going back to my Customizer menu, I’ll skip “Colors & Backgrounds”, “Fonts”, and “Header Image”, because I like the way things look so far and I don’t want a header image. If I want to change anything later, I can easily do that from this menu.
Next, I’ll edit my Menus. When I click on “Menu” in the Customizer menu, I am presented with two menus and their locations:
The two menus are the “Primary” menu, which appears at the top of my site, and a “Social Media” menu, which appears at the bottom left of my site as social media icons. I’ll start by editing the Primary Menu:
The Primary Menu lists a few placeholder sample pages by default here. Since I only want a “Juice Menu” page and a “Make Your Own Website” page, I’ll delete all the other pages here. To do that, I’ll expand one of the pages I don’t want, such as “Testimonials”, and click the red “Remove” link:
I’ll repeat this for all the pages I want to get rid of, and I’ll also rename the homepage to “welcome”.
Next, I’ll edit the Social Menu to remove the social media channels I don’t need on my site. Each menu item shows up on my site as social media icons.
I only have Twitter and Instagram accounts I’d like to link to from my site, so I’ll get rid of the Facebook and LinkedIn menu items in a similar manner as before—expanding each item and clicking the red “Remove” link:
We’ll leave the Twitter and Instagram links in place to edit in Part 3 of this tutorial series. For now, we’ll just focus on getting our main content onto the site.
Next, we’ll go back to the Customizer menu and move on to the next item, “Content Options”. Here, I’ll leave the blog display as it is and uncheck the boxes under both “Author Bio” and “Post Details”, since I don’t need to display that information on my site right now. I can always change my mind later if I decide to show this information on my blog posts.
Next, I’ll take a peek at the CSS view, but I won’t be making any customizations just yet—that’s saved for Part 3 of this tutorial series. But off the top of my head, I already know I’d like to increase the width of the element that holds my site title so that my business name doesn’t need to be broken up onto two lines.
Going back to my Customizer menu, I’ll also skip “Widgets” for now, since I know I want to add Twitter and Instagram widgets to display small feeds for these accounts, but that’s also saved for Part 3.
Next, let’s take a look at “Homepage Settings” in the Customizer menu. Here, my theme already defaults “Your homepage displays” to “A static page”, and the Homepage to “home”, which I’ve renamed to be “welcome”. I haven’t yet set up a blog, but when I do, I can change the “Posts page” to be whatever page I set as my blog page.
The last item I’ll check on in my Customizer menu is “Theme Options”. Here, I can edit my blog layout to be one column (the default setting) or two columns.
If I look at the Aperitive theme page and scroll down to the section, “Two-column layout”, I can see what that option looks like. I don’t need that layout right now, so I’ll leave the settings be.
PART 3: ADDING AND EDITING PAGES
At this point, my site looks pretty blank, so I’d like to add in content to two new pages I’ll be creating. To do this, click on “My Sites” in the upper left and click on “Site Pages”:
Even though I’ve removed several placeholder sample pages from my website’s “Primary Menu”, they still exist as live pages, so I’ll need to delete them. To do this, I’ll click on the three dots icon, for “more” options, and click on “Trash”. Trashed pages can be restored from the “Trashed” tab on the “Site Pages” page.
Then, I’ll click on the three dots icon next to the page “Home” and click “Edit”. Here, I’ll change the page title and slug to read “welcome” instead of “Home”. In the text editor area, I’ll copy and paste in my text blurb about my business, contact and hours of operation information, and a Google Maps snippet that embeds a small interactive map of my business.
To generate that code snippet to copy and paste into your site page, just go to Google Maps, enter your business address, click on the Share icon in the left sidebar. You’ll see a screen that looks like this, which shows the “Embed link” option:
To get the code for the map, you’ll need to toggle over to Embed Map, select the size map you’d like, and then copy and paste the code into your WordPress.com page editor window. This code is automatically converted into a WordPress.com shortcode, so you just need to paste it wherever you’d like the map to appear and then update the page.
I’ll also want to upload my stock photo of the oranges via the “Featured Image” section in the right sidebar of my page editor:
Clicking “Set Featured Image” here will take me to my media library, where I will see several images free for me to use by default. To upload my images, I’ll click the top left “Add New” button.
Once it uploads, the image will remain selected with a blue checkmark in the bottom right corner of the thumbnail preview of the image, and I’ll click the blue “Set Featured Image” button to place it on my page.
Once I’m done with all the edits to my page, I’ll click the blue “Publish” button on the upper right corner of my editor view, and I’m done. I can now click on “Close” in the upper left corner, and I’ll be taken back to my list of Site Pages.
Now that I’m done editing the home page, I’ll now want to add two new pages, “juice menu” and “make your own website”, by clicking the small “Add” button next to Site Pages in the left menu.
I’ll follow the same steps here to add my new pages as I did before with editing my home page: I’ll add a title, text content in the editor, and upload a featured image. I’ll also uncheck “Show sharing buttons” and “Show Like Button” from the “Sharing section on the right side menu.
“Juice menu” page:
“Make your own website” page:
On each page, once I’m done with all my edits, I’ll hit the blue “Publish” button in the upper right corner.
Now that I’ve got my pages in place, I’ll want to edit the Primary menu and add these there. To do this, I’ll go back to “My Sites” in the upper left, click on “Customize” next to “Themes”, click on “Menus”, and then click on “Primary Menu”. Here, I’ll click on the small button, “Add items”, and select my two new pages under the “Pages” dropdown and then click the blue “Publish” button at the top of the menu:
Now, when I preview my site, my pages should look like this:
Welcome (home):
Juice menu:
Make your own website:
Things are looking good, and all my content is in place. We’re almost done with our website!
Design From Anywhere at Automattic.
Congratulations on making it through Part 2 of this tutorial series! You’re well on your way to creating a new website for your small business. Stay tuned for Part Three: Customization & Sharing, where we’ll connect our social media accounts to be featured in a sidebar with two widgets—the Instagram and Twitter widgets—and also talk about setting up a blog, scheduling posts, and connecting blog posts to social media accounts.
AUTOMATTIC DESIGN (VOICE RIP) 