In the previous article, 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.
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.
Save the file as “index.html“.
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.
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.
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.
A confirmation will appear at the top right of the browser every time you change the grid set.
The next step would be setting the background of your page. Click the circular “background” icon, and the background option will open.
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.
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.
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.
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.
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.
Right clicking on the element will give you more options, including the ability to edit, duplicate and delete.
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“.
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.
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.
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.