A Quick Calling Card

The Belated Traveler Frederic Remington

It feels good to make something quickly. In this section we will use a cpanel tool to publish a landing page for your domain, a welcoming front door, something personalized to be about you.

This is also where we want to remind you that a domain, like a plot of land, offers the potential to build more than a single home, or just a blog. Your domain allows for multiple sites for different purposes.

A Domain Calling Card

Your domain ultimately can contain a wide range of information about you. It’s useful to have very simple page or site at the entrance to your domain, the kind of digital version of a business card. A landing page contains a brief amount of information about you, perhaps a photo, and links for contact or social media.

What do they look like? We collected a few examples from educators. Some are simple, some more complex. But these reside at the main domain of each person’s web site. These are meant to show you a variety of ways educators have set up their domain entrance.

Your cpanel includes an easy to use that will let you create your first web site, just by filling out a few items in a web form. These are simple, and at sometime you may choose to replace them with something more sophisticated. But for now, in a few minutes, you can create something with information you choose to replace the generic screen a new Reclaim Hosting domain provides you.

Let’s get in there and publish something to your domain.

Here are some previews of some of the kinds of calling card sites you can quickly publish in as little as five minutes:

Ariel template

Under Construction template

Personal template

About Me template

Using the Site Publisher

Like you did when setting up your first Wordpress blog, start at your StateU dashboard.

Look for (and click) the Site Publisher icon listed under the Domains section:

Your domain will already be selected, since it’s the only one in your account. Open the Select a Template section to see what is available. Not all of the choices here are for a calling card type page; we suggest using one of the following templates to try first:

It does not matter which one you choose, you can always try a different one at any time.

About Me Template

This template provides a place for a photo, a tagline, links for social media accounts, and two different text sections with headings that you can use to provide additional information.

In the Customize and Publish section you can add the information you want to appear in your site. Any fields left blank will be ignored and not displayed.

The values for the colors require a Hex Color code; you can use a tool built right into Google Search to find the value for the color you want to use.

Perhaps the trickiest part on this form is the Image URL field- the image it use has to exist on the web somewhere. Here are some things you can try:

  • If you have a photo on the web somewhere and can find that web address, enter it in the field.
  • If you just want to try something, use this address for the Extend Ontario logo http://extendlabs.ca/images/x-logo-150.jpg Or for fun, try Pravatar, a site tht dynamically generates a random CC0 licensed image at this URL http://i.pravatar.cc/150
  • To use an image file you have on your computer, upload it to the /images director using the instructions below for Uploading Your Own Files.
  • Leave the field blank to skip using an image or to add it later.

For now, enter as much information as you want to try on your first round, you can always return and edit / add information later.

Just for now, click Publish at the bottom of the page.

Just like that, your domain has a web site. Under the Congratulations banner you will find the link to see how it looks.

If you want to modify, and information, click the 3. Customize and Publish tab to edit the information entered earlier. Or go to 2. Select a Template to try one of the other templates below.

The Personal Template

This clean simple template has fewer text fields (a tag line and an About Me statement), an image, and social media links.

For the purposes of just trying this out, play with using this URL for a random avatar image http://i.pravatar.cc/150

Most of the fields for editing are shown below. You may notice as you try other themes that it may remember information entered earlier.

If you want to change the background image, see below for Customizing the Personal Template.

The Aerial template

This theme is even simpler, it has your just name, a tag line and social media links. When published it has a neat effect where the mountains image animates as if it were scrolling past you.

If you want to change the scrolling mountain image, see below for Customizing the Aerial Template.

The Under Construction Template

And simpler still, this template is really meant as a pure place holder- it lists only your name, a tagline, and an email address.

If you want to change the background image, see below for Customizing the Under Construction Template.

“Easy, but what about changing the background? And the icon? And…”

The Site Publisher is a crude, limited tool. All it is doing is putting some content into your web site’s directory for you. We can almost expect after your first round of experimentation, you will be wanting to customizing it. That’s good that you want to do more. In the next sections,w e provide a few simple things you can do to change these up, but chances are, in the long run, you should take another approach for building a calling card site (keep scrolling for that).

Customizing the About Me Template

This template is pretty complete for what it does, offering two sections of information, an icon image, and social media links.Actually there’s not much we could suggest for this template that do not get into a fair bit of HTML editing, a bit out of scope. Maybe adding an image to the content sections? But in the spirit of what’s worth doing, if this theme needs that much work, you should try another or look at the suggestions Beyond Site Publisher.

Customizing the Personal Template

A good change for this template might be adding a different background image than the soft gradient. To do this you need to find an image you want to use, it should be relatively large, the one with the theme is a 1440×900 px JPEG image. Yours need not be the exact size, but small ones may be distorted.

We need to go into the file on your web server. After publishing your site, try the link under What Would You Like to Do Next? for Manage my site files. This will open the cpanel File Manager (also available from your main cpanel screen).

This works like a directory browser on your computer; on the left are all the files on the web server for your domain. All of the files for your main web site are in the public_html directory.

To upload an image for the About Me or the Personal Template, click to open the images subdirectory:

The names of your files may be different than the image above, because after trying a few different templates, you will accumulate some extra files. But the one you want to change is called bg.jpg. It’s not terribly exciting, but if you are curious look at a copy of the file.

What you should do first is to rename the image you want to use to be bg.jpg (all lower case, web servers are picky about capitalization).

Then in the file manager, while viewing the images directory within public_html, click the upload link to replace the existing file with your new one (you will have to confirm overwriting an existing file).

In this example, I am going to use a favorite image of a car I used to own.

And now my About Me page is customized!

Screenshot of updated web site with a new background umage

A warning- if you go back to the Site Publisher to edit any of the content, it will replace that lovely image on saving. This is one of many limits of this tool. So you may have to repeat this step.

Isn’t that a cool page now?

Customizing The Aerial Template

Almost every person that tries will ask how to use a different image than the mountains. What’s wrong with the mountains? While the previous template you can use almost any decent sized image, the animation and design of this template requires a very specific image.

If you look at the original image, you can see it has a solid background, and more importantly, it is edited so the edge of the left side exactly matches the right side, so you will never see a seam when it animates across the screen.

The background mountain image used by the Aerial theme

This is not easy to create. But you can still create some interesting effects. To replace this image, you need one exactly sized 1500px wide and 500px high, and it’s background, should be a solid blue color #348cb2

1500 by 500 placeholder image with background color #348cb2

So first create an image that is empty with a blue background, look we have one you can use!

Blank blue image as template

Now you should add whatever image you want to use, and cut out any background so it looks like it is sitting on blue. Do not let it touch the sides or the top (otherwise it will be truncated and look ugly). Here are some examples:

Background image with vegetables on blue background

puppies on a blue background

We need to go into the file on your web server. After publishing your site, try the link under What Would You Like to Do Next? for Manage my site files. This will open the cpanel File Manager (also available from your main cpanel screen).

This works like a directory browser on your computer; on the left are all the files on the web server for your domain. All of the files for your main web site are in the public_html directory.

To upload an image for the Aerial template, we need to drill down a few directories. Click to open the assets subdirectory, then css, and finally images:

Screenshot of Cpanel File Manager showing the path to the image directory

What you should do first is to rename the image you want to use to be bg.jpg (all lower case, web servers are picky about capitalization).

Then in the file manager, while viewing the images directory within public_html, click the upload link to replace the existing file with your new one (you will have to confirm overwriting an existing file).

And with any luck you will have animated puppies (or whatever image you created).

Updated view of Aerial template published with the mountain images replaced by puppies

Customizing the Under Construction Theme

The only customization we suggest here, like above, is changing the background image.

After publishing your site, try the link under What Would You Like to Do Next? for Manage my site files. This will open the cpanel File Manager (also available from your main cpanel screen).

This works like a directory browser on your computer; on the left are all the files on the web server for your domain. All of the files for your main web site are in the public_html directory.

To upload an image for this, click to open the img subdirectory. The image you use should be at least 1000px wide x 768px high but not strictly that size (the theme will make it fit).

What you should do first is to rename the image you want to use to be background.jpeg (all lower case, web servers are picky about capitalization).

Then in the file manager, while viewing the img directory within public_html, click the upload link to replace the existing file with your new one (you will have to confirm overwriting an existing file).

You can then have something like this version:

Now that makes a difference, eh?

Going Beyond Templates

Even with these small changes, these sites are likely not as personalized as you like. Going the next step is a bit beyond what we will cover here, but the options to file away for later include:

  • Doing some custom HTML editing. The Personal and Aerial theme are based on a set of open licensed, elegant templates from HTML5 UP. You would have to download, and get in and edit at least the index.html file and test it locally on your computer. Once ready, you can upload all the files using the CPanel File Manager to the public_html directory.

    We probably lost most people with “HTML”!

  • Use a WordPress Landing Page Theme Start at your StateU dashboard. Under Applications click Wordpress to install at the main level of your site. Once wordpress is installed, under Appearance -> Themes search among the WordPress Themes directories for landing to try and find one that will work for you.

    Or you can try some of the ones created by Alan Levine that are based up the HTML Up ones. These can all be customized with no coding.

See Also

Image Credits

The Belated Traveler Frederic Remington: Public domain image from Wikimedia Commons

Charles Bontems (1890) calling card public domain image in Wikimedia Commons “A label of the defunct company Bontems.”