In just a few minutes, you can design an entire website and have it published to the web. Let’s run through the quick basics!
In the first tutorial, we went over how to create your first website. A brief overview of what we covered:
- Starting a new project
- Choosing a template for your site
- Choosing the domain name of the site
- An introduction to customization & design tools
I hope the feature overview wasn’t too overwhelming. As I have said in the previous post, you don’t really need a page of documentation to learn each of these features. They’re much more visual and common-sense than you might expect.
2.1 Creating a Site from a Template
For this demo, we are going to use the Baize template.
You can actually preview the template from its UWeb address – baize.uweb.io – from where it was initially created. Most of our templates were built from scratch using the builder! Even more powerful, you can fully embed your UWeb site in a single line of code:
2.2 Meet the UWeb Builder
Upon creating your new website, you will be greeted by the UWeb Builder.
The left side of the builder (or the side bar) contains everything you need to properly personalize your website. From customizing your text with Google Fonts, to a library of drag-and-droppable HTML5 objects – it’s all done from within the side bar.
The right side of the builder contains the live page. You can edit and move objects directly on the page. Thanks to the Grid, designing websites really has become as easy as drag-n-drop.
The Grid Explained
- Each website is made up of pages
- Each page is made up of sections
- Each section is made up of rows & columns
The sections are then populated with custom HTML objects (headers, text, media, buttons, forms) which you can simply drag and drop from the Elements menu. The rows and columns that then makeup the Grid are then used to design a universally-responsive layout – optimized properly and in RetinaHD quality. The columns can be broken up into:
- 1 column (full width page)
- 2 columns (50/50 split page)
- … all the way up to 8 columns
Now, back to our templated website – we can begin to see how the layout of the header came to be.
Our demo template, Baize, has a header split into two parts:
In fact, the header itself is a row that contains two columns:
- Column with the text & button objects
- Column with the image object
And that’s literally all there is to it. The Grid is made up of rows and columns, separated by sections, to allow for universal responsiveness. Still confused? Not to worry! UWeb handles all of this for you in real time!
Click on the Devices button in the bottom side bar and select the iPhone (mobile) view mode. You can see exactly how effective the Grid is with optimizing the layout.
2.3 Customizing Your Site’s Look ›
Extra Notes
Although it may look confusing at first, let’s step back and simplify what’s going on – because it really is a lot easier than I’m making it out to be.
For reference, the homepage of your website is made up of multiple sections (made up of rows and columns). For example, the typical website may have the following sections: Header, About Us, Portfolio, Our Team & Contact Us. Each of those sections and rows are filled with HTML objects: text, images, buttons, forms, etc.
By coding the website into blocks, the blocks can then be rearranged and displayed on any kind of device – no matter the screen size.
So what about the Global Scripts? These are complex scripts that allow for fancy animations and webFX … but not to worry. We have pre-compiled each library so that a simple reference will enable a remote framework’s powerful functionality.
For example, when setting the background style to Parallax – you can avoid having to code all of the advanced programming yourself. A reference to UWeb’s Parallax framework will automatically enable parallax functionality of any object, on any UWeb.io site.