Creating a Bitrix template. Template management. Creating a Bitrix template - quick start How to install a template on 1C Bitrix

Often you need to change or supplement some elements of the template, or remake the template completely. Usually, to completely change the design of a site, a test site is created on a subdomain and work is done on it to adapt the template. This approach is not the easiest, as it may cause problems with porting to the main domain. At the moment, mobile versions of the site are required not just for the convenience of the user, search engines are increasingly giving preference to sites with mobile versions, using this method you can easily adapt the template for mobile versions without stopping an already existing project. Support for an unlimited number of templates in 1C-Bitrix .
Everyone who works on 1C-Bitrix knows that the CMS provides the ability to connect an unlimited number of templates. For those who are not in the know, let's look at how the implementation of multi-templates is used.

Now a copy of your template will be displayed if you pass this parameter to the URL, as follows site.ru/?test=Y where site.ru is the domain of your site. This condition will work for all sections and pages of your site. For example, if you need to see what a template will look like in a certain section of the site, go to this section and pass your parameter, in this case? test=Y, and the page will be displayed with the new template.

You can now edit the new template while your visitors will see the site as usual. Please note that all changes will need to be made in the new template folder, and if you need to change component templates that are not in the folder, you will need to copy the component template to the folder with the new template. Do not edit components in the /bitrix folder under any circumstances; this may lead to critical consequences. And always make backups in the 1C-Bitrix Cloud.

Well, that’s the whole technique, we hope that it will help you save time.

The template determines the layout of functional elements, page display, and artistic style. The overall appearance of the site depends on it.

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 the visual editor, you just need to 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 stores 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.

• Tutorial

Once again, trying to find a programmer who worked with CMS 1C-Bitrix in my city, I came across a problem...

There are programmers who have worked with various free frameworks like Joomla, WordPress, etc., but when it comes to Bitrix, everyone says: “Oh, it’s paid, why do I need it when there are a bunch of other free ones.” And they don’t want to take on learning something new.

That’s how I started, with the exception of one thing, they immediately showed me how, what and why. But I found the material online and on Habré. Therefore, I’ll start with something simple, like an ordinary programmer with knowledge of PHP and at least basic HTML, CSS, JS, start working with Bitrix.

I won’t talk about the template directory structure, you can read about that. The first thing you have to deal with is the integration of an HTML template on a CMS.

Let's say you have a ready-made HTML template and you need to integrate it with the system. Let's start with installation on the server:

This completes the installation stage; we proceed directly to the integration of the template. Go to the administration panel in the “Settings” section. Next, we go down the tree of settings: Product settings - Website templates, click on the “Add template” button

The standard template creation form opens.

Come up with an ID (I usually use main), enter the name of the template. The “Description” field is not required; it is rather made for developers so as not to confuse templates if there are several of them.

This is where the fun began. Typically the HTML page template looks like this:

... ... ... ... ...
The main thing here is to understand what belongs to the template and what to the content part. In this example, the content part begins between the section tag. Therefore, copy the template into the “Website template appearance” field. Between the tag we insert the service directive #WORK_AREA# . As a result, your template will look like this:

... ... ... #WORK_AREA# ...
If you have CSS, then go to the “Template Styles” tab and paste it there.

Next, I usually edit files via FTP. Open your text editor (I use Notepad++, so I won’t write his example) and go to the server. The entire Bitrix template is located at /bitrix/templates/template_name/, if you have pictures or additional style files, JS scripts, etc., then copy everything to this folder.

Let's move on to the final part and register all the necessary Bitrix variables. Open the header.php file and start editing. The first thing you need to do is connect the site header output:

… …
We also want to see the site admin panel in the public part of the site:

… … …
To display the page title, add a function to the corresponding tag. As a result, we get the following file:

... ... ...
By the way, I forgot to say that if there are still additional files, be it JS, CSS, favicon, and so on, then in order not to write the full long path /bitrix/…/ there is a special constant SITE_TEMPLATE_PATH . We insert it in the right places:

- instead of the meta tags, header, and css file connections removed in the head section, we place calls to Bitrix functions that will dynamically generate this data

We write the entire 3rd part in footer.php
- add /bitrix/templates// to all relative paths. For example, it was