Table of Contents
Web Page Development Based on Unify Template
This document explains the development process of web pages based on Unify Template. The process describes the steps after content creation.
<html><span class='marketingParagraph'></html>This document is intended for the bSup development team. If you are interested in website solutions, please contact us through the Website Design Services page.<html></span></html>
Website Design
Based on the Unify 2.6.2 Template, design a page. You can use components of the Unify template to build a web page.
FAQ
- How to find Unify components?
The Unify Template has many components. Most of the components are listed in the shortcodes page. The sidebar on the left includes the collection of components. For example, the Hero Content shortcodes collection have components which include an image on one side and text on the other side. You can find more components unders the Features in the menu.
- How to copy the code of components/shortcodes?
Below each component/shortcode, you can find the “Show code” button which displays the source code of the component. You can copy the code and use it in your page.
Please note,
- Some components may require to include special css and js files.
- You many enclose the component code with <section> tags
- Make sure to enclose the code with comment lines such as,
- Opening comment line can be <!– [component name & id] –> for example, <!– Hero blocks #01 –>
- Closing comment can be <!– END [component name & id] –> for example, <!– END Hero blocks #01 –>
Alternatively, you can press CTRL+U on the Unify page template to view its source code. Then you can find the component code and copy it.
- Does Unify have demp pages?
You can find demo pages under
- Home menu
- Pages menu
- Demo menu
Code Submission Through Git
Please make two versions of your page and submit them to your Git repo.
- First version: Unaltered code of Unify components. Name this version as “page-name-unify.php”
- Second version: Add the content and images to your page.
UI/UX
Based on the Unify 2.6.2 Template, create a prototype for each page. I.e. screenshot the components of Unify and put it together to build a prototype. The development team will create pages using the Unify template, based on the prototype.
How to select and screenshot Unify components?
The Unify Template has many components. Most of the components are listed in the shortcodes page. The sidebar on the left includes the collection of components. For example, the Hero Content shortcodes collection have components which include an image on one side and text on the other side.
What to include in the prototype?
- Screenshots of the Unify component. We prefer to include the actual content on the screenshot.
- The name and ID of the component like Hero Content #01
How to include Unify components on the prototype?
You can simply screenshot Unify components and put them together to build a prototype.
How to put the actual content on the prototype? How to edit text on Unify Template?
You can use Google Chrome Inspect to edit text of the Unify template. We created a video explaining how to change web page text through Google Chrome Inspect. Or you can use Photoshop or other tools to change the text of the prototype.
Can we change Unify Template Style?
We do not prefer to change the Unify template radically. Changes on the style can be simple changes such as,
- Paddings and margins adjustment
- Background color
- Font size
Useful Links
- Related Google Docs (access is required)
- Website Design Services (coming soon)