Pinterest Stumbleupon Whatsapp
Ads by Google

00_Stiqr_logo from zero.jpgIn the previous article How To Modify Your Wordpress Theme Via Browser Using Stiqr How To Modify Your Wordpress Theme Via Browser Using Stiqr Read More , we discussed how to set up your own self-hosted WordPress so the look can be edited live directly in the browser using a web service called Stiqr. And as promised, we’ll now look deeper at building web pages for free with the web editing tools from Stiqr in this article.

I think there is no better way to do that than trying to build a webpage starting from scratch – the blank page. And because we have a long road to travel, let’s get the ball rolling, shall we?

Preparing The Blank Canvas

Before we can start “painting” our webpage, we need to prepare the canvas first (if you are continuing from our previous discussion about modifying the look of your WordPress using Stiqr, you may want to jump to the next step).

Creating a blank webpage is not as simple as creating a blank text document – even though the process is not that different. There’s should be some kind of validation code within the blank page to tell the browsers that the file they are viewing is indeed a webpage.

First, create an empty text document and insert the validation code. You don’t have to write the code yourself because you can simply copy and paste ready-made HTML code from many sources available on the net, like this one.

Ads by Google

building web pages for free

Then insert the code from Stiqr between the opening and closing “body” tags. You would also want to change the title of the page to your liking. The title is the text between the “title” tag.

building web pages for free

Save the file as “index.html“.

building web pages for free

The application that you use to create the document will ask whether you want to save the file using “html” extension or stay with “txt“. Click the “use .HTML” confirmation button.

01d Choose extension.jpg

Next, upload the “index.html” file to your website using a FTP application. Unless you are starting your site from zero, don’t upload the file to the root folder. Create a new folder instead and upload the file there.

02 Uploaded Index.jpg

Then point your browser to the folder where you uploaded the file. The URL would look something like this: “http://your_site_address/the_folder_name/“. Your browser will open the blank page even if you don’t write down “/index.html” at the end of the URL.

Press “Shift + F2” and register for a Stiqr account. Even if you’ve already have an account for another website, you still have to register for every page that you want to edit. The registration process has been discussed in the previous part.

When the page has refreshed, press “Shift + F2” one more time, and log in. Make sure you have the web design idea in your head and all the needed images and texts on your hard drive. With every necessary item checked, you are ready to paint your webpage.

The Picture Paints A Thousand Words

As I’m not the kind of person who feels comfortable doing totally-free drawing, the first step I took was checking the snap grid box and choosing the size of the grids from the toolbar below.

03 Snap On.jpg

A confirmation will appear at the top right of the browser every time you change the grid set.

03b Snap On Confirmation.jpg

The next step would be setting the background of your page. Click the circular “background” icon, and the background option will open.

04 Background.jpg

You can use web images, images from your hard drive or just plain color as the background. If you use an image, you can choose to repeat the image, make it fixed, and decide on the exact position.

If you choose a color, find the color that you want, find out the six digit color code from the “#” box below, and copy and paste the number into the “Color:” box.

04b Pick Color.jpg

Click the “Stick it” button on the right to apply the background picture/color. Use this button after every change to any element of your page.

04c Stick it.jpg

Next you can continue with the “shapes” tool, even though there’s only one shape available – for now: rectangular with the option to give it a round corner.

05 Insert Box.jpg

Pick the box color, stick it, and drag and drop it to the position that you want and resize it to the size that you prefer.

You can also apply images to the page. Use your own images or choose as many as you want from Stiqr’s image collection.

06 Inserting Images.jpg

And what about text? Write down the words that you want to show on the page, choose the font type-size-color, and stick it on the page.

07 Enter Text.jpg

Right clicking on the element will give you more options, including the ability to edit, duplicate and delete.

08 Right click menu.jpg

Stiqr also provides its advanced users the ability to add HTML/CSS code. And there’s the “apps” icon that ask users to “stay tuned“.

11 Stay tuned.jpg

To do a quick edit/delete on multiple elements, use the “manage my stickers” button. Next to it is the “Save Changes” button to make sure that all of your hard work doesn’t go to the sewer.

09 Manage Stickers and Save.jpg

How Far Can You Go?

I don’t have enough time to thoroughly play with Stiqr, so the result of my doodle is not worth displaying – yet. But to give you a picture of how far you can go with Stiqr, visit their showcase page. You can also test drive the service by clicking the corresponding button.

10 Test Drive.jpg

Stiqr’s main page was built using their own engine. And I think it would be perfect to close this article by showing you the video of how they did it.

And as always, share your thoughts and opinions using the comments below.

  1. dsadcf
    February 26, 2015 at 3:10 pm

    why that website not working any more?

  2. jae
    March 31, 2010 at 8:45 pm

    amazing article, very nice!

Leave a Reply

Your email address will not be published. Required fields are marked *