Positioning Squares
The content of your SquareHook website is based on a grid system that consists of squares. Whether you are placing images, text, forms, or other items on your page, you can always position those squares to appear where you want them to in your websites contents.
This is an introduction to how the squares work on our tool.
Understanding Squares
The SquareHook tool is built on a popular web platform called Twitter Bootstrap. This platform is based on a grid-system that breaks down depending on the resolution of the device a website is being viewed on. So as the site's resolution changes, the squares automatically reposition themselves to look great on that screen. But the only thing you really need to worry about is what order you want the content to appear on your site.
Getting Started with Squares
To begin your site, it is helpful to play around with our tool to get a feel for how things work. The squares are easy to move. All you have to do is drag and drop the squares into the position you want, click on the "publish" button and your content will be live on your site.
Once you have added several squares to your site, the next thing you're going to want to do is rearrange them.
Let's start with an example.
Let's say you wanted to move the text that is below this image to be above it.
Drop-Zones
To move a square (in this case, a text box), we are going to drag the item by clicking your mouse and moving it to the designated area. Drop areas will be indicated by blue boxes. Or you can select a the arrow buttons to move the box up, down, left or right-as designated by the arrow surround the square.
You have the option to use the column and row adjustments to move squares around.
Moving an Image or Text Square
When the square is in a "drop-zone," which is indicated by the blue line in the picture (highlighted by the green arrow), you can then release the mouse and your square will be repositioned into that place.
Note: Drop-Zones can be on the top, bottom, left-hand or right-hand side of any square.
Look, the text is directly above the image. Now, we are going to move the image of Josh and Dan to the right of Marshall's picture
Our tool will automatically re-size the images we moved to evenly fit into the grid structure that the tool is based upon. Pretty awesome, huh?
About the Grid System
Our tool is based on the popular web format Twitter Bootstrap and will automatically re-size according to the size of your browser.
The grid system is a 12-column fluid grid, as shown in the diagram below.
Now, Let's show you how to re-size an image to take up more columns and add more emphasis (or take up a larger percentage) on the page. If you move your mouse in between content, a very thin line will appear. If you hold down on your mouse and drag it right or left, the SQUARES will adjust sizes so one square of content owns more column space while the other square begins to take up fewer columns. We'll now drag the line further to the right.
This is the result of the change. Marshall's picture now occupies a larger percentage of the grid, and therefore, becomes larger and has more emphasis than the picture of his friends.
And you can do this with any type of SQUARE you chose in the SquareHook tool. The more you familiarize yourself with the tool, the easier it becomes to make your website look exactly how you want it to.
Managing Your Images
Check out this video that briefly shows you how to edit, move, and add images to your page