Как создать сайт на битриксе самому бесплатно пошаговая инструкция

Создание сайта может казаться сложным процессом, требующим труда опытных программистов. С Битрикс24 это больше не так! Вы сможете создать свой сайт буквально за 10 минут, связать его с CRM и сразу начать продавать. Для этого потребуется выполнить несколько простых шагов.

Вся работа ведётся из раздела Сайты и Магазины > Сайты. Перейдите туда и нажмите Создать сайт:

Выберите шаблон сайта

У нас есть большое количество готовых шаблонов для сайтов. Выберите подходящий с помощью фильтра или поиска. Отфильтровать шаблоны можно по трем критериям: количество установок, дата публикации и тип шаблона.

Если ни один из вариантов вам не понравился, вы всегда можете создать сайт с нуля. Выберите Пустой шаблон и наполните его только нужными блоками.

Выберите цветовую палитру сайта. Она повлияет на внешний вид некоторых элементов, например, виджета. Также придумайте название и описание для вашего сайта.

Добавьте необходимые блоки

Далее нужно настроить шаблон под вашу компанию. Сначала добавьте необходимые блоки. Кликните Добавить блок там, где вы хотите его разместить.

Битрикс24.Сайты имеют большой набор блоков любой направленности. Размещайте контакты вашей компании, фотогалереи, видеоролики и многое другое. Вы найдете блоки для реализации любых идей для вашего сайта.

Редактирование блоков

Когда структура сайта готова и все блоки размещены, нужно добавить контент и отредактировать дизайн. Каждый блок имеет две панели работы с ним.

• Редактировать — измените основные настройки блока и его содержание.

  

• Суперблок — это режим в котором вы можете управлять элементами внутри блоков вашего сайта.

• Дизайн — редактирование внешнего вида блока. Здесь же указывается, будут ли отображаться блоки при просмотре сайта на различных устройствах.

  

• Стрелки позволяют менять порядок блоков на странице.

• Кнопка с корзиной удаляет данный блок.

• Действия — список операций, которые можно выполнить с блоками.

  

Как опубликовать сайт

По умолчанию, для сайтов включён режим Автопубликации. Как только вы внесли первую правку, сайт публикуется автоматически. Также все правки будут сразу отображаться на сайте. Вы не потеряете изменения, если забыли их сохранить или закрыли вкладку браузера.

Если Автопубликация отключена, а вы хотите увидеть правки, то нажмите Предпросмотр.

Как только вы закончили редактирование, кликните Опубликовать и ваш сайт сразу станет доступен в сети.

Если включён режим Автопубликация, публиковать сайт не нужно.

Количество опубликованных сайтов зависит от тарифа Битрикс24. Если вы переходите на тариф, в котором количество опубликованных сайтов меньше текущего, то сайты не отключатся, но вы не сможете сохранять изменения пока не снимете с публикации лишние сайты.

Рекомендуем также прочитать:

• Настройки сайтов и страниц
• Свой домен у Сайта или Магазина Битрикс24
• Создание многостраничных сайтов
• Виджет открытых линий на сайте

Веб-разработчик, запустил более 20 крупных проектов, включая онлайн-франчайзинг «Позитроника», сайт фабрики «Яршинторг» и многие другие.

ВРЕМЯ ПРОСМОТРА

1 ч. 16 мин.

• 55% компаний в России используют 1С‑Битрикс — услуги разработчиков на этой платформе востребованы.
• Быстрое решение типовых задач и уже готовые решения от Битрикса. Например, онлайн-кассы легко интегрируются с платёжными системами и сервисами доставки.
• Много возможностей. Битрикс включает в себя блоги, форумы, каталоги разных видов, интеграцию с социальными сетями и многое другое. Также есть библиотеки, которые позволяют додумывать и создавать свои расширения.
• Сжатые сроки изучения. Чтобы начать работать с Битриксом, достаточно за 2,5–3 месяца пройти теорию — и можно сразу практиковаться, работая с реальными сайтами и наращивая свои знания.
• Универсальность. На Битриксе создаются и сайты-визитки, и крупные интернет-магазины.
• Документация на русском языке. Она есть в открытом доступе, её легко изучать.
• Большое комьюнити специалистов. Новичку всегда легко найти ответы на свои вопросы или дополнительную информацию, а значит, легче развиваться.

Представьте команду разработчиков, которая решила создать интернет-магазин. Она разработала сайт на чистом PHP, но потом взялась за новый. Тогда команда поняла, что часть функций и модулей уже написаны для первого сайта.

Фреймворк — структура, в которой отдельными модулями выделены, например, визуальная составляющая и функциональный код. Когда есть фреймворк, можно не писать сайт с нуля, а управлять им с помощью уже готовых блоков. Этот продукт представляет собой CMS — систему управления контентом на сайте.

Все сайты на Битриксе состоят из трёх компонентов:

• Модель — функции и классы, которые обращаются к базе данных.
• Представление — шаблон, с помощью которого на страницы выводится то содержимое, которое мы хотим увидеть, когда обращаемся к базам данных.
• Контроллер — сама страница сайта с компонентами.

Поработаем с демосайтом 1С-Битрикс. Перейдите по ссылке bitrixlabs.ru, нажмите «Создать демосайт», укажите «Интернет-магазин» и установите. После окончания установки увидите вот такую страницу. Это ваш первый интернет-магазин на 1С-Битрикс.

Здесь редактируется любой элемент. Например, наведите курсор на логотип и нажмите на «Изменить область».

В открывшемся окне замените логотип. Таким образом можно отредактировать все элементы на странице.

Система устроена так, что редактировать сайт может администратор или сам владелец бизнеса.

Цель разработчика на 1С-Битрикс — настроить работу сайта так, чтобы администратору сайта или владельцу бизнеса было легко вносить небольшие изменения: редактировать цены и описания товаров, размещать контент, управлять внешним видом и так далее.

Познакомимся с системой изнутри. На панели сверху выберите раздел «Администрирование».

Здесь располагаются виджеты для быстрого доступа к основной информации: скорости сайта, количеству продаж и так далее.

Этот раздел состоит из нескольких десятков элементов. Рассмотрим наиболее важные.

Здесь показана структура файлов, где можно редактировать их содержимое и так далее.

Здесь расположены товары и категории.

Чтобы перейти в конкретный товар, выберите категорию и нажмите на название. У товаров есть различные свойства, они уже прописаны в системе.

Переключаясь между вкладками, как на скриншоте снизу, можно менять описания, фото, цены, анонсы, прописывать метатеги и ключевые слова, добавлять или убирать товар из разделов сайта, отслеживать эффективность рекламы.

В демоверсии интернет-магазина на 1С-Битрикс в «Маркетинг» загружены все основные модули для решения маркетинговых задач: пульс конверсии,
А/В-тестирование, email-маркетинг и так далее.

Чтобы поставить подобный набор, к примеру, на WordPress, нужно найти хорошее решение, протестировать его, настроить под свой сайт. В Битриксе эти решения уже готовы — это удобно и для разработчиков, и для владельцев бизнеса.

Этот раздел доступен только для интернет-магазинов. Здесь есть вся информация по заказам, оплатам, поставкам, налогам и многое другое. А ещё — уже настроенная онлайн-касса.

Опросы, рассылки, соцсети, техподдержка, блоги — всё, что только можно, интегрируется с сайтом. Каждый пункт меню имеет свои настройки.

Тут легко посмотреть и проанализировать данные о посещаемости сайта и эффективности рекламных кампаний. На практике аналитикой в 1С-Битрикс практически не пользуются, потому что Google Analytics имеет больше возможностей.

Здесь находится каталог решений для 1С-Битрикс: различные модули, инструменты, готовые интернет-магазины. Разработчик может создать какое-либо решение для Битрикса и выставить его на продажу через маркетплейс.

Здесь представлен полный список настроек сайта: валюты, серверы, масштабирование, производительность, поиск по сайту и многое другое.

В категории настроек «Пользователи» настраиваются уровни доступа для разработчиков, контент-менеджеров и других специалистов, работающих над сайтом.

Благодаря встроенным решениям работу с Битриксом легко освоить. Рассмотрим несколько простых действий с системой.

Перейдите во вкладку «Сайт → Создать страницу».

Введите заголовок страницы и отметьте нужные пункты:

• Перейти к редактированию страницы — откроется окно редактора.
• Добавить пункт меню — новая страница появится в меню.
• Ограничить доступ к странице — страница будет создана, но не опубликована.

В следующем окне добавляются описание страницы и ключевые слова, Title и файлы robots — эти данные влияют на поисковую оптимизацию сайта.

Далее откроется окно редактирования страницы. Здесь размещают контент — текст, видео, фотографии, а также встроенные решения, сервисы и инструменты.

Чтобы открыть встроенные компоненты и сниппеты Битрикса, нажмите на указатель сбоку. Когда панель сниппетов скрыта, указатель находится там, куда направлена стрелка на скриншоте.

Разработчик будет работать с кодом PHP. Чтобы перейти в код, нажмите на иконку слева и выберите соответствующий вид редактора, как показано на скриншоте.

Мы разобрали базовые навыки работы с 1С‑Битрикс. Теперь рассмотрим, какие ошибки чаще всего допускают новички и почему.

• Переоценивать книги. Книга не даст обратной связи, не ответит на вопросы, не решит проблему.
• Думать, что одно решение подходит под разные задачи. Не все решения Битрикса стоит принимать как верные, всегда нужно учитывать нюансы конкретного интернет-магазина. В документации указано не всё, понимание этих нюансов приходит только с опытом.
• Терять время на неэффективное обучение. Чтобы стать хорошим разработчиком без посторонней помощи, потребуется 6–7 лет и очень много удачи.

Конструкторов сайтов огромное количество. Особенно, если мы говорим о зарубежных рынках. Что касается российского сегмента, то одной из популярных платформ остается Bitrix 24. Сегодня расскажем, кому она больше всего подойдет и как самостоятельно создать сайт на Битрикс 24.

На самом деле платформа хорошо подходит для бизнеса разных масштабов и отраслей. Битрикс хорошо подходит для любой организации, которой нужен инструмент, способный расти и меняться.  Помимо того, что на площадке Битрикс можно создавать сайты, вам также будет доступна CRM-система и другие функции для эффективной работы. 

Как создать интернет-магазин на Битрикс?

Есть несколько тарифов. Мы рассмотрим подробнее функционал бесплатного тарифа.

Введите email и нажмите «Начать бесплатно». Далее вы увидите следующую картинку:

Подготовительный этап окончен. Перед вами должна появиться рабочая область. Теперь можно приступать непосредственно к созданию сайта.

Битрикс сделал создание интернет-магазина максимально легким для пользователя, правда, придется немного подождать.

Все необходимые функции здесь уже предусмотрены (в том числе, адаптивность для мобильных устройств и так далее). На первом этапе от вас потребуется только заполнить небольшую форму. Данные в ней можно будет потом при необходимости поменять:

Далее платформа покажет, как будут выглядеть карточки товаров.

Чтобы убедиться, что магазин работает корректно, можно создать пробный заказ:

Итак, после этого этапа мы получили готовую платформу магазина. Теперь можно ее настраивать под собственный стиль, загружать товары и так далее.

Дизайн главной страницы

В разделе «Магазины» в меню Битрикса у нас появился вновь созданный магазин. Нажимаем на него.

Здесь мы видим все существующие на данный момент разделы магазина. Начнем с главной.

В разделе редактирование будет возможность изменить изображение, цвет, добавить нужные блоки или удалить существующие, настроить шрифт и так далее.

Наполнение сайта товарами

Как только редактирование главной страницы окончено, нажимаем на наш сайт, чтобы начать работу со следующими разделами.

Рассмотрим, как добавить на сайт товары. Для этого в главном меню Битрикс выбираем созданный магазин и нажимаем на раздел «Товары».

Нажимаем на «Создать товар» и далее появляется раздел, в котором необходимо заполнить данные о товаре, добавить картинки, цену и другую информацию.

Вы можете создавать в этой же карточке вариации товаров. Это пригодится, если, например, у вас есть один и тот же товар, но в нескольких цветах. 

Создание и настройка каталога товаров

Настройка детальной страницы товара

В настройках карточки товара вы можете добавлять блоки и кнопки, менять дизайн, текст и так далее.

Настройка магазина

Для перехода к настройкам магазина нажмите на кнопку:

На вкладке с интернет-магазином у вас также будет доступен раздел CRM-маркетинг. Там вы можете организовать рассылку по клиентам, настроить сбор аудитории по пикселям или подобрать look-alike аудиторию, а также настроить рекламную кампанию (например, с целью повторных продаж).

Создание сайта

Помимо интернет-магазина на Битрикс можно создавать лендинги. Причем на платформе уже есть множество готовых шаблонов различных тематик.

Плюсы и минусы платформы

Начнем с минусов:

Вывод

Платформа Битрикс24 по своим возможностям является отличным вариантом для создания сайта. Битрикс подходит как для создания корпоративных сайтов, так и для сайтов электронной коммерции – интернет-магазинов. Система постоянно развивается и регулярно обновляется. Ее возможности со временем только расширяются и увеличиваются, в результате платформа хорошо подойдет и для тех компаний, которые планируют в будущем расширять свой бизнес и увеличивать трафик на сайт.

Хотите получать статьи и новости в удобном формате? Подписывайтесь на наш Телеграм-канал

10 октября этого года в Битрикс24 появилось новое обновление — Токио. Поменялся внешний вид карточек, добавили новые функции, но главное — в Битрикс24 появился конструктор сайтов. Про него и пойдет речь в этой статье.

Конструктор сайтов — механизм, который помогает сделать сайт, даже если вы ничего не знаете о программировании и веб-технологиях. Основная идея: есть заранее составленные шаблоны страниц, которые можно менять так, как это нужно. Если чего-то в шаблоне не хватает — добавляем, если лишнее — убираем. Вы «мышкой» перетаскиваете блоки и элементы страницы, меняете цвета и дизайн, пишете свои тексты вместо заготовок. В итоге получаете полноценный сайт, который вам нужен.

В бесплатной версии Битрикс24 это тоже можно делать, но с ограничениями: можно сделать только один сайт и нельзя привязать свой домен. Внутри одного сайта страниц может быть сколько угодно.

Свой домен — адрес вида vashakompaniya.ru. На платных тарифах можно сделать так, чтобы ваши сайты имели вид: nazvanie.vashakompaniya.ru, где nazvanie — название вашего битрикс-сайта. На бесплатном Битриксе это будет так: nazvanie.bitrix24.site. Смысл привязки своего домена в том, чтобы сразу было понятно, что новый сайт относится к вашей компании.

Зачем вам нужен битрикс24 сайт?

Сайты нужны для того, чтобы сообщить людям о том, что вы делаете. При этом неважно, продаете вы щебень вагонами или чините компьютеры на дому — в любом случае вам есть, что сказать клиентам. Наверное, вы и сами замечали, что за новой информацией мы идем в интернет. Точно так же делают ваши клиенты, когда хотят решить свои проблемы. Грубо говоря, если вас нет в сети — о вас не узнают и не придут к вам.

Сайт — это необязательно интернет-магазин или крупный региональный портал, иногда достаточно и одной страницы. Даже она сообщит клиентам, чем вы им можете быть полезны. Если человек ищет, где заказать вкусные торты на свадьбу ручной работы из марципана, а вы как раз про это рассказываете на сайте, он вам позвонит. Сайт — дополнительный и неограниченно мощный источник входящих обращений в компанию.

Если у вас есть свой бизнес или вы оказываете услуги — вам нужен сайт. Без него создать стабильный поток клиентов не получится.

С чего начать?

После обновления Токио у вас два варианта: заказать сайт в интернет-агентстве или сделать его самому сразу из Битрикс24. Рассмотрим второй вариант.

Чтобы сделать свой сайт, вам будут нужны две вещи: свой портал Битрикс24 и доступ в Интернет. Если у вашей компании еще нет портала, зарегистрируйте его. Теперь заходим в свой Битрикс24, в левом главном меню, ближе к концу, будет ссылка на Сайты. По ней попадаем в раздел, где видим кнопку создания сайта и те страницы, которые мы уже сделали. Выбираем Создать сайт.

Система сразу предложит все шаблоны, которые у нее есть. Выбираем тот, который лучше всего всего подходит для наших задач. Их все, кстати, делали те же ребята из компании 1С-Битрикс, которая продает лицензии на профессиональные системы управления сайтами. Поэтому с точки зрения дизайна и внешнего вида они все выглядят сбалансированно и адекватно.

Необязательно выбирать только тот шаблон, которые относится к вашему профилю. Например, если вы занимаетесь архитектурой, но вам понравился шаблон про недвижимость, и вы видите, что он вам подходит больше — выбирайте его.

Остановимся на шаблоне с недвижимостью.

Сразу появляется уже готовый сайт с заготовками текста и шаблонными фотографиями. Наша задача — наполнить страницу своими текстами и изменить фотографии на свои.

Первая страница выглядит пока так:

Теперь пройдем все по порядку, начиная с самого верхнего меню.

Настройки

Мы видим, что находимся в разделе Мои сайты, наш сайт называется Недвижимость и первая страница на нем тоже называется Недвижимость. Все эти названия можно заменить на свои в настройках сайта и страницы.

Дальше идут три переключателя режимов представления. Можно сразу посмотреть, как увидят сайт посетители с планшетами или на телефоне.

Так делают для того, чтобы на всех устройствах сайт полноценно выполнял свои функции и отлично выглядел. Обратите внимание, что переключатель режимов показывает, в каком режиме вы создаете сайт.

Следующий пункт меню — настройки страницы. Значок карандашика означает, что этот текст или значение можно изменять.

Что тут можно сделать:

• изменить название страницы;
• сделать красивую картинку с описанием для соцсетей, чтобы было больше переходов;
• сделать теги и подключить аналитику;
• подключить свою CSS и тонко настроить дизайн сайта.

Последнее — самое крутое. Это значит, что если вам что-то не нравится в шаблонном дизайне или вы хотите, чтобы вид страницы был похож на ваш основной сайт, то это можно сделать. Единственный минус: нужно знать веб-программирование и CSS или обратиться к специалистам, они сделают, как нужно.

По большому счету, этих настроек достаточно, чтобы сделать сайт таким, как вам хочется. И в этом особенность Битрикс.сайтов — работать становится проще.

Посмотрим теперь настройки самого сайта (Действия → Настроить сайт):

И вот здесь можно донастроить все остальное: аналитику, настройки робота, подключить виджет обратной связи (уже связанный с вашей CRM) и ключи от карт Google, и выбрать вид конкретной страницы.

Редактирование страниц

В чем основная функция конструктора сайтов? В том, чтобы дать человеку возможность сделать все, что он хочет, со своим сайтом. И в Битрикс24.Сайтах это есть.

Хотите поменять цвет фона — пожалуйста, не нужен целый раздел — убирайте. Это значит, что все, что не нравится на сайте, можно убрать, а все, что нужно — оставить или добавить.

Блок — часть сайта, которая решает свою задачу. Есть блоки с фотогалереей, отзывами, примерами, просто текстовые блоки, формы обратной связи и так далее. Блоки не зависят друг от друга и каждый блок настраивается независимо от другого.

В каждом блоке можно:

• менять содержимое;
• менять дизайн;
• менять блоки местами;
• скрывать блоки или удалять их.

Когда наводим мышку на любой блок, видим кнопки управления: добавление блока, режим дизайна и редактуры, кнопки порядка блоков и действий с ними.

Начнем с дизайна.

Видимость блока на устройствах нужна для того, чтобы, например, с компьютера и планшета этот раздел был виден, а с телефона — нет. Это полезно, когда вы знаете, что с телефона блок будет выглядеть некрасиво, мелко или неудобно им будет пользоваться. Чтобы не портить впечатление от всего сайта, такой блок можно показывать тем, кто смотрит сайт на большом экране и скрывать для всех остальных.

Внутренние отступы сдвигают текст выше или ниже — если он закрывает важную часть фотографии. Цвет фона выбираем, если нет фоновой картинки. Если фон — фотография, то изменения цвета фона вы не увидите.

Редактура содержимого. Тут все круто, просто и понятно, прицепиться не к чему. Менять можно практически все.

Любой текст можно форматировать, менять цвет, оформление и стиль.

Даже если это сложный блок с обилием информации, его тоже можно править. Рассмотрим на примере этого блока с карточками:

Посмотрим, что можно изменить или настроить:

Как видим, настраивается каждый элемент отдельной карточки вплоть до выбора того, в каком окне открывать новую страницу. И в этом вся мощь Битрикс24.Сайтов — тонкая настройка каждого элемента. А если что-то не получается в конструкторе сделать так, как хочется, вспоминаем, что есть CSS, где можно прописать любые изменения.

Если в шаблоне нет нужного блока, его можно добавить специальной черной кнопкой. Она всегда стоит под каждым блоком. Разделов на странице может быть сколько угодно, и идти они могут в любом порядке.

Блоки сгруппированы по смыслу, в каждой группе несколько вариантов. Есть из чего выбрать.

Например, мы хотим добавить раздел с нашими преимуществами. Выбираем из большого списка тот, что нам больше всего понравился.

Если нужно, он точно так же настраивается, как и остальные, чтобы все смотрелось в едином стиле.

Что получилось, когда мы добавили новый раздел:

Блоки можно двигать вверх и вниз, нажимая на эти стрелки:

Когда вы полностью наполните страницу дизайном и содержимым, можно посмотреть, как она будет выглядеть в Интернете и сразу опубликовать ее, если выглядит она там отлично. Нужные кнопки — вверху справа.

Если одной страницы мало, создавайте еще. Для этого снова идём в боковой раздел Сайты, выбираем наш сайт и нажимаем Новую страницу.

С ней можно делать все то же самое, что и с первой страницей: наполнять нужным вам текстом и настраивать внешний вид. При этом шаблон можно выбрать другой.

Интеграция с CRM

Здесь все тоже просто: все формы и чаты на сайте уже связаны с вашей CRM.

Когда кто-то напишет вам в чат, закажет звонок или заполнит форму обратной связи — он сразу попадет в вашу базу. Теперь у вас есть его данные и есть все возможности, чтобы с Битрикс24.CRM сделать его своим клиентом.

Посмотрим на примере формы с заказом:

У каждого блока с формой свои настройки:

Можно использовать ваш дизайн формы:

Если выберем этот вариант, форма будет выглядеть точно так же, как у вас на основном сайте:

Можно поменять внешний вид формы и ее поведение:

Что будет, если выберем вариант Скачивание учебника:

Если добавить в настройках сайта отображение виждета обратной связи, это будет выглядеть так (сейчас виджет в правом нижнем углу, но можно поставить в любое другое место):

Посмотрим, что будет, если на него нажать: видны все варианты, как с вами можно связаться. Посетитель выберет то, что ему удобнее, а весь диалог тоже сразу попадет в вашу CRM.

Битрикс.Сайты – потрясающе мощный и бесплатный инструмент для повышения продаж. Начинайте его использовать уже сейчас.

И еще. 

Для тех кто хочет попробовать bitirx24 сайты, но не хочет тратить время и разбираться в том, как правильно их настраивать и оформлять можно просто заполнить форму внизу. Специалисты Веб-Центр помогут вам создать свой битрикс24 сайт.