How to Build a Business Card site using Website Creator

• Before you Start
• Step 1 – Logging into the WordPress Administrator Dashboard
• Step 2 – Loading a BoldGrid Inspiration
• Step 3 – Customizing your Inspiration
• Steps to Edit your Inspiration
• Changing the Menu and Title
• Editing the Footer
• Editing the Contact Form

Sometimes you want to create something really simple in order to pass along information. In print, the simplest way to present someone with information about yourself is to hand someone a business card. A business card can be limiting, but it also immediately provides a person with information that they can share or use to contact you. Follow the tutorial below to learn how to use Website Creator to create a very simple online business card.

In order to follow these directions you will need to have a Website Creator Hosting account!

Before you Start

As with any website that you build, make sure that you have the information that you want to add to your business card website. For this tutorial, we’re going to make it very simple. The site will consist of two pages – the home page and the contact form. Let’s jump in and get this started!

Step 1 – Logging in to the WordPress Administrator Dashboard

Log in to the BoldGrid (WordPress) Administrator Dashboard . The Website Creator uses the BoldGrid system of plugins for WordPress in order to provide you the tools you need to quickly create a website. BoldGrid provides pre-created websites where you simply have to replace existing content with your own. If you want to familiarize yourself with Website Creator, please see the Product Guide – Website Creator.

Step 2 – Loading a BoldGrid Inspiration

After logging in, the first step you’re going to need to do is load an Inspiration. It doesn’t matter which Inspiration you use, but you will need to browse them in order to pick one. For this tutorial, we are using the Swifty tutorial. Make sure that you are using only the Base pageset. This means that there are only 3 pages of pre-populated content that is loaded.

When you have selected the Inspiration you wish to use, you will see a Contact page during the installation process. The information on the page is optional, but it is used to populate the footer of the website page if you wish to use it. This contact information will be included in the footer of the page. The social media information is more important at this stage. If you add it here, then it will not be necessary to add it later.

After filling in the information, make sure to select that the Inspiration is loaded as your active site (not the staging site). If you install it as a staging site, then you will be adding extra steps to the process. To learn more about loading a BoldGrid Inspiration, please see How to Install Your First Inspiration.

Step 3 – Making it Simple – Customizing Your Inspiration

Once you have your Inspiration loaded, you will need remove the existing content until we get everything to a basic state. Inspirations are pre-populated with content, but you won’t need it for the basic business card site.

Look at the entire front page of the Swifty Inspiration that I’m using in this tutorial. At the bottom of the page you will see the footer with the contact information from the Inspiration installation. You can use this particular Inspiration as it is and simply replace the content with your own. I have chosen the Swifty Inspiration because it was made for this purpose. If you choose to do that, then this tutorial can stop right here. Use the next steps to learn how to simplify the site.

In order make these changes you will need to be familiar with the BoldGrid interface. To learn about editing pages, please review this tutorial: How to Edit Pages in BolGrid.

Edit the Inspiration Pages

1. You will need to be in the WordPress Administrator to start.
2. Click on Pages, then click on All Pages. You will then see all of the pages that come loaded with the Inspiration.
3. We will not be using the Gallery page, so we will first change its status to Draft. Hover over the page title and click on Quick Edit. Change the status of the page to Draft and then save the changes by clicking on the blue Update button in the top right corner.
4. Next, look for the Home – Front Page. Click on the page title to edit it.
5. If you scroll down you will see all of the sections of the home page. These sections are what you currently see when viewing the site. We will be removing all of the sections except the section with the picture of the person and paragraph description. This is the second section. The fastest way to remove a section is to hover over the content, then go to the middle of the bottom of that section. You will see a handle appear with a magnifying glass and 3-bar icon next to it. Click on the 3-bar icon to open the menu of options. Click on Delete in order to remove the section.
6. Once all of the sections are removed except the “About” section, you’re almost ready to start adding your content to the Home Page. You will need to remove the “View Collection” button. This button is used with the Inspiration in other pagesets, and it is not needed for your business card website. Click on a white space in the page to select the page, if you clicked elsewhere. You’ll notice this if you don’t see the editing handles in the content of the page.
7. Next, hover over the “View Collection” button. You will see an orange handle appear to the left of the button. Click on the 3-bar icon of the menu and click on Delete to remove the button.

At this point you can start substituting your own content. Using the BoldGrid editing options you can change the position of the content and how it appears. Make the changes keeping in mind that this will be what appears on your front page.

Changing the Menu and Title

Once you’re done with editing the Home page, there’s still work to do. We need to change the Menu. Depending on the Inspiration you have chosen, you may need to edit the Site title. The Swifty inspiration does not require you to edit the title. If you don’t want the Footer to appear as it is, then it will also need to be changed. Fortunately, this can all be done in the Customizer.

1. Click on Customize in the WordPress Administrator. This will take you to the Customizer screen. If you need to change the title click on Site Title & Logo. If you make changes, they need to be saved by clicking on the Publish button.
2. Click on Menus to make changes to the menus that you see. In the top right-hand corner you will currently see 3 items: Home, Gallery, and Contact Us. Since Gallery is not used, you will need to remove it.
3. Click on Primary and you will see the menu items.
4. Click on the drop-down arrow next to Gallery in the menu. Click on Remove in order to delete the Gallery menu. Click on Publish to save your changes.

Editing the Footer

We’re almost done! We’re going to look at how to edit the footer in this section. You can enable it or change the contact information.

1. Click on Advanced, then click on Footer Settings.
2. Here you can choose to use the Footer  or disable it. You can also edit the information. Note that you can only remove the Attributions at the bottom of the footer if you have subscribed to the BoldGrid license. If you are using a trial version of BoldGrid, then you will be unable to remove these items.
3. Once you’re done editing the Footer, click on Publish to save your settings.

Editing the Contact Form

The final step to creating your business card website is to edit the contact form and publish it so that people can see it. The form allows people to contact you through email. So, you will need a valid email address. The Website Creator uses the WPForms plugin for the Contact form. To learn more about using WPForms, please see the Introduction to WPForms article.

1. You will need to be in the BoldGrid administrator to start.
   Re-login to the Administrator if needed.
2. Click on Pages, then go to All Pages.
3. Select the Contact Us page. Click on the page title to edit the page.
4. You will see the form. You do not need to use an email address here. You will need to change the text of the form to meet your needs. There’s also an image at the top that you can replace or remove.
5. Once you’re done editing the form, click on Update.

Congratulations! That completes our tutorial on creating a Business Card website using the Website Creator! Remember that this is a very basic site and can be very easily modified to be something much more. You can also use this tutorial as an exercise in becoming familiar with the Website Creator.