How To Make a Heroic Website: A Step-by-Step Guide

Creating a website doesn’t have to be difficult — or expensive. The Heroic website builder can help you quickly create a website that’ll meet all of your small business’s needs. In fact, Heroic promises its users the ability to create a high-performance website in minutes.

This step-by-step guide will walk you through the process of building a simple, yet professional Heroic website. By the end, you’ll have a four-page site that’ll suit nearly all service-based small businesses.


Before You Begin

Before you start building your business website, take some time to map out its overall structure. While this step isn’t necessary, it’s a best practice because it’ll help you create a site with a cohesive flow.

For help with this planning phase, check out our How To Structure a Website article.

Step 1: Sign Up for Heroic

Before you get started, you’ll need to create an account with Heroic. To do so, visit HeroicNow.com where you’ll see a call-to-action (CTA) button labeled “Start Your 14-Day Trial Today!” Click on that button to set up your account.

How to make a Heroic website.

You’ll then reach a page where you must select the method you want to use to create your website. Your options include “Fastest!,” “Advanced,” and “Done4You.” For the purposes of this guide, we’ll select the “Fastest!” method because it allows you to customize a Heroic template. To continue, click on the “Get Started!” button.

How to make a Heroic website.

Note: For more information on the “Advanced” and “Done4You” methods, read our in-depth How To Use the Heroic Website Builder guide.

Once you choose the “Fastest!” option to create your website, you’ll reach a page with a variety of premade templates. The Heroic website builder sorts them into categories, including “Coach,” “Speaker,” “Author,” “Consultant,” “Health & Fitness,” and more. Each template includes a detailed description of its features. When you find the template you want to use, click on the “Start With This” button.

How to make a Heroic website.

You’ll then reach a page where you must enter your name and email address as well as create a password. When you finish, click on the “Create My Heroic Account Now!” button.

How to make a Heroic website.

On the next page, you’ll need to select the plan you want to use when your free trial ends and provide your credit card information. But, don't worry. You won’t incur a charge until your 14-day, free trial expires. Heroic only asks for this information in an effort to avoid an interruption in your service. 

Continue to the next page by clicking on the “Create My Heroic Account Now!” button.

Note: For more information on Heroic plans, read our Heroic Pricing and Plans guide.

Step 2: Set Up Heroic Page Structure

Once you finish creating your account, you’ll automatically arrive at your website’s visual editor.

How to make a Heroic website.

Every template in the Heroic website builder comes with its own set of pages. To create a website specifically tailored to your business’s needs, you’ll need to customize these pages. While it can vary by business, as a general rule, your website should include the following pages:

  • Homepage: This landing page for your visitors should include images and text consistent with your branding along with high-level information about your company.
  • “About” Page: This offers visitors more detailed information about you and your business.
  • “Services” Page: This describes the services your company offers. Retail businesses can replace it with a “Products” page, but the Heroic website builder primarily suits business owners in service-based professions.
  • “Contact” Page: This should include all the information visitors need to find your business and get in touch (e.g., your business’s name, phone number, email address, physical address, and a contact form).

Note: Looking for a more in-depth discussion about how to set up your site’s page structure? Check out our How To Structure a Website article.

To view your website’s existing page structure, click on the “Pages” icon at the top of your visual editor’s left-hand menu. This’ll open a “Pages” menu with a list of your site’s existing pages. To navigate to a specific page within Heroic, click on the right-facing arrow next to that page’s name. To edit a page, click on the ellipses (“”) icon next to that page’s name. Your editing options will include “Delete,” “Duplicate,” “Settings,” and “Unpublish Page.” 

How to make a Heroic website.

To create a page, simply click on the green “New” button at the top of the “Pages” menu. To reorder pages, click on the page you want to move and then drag and drop it wherever you want it to appear in the page list.

Step 3: Upload Your Logo in Heroic

Adding your logo to your Heroic homepage will put your business’s brand front and center for site visitors.

Start by clicking on the existing logo within your template. This’ll open a menu labeled “Section, Row 1, Column 1.” Scroll to the bottom of this menu until you find the “Edit Elements In This Column” section, and then select “Image.”

How to make a Heroic website.

Click on the “Change Image” button in the “Image” menu that then appears. Next, select your logo file from your device to proceed. You also may use this “Image” menu to edit your logo’s position, size, spacing, border, and shadow.

How to make a Heroic website.

Note: If you don’t have a logo yet, use our Free Logo Generator to create one.

Note:
Some logos may appear too small in the navigation bar. In that case, try another file size or substitute text for your logo.

Step 4: Update Your Heroic Homepage

Because your homepage header serves as your website’s visual “handshake” with visitors, it’s crucial for grabbing and holding their attention. If you get this wrong, potential clients likely won’t scroll any further to learn more about your business. Instead, they’ll simply leave your site and you’ll lose the opportunity to make a sale.

The main elements of the homepage header area include: 

  • A large image that covers the top of the homepage 
  • A headline and a subhead
  • A CTA button

Read on to learn how to tailor each of these elements to your business.

Change the Header Image

Your homepage header image is the most important, brand-representing image that’ll appear anywhere on your site. Selecting one that conveys your brand personality is critical to connecting with your target audience.

Depending on the type of business you operate, the best images for this section include:

  • An external view of your business
  • A picture of your products or services
  • Happy people using your products or services
  • A high-quality, smiling headshot of yourself — especially if you’re a life coach, author, and other professional who plans to use your site as a portfolio

Pick a Header Image

You have two primary options: use an image of your own to represent your brand or choose one from the Heroic website builder’s wide selection of free images. Ideally, you’ll use an image that directly relates to your services or products — and a personal touch goes a long way for this section of your website.

Note: Be sure that whichever image you use isn’t under copyright. Many small business owners will simply search for images on the internet and upload them to their websites without realizing that’s a violation of copyright law. This can expose your business to a lawsuit over a simple mistake.

Replace the Existing Header Image

Once you select the image you want to use in your homepage header, you can easily replace your template’s existing image.

How to make a Heroic website.

To replace the existing header image:

  • Hover over the upper-left corner of your website and click on the “Section” button. This’ll open the “Section” menu.
  • If you want to use one of Heroic’s free images, click on the plus sign (“+”) icon that appears on the current image in this menu.
    • The “My Library” pop-up window will then open. Enter a keyword in its search box to find an image that suits your needs.
    • Once you find an image you want to use, click on the “Download” button to replace the existing header image.
  • To instead upload your own image, simply click on the “Upload new” button and choose an image from your device.
  • When done, click on the green “Checkmark” button at the bottom of the “Section” menu.

Note: You can use this method to edit images throughout your website.

Change the Headline

The headline in your homepage header should convey your company’s message as succinctly as possible. Pithy copy and catchy slogans work well here.

How to make a Heroic website.

To edit your homepage header’s existing headline, simply double-click on the text itself and then enter your own content. When you highlight your new headline, an “Editing” toolbar will appear. Use that toolbar to change the headline’s font as well as its size, alignment, and style (e.g., bolded, Italicized, or underlined). 

Note: You can use this method to edit text throughout your website.

Add a Subhead

An effective subhead will expand on the ideas conveyed by a headline. You may edit this section using the same method you followed to update your headline. Use succinct copy and avoid trying to communicate too many complex ideas in this limited space.

Update Your CTA Buttons

Eye-catching CTA buttons provide an important way site visitors can engage with your products and/or services.

How to make a Heroic website.

While you can’t add CTA buttons in areas they don’t already appear within a Heroic website template, you can edit or delete existing CTA buttons. To do so, simply click on the button. This’ll open a menu that enables you to change the button’s text and its destination (e.g., the page on your website to which it directs visitors).

You also may edit a CTA button’s style, positioning, size, and spacing with this menu.

Update the Footer

Your website’s footer contains valuable information about your business and also requires some customization.

How to make a Heroic website.

Every footer should include an up-to-date copyright, links to other pages on your website, and a product or service link. You also may wish to include legal information like your business’s privacy policy or terms and conditions. 

To edit any of these elements, simply double-click on them. Then, follow the previous steps to make your desired modifications.

Step 5: Update Additional Pages in Heroic

Now that you have a completed homepage, it’s time to finish your site’s “About,” “Services,” and “Contact” pages. 

Every template should include an “About” page and “Contact” page by default. If your template doesn’t include a page for products or services, simply follow the instructions above to create a new page. Then, select the “Products/Services” option to access the available layouts for this type of page and choose whichever layout most closely aligns with your company’s branding.

Follow the same steps discussed for replacing existing text and images on your homepage to adjust these elements on your site’s other pages. Make sure your “Contact” page includes your business’s name, phone number, and physical location. Your “Products” or “Services” page also should feature high-quality images.

For more detailed directions on using the Heroic website builder, check out our How To Use the Heroic Website Builder guide.

Step 6: Publish and Test Your Heroic Website

After you finish updating your new website with text, images, and other information relevant to your business, it's time to publish and test the site. Initially, Heroic assigns all of its users a subdomain that includes “HeroicNow” in the URL.

Start by testing your website on your assigned subdomain so you can ensure it looks and functions as expected before it goes live on your business’s domain. If something’s not right, return to your visual editor to make the needed adjustments.

Publish to a Subdomain

To publish your website, click on the green “Upload” icon in the lower-left side of your screen (it looks like a cloud with a plus sign). You’ll then need to decide if you want to publish all the pages on your site or just your current page. Click on the “Publish All Pages” button.

How to make a Heroic website.

 If you’re satisfied with your website, you can proceed. If you dislike any elements of your site’s appearance or functionality once published to your subdomain, return to the Heroic visual editor to make any necessary changes before you proceed.

Test Your Heroic Website

After you publish your site to your subdomain, return to the visual editor and look for the “Computer” icon in the bottom-left corner. Hover over this icon to open more options that’ll enable you to edit your website for mobile devices and tablets. Toggle through each to preview how your website will appear on different devices.

If you need to make any changes to your site so it appears correctly on mobile devices, do so now before you publish it to your business’s domain.

Publish to a Domain

Congratulations! You successfully built a functional website using Heroic’s simple, website-building software. It’s now time to find a permanent domain for your website.

Note: Need help choosing a domain for your business? Check out our Domain Name Generator.

While it’s easiest to use a domain from Heroic, you also can connect to a domain you purchase from another domain host.

Publish to an Existing Domain on Heroic

If you already purchased a domain from Heroic, you may connect your new website to your existing domain.

To use a domain you already own: 

  1. Click on the “Settings” icon in your visual editor.
  2. Select the “Site Settings” option in the menu that then appears.
  3. Click on the “Custom Domain” button.
  4. Enter your domain name and click on the “Connect Domain” button.
  5. Follow the prompts to connect your domain to your site.

Purchase a Domain from Heroic

If you don’t already have a domain, you can easily purchase one from Heroic.

To purchase a domain from Heroic: 

  1. Click on the “Settings” icon in your visual editor.
  2. Select the “Site Settings” option in the menu that then appears.
  3. Click on the “Custom Domain” button.
  4. Click on the “Get One Here” button to navigate to a page where you may select a domain.
  5. Choose your domain and complete your purchase.

Final Thoughts

Now that you quickly created a professional site with the Heroic website builder, you can focus on running your business. For more information on how to take your website to the next level, check out these other articles:

How To Use the Heroic Website Builder (for more in-depth instructions)

How To Improve SEO

How To Use Google My Business

Additional Resources