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

Конструктор сайтов на Битрикс24

Работа с конструктором сайтов в Битрикс24 начинается с выбора подходящего шаблона. Чтобы сделать это, потребуется:

1. В левом меню выбрать пункт «Сайты и Магазины», а затем нажать на зелёную кнопку «Создать (сайт)».




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




3. Следует обращать внимание, чтобы в левом нижнем углу миниатюры была зеленая плашка «Бесплатно». Это ускорит создание сайта компании в Битрикс24. Затем потребуется щёлкнуть по карточке выбранного шаблона.

4. В браузере по умолчанию откроется предварительный просмотр сайта, а в Битрикс24 – окно ожидания. В нем надо нажать на «Создать сайт».

5. Когда шаблон установится, появится модуль конструктора сайтов.

В правой части конструктора с помощью эмулятора можно увидеть, как будет примерно выглядеть сайт на разных мобильных устройствах, например, iPhone 14 Pro или Galaxy Note10. Разработчики конструктора Битрикс24 учитывают широкую распространённость смартфонов и предлагают создавать страницы, оптимизированные для всех устройств. Всплывающее окно позволяет взаимодействовать с мобильной версией сайта. Если необходимо, панель можно убрать кликом по кнопке с чекбоксом.

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

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

• главная;

• сведения о компании и сотрудниках;

• список услуг;

• форма заказа услуг.

Блоки сайта могут иметь индивидуальный фон и форматирование текста.

При наведении мыши на любой блок с левой стороны появятся кнопки для доступа к изменению дизайна, редактированию и созданию суперблока (добавление дополнительных элементов). 

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

В любой момент можно отменять и возвращать правки, а также визуализировать изменения в браузере по умолчанию. Для этого следует пользоваться кнопками на самом верхнем тулбаре. Кроме того, с помощью данной панели можно переключить редактор в режим отображения «На планшете» или «На смартфоне» (модель устройства в этом случае выбрать нельзя), а также изменить название сайта или выйти из редактора в основной интерфейс Битрикс24. 

Конструктор сайтов Битрикс24 обладает такими преимуществами, как:

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

• адаптация страниц под смартфоны и планшеты;

• возможность создания многостраничных сайтов;

• интеграция с сервисами Битрикса;

• виджет для связи с потенциальными клиентами (все сведения о них автоматически сохраняются в CRM-карточке);

• заголовок, описание и метаданные оптимизированы для продвижения;

• бесплатное доменное имя для публикации сайта.

Ссылку на готовый сайт можно разместить в карточке компании на «Яндекс.Картах», «Авито» или на странице (сообществе) в социальных сетях, чтобы клиентам было легче связаться с продавцом.

Как создать одностраничный сайт в Битрикс24

Такой сайт лучше всего подойдет для тех, кто начинает развивать свой бизнес и ищет хороший способ коммуникации с клиентами. На одной странице можно разместить список предлагаемых товаров и услуг, добавить адрес и контактные данные, а также рассказать о преимуществах своей конторы (почему клиентам стоит обращаться именно туда). Все эти возможности помогает реализовать конструктор Битрикс24.Сайтов.

Создание одностраничного сайта будет рассмотрено на примере корпоративного портала для фирмы, занимающейся оказанием IT-услуг (обслуживание ПК и т. п.). Порядок действий:

1. Выбрать соответствующий бесплатный шаблон, как описано выше. Нажать на «Создать сайт».

2. Заменить Company24 на название своей конторы. Для этого просто щёлкнуть по надписи и ввести желаемый текст. 




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




4. Прокрутить страницу немного вниз и кратко описать реальные выгоды от обращения клиента в эту фирму. 




5. Если заголовок блока «О нас» был изменен, то также следует поправить пункт главного меню сайта, чтобы не вводить посетителя в заблуждение. Для этого поднять страницу, навести курсор, чтобы надпись «О нас» стала видна среди «шахматного» фона, и кликнуть по ней. Во всплывшем слева окне, в поле «Пункт меню», кратко указать новое название, например, «Почему к нам?». Затем нажать на «Сохранить».




6. Столбцы, не подходящие к профилю конторы, можно удалить. Для этого навести мышь на список выгод и нажать именно на кнопку «Редактировать», которая под надписью «Почему…». 

Затем во всплывшем окне кликнуть на красный крестик в правой части удаляемой карточки.

1. Похожим образом следует поправить нижестоящий блок «Когда нужны… услуги».

2. В следующем блоке прописать, какие услуги реально оказывает компания. Кроме того, можно изменить картинку над текстом, чтобы они больше подходили друг другу. Для этого следует щелкнуть по ней, затем – на кнопку «Загрузить» и выбрать источник (Unsplash, Гугл-Картинки или хранилище компьютера). 




3. Если компьютерная мастерская не планирует предоставлять скидки, то соответствующий блок можно удалить.

4. В блоке «Наша команда» шаблонные фото «западных» мастеров следует поменять на снимки реальных сотрудников, работающих в фирме, для которой создается сайт. Чтобы это сделать, надо кликнуть по нижней части картинки и заменить её (см. шаг 8).

5. А для обновления подписи на фото надо щёлкнуть по ней, наведя мышь на середину снимка, и ввести должность, имя, фамилию и краткий девиз. Это повысит доверие потенциальных клиентов.

6. В блок с отзывами надо добавлять реальные отклики клиентов, которые поступили по форме обратной связи. Перед публикацией сайта заполнитель надо удалить. 




7. В подвале сайта следует обязательно указать почтовый адрес компьютерной фирмы, а также все актуальные контактные данные, так как в этот раздел клиенты попадают по нажатиям кнопок «Заказать» в промежуточных блоках. 

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

«Суперблок» для усовершенствования дизайна

Режим «суперблока» позволяет добавлять на сайты дополнительные элементы для усовершенствования страниц, например, кнопки и подписи. Эта опция предоставляется на всех платных тарифах. Для добавления суперблока потребуется:

1. Нажать на соответствующую кнопку на левой верхней грани обычного блока.

2. Найти элемент, под которым надо поместить суперблок, и нажать на кнопку добавления.

3. Выбрать объект из списка и поместить его на страницу.

4. Сохранить изменения.

После этого текстовые объекты можно отформатировать, а для кнопок – назначить действия. Так как режим «суперблока» в Битриксе находится в разработке, не все элементы из этой категории доступны для редактирования, например, встраиваемый видеоплеер.

Многостраничный сайт в Битрикс24

По мере развития бизнеса рано или поздно возникнет необходимость обнародовать список предоставляемых услуг с описанием и ценами. Для решения этой задачи целесообразно создать новую страницу на Битрикс24.Сайте и связать её с главной. Порядок действий:

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

2. Установить тот же шаблон, что и для главной страницы.

3. Добавить в подвал страницы контактные данные.

4. Поменять поле для заголовка и само название страницы. Затем нажать на «Добавить блок».




5. Во всплывшем меню выбрать тип «Колонки», а затем – «Список возможностей в 2 колонки с иконками». Такой формат отлично подходит для размещения списка услуг. 




6. После добавления колонки заполнить список предоставляемых услуг.

7. Чтобы текст под заглавиями хорошо читался, стандартный цвет описаний надо изменить. Для этого во всплывшей панели редактора нажать на «Дизайн». Затем выбрать подходящее сочетание цветов и закрыть окно настроек. 

Настройка структуры страниц и меню

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

1. Нажать на кнопку «Редактировать» (см. скрин выше).

2. Щелкнуть по значку карандаша напротив нужного пункта.

3. В появившемся разделе кликнуть на «Изменить».

4. Выбрать значок из представленных бесплатных вариантов. Например, с описанием услуги по установке Windows будет отлично сочетаться иконка окна из категории «Мебель» пакета Simple Icon Pack. Затем последовательно нажать на «Выбрать» и «Сохранить».




5. Точно так же следует исправить значки в остальных карточках.

В результате прайс-лист компьютерных услуг может выглядеть примерно так. 

Затем потребуется поправить ссылку на кнопке «Подробнее», а также убрать все лишние блоки и пункты меню, не относящиеся к списку услуг. Для этого используется всплывающая кнопка со значком корзины.

В меню стоит оставить пункты, ведущие на главную страницу и список услуг. Якорь последнего блока можно узнать и скопировать, нажав на «Редактировать». После этого надо щелкнуть по кнопке «Подробнее» и вставить ссылку в соответствующее поле.

Еще один этап создания многостраничного сайта – это дублирование ссылки на главную страницу на логотипе. Порядок действий:

1. Нажать на логотип компании слева в шапке.

2. На боковой панели нажать на «Выбор действия».

3. Указать на «Перейти на страницу».

4. Щелкнуть в списке на главную страницу сайта.

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

Как привязать доменное имя сайта в Битрикс24

Каждому новому сайту в «Битриксе» дается безликое доменное имя наподобие b24-a1b2c3.bitrix24site.ru. Вместо a1b2c3 может быть случайная комбинация латинских букв и цифр.

Чтобы сайт стал более привлекательным, можно привязать свой адрес, купленный у подходящего регистратора, например, Reg.Ru. Для этого потребуется:

1. Нажать на значок карандаша напротив старого адреса в списке Битрикс24.Сайтов.

2. В открывшемся окне выбрать пункт «Свой домен».

3. Указать URL-адрес (например, bagovnet32.net) в соответствующем поле.

После этого чуть ниже появятся служебные записи типа A и CNAME. Их надо прописать у регистратора доменов, чтобы связать сайт на Битриксе с конкретным адресом.

Настройка DNS

Для добавления ДНС-записи на примере регистратора «Рег.Ру» потребуется:

1. Не закрывая Битрикс, перейти в личный кабинет Reg.ru.

2. Открыть раздел «Домены» и нажать на нужную запись.

3. В открывшемся блоке кликнуть на «Изменить».

4. Удалить лишние записи.

5. В поле для A-записи прописать единый IP 185.137.235.2 и символ @ в поле для субдомена, если последнего нет.

6. В поле для CNAME прописать lb.bitrix24site.ru в поле для канонического имени и www – в поле субдомена.

7. Сохранить изменения на Reg.Ru. 

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

Заключение

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