This guide is intended for designers that are ready to dive deeper into the framework’s design potential and deliver outstanding designs that rank well among potential customers.
Below you can find a list of most popular topics related to the framework usage.
Design System
Defining a proper design system is crucial for any template. Design system sets universal rules and patterns that help visitors recognize the brand and feel more trust when browsing online.
Colors
Picking up the right colors and shades has its own science, but you can rely on Palette Generator to simplify this process.
For more diverse results use deep learning color generator.
Spacings
A consistent spacing system plays a significant role in UI/UX world too. Rather than relying on random values defining a spacing system is a must for any design. For example, Kenzap uses this spacing system in most of its projects: 2px, 4px, 8px, 16p, 32px, 64px.
Typography
Typography helps website visitors consume textual content. Poor typography can have a negative impact on the website resulting in increased bounce rates. Ideally, templates should not use more than 2 different font types. Use font pairing generation tool to find optimal font pair.
You can adjust font pairing under Appearance > Customizer > Style panel.
Responsiveness
All cloud framework blocks are designed in such a way so they resize automatically according to the screen size. In some extreme cases, large headings and negative spaces may not look on mobile screens as good as they look on desktop screens.
If you have already tried adjusting various block settings you may have noticed that every block has similar panels such as Typography, Background, and Container.
Consider the following scenario:
- Setup bock into Align Full mode.
- Under Container panel set Max Width to 1200px.
- Add right and left paddings to 15px.
These three simple rules set block container width to 100%, which is especially useful when background color or image should stretch from the left to the right side of the screen without any spaces.
The Max Width setting restricts container children to be used along with specific sizes.
Left and right paddings are needed when the screen size is more narrow than the defined Max Width setting to ensure elegant spacings on the mobile device.
Top and bottom paddings and Responsive paddings are other important parameters responsible for responsive layouts.
Use top and bottom paddings to add some negative space between sections. Unlike menu example as shown above, some specific layouts such as galleries or testimonials section may need top and bottom spacings.
However, let’s say if you add 200px spacing between sections it may not look aesthetically correct on all screen sizes. In order to solve this problem automatically always make sure to tick the Responsive paddings checkbox as shown in the image below.
Note that you do not need to use the same 1200px, 100px and 15px spacing system here however once you define your system make sure to stick to it when setting up future blocks.
Headers & Footers
The old fashioned way of template industry imposed themes to have a predefined header and footer. This no longer works the same way and WordPress works in headless mode when used long with Cloud Framework.
The main advantages of this approach is that:
- Each page can have a custom header and footer.
- You can add a transparency effect to menus with large banners.
- Pages do not load additional assets such as JS, CSS of default header, and footer.
- Use absolutely different headers under different pages.
Header Setup
When used along with Cloud Framework default header and footer can be defined as a separate page.
Go to the Pages section and click edit – Header page. This specific page will load all blocks into the header part of the website. Navigation menus, top bars, and spacings are the most commonly used block types for the Header.
Navigation Menu
In order to load the navigation menu to the header part of the website, you need to add the Navigation Menu block as shown in the image below.
Simply type “navigation” to find all available blocks.
By default – Header page already has the Navigation Menu block in it but this step might be useful if you would like add the menu to some specific page that features a different style.
Hiding Header or Footer
You can hide the header from a specific page. For example, if you navigate to – Home page and try to edit it. You can find there another navigation menu with an Overlay setting enabled.
The Overlay setting moves website content to the top of the page while overlaying the menu on top of the banner (this behavior can be only viewed on the website frontend).
To hide the original header, you need to add noheader class to the page. Refer to the image below for more details.
Make sure to switch to the Page tab from the right pane. Identically, you can also hide the default footer by entering nofooter class.
Beautiful Headings
Default WordPress editor does not allow custom heading styling. Use Beautiful Heading block instead. You can add a custom SVG icon and set resizing rules. The best way to see live examples is by going to Heading & Paragraphs demo page.
Nested Layouts
In some specific cases, you may need to extend the default layout of a block. Nesting layout feature provides a good way to mix multiple layouts into one.
Here is how it works. Consider you are adding 3 Columns Steps block to your page and set large section paddings as shown in the image below.
Similarly to other blocks this block does not come with built-in header. In order to bypass this limitation we can embed another Beautiful Heading bock with the help of nested function.
Just go to Container > Nested block > Select Top Option then focus back to the main block and you will see a plus sign icon. Hit on it to add spacings, separators, paragraphs or headings.
Additional Layouts
Default cloud framework installation comes with the most popular layouts only. There are additional extensions that work as standalone plugins. Use one of these plugins below to enhance the functionality of your site.
Plugins are officially released under WordPress repositories.
- Booking Calendar – appointment booking calendar that is linked with WooCommerce.
- Timetables & Calendars – customizable timetables and calendars. Perfect to display schedule of yoga classes or lessons in school.
- MyTicket Event – powerful layouts to search and sell tickets, connect interactive seat reservation modules.
Have an ideas for new layouts send us a message at design@kenzap.com.
Questions?
As we would like to make this tutorial better and more detailed your feedback is highly anticipated. Feel free to drop us a note at design@kenzap.com.