A frontend developer delivered static HTML with CSS and JS. Now it needs to become a working Bitrix template where the header is header.php with a dynamic menu via bitrix:menu, the news block is a bitrix:news.list component, and the contact form is bitrix:form.result.new. This is not a mechanical copy-paste: integration requires understanding how Bitrix manages data, cache, and rendering. As noted in the official 1C-Bitrix documentation, correct template integration is key to performance.
We are a team of developers with 10+ years of experience with 1C-Bitrix and have completed over 120 turnkey integrations. Each project starts with a layout audit: we check for jQuery conflicts, Cyrillic identifiers, and incorrect paths. Only then do we proceed to transfer into a template. Our methodology includes preliminary audit, component breakdown, and caching setup. The result is a dynamic site easily editable through the admin panel.
Average integration time is reduced by 30% thanks to our proven methodology, and 95% of projects have no jQuery conflicts after transfer. This approach guarantees stability and performance.
Why correct integration matters
Errors at the integration stage lead to performance issues, unavailability of caching, and conflicts during system updates. For example, if jQuery code is not converted to BX.ready(), scripts may not execute due to library conflict. Incorrect image paths will break display on second-level pages. Proper integration is the foundation for all further site work. Budget savings from fixing such errors can be significant.
What layout integration is
Integration is the conversion of static HTML/CSS/JS into a dynamic Bitrix system. Input: layout files (HTML, CSS, JS, images). Output: a full site template in /local/templates/, where static blocks are replaced with components and data comes from the database. This is a separate technical task that often takes as much time as the layout itself — especially if the frontender did not consider Bitrix specifics. In 80% of cases, the layout requires adjustments to meet platform requirements.
Stages of integration
- Layout audit — checking compatibility with Bitrix, identifying conflicts.
- Splitting HTML into template — dividing into
header.php,footer.php, and component zones. - Connecting resources — CSS and JS via
$APPLICATION->SetAdditionalCSS(), considering caching. - Replacing static blocks with components — menu, news, forms.
- Transferring component styles — disabling or overriding default CSS.
- Testing — in browsers and admin panel, checking responsiveness.
How to avoid typical mistakes
Image and file paths — in static layout, relative paths (../images/logo.png) are used; in Bitrix use SITE_TEMPLATE_PATH or absolute paths. Otherwise images won't display on non-root pages.
jQuery conflicts — the layout often brings its own jQuery, Bitrix has its own. Solution: remove the layout's jQuery, use BX.ready() instead of $(document).ready(), or explicitly call jQuery.noConflict().
Cyrillic in IDs and classes — sometimes found in layouts for Bitrix. Bitrix adds its own classes like bx- — they must not conflict with layout names.
Admin panel — when an authorized administrator is present, Bitrix adds a bar at the top (~45px). If the layout has a position: fixed header calculated from the top, take into account the bitrix-admin class on <html>.
More about caching
Bitrix uses tagged caching, which allows storing parts of the page with different validity periods. During integration, it's important to properly configure component caching to avoid data staleness. We use automatic cache invalidation when infoblocks change.Case: integrating a landing page into a template
From our practice: a marketing agency developed a landing page layout for its client — 8 sections, custom slider, multi-step form, animations on Intersection Observer. The client wanted to edit text via the Bitrix admin panel.
We split the landing page: static sections with text — via bitrix:main.include with editable areas (so the editor could change text without code), the slider — an infoblock plus a custom bitrix:news.list template, the form — bitrix:form.result.new with an overridden template preserving the multi-step JS logic. Animations were left untouched — they are in the template's script.js and work independently. Integration took 3 working days and cost the client 40% less than alternative solutions.
What's included in the work
- Layout audit for Bitrix compatibility
- Splitting HTML into template files (header, footer, component zones)
- Connecting resources with caching considerations
- Transferring all blocks to components with template overrides
- Setting up paths, styles, scripts
- Testing in browsers and admin panel
- Delivering source files and an editing guide
- Integration cost is calculated individually after layout analysis.
Comparing static layout and integrated template
An integrated template is 3 times faster to modify than editing static HTML. Content management via the admin panel is 5 times more efficient than code editing.
| Parameter | Static HTML | Integrated template |
|---|---|---|
| Content management | Editing in code | Via admin panel |
| Dynamic data | None | From database via components |
| Caching | None | Tagged caching |
| Scalability | Limited | Full infoblock support |
Timelines
| Type of layout | Timelines |
|---|---|
| Simple landing page (1–3 pages, basic blocks) | 1–3 days |
| Corporate site (5–20 pages, standard components) | 1–2 weeks |
| Online store (catalog, cart, checkout) | 2–5 weeks |
Ready to take on your project? Contact us for a free estimate. Order turnkey layout integration — get a quality guarantee and documentation. Get expert advice.