UniDocs

The file that you downloaded contains all the necessary extensions to create a web, as seen in the demo. Also bring a file of Quick Start, that with a single install you have a website the same as the demo.

Folder Structure

1. Components: Include all components used in this template
2. Documentation: This documentation.
3. Modules: Include all modules.
4. Plugins: Please install all plugins if exist in this folder.
5. Quickstart: Includes quick start packages (Demo) for Joomla 3 & 4.
6. Templates: Include the template.

System Requirements

To perform a correct installation of this template, please choose a method, either Quickstar or Manual according to your knowledge of Joomla!

This is a native template for Joomla 4 & Joomla 3, therefore the requirements are same. Make sure your hosting provider meets the following:

Joomla 4

Software	Recommended	Minimum
PHP	8.0	7.2.5
Supported Databases
MySQL	5.6 +	5.6
PostgreSQL	11.0 +	11.0
Supported Web Servers
Apache	2.4 +	2.4
Nginx	1.18 +	1.10
Microsoft IIS	10 +	8

Check Requirements for other Joomla versions

Quickstart Installation (Demo)

To make an exact cloning of this template, you have to go up and extract the package Quickstart Package in your server (Hosting).

The steps for installing are the same as the installation basic of Joomla. If you still don't have these skills, you can do the installation by following the steps in the following guide.

Extract in Localhost Joomla 3 & 4

To make an installation on localhost, you just have to unzip the file within the WWW folder, HTDOCS, or whatever the default local server. then proceed with the installation step explained lines below.

Extract in Hosting (CPANEL) Joomla 3 & 4

If your hosting have Cpanel it is safer to have the option of extracting compressed files. If your hosting does not have Cpanel, ask if they have the option to unzip ZIP files; if you have you will save you hours of waiting in the FTP.

To use this option in Cpanel you need to access the File Manager.

Upload by FTP Joomla 3 & 4

If what you want is to install it in a hosting, and you have limitations to unzip files on your server, you have to take the hand of the FTP. An FTP client cross-platform (windows, Linux, Mac) is Filezilla.

Create Database Joomla 3 & 4

If we are in localhost the system of Joomla installation you can create the database. But we will explain to do it from phpMyAdmin.

Creating database in shared hosting

The creation of databases in remote Hostings is different in all. If you do not know how to do it, contact your provider to guide you in this task.

Installion Joomla 3

After you have uploaded and extracted the files in localhost or on a remote hosting; now we proceed to install. The installation consists of 4 fundamental steps.

1. Configuration

s a first step, we must choose our language to the system installation if it is not selected, then we have to write the Name of our site, administrator email, user, administrator, type and repeat the password for the administrator. The site description is not required for the installation, but if you must be filled after.

2. Database

Select the type of database, the host name, user database, password database, name the database, and prefix for tables in the database. Remember that the host is not always localhost, can vary depending on the hosting provider, and you should ask them.

3. Overview

You just have to press the install button, to create a clone of our demo on your hosting

Final Step

To finish the installation Package of Quick Start (Quickstart Package), we only need to delete the installation folder using the Orange button. if the button does not work delete via FTP.

Installation Joomla 4

Install our simple Joomla 4 demo, the process is the same as doing a fresh installation of Joomla 4. The most important step is to select your language so that you can better understand the descriptions of each field during the installation process.

1. Site Name

1. Select the language for the installer, (only for the installer)
2. Enter the name of your site. This can be changed from the administration later.

2. Login Data

The access data and administration of the Joomla superuser

3. Data Base

We have marked the required steps, each field has a detailed description. In the HOST field it is mostly localhost, but there are others that have custom ones that can be mysql.yourdomain.com or another, if it does not work with localhost, ask your hosting provider

4. Finish

1. If you are on localhost or in a development environment these warnings are normal. But on a production site these warnings should not exist.
2. Pressing one of these buttons ends the installation process by deleting the installation folder.

Manual Installation

If you have experience in the use of Joomla, you can select manual installation. To start you have to download the package Full Package of this template.The steps are as follows:

1. Go to Extensions >> Manage

2. Install all extensions, components, modules, plugins, templates, and other modifications.

Helix Ultimate Framework

This template is developed with Helix Ultimate Framework, to start working you only have to install the template, inside the installation package of the template is the Helix Ultimate plugin.

Installing template Package

Go to: System >> Install >> Extensions >> Upload Package

SP Page Builder

SP Page Builder is the best page builder for Joomla and the most used in the world.

With page you can build your site from Backend or front-end. The editing from the front end is very easy, and the best you can see what you are doing.

Installing SP Page Builder

The package is in components folder, its installation is just like any other extension. Extensions >> Manage >> Install. The installation of the component also installs the module.

Creating Page

For create pages go to: Componentes >> SP Page Builder and press button NEW.

Step 1

1. Configure Component
2. Create New Page

Step 2

1. Your Page title
2. Your Page Options (Open Graph, Publishing, Permissions)
3. If you not have page for import, start adding row
4. Select predefined columns
5. Add custom columns (number and width)
6. If you have page import it.
7. Load Page Templates from Joomshaper Library (You need buy a licence)
8. Add section from your saved section or from Joomshaper library (for Joomshaper you need buy a licence)

Step 3

1. Add addon from columns without addons
2. Add addon to columns with addons

Working With SP Page Builder

Here's how to work with the Page Builder layout. Remember that the changes are individual for each row, column and addon, later you can clone rows, columns and addons to save time.

SP Page Builder Rows

You can set the rows individually, you can add a title and subtitle to each row. If you need to do complex layouts you can add rows within a column and more columns within the added row.

1. Change design and behavior of this row. (Title, subtitle, padding, margin, background, animations, responsive)
2. Quick actions (Manage Columns, Clone row, an Save)
3. More actions (Disable, copy, paste and delete row)
4. Add new row

SP Page Builder Manage Columns

You can change column number and column width (12 = 100%, 6 = 50%, 4 = 25%, 3 = 33.333%)

1. Click for open panel
2. Predefined Columns
3. Add custom columns (number and width)
4. Current columns

SP Page Builder Single Column

You can add or change the background color, background image, paddings, separately for each column.

1. Click to open column actions
2. Change design and behavior of this column. (padding, margin, background, animations, responsive)
3. Add row within column
4. Move column (Drag an Drop)

SP Page Builder Addons

The individual configuration of each addon is different and depends on the function of each one. Here are the general options for all addons.

1. Options (Edit, Clone, Save, Disable/Enable, and Delete)
2. Single addon View
3. Move Addon (Click within addon and drag then drop in new position.)

SP Page Builder Creating Menu Item

The steps to create a menu item linked to a Page Builder page are the same as the core components of Joomla. Look at the following pictures.

Step 1

1. Select for create a menu item for Page Builder Single Page

Step 2

1. Your Menu Title
2. Select an Page Builder page

SP Page Builder Module

The use of the SP Page builder module is equal to the component, and you can use all the features, with the particularity that you can publish the module on any part of your page.

1. Row Options
2. Column Options
3. Addon Options

Portfolio

Most of the Joomla portfolio extensions have limitations or bugs. That is why for this template we have created a project portfolio based on Joomla Content, with fields for Project Details and Project Gallery, in both you can add or remove fields according to your needs. Best of all, you don't have to learn to use another extension, you can do it from the Joomla core article manager.

IMPORTANT: The portfolio works with categories to filter the items on the frontend, not with tags like traditional portfolios; also this makes it better distributed with better organized urls for any language or SEO.

Existing Additional Fields

If you are creating a website by installing the Quickstart Package the additional fields have already been created and should not be edited if you don't know what to do. If you want to use these fields in other categories, you can edit the additional fields and change the category or select more categories. Remember when you add a parent category, the children also inherit these additional fields.

1. Media fields used only for Project Datail Field
2. Text fields used only for Project Gallery Field

Creating Custom Fields (Joomla 4 only)

Only if you have installed this template on an existing website (Not Quickstart) and you need to use the portfolio based in Joomla Content should you follow the following steps to create the necessary fields:

1. Adding Field Groups and Fields

In the file you downloaded there is a folder called custom-fields, inside there is a plugin called plg_ut_custom_fields.zip, install that plugin in Joomla by going to System >> Install >> Extensions >> Upload Package tab.

You must not activate the plugin! because the function of this plugin is only to create the custom fields and keep them intact if by mistake you reinstall the plugin.

2. Assign Fields to Categories

The fields that the plugin has created are in: Content >> Fields. Now you must filter the fields by Field Groups and select Project Details, you must edit all the fields that belong to that group and select one or more categories that will contain the items in your portfolio. If your category has subcategories, you should only add the parent because subcategories children inherit.

NOTE: In the fields marked with Subform Only, you cannot select categories, but you must press the SAVE or SAVE & CLOSE button.

3. Working with the fields

When you are going to create an item for your portfolio, after selecting the category assigned for the portfolio, the same one that you assigned in the custom fields, you should see the following screen with a new tab and the fields.

How to add project items

Creating items for the project gallery is like creating articles in Joomla. Here we show you an easy guide, for this you have to go to: Content >> Articles >> Add New Article >> Select the Projects category or the one you have assigned in the additional fields; When you have selected Joomla will load the additional fields to the Editor and you will see the Project Details tab.

1. Select category added in Additional Fields or their children categories.
2. Add your project title.
3. Add or select tags if need
4. Add introtext or full text description.

1. Select a intro image for show in modules and projects gallery.
2. Select a big image for show in project detail.

1. Add or remove project details like client, location, url, etc.
2. Add or remove images for project gellaer if need.
3. NOTE: If you remove all items, the system not show Gallery or details
4. NOTE 2: You can add Video from Blog Option tab, but is mandatory add Intro image for show in project gallery and modules.

Creating Menus For Portfolios.

Creating a menu item for your portfolio is easy, it is already preconfigured, you just have to go to: Menus >> Your Menu Name >> Add New Menu Item >> Select button >> Articles >> Projects

1. Select >> Articles >> Projects layouts.
2. Select or create category
3. Add title to your menu item

1. Number of prjects per page
2. Number of productos per row in each device
3. Show/Hide filters
4. Select a project layout (Construction, Mining, Architect or Interior)
5. Select a layout for project detail (project-architect, project-construction, project-interior, project-mining)
6. Show/Hide intro text in project gallery.

Creating modules

Adding modules to display your project gallery on other pages is easy, just go to: Extensions >> Modules >> New (green button) >> Articles Category.

1. Normal: To publish projects on other pages.
2. Dynamic: To post similar projects on a project details page. The dynamic method shows only projects of the same category.

1. Number of item to show
2. Select the parent category of projects categories.
3. Subcategory depth from which you should display projects.

1. This is where the magic happens. We have created 4 architect, construction, interior and mining layouts with and without filters. You can select the one you like, the names are only for the organization.

Template Layout

To build Construction we have used Helix Ultimate Framework, so the layout is editable from the administration, you can add or remove module positions to your liking. You can also change the width of the columns for all devices or a different width for each device.

How to manage Helix Ultimate Layout Builder

1. Manage Columns. Columns number and column width.
2. Row Options. Width, class, padding, margin, text color, link color, backgrounds.
3. Component. You can load component area or not. you can convert any position on component from dots icons.
4. Column Options. Change module position, add class, grid for desktop, tablet and phone.
5. Add Row.
6. Delete Row.
7. From this icon you can drag and drop the row to reorder.

Important: You are free to add new sections with new IDs and add new columns with module position in any row. The sections already created can be reordered; titles should not be changed because these titles are the ID of the section.

Before changing any layout please export the configuration from the Advanced tab, you may need to import it in the future.

Template Styles

Professional templates like these use many styles, because we create many versions of homes, pages, portfolios, blogs and other pages. In some cases you can modify the layout, but mostly it is only created to select a different menu, header or color.

Construction Template Styles In all the template styles that we have created in Construction, we have used the layout shown above. The styles have been created to show all the power of the combination of the headers; so you can erase all the styles that you will not use without problems.

Header Styles

Predefined Header, is an important feature, which allows us to select a different style with a single click. These headers load by default Helix Features (Social icons, Contact Info and menus), but also load module positions.

1. Enable or Disable predefined Headers. Disable if you are going to create your own header version from the layout builder.
2. Predefined header list. Select one.

Deactivating Template Features

As we said in the header, the Features are loaded, especially in the topbar.

To deactivate go to: Extensions >> Templates >> Styles >> Construction - STYLENAME >> Template Options button >> Basic tab >> Social Icons or Contact Info >> Click on checkbox for disable or enable.

Publishing modules in Predefined Headers

The positions included in these headers are: top1, top2, top3 and menu. In the topbar not all positions are loaded, this depends on the selected style.

To know exactly which positions are being loaded, activate the Joomla module position viewer:

Joomla 4: System >> Site Templates >> Options button (right corner) >> Enable Preview Module Positions >> Save and Close.

Joomla 3: Extensions >> Templates >> Templates >> Options button (right corner) >> Enable Preview Module Positions >> Save and Close.

Then you can click on the link Preview of the template or add ?tp=1&template=ut_barbon in front-end at the end of the url of the page that you want to see the positions.

When using the position viewer, you will force to load all the positions even if modules are not published in that position. This can change the design of the page but this is only when the viewer is active. It is recommended to deactivate the viewer in sites in production.

How to create Custom Header

Module Positions

The positions of module that we list below are those that we have used to create this template.

title, top1, top2, top3, logo, menu, search, beforecomponent, aftercomponent, user1, user2, user3, user4, left, right, related, feature, slider, position1, position2, position3, position4, position5, position6, position7, position8, content-top, content-bottom, bottom1, bottom2, bottom3, bottom4, breadcrumb, footer1, footer2, comingsoon, offcanvas, pagebuilder, 404, debug

Module positions for components

We have created custom module positions for components

POSITION: Related

This position is available for com_content (Portfolio)

Creating blogs

The content of blogs are created with Joomla com_content component. So it is very simple to use.

To create menu items, follow the next steps: Go to Menus >> YOUR_MENU_NAME >> Press PLUS icon or button NEW >> In Menu Item Type press button Select.

Step 1

Select what type of menu item to create Blogs

Step 2

1. Add Title
2. Select a category for your blog
3. Create category for your blog if not exists

All other fields are default for it to work right. If you want to make changes you can do it.

Content Organization

All created content is well organized with their respective name. For example if you want to use the ARCHITECT demo: there are menus, blog categories, page builder categories, sliders, template style and modules that carry ARCHITECT in their name, so it is easy to know to which prebuilt website it belongs.

Joomla Menu

The elements included in this menu belong to the main components of Joomla and that no matter how much you configure it will be used, either by a search, a tag, a record or another. We create these elements to help our clients comply with international standards (such as data privacy) and mainly with SEO. So we recommend not removing these menu items, you can move it to other menus or edit them according to your needs. But if you are someone who knows what he does you can destroy everything.

MAIN MENU

This Menu only contains menu items of the type ALIAS, which are links to other real menu items. This menu is used to show all the features of this template. After finishing configuring your website you can delete the menu and its elements without problems.

The Images

The images are also organized in folders with their respective names. The template-details folder is a folder that can be deleted without problems, because it contains images that we use only to demonstrate the tons of features of this template.

How To Select Prebuil Website

To select a prebuilt website you just have to change the current predefined menu for the home of the prebuilt you like. Example for ARCHITECT, Go to: Menus >> ARCHITECT MENU >> Click on the star on the right side of the menu item, under the Home column.

1. Open All Menus
2. Choose your preferred version
3. Click for convert in your MAIN HOME and in your default version

In this menu you will build your new website. Remember that url is important for good SEO, so we recommend changing them at the end of your website. For example about-us-construction by about-us.
OPTIONAL: For reasons of customs or tastes you can rename this menu to Main Menu

Create your Own Website

If you want to create a website to your liking without using the prebuilt. Follow the next steps:

1. Create a New Menu: Ex: My Main Menu
2. Move, copy or create a page for your home in your new menu.
3. Set the Home as the site default, by clicking on the star on the right.
4. Customize a template style to your needs.
5. Assign your new menu as predefined in your template style
6. Move the pages you like to your new menu, or create your own pages by copying and pasting sections in Page Builder.
7. Assign your custom template style to your new menu items.
8. Clean all the content you will not use.

Cleaning

A website should have only the content it uses, your website will be faster and your customers will thank you.

As we said at the beginning everything is organized with their respective names, at the end it would be good to eliminate all that you do not use. But first MAKE A BACKUP.

What can you eliminate? Page Builder pages, Page builder categories, Joomla Content categories, Menus and their elements (we already mentioned which ones not to delete), images, Template styles.

What happens if I want to use later? Easy install the Quick start package then copy and paste or export and import, this can be done with page builder pages and template style.

These Explanations are only valid with Our templates, because we are the BEST, and we love to make our clients' lives easy.

Specific Classes

In this template we have created specific classes for some sections or parts of these. These classes can be useful when we want to customize our website.

Titles

Add these classes in Sp Page Builder Rows and addons. All styles are aligned to the center, right or left, depending on the alignment of the row title or alignment of the addon.

title-1 Available for rows and addons

title-2 Available for rows and addons

title-3 Available for rows and addons

title-4 Available for rows and addons

title-5 Available for rows and addons

Title colors

title-primary Title primary color

title-white Title white color

If you have installed the quickstart, in the features section you will find samples of how to work with the titles

Title Widths

title-w-55 Title subheading width 55% from 992px to more

title-w-50 Title subheading width 50% from 992px to more

title-fluid Title container width 100% for all screens. Used in fluid rows of Page builder

Skew Blocks

With these classes we have built the Construction version of this template, combine skew directions (reight, left) with skew colors

Skew Directions

skew-block-right This class add skew in right side of section or column where is added.

skew-block-right-full This class add skew in right side and a block to left extreme of section or column where is added.

skew-block-left This class add skew in left side of section or column where is added.

skew-block-left-full This class add skew in left side and a block to right extreme of section or column where is added.

skew-block-x This class add skew in left and right sides of section or column where is added.

skew-block-x-invert This class add skew in left and right sides but invert in Y axis, of section or column where is added.

Skew Colors

skew-light This add a background color gray light, combine with background class bg-gray-20

skew-dark This add a background color dark, combine with background class bg-dark

skew-white This add a background color white, combine with background class bg-white

skew-bg By default this combine with page backgroun color

skew-primary This add a background color primary, combine with background class bg-primary

Addon Classes

Instead of listing all the classes used to give styles to the addons, we have created the Elements section in the template demonstration (it is also in the quickstart); this allows them to see the style and import the section or save the addon to drag it into the live editor.

To make your work easier, the styles of the addons have the same name as the addon, followed by an identifier number. for example for the Feature Box addon, the styles are feature-box-1, feature-box-2, etc. the same for the other addons.

You must install the quickstart in case you need to find out any class or configuration

Utility Classes

In Construction we have created useful CSS classes, which helped us in the design and it will be very important to know each one of them. You have to enter these classes in the advanced tab of the modules, sp page builder or helix layout manager, and place a space before writing the class.

Paddings

The paddings are increased 10px in 10px, starting from 0. It work similar to Bootstrap 4 classes but better.

All Screens

pt-0 to pt-200 Padding top from 0px to 200px

pr-0 to pr-200 Padding right from 0px to 200px

pb-0 to pb-200 Padding bottom from 0px to 200px

pl-0 to pl-200 Padding left from 0px to 200px

py-0 to py-200 Padding top and bottom from 0px to 200px

px-0 to px-200 Padding left and right from 0px to 200px

Small Screens

This classes work from 576px to more

pt-sm-0 to pt-sm-200 Padding top from 0px to 200px

pr-sm-0 to pr-sm-200 Padding right from 0px to 200px

pb-sm-0 to pb-sm-200 Padding bottom from 0px to 200px

pl-sm-0 to pl-sm-200 Padding left from 0px to 200px

py-sm-0 to py-sm-200 Padding top and bottom from 0px to 200px

px-sm-0 to px-sm-200 Padding left and right from 0px to 200px

Medium Screens

This classes work from 768px to more

pt-md-0 to pt-md-200 Padding top from 0px to 200px

pr-md-0 to pr-md-200 Padding right from 0px to 200px

pb-md-0 to pb-md-200 Padding bottom from 0px to 200px

pl-md-0 to pl-md-200 Padding left from 0px to 200px

py-md-0 to py-md-200 Padding top and bottom from 0px to 200px

px-md-0 to px-sm-200 Padding left and right from 0px to 200px

Large Screens

This classes work from 992px to more

pt-lg-0 to pt-lg-200 Padding top from 0px to 200px

pr-lg-0 to pr-lg-200 Padding right from 0px to 200px

pb-lg-0 to pb-lg-200 Padding bottom from 0px to 200px

pl-lg-0 to pl-lg-200 Padding left from 0px to 200px

py-lg-0 to py-lg-200 Padding top and bottom from 0px to 200px

px-lg-0 to px-lg-200 Padding left and right from 0px to 200px

Extra Large Screens

This classes work from 1200px to more

pt-xl-0 to pt-xl-200 Padding top from 0px to 200px

pr-xl-0 to pr-xl-200 Padding right from 0px to 200px

pb-xl-0 to pb-xl-200 Padding bottom from 0px to 200px

pl-xl-0 to pl-xl-200 Padding left from 0px to 200px

py-xl-0 to py-xl-200 Padding top and bottom from 0px to 200px

px-xl-0 to px-xl-200 Padding left and right from 0px to 200px

Margins

The margins are increased 10px in 10px, starting from 0. It work similar to Bootstrap 4 classes but better.

All Screens

mt-0 to mt-200 Margin top from 0px to 200px

mr-0 to mr-200 Margin right from 0px to 200px

mb-0 to mb-200 Margin bottom from 0px to 200px

ml-0 to ml-200 Margin left from 0px to 200px

my-0 to my-200 Margin top and bottom from 0px to 200px

mx-0 to mx-200 Margin left and right from 0px to 200px

Small Screens

This classes work from 576px to more

mt-sm-0 to mt-sm-200 Margin top from 0px to 200px

mr-sm-0 to mr-sm-200 Margin right from 0px to 200px

mb-sm-0 to mb-sm-200 Margin bottom from 0px to 200px

ml-sm-0 to ml-sm-200 Margin left from 0px to 200px

my-sm-0 to my-sm-200 Margin top and bottom from 0px to 200px

mx-sm-0 to mx-sm-200 Margin left and right from 0px to 200px

Medium Screens

This classes work from 768px to more

mt-md-0 to mt-md-200 Margin top from 0px to 200px

mr-md-0 to mr-md-200 Margin right from 0px to 200px

mb-md-0 to mb-md-200 Margin bottom from 0px to 200px

ml-md-0 to ml-md-200 Margin left from 0px to 200px

my-md-0 to my-md-200 Margin top and bottom from 0px to 200px

mx-md-0 to mx-md-200 Margin left and right from 0px to 200px

Large Screens

This classes work from 992px to more

mt-lg-0 to mt-lg-200 Margin top from 0px to 200px

mr-lg-0 to mr-lg-200 Margin right from 0px to 200px

mb-lg-0 to mb-lg-200 Margin bottom from 0px to 200px

ml-lg-0 to ml-lg-200 Margin left from 0px to 200px

my-lg-0 to my-lg-200 Margin top and bottom from 0px to 200px

mx-lg-0 to mx-lg-200 Margin left and right from 0px to 200px

Extra Large Screens

This classes work from 1200px to more

mt-xl-0 to mt-xl-200 Margin top from 0px to 200px

mr-xl-0 to mr-xl-200 Margin right from 0px to 200px

mb-xl-0 to mb-xl-200 Margin bottom from 0px to 200px

ml-xl-0 to ml-xl-200 Margin left from 0px to 200px

my-xl-0 to my-xl-200 Margin top and bottom from 0px to 200px

mx-xl-0 to mx-xl-200 Margin left and right from 0px to 200px

Negative Margins

The margins are increased 5px in 5px, starting from 0. It work similar to Bootstrap 4 classes but better.

All Screens

mt-n0 to mt-n280 negative margin for top from 0px to -280px

Small Screens

This classes work from 576px to more

mt-sm-n0 to mt-sm-n280 negative margin for top from 0px to -280px

Medium Screens

This classes work from 768px to more

mt-md-n0 to mt-md-n280 negative margin for top from 0px to -280px

Large Screens

This classes work from 992px to more

mt-lg-n0 to mt-lg-n280 negative margin for top from 0px to -280px

Extra Large Screens

This classes work from 1200px to more

mt-xl-n0 to mt-xl-n280 negative margin for top from 0px to -280px

Opacity

Classes used to transparent images, buttons, etc. it can be used in page builder or Sliders.

opacity-10 value opacity:0.1;

opacity-20 value opacity:0.2;

opacity-30 value opacity:0.3;

opacity-40 value opacity:0.4;

opacity-50 value opacity:0.5;

opacity-60 value opacity:0.6;

opacity-70 value opacity:0.7;

opacity-80 value opacity:0.8;

opacity-90 value opacity:0.9;

Backgrounds

Add these classes to modules, addons, sections, pages where you want add a background.

Background Colors

bg-primary, bg-secondary, bg-success, bg-info, bg-warning, bg-danger, bg-dark, bg-light, bg-white

Gray Backgrounds

bg-gray-10, bg-gray-20, bg-gray-30, bg-gray-40, bg-gray-50, bg-gray-60, bg-gray-70, bg-gray-80, bg-gray-90, bg-black

Overlays

These classes overlay a color on the background image. They are RGBA colors; 10 is equal to 10% of the color and 90 is 90% that is to say almost equal to the hexadecimal color. These classes are added to the rows, columns, addons (Page builder) or sliders. In the case of the slider they create layers of a color with transparencies.

overlay-bg-primary-10 to overlay-bg-primary-90 10 in 10

overlay-bg-black-10 to overlay-bg-black-90 10 in 10

overlay-bg-white-10 to overlay-bg-white-90 10 in 10

Background Images

If there are background images linked from SASS or CSS files, they have to be in the bg folder, inside images (images/bg). You just have to paste your image and put the name of the existing image. we do this so as not to overwrite your image when updating the template.

With selectable background images used in Page Builder, Helix Manager, you will have no problems.

Change Preset Color

Changing the color of our template is absolutely easy, just follow these steps:

Activating the compilation from SCSS to CSS.

When we change the colors in the presets, these values are saved in the database. In order to see it, it is necessary to generate new CSS files with our new colors, for this we are going to. System >> Site Template Styles >> UT YoMe - STYLE_NAME >> Template Options button >> Advanced tab >> SCSS >> enable Compile SCSS to CSS.

1. Helix Ultimate Advanced Options
2. SCSS Options
3. Enable Compilation

Changing Color values

Now that we have activated the compilation of SCSS to CSS we are going to change the colors for it now we go to the Helix Ultimate Prests tab, as we change the colors we will see the changes online.

1. Enable Custom Preset
2. Open each tab to change colors for each part of your site

ALERT 1: Not forget SAVE your settings.

ALERT 2: When you are done changing the colors remember to DISABLE Compilation from SCSS to CSS because this is a tool for sites in development not production.

Customizing

The following is a basic guide on how to customize a website, here we will not teach PHP, JS, CSS or HTML, you have to know it or learn it in the thousands of tutorials on youtube or another similar one of your choice.

To make a CSS customization it is necessary to know how to identify the html tags, and the css classes.

For this you will use the Element Inspector of your browser, by right clicking on the button, section, link, image or whatever you want to customize, then on Inspect. This will open the developer tools of your browser that in the Inspector or Elements tab (depends of your browser) you will see all the HTML code (DOM) and in below the classes with the styles. Try changing the values of those classes by clicking on the attribute value.

To deepen the identification of classes and tags, we recommend watching tutorials on how to use the Developer Tools of your browser.

Customize CSS of this template.

Now that you know how to identify the classes and the HTML tags you can start customizing this template, for which you must create a file called custom.css and inside it put all your customization to the classes. Perhaps in some cases you need to add the !important statement to see changes, EXAMPLE:

body.ltr.offcanvs-position-right .body-wrapper{background:#FF0000!important;}

When you have the changes you can upload the file to /templates/ut_yome/css/custom.css then refresh the site, if you do not see the changes you may have to clear the browser cache or in the developer tools configuration check disable cache while developer tools is open

You should not customize any other CSS files because they will be lost in updates, all changes, or style additions should be done in custom.css

Server and Hosting

The main thing to optimize a website is that it is hosted on hosting with good servers that are implemented with everything you need. In most of the shared hostings it is difficult to optimize because the server resources are limited. This affects the response time of the server, that will respond in 2, 3 or more seconds, when it must be in milliseconds between 200 and 300. This is almost impossible to overcome in a shared hositing.

Images

The images are another big problem to solve but not impossible are the images. When you do a test with GTMETRIX they can give you a score of 20 or 30, just for this reason.

Solution

To solve this you must cut the images to the size of their container (to know the size of the container use the elements inspector of your browser), analyze well what size that image will be displayed on the mobiles so as not to cut too small. Then you have to compress that image, if you don't know how to do it with your favorite program you can use online utilities like Tinypng or Squoosh.

This template is already optimized to postpone the loading of images that are not displayed on the screen (Lazy Load) natively in modern browsers; This feature is present in all the addons and extensions that we have used. With this we are accelerating your page by 70%.

Scripts

The scripts must also be compressed and delivered correctly to the browser for reading and caching, otherwise testers such as GTMETRIX will show you a very low score.

To solve this there are many options and they all depend on your server as we mentioned at the beginning of this guide. The ideal is to test which one works best.

This template has its own JS and CSS compressor, but in most shared hostings this advantage increases the response of the server. The other option is to activate GZIP in the Joomla administration, but there are hositing that do not have gZip activated by default due to problems with HTTPS. Then the recommendation is that you read the instructions of your hosting or contact them.

Solution

This solution is effective in almost all hostings because they have DEFLATE and EXPPIRES enabled and we don't need to activate Gzip in Joomla. For this you just have to change the name of htaccess.txt to .htaccess, this file is in the root of your site. then you have to paste the following code at the end of the file and save. You will see that your site flies.

## BEGIN OPTIMIZATION
<ifmodule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-font-woff
  AddOutputFilterByType DEFLATE application/x-font-woff2
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE font/woff
  AddOutputFilterByType DEFLATE font/woff2
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml
  # Remove browser bugs (only needed for really old browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
</ifmodule>

<IfModule mod_expires.c>
  # Turn on the module.
  ExpiresActive on
  # Set the default expiry times.
  ExpiresDefault "access plus 1 month"
  ExpiresByType image/jpg "access plus 1 year"
  ExpiresByType image/svg+xml "access 1 year"
  ExpiresByType image/gif "access plus 1 year"
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType image/webp "access plus 1 year"
  ExpiresByType audio/ogg "access plus 1 year"
  ExpiresByType video/ogg "access plus 1 year"
  ExpiresByType video/mp4 "access plus 1 year"
  ExpiresByType video/webm "access plus 1 year"
  ExpiresByType text/css "access plus 1 year"
  ExpiresByType text/javascript "access plus 1 year"
  ExpiresByType application/javascript "access plus 1 year"
  ExpiresByType application/x-shockwave-flash "access plus 1 year"
  ExpiresByType application/rss+xml "access plus 1 hour"
  ExpiresByType application/atom+xml "access plus 1 hour"
  ExpiresByType image/ico "access plus 1 year"
  ExpiresByType image/x-icon "access plus 1 year"
  ExpiresByType text/html "access plus 600 seconds"
  ExpiresByType text/xml "access plus 0 seconds"
  ExpiresByType application/xml "access plus 0 seconds"
  ExpiresByType application/json "access plus 0 seconds"
  # FONTS
  ExpiresByType font/truetype "access plus 1 year"
  ExpiresByType font/opentype "access plus 1 year"
  ExpiresByType application/x-font-ttf "access plus 1 year"
  ExpiresByType application/x-font-woff "access plus 1 year"
  ExpiresByType application/font-woff "access plus 1 year"
  ExpiresByType application/x-font-woff2 "access plus 1 year"
  ExpiresByType application/font-woff2 "access plus 1 year"
  ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
</IfModule>
## END OPTIMIZATION
                                    

Others

SP Page Builder

Keep in mind that many times the Joomla extensions load files that are already loaded by the system or another extension. If your extension allows it, you must deactivate it.

Font Awesome 5: You have to disable it from SP Page Builder >> Pages >> Options button (top right corner), because this template loads the same version of Font Awesome.

Production Mode: When you have finished designing your website, activate the production mode, this avoids the inline css. Remember to disable to design otherwise you will not see the changes until you purge the CSS from the cache.

Lazy Load: This is an option to defer the loading of images in Sp Page builder using Javascript, but it can give problems in sliders or carousels because their scripts create the sections before the image is loaded with absolute positions making the sections invisible . Activate it only if you know what you are doing.

Utilities

To optimize the speed of a Joomla site there are plugins like JCH Optimize that in its free version could help you, but it is not necessary if you follow our previous instructions.

There are other plugins to eliminate the resources that block the rendering of the page, these plugins are the ones that load js with defer attribute and css with rel="preload" as="style". The complete instructions on this are given to you by GTMETRIX when you do this test. Remember that this rather than a solution can be total disaster.

SUMMARY

We have optimized the demonstration of this template up to a score of A(98%) using only the following, of which we have already left instructions above:

Images: we have used container size images and they are compressed. The template already loads it into Lazy Load.

Scripts: We have added the code that we left above in the .htaccess.

SP Page Builder: We have activated production mode and deactivated Font Awesome

We have not used Plugins or witchcraft

We do the optimization guide for the benefit of our clients, the template has everything you need, the optimization is of the content and the website. For this reason we do not support this issue.