0  /  18

Космос: корпоративный сайт + лендинг

Редактирование пунктов главного меню

Что бы отредактировать пункты меню, необходимо в панели администратора нажать кнопку «меню» -> «редактировать верхнее меню»

редактирование меню битрикс

Изменение логотипа

Для изменения логотипа, Вам следует включить режим правки.
Наведите курсор мыши на логотип и кликните по всплывшему пункту меню Редактировать область как html:

Редактировать логотип решения Космос

Откроется окно редактирования включаемой области

Редактировать лого. Включаемая область.

Удалите имеющуюся картинку. Нажмите на значек изображение2015.02.24-15.45.46.jpg на панели инструментов. В открывшемся окне нужно выбрать путь к Вашему логотипу.

2015.02.24-15.47.48.jpg

Кликните на значек 2015.02.24-16.29.12.jpgрядом с полем ввода Источник изображения. Откроется медиабиблиотека, из которой вы можете выбрать логотип.

Выбор лого

Если в медиабиблиотеку еще не добавлен Ваш логотип, кликтите на 2015.02.24-16.36.57.jpg, введите название коллекции, затем нажмите на2015.02.24-16.33.39.jpgи выберете файл с необходимой картинкой. Логотип появился в медиабиблиотеке. Нажмите на кнопку Выбрать.
Выбранный лого Бутик

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

Измененный логотип 


Использование горизонтального подменю

Базовая SEO оптимизация решения Битрикс

Redirect 301 на главное зеркало

Каждый сайт имеет два адреса - с приставкой www и без нее. Чтобы поисковики не воспринимали эти адреса как два разных сайта с одинаковым контентом, необходимо выбрать из них главный и настроить редирект 301 на него, со второго. Тогда оба сайта поисковиками будут восприниматься как единое целое и не будет играть роли, на какой из них ссылаются сторонние сайты — редирект позволит автоматически перекидывать пользователя на нужный адрес.
Для этого необходимо добавить строки в файл .htaccess в корне сайта.
Если Вы хотите сделать главным сайт без www
RewriteEngine On
RewriteBase /
RewriteCond %{HTTP_HOST} ^www\.(.*)$ [NC]
RewriteRule ^(.*)$ http://%1/$1 [R=301,L]
Если Вы хотите сделать главный сайт с www
RewriteEngine On
RewriteCond %{HTTP_HOST} !^www\. [NC]
RewriteRule ^(.*)$ http://www.%{HTTP_HOST}/$1 [R=301,L]

Как изменить иконки в меню

Интеграция с Битрикс24

Как добавить метрику и/или онлайн-чат

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


Установка метрики на сайт битрикс


Добавление полей в форму обратной связи


 

 Для создания своих полей в форме, Вам необходимо перейти в настройки инфоблока "Информация" -> "Заявки с сайта".

Созданий полей в форме связи битрикс

Далее на вкладке свойства можем создать свое свойство, например "Количество" для формы "заказать товар".

Свойства инфоблока

Для создания свойства необходимо ввести название тип и символьный  код на англ языке.

Новое свойство числовое Битрикс

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

Открыть в новой вкладке

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

Настройки компонента Битрикс

В открывшихся настройках выбираем поля для отображения

Свойства для отображения

Структура сайта

О Компании

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

После чего навести курсор мыши на слайдер и появятся кнопки для добавления/редактирования элементов слайдера.

Редактирование слайдера Битрикс

Сотрудники

Страница со списком сотрудников: 
Страница Сотрудники Битрикс
Для добавления или изменения списка сотрудников необходимо в панели администратора перейти в инфоблок "О Компании" -> "Сотрудники". Там можно создать разделы с сотрудниками, задать описание раздела и добавить новых сотрудников.

Редактирование списка сотрудников Битрикс


Сертификаты

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

Список сертификатов Битрикс редактирование

Для редактирования описания, необходимо перейти в панель администратора и в настройках инфоблока задать описание:

Изменение описания инфоблока Битрикс

Изменение e-mail для "заказать звонок"

Нажмите на кнопку "Заказать звонок" правой кнопкой мыши, там выберите пункт открыть в новой вкладке.

Открыть в новой вкладке

Включите режим правки в правом верхнем углу.

Включить режим правки Битрикс

Зайдите в настройки компонента нажав на шестеренку.

Зайти в настройки компонента


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

Указать почту для обратного звонка

Структура дизайна

Структура страницы:

  • Header - одинаковый для всего сайта
  • Page Header - можно менять для каждой страницы. Предназначен для размещения слайдера на любой странице, либо крупного изображения.
  • Promo header - можно менять для каждой страницы. Предназначен для размещения промо полосы с основной информацией.
  • Page Footer - можно менять для каждой страницы. Предназначен для размещения блоков Call To Action (призыв к действию), размещения карты, или любой другой информации.
  • Footer - одинаковый для всего сайта
Структура страницы

Шапка сайта (header)

В решении "Космос" есть множество вариантов отображения шапки сайта.
К изменениям шапки относится изменение отображения самой шапки, а так же отображение меню сайта.

Что бы посмотреть как они смотрятся, перейдите на демо сайт: http://cosmos.marsdigital.ru/corp/
И слева Вы можете нажать "шестеренку" и изменить шапку на большую или маленькую.

Большая шапка


Большая шапка Космос

Маленькая шапка

Маленькая шапка Космос



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



Меню в цвет темы космос

Меню в цвет темы космос



Меню с подзаголовками

Меню с подзаголовками



Меню с большими иконками

Меню с большими иконками



Меню с выделением рамкой

Меню с выделением рамкой



 Меню с выделением фона

Меню с выделением фона

 


Меню с иконками

Меню с иконками



Тёмное меню

Тёмное меню


Изменение промо-полосы (Page Promo)

Вы можете изменить промо полосу. И сделать её любой по своему желанию.
Примеры отображения промо-полосы:

Промо полоса "По центру"

Промо полоса. По центру.

Промо полоса "в 4 колонки с иконками"

Промо полоса. 4 колонки

Тёмная промо полоса

Темная промо полоса. Выравнивание слева.

Для редактирования промо полосы, Вам следует включить режим правки.

Наведите курсор мыши на промо область и кликните по всплывшему пункту меню Изменить область:

Редактировать промо область.

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

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

Код для разных типов промо блоков.

Промо полоса "По центру"

<div class="promo promo-light promo-full landing-promo center">
	<div class="container clearfix">
		<h3>Информационно-консалтинговое агентство "Космос"</h3>
		Оказываем своим клиентам квалифицированную помощь с 2008 года
	</div>
</div>
	

Промо полоса "в 4 колонки с иконками"

<div class="promo promo-light promo-full landing-promo">
	<div class="container clearfix">

		<div class="col_one_fourth nobottommargin">
			<div class="feature-box fbox-plain fbox-dark fbox-small">
				<div class="fbox-icon">
					<i class="icon-thumbs-up2"></i>
				</div>
				<h3>Клиенты довольны</h3>
				<p class="notopmargin">Каждый клиент остался доволен на все 100%</p>
			</div>
		</div>

		<div class="col_one_fourth nobottommargin">
			<div class="feature-box fbox-plain fbox-dark fbox-small">
				<div class="fbox-icon">
					<i class="icon-credit-cards"></i>
				</div>
				<h3>Рассрочка платежей</h3>
				<p class="notopmargin">Идем каждому клиенту навстречу, Специальные предложения</p>
			</div>
		</div>

		<div class="col_one_fourth nobottommargin">
			<div class="feature-box fbox-plain fbox-dark fbox-small">
				<div class="fbox-icon">
					<i class="icon-truck2"></i>
				</div>
				<h3>Вывоз мусора</h3>
				<p class="notopmargin">Мы вывозим мусор после всех работ</p>
			</div>
		</div>

		<div class="col_one_fourth nobottommargin col_last">
			<div class="feature-box fbox-plain fbox-dark fbox-small">
				<div class="fbox-icon">
					<i class="icon-undo"></i>
				</div>
				<h3>Сотрудничество</h3>
				<p class="notopmargin">Делаем что бы каждый клиент возвращался</p>
			</div>
		</div>

	</div>
</div>
	

Что бы сделать полосу тёмной, достаточно добавить класс "promo-dark" к самому верхнему тегу "div"

Изменение вида услуг, убираем разделы, меню из элементов



Код для вставки в .left_menu_ext.php
<?
if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();

global $APPLICATION;

if(CModule::IncludeModule("iblock"))
{

$IBLOCK_ID = 11;        //здесь необходимо указать ID Вашего инфоблока

$arOrder = Array("SORT"=>"ASC");   
$arSelect = Array("ID", "NAME", "IBLOCK_ID", "DETAIL_PAGE_URL");
$arFilter = Array("IBLOCK_ID"=>$IBLOCK_ID, "ACTIVE"=>"Y");
$res = CIBlockElement::GetList($arOrder, $arFilter, false, false, $arSelect);

    while($ob = $res->GetNextElement())
    {
    $arFields = $ob->GetFields();            
    $aMenuLinksExt[] = Array(
                $arFields['NAME'],
                $arFields['DETAIL_PAGE_URL'],
                Array(),
                Array(),
                ""
                );
    
    }       
    
}   

$aMenuLinks = array_merge($aMenuLinksExt, $aMenuLinks);
?>