DokuWiki

You've loaded an old revision of the document! If you save it, you will create a new version with this data.

====== 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.

==== FAQ ====

* //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 –>
  * //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 [[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)

Edit summary

Note: By editing this page you agree to license your content under the following license: CC Attribution-Noncommercial-Share Alike 4.0 International