Lets Build Websites

Lets start to build websites to a very high standard of build, backup, hosting and security. We assume zero technical knowledge or prior experience, showing you how anyone can build websites to match and even go beyond many that are being offered today.

Websites Built To Last

We are going to build websites that are “future proof”. Websites that we can add to, change and even re-design over future years. In two words: total flexibility. Also, with continually changing technologies, we are going to ensure we have the very best ongoing support to keep us up to date with future changes.

Our Content Management System

For the ultimate in power and flexibility we need a content management system (CMS) to create our websites. WordPress is the most widely used, powering over 33% of websites on the internet, including a high number of the world’s top 10 million websites.

For information on CMS click here

Being easy to manage, WordPress is popular for all types of websites including blogs, personal, business, eCommerce, business directories, question and answer websites, portfolios, photography, online communities, auctions, job boards and many more.

WordPress is very SEO (Search Engine Optimization) friendly with WordPress sites tending to rank higher in search engines (Google, Bing etc.)

WordPress is continually developing and there are currently 1000s of website templates (themes) to choose from and a lot of the themes can be customized without the need to write any code (which would take ages to learn). In addition, there are over 55,000 FREE plugins which can be added to website themes to provide additional functionality.

Our Theme

There are 1000s of themes (templates) to choose from, some are not very good, others are excellent with their creators regularly monitoring and updating them. The theme we are going to choose is OceanWP which is free, very fast in use and has a huge range of options available to us.

Our Page Builder Plugin

Over two million professionals build better websites using the free page builder plugin Elementor. Elementor was the first front end page builder to offer endless possibilities. The user interface is extremely friendly enabling you to master it in just a few minutes.

With elementor each page is built in sections, each of which can be resized to any width and height. Each section can contain one or more columns, each of which can be resized individually.

To maximize the appeal of our page designs we have control over pixels, can select icons and widgets, adjust border and background settings, change fonts and colors. We will cover these aspects as we get to build our first website.

Elementor is an extremely developer-friendly live front end editor, meaning you design your website live on screen without having to switch between editor and preview modes. You will reach a quality design without the need to use code and without having to rely on developers for help.

Our Support Team

We have decided upon WordPress for our free content management system, OceanWP as our free website theme and Elementor as our free page builder plugin. We now need to be supplied with a working platform, hosting servers (computers), security and backups for our websites, comprehensive tuition and ongoing advice to cover future technological developments. We must also be aware of the requirements for Privacy Policies, the use of cookies and possibly an Affiliate Disclaimer statement.

Fortunately we have a support and mentorship system already in place where expert help is available at every turn.

Supporting Features and Benefits

We are provided with the most advanced and easy to use website builder leading to greater efficiency, security and speed with your websites. As your business grows your website working platform is going to grow to allow for the additional traffic to your websites and for you to add more websites. With the facilities we have you could eventually be running several multi-million pound websites from ONE platform.

The hosting we have is world-class. We have access to fully monitored lightening fast hosting with 100s of layers of technology on top of a typical platform. The result is advanced website security, spam protection, speed and robustness. Our server specialists are on hand 24/7, 365 days of the year. The comparable value of this package alone is often in the region of £200 per month.

Training

We have access to 1000s of training modules covering almost everything you may need to know for running an online business. There are MANY ways of starting a business and monetising it online. We can access training on eCommerce, drop shipping, local marketing, SEO, pay-per-click, email marketing, lead generation and much more.

When you commence training, you will be part of a community of two million members worldwide. You can get coaching and mentoring from anyone within the community, many of whom are highly successful entrepreneurs.

How Much Will The Support Cost?

There are many advantages we have not included in this brief summary and we would suggest you take advantage of the initial FREE entry. Our article Simple Website Tutorials includes more information with a blue joining button near the end of the article.

Being a free member you will be able to construct one website on a sub-domain. To access the full support package and be in the position to construct truly awesome websites, there is an annual fee of $495 (about £400 at $1.30 : £1).

For £400 a year you will have added flexibility for your business. Alternatively, if you do not yet run a business you may find the ideas provided could lead you to a very prosperous future.

Our Build Starts Here

Whether you are going to construct your own website or have someone to build a website for you, you are going to have to plan the content you want to display.

Getting your design exactly right first time needs a lot of thought and planning. One advantage of building your own website is you can launch your website with all the initial important content and then add and improve the site as ideas develop. Viewing competing etc. websites can give you ideas on how you would like to layout your own site.

You will also want to consider the images and photos you might include. The training will advise you of several sites where you can access free images. If you are using photos it is important to refer to the training as photos need to be converted to the correct file type, reducing the file space they would otherwise occupy.

Following this tutorial I have added a link to the YouTube tutorial that introduced me to Elementor. These tutorial videos show the creation of a full stunning website being created in less than 1 hour 40 minutes. That build is without the use of Templates and teaches building from the ground up, the knowledge you need to be able to fully design your website to your needs (not design your website to a template). The FREE version of Elementor is used in these videos.

If you have difficulty with any part of my tutorial below, then I suggest looking at the video tutorial which is easy to follow.

As an initial free member of WA you will have learned how to build a website on the platform provided. Being a paid “Pro” member you will be able to duplicate the actions we describe here and construct a similar website. We suggest you build your “learner site” on a site rubix sub-domain (as available to you when a free member).

First Stages

At your WA opening page click on “Websites” and then “site Builder”. You will have the option to build your site “On a free domain” or “On a domain I own”. For a learning exercise click “On a free domain”. You are now asked to choose a domain and if available your site will become (your chosen name).siterubix.com.

Enter a Title for your website (this can be changed later if desired).

You are then asked to “Choose a design for your website”, in the search box type “Oceanwp” (the name of the free theme we shall use). Click “Choose this theme” and then “Click Here to Build This Site!”

The WA platform will automatically build your website and take you to the log in screen. Take a note of your login which will be “admin” and make a record of the password given to you. You now log in to your website at “Login Now”.

NOTE: The following instructions have some changes with the latest updates.

Select The Ocean Extra Plugin

There will be a note at the top of your screen recommending the use of some plugins, hover over “Ocean Extra” and click to install (ignore the other suggested plugins).

From your dashboard go to “Plugins”, “Installed Plugins” and here you need to tick the box next to “Ocean Extra” and tick “Activate”. Ignore the “Ocean Sticky Header” option – you do not need to purchase this.

At the dashboard there will be a note to “Run the Setup Wizard”, click “skip setup” as the WA platform has already set up your website for you.

In just a few minutes your website has been created.

Adding Pages To Your Website

We are going to delete the “Sample Page”. From the dashboard click “Pages”, then click the box against “Sample Page” and click “Trash”. Next click “Trash(1)” which will show the sample page again, this time we click “Delete Permanently”.

To add pages we click “Pages”, then “Add New” and enter the name of the page we wish to create. In our example we add a page by typing in “Our Mission” and then click the blue “Publish” button. We now repeat this sequence for our remaining pages, adding “Services”, “About”, “Home” and “Contact”.

Including A Menu (Navigation)

To customize the default settings in our website, we click on “Appearance” and then “Customize”. On the left of your screen you will have a menu of all the items that can be customized – we will refer to this as the “Main Customizing Menu”. Firstly we are going to disable the top bar on our website, from our main customizing menu we select “Top Bar”, click “General” and uncheck the box next to “Enable Top Bar”. Click on the “Publish” button.

Go back two screens by clicking the < (just below and left of the publish button). This will return us to the main customizing menu. We now click “Menus” and “Create New Menu” then tick in the box against “Main” and type in the “Menu Name” box “Main Menu”, click “Next”, click “+ Add Items” and a list of our pages will appear on the screen. Place the pages in order top to bottom: Home, Our Mission, Services, About, Contact, then click “Publish” (you order the pages using the up and down arrows).

Customize The Header

Using < as before, go back to the main customizing menu and click “Header”. You will be presented with a “Customizing Header Menu”, click “General”, this will show Style – Minimal and Height 74, which is OK.

Uncheck the box against “Header Border Bottom”.

Against “Background Color” select “Color” and change the box to the color hex code “#00a3ef”, Then click “Publish”.

Using < go back one screen to the Customizing Header Menu and click “Menu”.

Go down to “Link Color” and click on “Select Color”. This time you enter “#f9f9f9”.

Now go to “Link Color: Hover”, click “Select Color” and enter “#27edf4”.

Next down the list is “Link Color: Current Menu Item” change the hex code to “#27edf4”.

Further down the customizing header menu list is “Search Icon Style and this shows “Drop Down”, change this to the option “Disabled”. Click “Publish”.

Using < return to the customizing header menu and go to “Logo”, change the color to “#f9f9f9” and Hover color to “#27edf4”.

Site Identity and Tagline

Back to our Main Costomizing Menu and click “Site Identity”. We want to enter the name of our site in “Site Title” (this can be changed later) and in “Tagline” we enter a few words describing what our business does. Click “Publish”.

In just a few minutes we have totally customized the header which will appear on all pages – we have added navigation/menu, selected our colors, prepared our logo area and included the site identity and tagline which will be utilized by the search engines (Google, Bing etc.)

Set Up Our WordPress Home Page

To set the page we have called “Home” as our front page we go to the main customizing menu and select “Homepage Settings” and change from “Your latest posts” to “A static page”. From “Homepage” we select “Home”, under “Posts page” click “+ Add New Page” and name the page “Posts”. Click “Publish”.

Go back to the WordPress Dashboard and select Pages and tick the box next to “Home – Front Page” and click “Edit”.

Close to the bottom of the page is “OceanWP Settings”, change “Content Layout” from “Default” to “100% Full Width”. Further down click on “Title” and change from “Default” to “Disable”. Now click the blue “Update” button.

If we click view page at the top of our dashboard, our blue header including the menu will appear on our otherwise blank page.

Preparing For Content

Go to the WordPress Dashboard (by highlighting your website name next to the WordPress “W” at the top left of the screen). Go to “Plugins” and click on “Add New”. In “Search Plugins” type “Elementor”. You require the plugin “Elementor Page Builder”, click “Install Now” and then click “Activate”.

Next go to Pages on the dashboard and click “All Pages”. Tick the box next to “Home – Front Page” and click “Edit”. Our Home page now shows a box “Edit with Elementor”, click this box and the Elementor widget menu will appear.

Working With Elementor

We are going to choose our page content fonts. There are over 600 Google fonts to choose from. Click on the three parallel lines to the left of the word Elementor in the Elementor widget menu. Click on “Default Fonts”. There are four sections, Primary Headline, Secondary Headline, Body Text and Accent Text. We are going to change them all to the font Lato and keep the default weights.

Click “Primary Headline” and change “Family” from the default to “Lato”, (fonts are listed alphabetically). Repeat for “Secondary Headline”, “Body Text” and “Accent Text”, then click the “Apply” button.

We click on the three parallel line again and click the blue button “EXIT TO DASHBOARD”. Click “View Page” and then “Customize”. Click on “Typography” and we are going to change some global fonts. Click “General” and “Latin” should be ticked. Go back and click “Body” and change the font family to “Lato”, go back and click “All Headings” and again change the font family to “Lato”. Go back and choose “Logo” and change the font family to “Lato”, then go back and choose “Main Menu”, this time we leave the font family as “Default” but increase the “Font Size” to 14px. Click on the “Publish” button.

We have now preset all of our fonts.

Create Our Home Page Content

From the WordPress dashboard you select “Pages” then “All Pages”. Click the box next to “Home – Front Page” and there will now be an option “Edit with Elementor”, click this option and you will have your page on screen showing two icons above the wording “Drag widget here”. The options are “Add New Section” and “Add Template”. Click “Add New Section” and twelve structures will appear. Click on the first one which is a single column. An area will be added immediately below the blue heading.

To the right of the word “Elementor” there is a square of 9 dots, we will call this the elementor box. Click on the elementor box and this will bring up our list of available elements

Drag And Drop

By clicking on the “Heading” icon and holding the mouse button down we can drag the Heading icon to our new area where a blue line will appear. We place the heading icon on the blue line and release the mouse button. The heading should then appear in our new area saying “Add Your Heading Text Here”. In my example I changed that to”Admin Advice”.

Under “Edit Heading” there is an option “Alignment”, the first is aligned to the left, the second center and the third is aligned to the right. Click on the second option to center the text. Immediately below “Edit Heading” there are three menu options Content, Style and Advanced. Click on “Style” and for text color enter “#69a3dd” Click on the box showing this color and you will return to the Style menu, click on “Typography” and put the “Size” to 109 pxls, “Weight” to 500 and “Letter Spacing” to 4.7.

Click for the Advanced menu and at “Margin” click on the icon of two links joined, this will change to one broken link indicating the boxes are now unlinked. When the boxes are linked an entry in one box will be included for all four boxes. Unlinked boxes can be adjusted individually. With the boxes unlinked, enter in the box “Top” 200.

Click on “Responsive” and then “Motion Effects” and choose from “Entrance Animation” the option “Fade In Down”. Click the Elements box and click the “Update” button. Click on the “Heading” icon and drag it across to position just below our large heading. This will produce a sub-heading. Enter some text, in my example I have “FREE Advice on Business Administration Tasks”. Center this text, go to Style and enter color “757575”. Click on Typography and enter “Size” at 19pxls and “weight” 500.

In my example I added a second line of text by dragging the header across again.

Adding Call To Action Buttons

We want to add two columns to the lower portion of this section to include two call to action buttons. The first button will be in solid form, the second we are going to make see-through.

Click the Elements box and drag the icon “Inner Section” across the screen dropping this beneath our sub heading(s). This provides us with two new columns. Go to Advanced menu and unlink the padding. In “Top” enter 5 and in “Bottom” enter 200.

Click the Elements box and drag in the “button” icon and place it in the left column. Change the text from “Click Here” to “Our Mission” and in “Link” type “=/our-mission”. Align to the right. Click “Style” and then “typography” and choose “Normal”. Enter the “Size” as 13 pxls.

Click “Typography” again and for “Background Color” enter “1099d5” and “Border Radius” enter 5.

Choose “Hover” box (above the color there are boxes Normal and Hover) and enter “Background Color” as “51aed6”.

Click the Elements box and drag in another “Button” icon, this time placing it in the right-hand column and change the text from “Click Here” to “Our Services”, in “Link” enter “=/services”. Left align this button. Click “Style” and then “Typography” and put the “Size” as 13 pxls.

Click “Typography” again and put the “background color” to white which is “#ffffff” and to make this button see-through we drag the right-hand slider buckle next to the color chart to the bottom.

This button is no longer visible, we are going to add a temporary background color to see the next changes we make to this button. Right click at the top left corner of the box containing our see-through button to “Edit Column”. Choose “Style” and against “Background Type” click the first icon which is “Classic”. Go to “Color” and choose any dark color so that our button shows up again.

Click on the button, choose “Style” then “Border Type” and change from “None” to “Solid”, “Width” type 2 and “Color” “ffffff”. “Border Radius” enter 5. Unlink “Text Padding” and make “Top” and “Bottom” 10, “Left” and “Right” 13.

Choose “Hover” box and make “Text Color” “00a3ef” and “Background Color” “ffffff”. “Border Color” also “ffffff”.

Right slick at the top left corner of the box containing this button and choose “Edit Column” then “Style” and “Background Color” click “Clear”. Click the “Update” button.

Home Page Image

Click on the six dots that are at the top of the main section we have added, to edit this entire section. Choose “Style” and “background Type” choose “Classic”. Click on “Image” and we are now prompted to “Select File”. Go to the file where you have your chosen image, click on the image and “Open”. The image will then be added to your “Image Library” for this website. From the Image Library click the chosen image and click “Insert Media”. Position will be “Default”, “Size” change to “Cover” and then click “Save” to save your work.

Exit and view the page. You can now check the buttons work (clicking them takes you to the relevant pages) and also when you hover over the menu pages they should slightly change color.

Three Column Area

Click “Edit With Elementor”, select “Add New Section” and click the single column option. Drag the “Heading” icon into this new area, “Center”, change the text to your heading then click “Style”, “Text Color” enter “636363”. Click on the color then click “Typography” and enter “Size” 32 pxls, “Weight” 300. Click “Advanced” and unlink “Margin” making “Top” 50 and “Bottom” 50.

Select “Add New Section” and click on the 3 column option. Click the Elements box and drag in the “Choose Your Image” icon to each of the three boxes. Click the Elements box and drag in the “Text Editor” icon and place below the image in your first column. Click “Style” and under “Alignment” click the center text option. Click “Advanced” and unlink the “Padding”, enter “Right” 20 and “Left” 20. Repeat for your second and third columns.

You can add your images and change the default text as you go along or you can come back to change these three columns later.

Last Section of First Page

Click “Add New Section” and select the single column. Click “Style”, “Background Type” to “Classic”, “Color” (for your background color you can move the buckle in the first slider next to the color box upward. Then, together with moving the white circle on the colors box you can find virtually any shade and color you like).

Click the Elements box and drag in the “Inner Section” icon which will provide you with two columns. Click the Elements box and drag in the “Text Editor” icon to each of the columns. Now by right clicking on these columns and choosing “Edit Text Editor” you can add your content. From “Style” you can center the text, choose the size of the text and set the color to “636363” to match the previous sections.

Click the “Update” button.

Making Our Website Mobile Friendly

NOTE: At the bottom left of your screen you have some options including “Responsive Mode” so that you can view your page as it will show on a Desktop, Tablet and Mobile. There is also a “Preview Changes” option which will load your page “live”.

When we view our page in Mobile mode the words “Admin” and “Advice” at the top of the page each appear over two lines. We can produce a better mobile experience by clicking on the area at the very top of the page content which shows six dots. This will give us some options and we click on “Duplicate”.

We are now presented with two copies of this top section, one above the other. We now click the six dots section above the original (top) image and the click “Advanced” and choose “Responsive”. A section “Visibility” has three sections – “Hide on Desktop”, “Hide on Tablet”, and “Hide on Mobile”. We check the box next to “Hide on Mobile”.

If we now hover over the duplicated (lower) image a six dots section will appear at the top of this section. Click on this six dots section and click “Advanced” and choose “Responsive”. This time in “Visibility” we check the boxes beside “Hide on Desktop” and “Hide on Tablet”.

We now right click on the area containing the words “Admin Advice” in the duplicated version and click “Edit Heading” then click “Style” and click “Typography”, change the “Size” down to 50 pxls. Click “Update” and our Home page structure is now complete.

Our Contact Page

From the WordPress Dashboard click “Pages” and then “All Pages”. Go to “Contact” page and click “Edit”.

Scroll down to “Content Layout” and change to “100% Full Width”. Click “Title” and click “Disable”.

Click “Update” and once updated click “Edit With Elementor”.

Our Contact Page has now been prepared for editing with Elementor (this short preparation has to be completed on all of our pages before Elementor editing).

Click “Add New Section” and choose the single column. Click the Elements box and drag over “Google Maps”. We enter our address in the “Location” area.

Click “Add New Section” and choose two columns. By dragging the edge of the first box we make the left-hand column wider than the right-hand column. Click the Elements box and drat the “Text Editor” into the left box. Type in bold: “Email:” and then use shift and return to take us down one row where we enter our email address. We return and type in bold: “Phone:” and use shift and return, then enter our telephone number. Return and type in bold “Address:” and use shift and return as we enter each line of our address.

Click the Elements box and drag in the “Image” icon. We can either add an image at this stage or leave the selection until later. Click the “Update” button.

In the right-hand column we shall add a Contact Form which will be linked to our current email box.

Adding A Contact Form Plugin

Go to the WordPress Dashboard and click on “Plugins”, “Add New” and type in the search box “Contact Form 7”. Select the plugin and install/activate it. Click on “Settings”, click on “Edit” and then “Mail”. Check your current email address is included in the “To” area (or add the email address where you wish to receive your messages) and then copy the “Shortcode” by right clicking on the shortcode box and choosing “copy”.

Go to “Pages”, click “All Pages” and on “Contact” click “Edit with Elementor”. Right click in the right column and click “paste” to insert the shortcode. Click the “Update” button and click “Preview Changes”, the Contact page should now be displayed with the Contact Form included in full.

List Of Elements Available To Us

The remaining pages, Our Mission, Services and About have all been constructed using the instructions given for the Menu page.

Following the above tutorial you can produce your own awesome and unique websites very quickly. We are going to introduce you to the “Templates” option but firstly we have to mention that we have only included a small portion of the elements available to you whilst using Elementor. From the “basic” list we have used Inner Section, Heading, Image, Text Editor, Button and Google Maps. There are also elements for Video, Divider, Spacer and Icon within the basic options.

Under the “General” list you have access to Image Box, Icon Box, Star Rating, Image Gallery, Image Carousel, Icon List, Counter, Progress Bar, Testimonial, Tabs, Accordion, Toggle, Social Icons, Alert, SoundCloud, Shortcode, HTML, Menu Anchor, Sidebar and Read More.

A little experimentation with the additional elements you might add is all you need to produce websites for virtually any purpose.

Templates

Our tuition has shown you how to build your entire pages using elementor. You will have noticed there is a button named “Templates” (next to the “Add A New Section” button). You can save pages you have constructed as templates for use on further websites/pages.

It is also possible to import templates constructed by others and, with the knowledge you have of building the pages, you can change these templates to suit your requirements. The website we are going to refer to, providing video tuition, has the option to download and import many free ready-prepared templates.

Video Tuition

Our first introduction to Elementor was from a series of free short videos included in the website Tyler.com and we recommend you view Tyler creating his website live on video. You can skip the first 9 videos as WA have set up all of these tasks for you.

This series of short videos shows Tyler creating an entire website, he completes six pages in less than 1 hour 40 minutes!

Conclusion

As a WA paid member you are able to create and host 10 websites with your own domain names and one website using the sub-domain option. We recommend you use this free sub-domain website to practice and experiment with Elementor. You will soon get an understanding of how the pages are built.

As I have mentioned one of the most difficult parts of having a website built is planning the content and it’s display. The great advantage of building your own website and having full control over it is that anything can be altered, deleted or added to at a later time. You might load an image after completing the page format.

With other peoples Elementor templates available to you, you may find instances where their designs provide you with ideas for your own layouts.

When we put together our “showcase” website AdminAdvice.net we initially included in the central portion of our Menu page, three columns covering Accounting, Taxation and Website Creation. We later decided to change this to content that would be more likely to capture interest.

We decided to cover business preparation, starting a business and running a business successfully. We changed the images so they would represent each of these stages – a story in pictures – and made the text relevant.

In the first column we found an image to show someone preparing their business plan and gave this the heading “Prepare”. For the business starting we chose the image of race horses just leaving the starting gate and headed this “Proceed”. For our final column we chose the image of a successful business team and headed this column “Perfect”.

On another page we added three images at the foot of the page showing firstly a business preparing flower bouquets on a table and the third image showing the business having their own greenhouses full of plants.

Most businesses will find they want to update products, add pictures of work done, change menus, add testimonials etc. as the business proceeds. Here is the opportunity to build superb websites for yourself and/or for your clients on the WordPress platform with the added benefit of hosting security and fast loading speeds that you are unlikely to find even at costs many times greater than are available to you here.

If you would like to comment on the above article or have any questions for us please include them below and we will be very pleased to reply.