Template 1 with Bitrix. Ready-made solutions. Where there are two, there are three

The template defines the layout functional elements, page display and art style. The general appearance site.

Usually one layout is used for all pages, but 1C Bitrix allows you to simultaneously use several design options.

Using built-in tools, you can set your own templates for all sections and even pages. You can also set various conditions for displaying a particular circuit. Settings are made through the admin panel.

Page templates are stored in the “templates” folder of the same name. IN visual editor Simply select the required option from the list and supplement it with the necessary data. A feature of templating is the separation of logic from presentation.

Who needs templates and why?

The Bitrix system allows you to create and use pre-made templates, applying them to workspaces.

This is a practical and effective solution when working with multi-component pages with a complex structure, for example when working with an online store or a news portal.

Advantages of a correctly selected template:

• First impression. The website design makes it clear what the company specializes in and creates a favorable impression.
• Memorability. The site is associated with a specific company and remains recognizable.
• Integrity. The template must be written down to the smallest detail, presenting a harmonious picture.
• Functionality. Attractiveness is combined with usability and practicality.

Independent creation of a template for 1C Bitrix

The structure of the 1C Bitrix template is a collection of files and folders. The main directory contains the description and general information for the administrative section. Sometimes some additional functions are also assigned there.

The working area of ​​the template is used to place the main content, and the need for division is due to the structure. It is designated as work_area and is written in the editing form, acting as a space separator.

The main sections of the site are also presented in the form of corresponding directories. The basis of the 1C Bitrix template is the header and footer files. They contain code, call extensions, CSS and other functions.

Dynamic content is included in the template with Bitrix Framework directives. Here you can set PHP inserts that call special Bitrix components.

First, the title, icons, cascading style sheets, tags and other basic parameters are set. After this, it is necessary to determine the location of the administrative part. It is better to place all working images in one specific folder.

The numbered list with a menu is replaced by calling the Bitrix component to create and edit items. Most of the other standard elements are also created as components.

To place the required extension, the code for calling it is inserted into a pre-selected place on the page. Initially, it is located in the user documentation or in the visual editor tab.

Another important aspect is the CSS files of the template. Initially there are three of them: the main one and two auxiliary ones for designing the content. But this distinction is very arbitrary, because all elements are closely interconnected.

How to install a template?

Installation of the finished template is carried out according to the following scheme:

In the templates section of the admin panel, you must select the “add” button;

The creation form is standard: it specifies ID, title and description;

When working with html, it is important to clearly separate elements related to design and content;

The work_area directive is inserted into the edit field, where the template is copied;

If you have CSS, you need to go to the styles tab, where the code is inserted;

You can save the result and evaluate the resulting work.

The final part is the indication of all Bitrix variables that are written in the header file. It is important to remember to edit paths in CSS and save intermediate results. After this, you can apply the template to the site by selecting it from the appropriate list in the product settings.

conclusions

1C Bitrix templates are quite practical and functional. Their use will significantly simplify and speed up the development of the project. You can purchase ready-made templates on the company’s website.

In this article we will look at all the features of creating a template for Bitrix from scratch. It doesn’t matter whether you have a ready-made layout, or you’re just a perfectionist who just let him write something himself without intermediaries :)

What files are needed to create a template?

The appearance of your site (or presentation of the site) is always stored in a separate folder. In 1C-Bitrix, the path to the template lies through the bitrix folder, which contains a templates folder and already contains a list of all our templates.

Path to templates: /bitrix/templates/

You can create a template in 3 ways:

can be copied ready-made template and based on it, change it to suit you

you can create an empty template through the admin panel

you can create an empty folder and gradually fill it with files and folders

As you understand, the 3rd option is the most hardcore :) Let's go to the admin panel, Administration > Settings > Product settings > Websites > Website templates > Add template.
link regarding the site: /bitrix/admin/template_admin.php?lang=ru

The template ID is essentially the name of the folder in which it will be located, I’ll call it development . Fill in the rest of the fields as conveniently as possible; they are not very important right now. Add the following code to the template code:

#WORK_AREA#

— we write this line so that the file cannot be called directly from the browser and it does not start executing;
— show the current title for the page;
— show keywords, description and all scripts;
— show the panel for admins.

After saving the template, my description.php file looks like this:

Great, we should have 5 files left in the root, the rest should be this moment we won't use:

• description.php,
• header.php,
• footer.php,
• styles.css,
• template_styles.css

The part of the code that is before #WORK_AREA# is ultimately written into header.php. Guess which part is written in footer.php :) (the one after it). The work area itself is dynamic content (it is not always that dynamic), which is located, for example, in the /contacts/ or /about/ folder in the index.php file. The file itself usually begins with the inclusion of the header and ends with the inclusion of the footer:

Text hir

So far, everything looks logical.

1C-Bitrix folders and structure of the new template

There are several recommendations in the documentation that I personally don’t really like. First, they like to name the image folder images instead of the abbreviated img . And, of course, I understand everything, but when you write styles, you need to refer to images anyway, why write 2 times more? :) Secondly, there was a recommendation to store included areas in the include_areas folder - why not create inc? Thirdly, why do we need 2 files with styles? If I want to put everything into a separate file and connect it later as needed, then these styles will be stored either in the component template or in the css folder of the template.

To summarize, our correct template structure is:

Include_areas images components js

To be a little rebellious:

Inc img components js

In principle, no one limits you, these are just recommendations.

And now we smoothly come to the first problem - hardcode. Hardcode is when instead of dynamic values, for example Domain name, use text entry. Most novice developers do not know about the SITE_ TEMPLATE_PATH constant, which stores the path to the current template as a value - in our case it is /bitrix/templates/development (without the trailing slash, please note). And therefore, when you include your scripts or included areas, for the folder you need to write: