Website appearance is known to be quite an important thing and even sometimes crucial. Its design should be appealing and smart for users to feel free on your website and willing to read articles and buy things.
The question is: how to make a desired appearance without any experience? Or if you do have an experience, how to minimize required development? JBZoo template system is a perfect solution.
How categories may look like
Even though it’s not obvious, one way or another some of the most important webpages are categories. Here are some typical examples of the categories: news, product catalogs, real estate, FAQ sections, tables etc. Each element of the list is a preview to some item, while not always obvious. This is the reason why we have paid so much attention to the settings of the category appearance. To create a whole bunch of things on your website, you don’t have to work with code or even make a layout which greatly simplifies your task and increase development speed. To provide proofs, let’s just explore these powerful settings.
Main elements of categories
Each category has a smart set of options which is almost always enough to display anything you need including:
Description includes any content of the category. It can be designed whatever using an editor (for example, you can add an additional image, write a part of the text in italics etc.).
What category settings does JBZoo have?
JBZoo enables you to define settings of the whole catalog or a specific category. You can read more about this in the special article.
Hiding unnecessary things
If you wish, you can hide unnecessary elements of a template such as a teaser, images etc.
For example, in this screenshot all elements of a category except a title are hidden.
Separation by columns
All items and categories can be divided into required number of columns. In the examples below products are divided into 2 columns, while their categories are divided into 3.
To change an image position, you don’t have to necessarily change a code, having a ready-to-use option to align an image - to the left, to the right or in the center. Automatic image resizing will be helpful as well, assisting you to adjust an image of a random size to fit your design.
You can sort out products by any random item field. You just need to specify a field and the sorting direction in the control panel, for example, to order by price, from the lowest one to the greatest or vice versa.
If you need to sort by the second parameter, JBZoo can do this as well. Take in account, If some items have an equal value for different objects, they will be sorted by the second parameter within these groups, which is handy for large websites or tables.
In the example in this screenshot we sorted real estate objects - first by the “Sale” tag, then by the number of bathrooms in the house and you can observe two groups of items, each of them sorted by the number of bathrooms.
It should be noted that all sortings are performed using database queries and are perfectly optimized. So you shouldn’t worry about the performance of your website.
Of course, you cannot fit all items on one page. For you convenience we have provided a smart pagination. If you wish, you can completely disable it and configure the sorting so that only most popular products are shown. As a result, you will have a simple list of popular selected products.
Being a frame of the page, template defines what kind of information is displayed on the website.
You don’t have to edit template files to display specific field on the page. You just need to drag this field to the desired position, just like in this screenshot to your right.
Find out more about JBZoo templates respectively.
Usually widget is an interactive part of the page which does not require reloading and can dynamically display information. Widgets are often used to increase ergonomics and convenience of the website.
To begin with, JBZoo is fully compatible with the Widgetkit component. It has a lot of beautiful and fancy widgets to fit any taste, each one with specific settings. We have also embedded some other widgets in JBZoo itself:
Technical convenience for development
If you look at the source code of our demo website, you will easily find out that its HTML has classes for almost all occasions. Their names are thoroughly thought over and generated on-the-fly, so you can easily find out what they are responsible for.
Each application has its own class wrapping all its pages. So you can effortlessly customize your catalogs without any interference. Almost all classes have jb or jbzoo prefixes in their names, which guarantees that if you install your template on a website with JBZoo, the classes of our application will not override template classes.
Let’s examine responsibility of some classes on the small snippet of HTML:
If you are against such ideas, you can override any part of the template and completely replace all HTML output. The code is well-structured, the files are put to different folders and named accordingly to their role. Each file of the template is responsible for its specific place on the website, so they are independent from each other and the whole website is flexible and convenient for a developer.