Page locked

This page is currently locked for editing by another user. You have to wait until this user finishes editing or the lock expires.
Currently locked by: 216.73.217.95
Lock expires at: 2026/09/19 18:39 (15 min)
This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== 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 [[https://htmlstream.com/preview/unify-v2.6/|Unify 2.6.2 Template]], design a page. You can use components of the Unify template to build a web page.

<html><div class='indentH3'></html>

==== FAQ ====

<html></div></html>

  * //How to find Unify components?//

The Unify Template has many components. Most of the components are listed in the [[https://htmlstream.com/preview/unify-v2.6/unify-main/shortcodes/index.html|shortcodes page]]. The sidebar on the left includes the collection of components. For example, the [[https://htmlstream.com/preview/unify-v2.6/unify-main/shortcodes/shortcode-blocks-hero-content.html|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

<html><div class='indentH3'></html>

==== Code Submission Through Git ====

<html></div></html>

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 [[https://htmlstream.com/preview/unify-v2.6/|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 [[https://htmlstream.com/preview/unify-v2.6/unify-main/shortcodes/index.html|shortcodes page]]. The sidebar on the left includes the collection of components. For example, the [[https://htmlstream.com/preview/unify-v2.6/unify-main/shortcodes/shortcode-blocks-hero-content.html|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 [[https://youtu.be/zdGiTa2_IfA|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 =====

  * [[https://docs.google.com/document/d/11RSn8FEOW4aDc82c8YL4VvorfaMLHl9_fSuuCHRSiBw/|Related Google Docs]] (access is required)
  * Website Design Services (coming soon)