eXo Web Pack

Do you have any idea about how to build a company website that makes impression on potential clients? The eXo Web Pack add-on is aimed at this purpose by providing you with handy site templates, which are easy to navigate and clearly convey your business’s products and services. By having this add-on installed, you will have the following two sample website templates with reusable components to build modern and mobile friendly websites:

• The Agital template for corporate groups or companies:

  

• The Globex template for product landing:

  

• WAI template for a website accessible by any user:

  

In this chapter:

• Installation andUninstallation

  Instructions in how to install eXo Web Pack addon.

• Reusable Components

  This chapter introduces the components that could be reused to build your new site. It assumes that you are already familiar with the administration of portal sites and pages.

• How to use?

  How to use eXo Web Pack addon.

• Agital

  Introduction to Agital Site.

• Globex

  Introduction to Globex Site.

• WAI

  Introduction to WAI.

Installation and Uninstallation

Installation

Install the eXo Web Pack add-on with the command: addon install exo-web-pack.

After installation, there are two new site templates that appear in the Portal Templates tab when you create a new site.

Select one of the two templates and set the Portal Name in the Portal Settings tab as “WCM”. After creating the site, check it at http://mycompany.com:port/portal/WCM.

Uninstallation

Simply use the command: addon uninstall exo-web-pack. : .. note:: The uninstallation does not remove the initialized data. If you want

to remove the WCM site, follow Deleting a site, Platform User guide.

Reusable Components

eXo Web Pack addon comes with different resources to help you build stunning website with eXo Platform. It contains, new page containers and applications for the page composer as well as rich content types that are implemented under several fully working site templates : Agital Globex and WAI.

Containers and Applications

Adding a page under one of the three sites: Agital, Globex or WAI is similar as adding it under any other PRODUCT site. Please check this link Adding a new page.

As shown in the previous screenshot, there are various container types: Rows layout, Columns layout, Autofit Columns layout, Tabs layout, Mixed layout and Responsive layout the one which is coming with eXo Web Pack addon.

The table below represents the layout styles proposed by the responsive layout:

Desktop view	Tablet view	Smartphone view
Single Column Layout: Inserts a column layout in the page.

Desktop view	Tablet view	Smartphone view
RowResponsive Layout: It inserts a row in the page.

Desktop view	Tablet view	Smartphone view
Two columns Layout: It inserts two columns in the page.

Desktop view	Tablet view	Smartphone view
Three columns Layout: It inserts three columns in the page.

Desktop view	Tablet view	Smartphone view
Four columns Layout: It inserts four columns in the page.

Desktop view	Tablet view	Smartphone view
Big-Small columns Layout: It inserts a big column followed by a small one.

Desktop view	Tablet view	Smartphone view
Small-Big columns Layout: It inserts a small column followed by a big one.

You can find other details about containers here Arranging Page Layout.

Tip

You can nest containers i.e add containers into another one.

After selecting the desired layout through containers, you can drag and drop applications and/or gadgets into the different chosen containers. For the sites templates Agital, Globex and WAI, all the applications and gadgets are available and they are categorized under Administration, Adoption…

With eXo Web Pack add on, in addition to the available applications, it comes with some components that could be used:

• Blog articles: It is a content list viewer portlet that helps to display different contents/articles.

• Embedded Video: It helps to embed a video to be displayed in a page. It supports different videos extensions mp4, mov…

• Image Slider: It displays an image slideshow.

Content types

When creating a new site through one of eXo Web Pack templates, a folder is associated to the site under :ref`Sites explorer <PLFRefGuide.Application.Portlets.Content.SitesExplorer>`. You can add contents, upload files under this folder.

eXo Web Pack addon comes with many new content types such as:

• Accessible media: It adds a content with a media to display. The attached media should be following WCAG accessibility guidelines.

  

• Contact us form/Contact us 2 horizontal: Two variants of a contact form that includes name, email …

  

• Subscribe: It has a field for email insertion. Same as the contact us form it is named with the date and hour of creation.

  

Check other available content types by installing eXo Web Pack.

In the following sections, we will detail how the below content types are implemented within sample websites (Agital, Globex and WAI) which could serve as a basis for building rich websites.

How to use?

A site that you intend to publish is a combination of pages, portlets and content. In WCM site templates, these components have been initialized to generate a useful design for you, so you just need to replace with your new content and decide which parts to be provided for users. This section will walk you through how to do this.

Setting permissions

You can restrict which users/groups that have the right to access or modify components of the WCM site by setting these permissions for the entire site, its pages, or even its portlets or specific contents.

Site permissions

1. Go to Administration –> Portal –> Sites.

2. Select the WCM site that you have created after installation:

   

3. Follow these instructions to set suitable permissions.

For instance, if you want to publish your site to not only platform users but also guests that do not have an account, you may set the Access permission as:

Page and portlet permissions

1. Go to Administration –> Portal –> Pages and look for the WCM pages.

2. Select the WCM page that you would like to change permissions, for example:

   

3. Follow these instructions to set suitable permissions.

For instance, if you want the Contact page to be available for those who have a real account, you may set the Access permission as:

4. Open Page Editor and select the portlets you want to set the Access permission. For example, the Address portlet on the Contact page:

   

5. Tick Everyone if you want to make this portlet public to everybody. If not, just specify certain groups by using the Add Permission button.

   

Content permissions

All contents displayed on the WCM site are stored under the WCM folder in Sites Explorer so that you can set permissions on each of them.

1. Go to Administration –> Content –> Sites Explorer and look for the WCM folder.

   

2. Select any content under the WCM folder that you would like to change permissions.

3. Click Permissions on the Action bar.

4. Refer to this guide to set suitable permissions for your documents.

Editing content

Each content displayed on the WCM site is able to be modified. There are two ways to do this.

On-site

1. Select Edit from the top navigation bar and tick the Content checkbox to edit your site content on-site.

   

2. Hover your cursor over any content that you want to edit. For instance:

   • Navigation bar:

     

   • Logo:

     

   • Articles:

     

Via Sites Explorer

To modify a content by this way, you need to find exactly where its sources are located.

1. Go to Administration –> Content –> Sites Explorer.

2. Look for the content that you want to edit under the WCM folder. For example:

   • Navigation bar:

     

   • Logo:

     

Note

The updated content needs to be published again, see this guide for more details.

Creating and publishing content

Creating content

To create a new content, simply put its sources into the right folder under the WCM folder. For instance, to create a new article:

1. Go to Administration –> Content –> Sites Explorer.

2. Select the homeArticles folder.

   

3. Click the New Content button on the Action bar.

4. Create the main content for this article. For instance:

   

5. Click Save or Save & Close to save this article.

Publishing content

The newly created content will not be published by default. To do this, follow the steps below:

1. Go to Administration –> Content –> Sites Explorer.

2. Select the content that you want to publish.

3. Click More –> Publications –> Published or More –> Publish. The content will be available on your WCM site immediately.

   

Agital

This template is designed with five main pages, including the Home, About, Services, Blog and Contact pages. In this section, you are going to learn how to leverage this design to best introduce your company.

Company logo

The logo is a web content named AgitalLogo which is located in the WCM/web contents/site artifacts folder in Sites Explorer.

Navigation bar

You can define a multi-level navigation bar as follows:

This navigation is a web content named AgitalNavigation which is located in the WCM/web contents/site artifacts folder in Sites Explorer.

Home page

This page is a combination of ten portlets that are Banner, Solutions, Projects, Results, Hello there, News, Welcome, Articles, Why us and Services. They are arranged like this:

The Banner portlet

This is an image sliding banner which displays images from the homeBanner folder under the WCM folder. These images will be shown as follows:

Besides, you have an option to include a title and a subtitle for each image.

The Solutions, Projects and Results portlets

These three portlets bring you a chance to present essential information, such as projects, potential solutions and achievements. These contents are located in the WCM/web contents/site artifacts folder with the names homeProjects, homeSolutions and homeResults respectively.

The Hello there, Welcome and Why us portlets

These portlets allow you to briefly introduce your company. Therefore, you should try to leverage them to convince customers at a glance. For instance:

• The Hello there portlet:

  

• The Welcome portlet:

  

• The Why us portlet:

  

Their resources are located in the WCM/web contents/site artifacts folder with the names Home, homeWelcomeFolder and homeWhyUs respectively.

The News and Articles portlets

These portlets show daily updated information which could be under a news or an article. The information is displayed as a list by the created time.

• The News portlet:

  

• The Articles portlet:

  

The Services portlets

The portlet lists the services that your company is offering to customers.

About page

This page contains the Testimonials, A Few Words About Us and Our Work Team portlets. They are arranged like this:

• The Testimonials portlet shows words from other partners saying about your company, products and services. Its resources are located under the WCM/web contents/site artifacts/aboutTestimonials folder.

• The A Few Words About Us portlet shows brief words about your company. Its resources are located under the WCM/web contents/site artifacts/aboutAFewWordsFolder folder.

• The Our Work Team portlet presents the key members in your company. Its resources are located under the WCM/web contents/site artifacts/aboutOurWorkTeam folder.

Services page

This page contains only one portlet which is the Services portlet. This portlet displays the same information as this one but with an illustrative image and a short description.

Blog page

This page lists all blog posts as well as their categories and archives.

The Comment feature is integrated to allow commenting on each blog entry.

Contact page

This page provides you with three useful tools which are the Contact Us, Contact Form and Address portlets.

These portlets help you to show the company address and provide a form to collect feedback from customers.

Globex

This template is for a landing page that helps you to present your company product effectively. The template is divided into two parts:

• The first part with the Title, Introduction, Services, Feature, Video and Quote portlets.

  

• The second part with the PricingLeft, PricingRight1, PricingRight2, WhatTheySay, AskedQuestions, SubscribesLeft, SubscribesRight, ContactLeft and ContactRight portlets.

  

You will be introduced each of these portlets in more details about their usage.

Title

This is a web content that contains a background image, company name and some additional titles.

These resources are located in the WCM/web contents/site artifacts/Title folder.

Introduction

This is a web content that shows a short description about your product.

The resource is located in the WCM/web contents/site artifacts/introductions folder.

Services

This is the same as this portlet but with an additional title and subtitle.

Features

This portlet presents the most outstanding features of your product.

You can find the resources in the WCM/web contents/site artifacts/Features folder.

Video

This portlet embeds an introduction video of your product. Supported videos include youtube, vimeo and dailymotion.

You can find the resources in the WCM/web contents/site artifacts/video content.

Quote

This portlet shows well-known words of a celebrity.

You can find the resources in the WCM/web contents/site artifacts/quote content.

Pricing

This section contains three portlets that allow you to provide customers with pricing information for basic and professional versions of your product.

You can find the resources named pricingleft, pricingmid and pricingright in the WCM/web contents/site artifacts folder.

WhatTheySay

This is the same as the Testimonials portlet in this template but with a different style.

You can find the resources in the WCM/web contents/site artifacts/whattheysay folder.

Asked Questions

This portlet displays the most frequently asked questions from your customers.

You can find the resources in the WCM/web contents/site artifacts/AskedQuestions folder.

Subscription

This portlet allows people to subscribe your product by their email.

You can find the resources in the WCM/web contents/site artifacts/subscribes content.

Contacts

This portlet helps you to show the company address and provide a form to collect feedback from customers.

You can find the resources in the WCM/web contents/site artifacts/contact content.

WAI

WAI is a web template designed to be as accessible as possible to all who seek access to information on a website. eXo Platform makes the website with this template available to any user, regardless of its visual, auditory, physical, speech, cognitive, and neurological disabilities. To achieve this, the goal is to reach a level of access consistent with some standards such as WCAG 2.0 (Web Content Accessibility Guidelines) and also the RGAA for the French Administration. eXo Platform has been improved to be compliant with these rules. Therefore, by using WAI template, eXo Platform provides users with a way to create an accessible site and accessible contents regardless of their roles. This site is accessible without JavaScript enabled on the browser.

To check the compliance of this template, the following tools are used:

• W3C validator XHTML 1.0 Transitional

• Achecker with the rules of WCAG 2.0 AA

How to use WAI template

The homepage of WAI appears as below.

This accessible site provides you with some following features:

• Skip to content : Ignores navigation links, banner, or redundant information, and directly go to the main content of a page.

• Site map : Shows a list of pages of the current template.

• Accessibility : Accesses a specific page about the accessibility policy. It explains what the accessibility is, how to navigate into the site, and describes the available features of the accessible portal.

• Font size : Selects your desired font size, including Normal, Medium, and Large sizes. The default size is Normal.

• Color themes : Changes the skin color of the website into High Contrast, or return to the default skin with Normal Contrast.

• Search : Searches for accessible content in the website.

• Breadcrumb : Eases and keeps a consistent navigation. With the breadcrumb, you can easily navigate in an accessible website.

• Navigation without JavaScript: One of the successful criteria of a website is to have accessible links and menu before the content when it is displayed like a screen reader. If JavaScript is disabled, you are still able to navigate, and the menu is expanded by default in this case.