How To Build a Visual Website With No Code

Visual Website Development is an incredibly popular way of building professional Websites using pre-designed templates easily configured to suit your Business look and feel. During this tutorial, I’d like to show you how you can build a website with virtually no coding experience using state of the art hosting and plugins (features) using a temporary URL. On top of this an incredible theme-building solution that’ll showcase your Business professionally.

“Empowering Business Owners with their online content”.

^

Step 1: Determine What You'll Need

For the purpose of this tutorial, you are not required to register a domain name as you will set up a temporary domain for development prior to linking your own.

You’ll need:

 

“Disclosure: Some of the links in this post are ‘affiliate links.’ This means if you click on the link and purchase the item, I will receive an affiliate commission.”

^

Step 2: Start a Hosting Account

Your Website will need a place to live, use THIS HOSTING LINK to use the same hosting we use. We recommend and use WPMUDEV’s hosting due to its incorporated functionality, community and support. Once on their website select the Hosting Menu.

Find The Bronze Plan

Scroll down to find the Bronze Plan and select, ‘Get Started’. If not done so, you will need to create an account follow the prompts and fill in your details.

Bronze Hosting Plan

Go To The Hub

Go to the Hub within your newly created account to find a + icon in the top right-hand corner of the hub adjacent to the search box.

search sites

Create new site.

create site

Create Temporary Website URL

In this section, you will need to create your temporary website URL / address which will be used to develop your website. This can be anything you wish and will have no bearing on your completed website. However, in saying this it’s not advisable to use the same as your actual web address here. This must be a unique address.

create site

Domain Already In Use

The domain you create must be unique in order for it to be accepted by the system. This example will not work.

create site

Domain Accepted

This domain has been accepted by the system, all you need to do is confirm by selecting the Blue Arrow.

create site

Create WordPress Administration Account

By filling out your email address, Username and Password. This email can be the same as your account email or a unique email address for this install. Once your credentials have been filled in, the arrow at the bottom of the page will turn Blue Indicating you can enter them.

You will be prompted to save your password, ensure you do as you will need them once your website has been created in a few steps.

create site

Select Website Location

Next you will be prompted to select where you would like to host your website geographically. Give some thought to where the majority of your customers are and select accordingly. This can be changed later for a small fee, however best to get it right the first time.

create site

Change Regions

Note: Should you later decide to move the location of your hosting server. This is possible via the Hosting Tab within your account. For a small fee the good people at WPMUDEV will move locations on your behalf.

create site

Payment

On the next screen, you will be taken to the payment section. If not done so already, you will be prompted to input your credit card information.

create site

Upon Continue

Once you select ‘Continue‘ your website will begin the installation process, this can take up to 10 minutes to complete, take a short break. during this process, WordPress is installed along with a default set of PlugIns (functionality) to support your new website.

create site
Once installed you will receive an email with a direct link to login to the WordPress administration area to begin the next phase of your website development.
^

Step 3: Administer WordPress Account

Once the installation has been completed, your new website will be installed and ready for customization.

Select the WordPress icon in your newly created website to log into the administration area.

create site

Login To Account

Remember your login from your Create WordPress Administration Account as created previously this is now used to login to the administration area of your WordPress website.

 

If you have forgotten your password, you have a get out of jail function at the bottom of the screen ‘Lost your Password?’. This will send an email link to the administration email to reset your password.

create site

Functionality

You will see functionality has been built in as an inclusion within your hosting subscription. These are called plugins, consider these much like apps you would get on your phone to add functionality. Head over to the Plugins menu on the left to reveal the pre-installed plugins.

The plugins included are as follows:

  • Defender Pro for website security
  • Hummingbird Pro to make your website fast
  • Smush Pro to reduce your image sizes
  • WPMU DEV Dashboard  WPMUDEV Administration built into WordPress
wpmudev default plugins

Tip: If you’re feeling adventurous, feel free to add more functionality using these two plugins. 

^

Step 4: Install DIVI Theme

Next you will need to install the DIVI theme. Although not necessary to launch a website, we highly recommend using the DIVI theme on our own website projects. For this, head across to Elegant Themes and check out the DIVI theme.

You will need to create an account in order to download the theme. Therefore, select Account from the top menu and follow the prompts.

You only need to download the DIVI theme and not the DIVI Builder this is only required in the event you’re not using the DIVI Theme.

TIP: Elegant Themes have created a wealth of tutorials to help you along your journey, take the time to review these to improve your knowledge.

They offer an annual plan however if you are serious, then just go ahead with the lifetime subscription one-off payment to avoid the recurring yearly payments.

Download the theme and if you’re using a mac it’s likely the zip file will be sent to the trash, you can either drag it out of the trash and place it in another folder as you’ll need the zip file to make the install.

Divi WordPress Theme
Note: As I’m using a mac, upon download, downloads appear in the downloads folder as a zip file. This is then unzipped and the zip file is sent to the bin leaving the unzipped version in the downloads folder.

Go back to your WordPress dashboard, select Appearance / Themes / Upload Theme. Click and drag the zipped file from the bin onto the Choose File icon within your dashboard, click ‘Install Now‘.

Once installed click Activate, upon activation the DIVI option will appear in the menu to the left.

Once installed, Active this theme for the DIVI menu option to appear on the left.

Select Divi, Theme Options.

create site

Go Back to the Elegant Themes Website, Select Account, Username & API Key.

create site
Hover over your new API and click to copy this code. While we are making a website without the need to know code, you will need to copy this one to validate your DIVI theme within your WordPress Admin area.

Go Back to your WordPress Admin Area remembering your Elegant Themes Username.

create site
Once you’ve copied your code, head across to DIVI , Theme Options , Updates and Paste your API code and Username accordingly and save changes.
create site
Head over to Builder / Advanced tabs and select options as shown below.
create site
^

Step 5: Create Your 1st Page

Important: At some point prior to creating your first page, consideration must be given to select a suitable design for your Business website. Take a look through the designs on offer as part of your subscription within the Layouts Library Here: www.elegantthemes.com/layouts/

 

Go to Pages / Add New.

create site
Name your new page, ‘Home‘.
Go to the right side of the screen to Divi Page Settings and select ‘Fullwidth‘ or ‘No Sidebar
Select Use The DIVI Builder

Select Choose a Premade Layout.

Note: By now we hope you have given consideration to the layout you would like to use for this page. As part of the layout import process, all images and assets required for the page will be imported into your media library as stock images. While you can use these images on your website, its strongly advised to replace these with your own images and simply use the layout design as a basis of what your page will look like. Try to avoid importing multiple designs onto your website as your media library will become cluttered with unwanted stock images.

Still need time deciding, go to this page: www.elegantthemes.com/layouts

For the purpose of this tutorial we are using the coffee shop layout / landing page, once selected select “Use This Layout”.
This may take a minute or two to download the assets onto your website, take a quick break leaving the page open. Once Downloaded, Publish Your Page to save the changes.

Go to Settings / Reading

Withing the Your Homepage Displays area, choose A static page and select the page you just created in the dropdown menu and save changes. In this case, home.

 

Within the Your Homepage Displays area, choose A static page and select the page you just created in the dropdown menu and save changes. In this case, home.

 

^

Step 6: Showcasing Your Website

Now that you have completed these steps you are now ready to showcase your newly created website using the design imported from Elegant themes DIVI layouts.

Tip: Right Click then select open in new window to keep the current page active.

 

Select Visit Site from the dropdown menu at the top of the page.

 

coffee house website

Well if you’ve made it this far, Congratulations, you’ve just completed the initial installation of your new website. While there is a lot of work to do from here. What you have is a foundation from which to develop your own Business’ Website based on professionally designed template layouts. To thee this example check out our post using the Coffee House Layout.

Remember we’re here to help, if you’d like some assistance setting up your new website, Get in touch via our Contact Form Below.

australian based services

We don't use call centres, therefore contact us direct as we'll work with you personally to help build a stronger internet presence for your Business. Below is a list of just some of the services we can offer your Business. If you'd like to speak to a real person get in touch via the contact page, We're based in the Sutherland Shire, Sydney.

Contact Form

Use this form to tell us about your project and We'll will be in touch. Don't worry nothing is shared to third parties.

If you'd prefer to speak to a human, give us a call on 0407 251 296

Share This