Template Plaza Documentation

Step 1 - Install E4J Plaza template

After unziped the .zip file, from your back-end setting panel, go to: "Extensions → Extension Manager", browse E4J Plaza installation package of your Joomla version then hit the "Upload and Install"

Step 2 - Set default template style

Go to: "Extensions → Template Manager", set E4J Plaza template style as your default template style.

On this page you can choose the color variation your prefer for your website, there are 5 colors palette.

Extensions -> Template Manager -> E4J Plaza

Choose the logo for your website.

Extensions -> Template Manager -> E4J Plaza

You can choose different fonts and size for the website’s body and headers.

In our demo website we used:

• Titles Font Size: 32px;
• Body text Font Size: 18px;
• Body Font: Droid Sans;
• Header Font: PT Serif;

With the "Hide Homepage Content" you could hide the html structure that shows the articles in your homepage, with related padding and spaces.
Please, use this parameter just in the case you don't want to show any article printed on the main website area. 

In our demo website we set it up to: NO.

With the Responsive Layout you could choose if show your website responsive and adaptable for all the devices:

This is a preview:

This parameter will let the header follows the vertical scolling navigation of the website.

With these parameters you can setup the style of your header.

• Homepage - Header Position: With this parameter you can choose to display the header over the slider or in the top of it.
  By choosing "Over Slider", your header will be displayed with a black background with transparency. By choosing "Top" instead, you'll be able to select a Header Background. On this last case, the slider will not take all the window size in width and height, but just in width, the height will be calculated automatically.
  Here some screenshot of the two choices.

  Over Slider

  

  Top (We've selected a blue header background)
  

  

• Internal Pages - Header Position: This parameter works in the same way of the Homepage - Header position. But it'll managed the internal pages.
• Menu Text Color: This parameter setup the color of the menu text for homepage and internal pages.

With these parameteres you can select the color of the text and menu icon in the responsive mode. If the Menu Text field is empty will be displayed just the responsive menu icon.

• 1 This is the Vik Icons module (you can find the download link in the Modules List chapter or in the module explanation here).
  We listed just the parameters that we've changed from the default values.
  Module-position: upmenu-left

  Module Configuration

  Icons Options

  • Icons Size: 14
  • Content Alignment: Default
  • Icon Alignment: Left

• 2 This is the Main Menu, it is a Menu module type.
  Module-position: mainmenu

  The website logo can be centered or can be aligned to the left. In our demo website we're using it in the left. If you'd like to have the logo centered, you should create two menus in the Joomla panel Menus > Manage > Add New Menu.
  One menu for the left side of the logo, and the other one for the right side. The first one needs to be published in the "mainmenu" position, and it'll be displayed in the left side of the logo, and the other one needs to be published in the "mainmenu-right" position, and it'll be positioned in the right side of the logo.

• 3 This module is a Custom html module type with the simple text Book Now in the textarea linked to our "Search Form" menu item.
  Module-position: icons-menu
  Class-Suffix: buttonlink

  Module Configuration

  • Show Title Hide

• 4 This module is the Languages Switcher of Joomla. To have a multilanguage website you can use the native language manager of Joomla, in our demo website we used the Languages switcher module.
  To add it, go to Extensions » Modules Manager. Click on New. Select a Languages switcher
  

  To know how to configure a multilingual website by using the Multilingual native system of Joomla, please read the official Joomla tutorial here. Here the module position and configuration.

  Module-position: upmenu-right
  Module Class Suffix: langtab dropalt

  Module Configuration

  • Show Title Hide
  • Use Dropdown No
  • Use Image Flags No
  • Active Language Yes
  • Languages Full Names No
  • Horizontal Display Yes

• 5 This is the Vik Content Slider module (you can find the download link in the Modules List chapter or in the module explanation here).
  We listed just the parameters that we've changed from the default values.
  Module-position: slider-fullscreen

  Module Configuration

  Slider Options

  • Title Effect: FadeInUpBig
  • Description Effect: FadeInUp

• 6 This is the Vik Booking Horizontal Search module, you can find it in the Vik Booking component package.
  We listed just the parameters that we've changed from the default values.
  Module-position: slide-down

  Module Configuration

  • Show Title: Hide
  • Dates Layout: Human Readable
  • Months and Days length: Full
  • Load jQuery: No
  • Force Menu Items: You should select a menu item connected to VikBooking, an example a Rooms List or a Search Form menu item.

• 7 This is a simple Article of Joomla.
  We've connected our Home menu item to a simple article of Joomla. We've hidden the article title, and decided to add our title inside the article content, in this way we could centered all the text.
  To add the three images we used our Vik Thumbnails module (you can find the download link in the Modules List chapter or in the module explanation here).
  
  On Joomla you could load a module inside an article by using a specific tag named loadposition, in this way "loadposition homethumb" between curly brackets.
  The homethumb is the custom position we decided to use for our module. For more information about how to use the loadposition tag, please, read our Knowledge Base article here.
  
  About the Vik Thumbnails module, we listed just the parameters that we've changed from the default values.
  Module-position: homethumb
  Class-Suffix: text-center hpthumb

  Module Configuration

  Menu Assignments: ON ALL PAGES

  • Show Title: Hide

  Options:

  • Effects: No Filter
  • Enable Mask: No
  • Spacing Interval Value: 3
  • Force Menu Items: You should select a menu item connected to VikBooking, an example a Rooms List or a Search Form menu item.

• 8 This is the Vik Booking Rooms module (you can find the download link in the Modules List chapter or from our Free Area). This module displays all the rooms added on the Vik Booking component, from the module parameters you can display the category name, the number of people allowed for each room, the characteristics, etc. 
  We listed just the parameters that we've changed from the default values.
  Module-position: module-box2
  Module Class Suffix: one-room

  Module Configuration

  Slider Options

  • Title: Our || Rooms (the two pipes split the title in two parts, the first one will be colored)
  • Show Number People: No
  • Room per row: 1
  • Load jQuery: No
  • Select a Menu Item: You should select a menu item connected to VikBooking, an example a Rooms List or a Search Form menu item.

• 9 This part is composed by two modules. The first module is the Vik Wall Image that shows an image as background, the second module is native Article - Category module of Joomla loaded over the previous one, and it shows the three blocks.
  Let's start to configure the Vik Wall Image (you can find the download link in the Modules List chapter or in the module explanation here).
  We listed just the parameters that we've changed from the default values.
  Module-position: fullbox

  Module Configuration

  Module Options

  • Show Title: Hide
  In the module content we've used the already known loadposition tag to load our Article - Category module.
  The content of the text area of our Vik Wall Image is the following:

<div>{loadposition services}</div>
<p> </p>
<p style="text-align: center;"><a class="btn" href="myurl.html">DISCOVER ALL OUR SERVICES</a></p>

• The three blocks loaded by using the loadposition, are a native module of Joomla that shows the articles of specifics categories (each block is an article), you could add it in the Extensions > Modules > New > Articles - Category.
  Each article had a title, text content and intro image published.

  Module-position: services
  Class-suffix: title-center

  We listed just the parameters that we've changed from the default values.

  Module Configuration

  Menu Assignments: ON ALL PAGES

  Module

  • Show Title: Hide

  Filtering Options

  • Category: Insert your category name

  Display Options

  • Intro Text Show

• 10 This is the Vik Words module (you can find the download link in the Modules List chapter or in the module explanation here).
  We listed just the parameters that we've changed from the default values.
  Module-position: fullbox
  Module Class Suffix: text-center one-sentence padding-fullbox

  Module Configuration

  • Show Title: Hide

  Options

  • Sentence Layout: Carousel
  • Sentence per row: 1
  • Color Title: #000000
  • Image Position: Under

• 11 The four blocks are two Menu items modules, and two Custom Html modules (the first and the last one).
  Module-position: footer
  Module Class Suffix: width25

• 12 This is the Vik Icons module (you can find the download link in the Modules List chapter or in the module explanation here).
  We listed just the parameters that we've changed from the default values.
  Module-position: subfooter

  Module Configuration

  Module

  • Show Title: Hide

  Icons Options

  • Icon Size: 18
  • Padding Size: 1

• 1 This is the already known Vik Wall Image module.
  Module-position: slider-fullscreen
  Module Class Suffix: text-center

  Module Configuration

  • Show Title: Hide

  Options

  • Title Effect: FadeInDown
  • Title Effect: FadeInUp
  • Level Opacity Mask: 0.3

  N.B. You'll see this layout in most of the pages of our demo website, they are all Vik Wall Images and they've been configured in this same way.

• 2 This a simple article content. We've disabled the Show Article Title from the menu item parameters, in this way we could manage title and content more easily.
  For the titles, we have used the classes "font-light" and "text-color". To know more information about the classes available on this template, please, check our dedicated chapter.
  Here you can see the article html code we used on our demo website:

<h3 class="font-light" style="text-align: center; margin-bottom: 0;">Hotel Plaza</h3>
<h4 class="font-light text-color" style="text-align: center;"><em>philosophy and tradition</em></h4>
<p> </p>
<p style="text-align: center;">Aenean nec efficitur neque, vitae pretium augue. Phasellus dolor massa, bibendum molestie magna id, pretium sollicitudin sapien. Aliquam fringilla, metus a scelerisque elementum, sapien erat lobortis turpis, commodo fringilla urna ligula id augue. Nullam consectetur accumsan arcu, sagittis ornare orci tincidunt semper. Curabitur ultrices, erat quis vehicula mollis, quam nisl varius augue, in convallis lectus enim eget sapien.</p>
<p style="text-align: center;">Etiam vitae quam sed tellus vestibulum bibendum ac sed risus. Quisque placerat purus ac odio porta, vitae lacinia mi tristique. Phasellus eget risus eu massa venenatis feugiat. Curabitur et augue non ligula tincidunt vehicula. Nulla volutpat mauris nunc, eu congue mauris sodales vel. Morbi pretium justo nisl. Etiam vitae ante magna.</p>

• 3 This is a Custom Html module, in this case we've just created our text and an image inside the textarea. Both have been added in a div with class "caption".
  The class caption, setup the contents in two columns. Each column has a caption class. To setup a content inside a class caption, you should just select each content and from the TinyMCE editor select the button Format > Formats > div.caption.
  Module-position: module-box2

• 4 This is the already known Vik Words module (you can find the download link in the Modules List chapter or in the module explanation here).
  We listed just the parameters that we've changed from the default values..
  Module-position: module-box3
  Module Class Suffix: padding-fullbox title-center

  Module Configuration

  • Show Title: Show

  Options

  • Sentence Layout: Carousel
  • Sentence per row: 2
  • Color Title: #000000
  • Image Position: Under

• 5 This is the already known Vik Wall Image module.
  Module-position: fullbox

  Module Configuration

  • Show Title: Hide

  Options

  • Container Height: 300

• 1 This is a simple Article of Joomla. We've connected our Contact Us menu item to a simple article of Joomla. We've hide the article title, and decided to insert our title inside the article content, in this way we could centered all the text.

This part has been created by two modules published in the same position. The first one is Vik Google Maps and the other one is Vik Icons, that we've already seen for the header and subfooter.

• 2 This is the Vik Google Maps module (you can find the download link in the Modules List chapter or in the module explanation here).
  We listed just the parameters that we've changed from the default values.
  Module-position: module-box2
  Module Class Suffix: width50

  Module Configuration

  • Show Title: Hide

  Map Settings

  • Map Height: 400px
  • Zoom Level: 12
  • Center Map Latitude: Insert the Latitude
  • Center Map Longitude: Insert your Longitude
  • API KEY: Insert your API Key, to see how to create it, please read the Knowledge Base article here.

  Contact Details

  • Contact Enabled: No

• 3 This is the already known Vik Icons module (you can find the download link in the Modules List chapter or in the module explanation here).
  We listed just the parameters that we've changed from the default values.
  Module-position: module-box2
  Module Class Suffix: width50 contactus

  Module Configuration

  • Show Title: Hide

  Icons Options

  • Icons Size: 22
  • Padding Size: 12
  • Content Alignment: Default
  • Icon Alignment: Left

<h3 class="font-light" style="margin-bottom: 0;">Hotel Plaza</h3>
<h4 class="font-light text-border-left"><em class="text-color">philosophy and tradition</em></h4>

<a class="btn" href="mylink.html">DISCOVER ALL OUR SERVICES</a>