Уроки Битрикс: Настройка сайта на шаблонах АСПРО
Приветствую, друзья!
Сегодня мы с вами разберём виджет настроек в решениях Аспро. Более детально разберём, как настраивать главную страницу. Как настраивать шаблоны внутренних страниц. Где всё это находится.
Итак, когда мы получаем сайт на руки, неважно, какой используется шаблон. Главное, чтоб это был шаблон из последней линейки. То есть, Аспро: корпоративный сайт 3.0.
Вот сейчас он у вас на экране:
Это могут быть готовые сайты
- Аспро: стройка 2.0.
- Аспро: детский сад и образовательный центр.
- Аспро: медицинский центр 3.0.
- Аспро: максимум.
- Аспро: Лайтшоп.
и другие решения сайтов прошедних трех лет.
Во всех этих решениях есть виджет настроек. В демонстрационной версии он находится здесь, с левой части экрана. И нажимая на него, мы видим выпадающее меню, где можно настраивать сайт по своему усмотрению. Также, здесь присутствует готовый конфигуратор дизайна. То есть, кликнув сюда, можно выбрать какие-то заготовки. Например, тип баннера, чтобы был такой. Здесь тип каких-то блоков главной страницы и так далее…
Но, даже, если мы там не укажем это где-то во время установки сайта, то мы всегда можем обратиться к конфигуратору уже на рабочем сайте и всё это менять. И от наших изменений никаким образом не будет меняться контент, а будет меняться только внешний вид этого контента.
Для начала работы нам нужно традиционно залогиниться в админке. И в левой части экрана, в самом низу, мы видим пункт «Меню Аспро». Нажимаем на него и переходим в пункт «Настройки». Здесь осуществляются все настройки шаблона.
На самом деле, это тоже самое, что и вот этот виджет, только в более детальной версии. При желании мы, конечно, можем этот виджет и включить в публичной части. Здесь есть раздел «Общий» и здесь есть галочка «Переключатель тем».
Если мы её нажмём, то увидим, что в публичной части появится этот виджет. Вот он:
Но, он нам в данном случае не нужен, я его обратно отключаю. И перейдём к основному.
После того, как вы получили сайт, первое, что вы делаете — это как раз, идёте сюда. Вот конкретно в данный раздел. И прямо сверху вниз, вот эти все пункты Меню…
Я не буду в этом видео прям делать обзор на все — вот эти пункты, я не вижу в этом какой-то практической пользы. Но, как бы, общий принцип, я надеюсь, вы поймёте. То есть, мы переходим в раздел и здесь у нас есть всякие варианты настроек:
- Можно выбрать базовый цвет сайта, просто вот кликнув куда-то…
- Можно сразу здесь загрузить логотип. Нажимаем гамбургер и загружаем логотип с компьютера.
Единственное, что я рекомендую, это обращать внимание на размер файла, то есть, на размер картинки. Потому, что я вот замечал многие из наших клиентов, загружают картинку с разрешением 3000 х 1500. Но, это для логотипа слишком. Она ужмётся на главной странице. Но сам файл такого размера весит 2 МБ, например, это абсолютно ни к чему. Уменьшаете картинку и её загружаете сюда.
Тоже самое делаете, такой же идентичный вариант светлого, например, логотипа.
Для чего загружать светлый вариант логотипа?
Очень просто. Я открою наш сайт для примера. И вот мы видим здесь наш логотип. Тёмный.
Но, когда мы перелистываем баннер, и баннер становится тёмный, то логотип автоматически становится светлым. То есть, сайт так запрограммирован, что в зависимости от того, какой стоит тип баннера, сайт подбирает нужный логотип.
Потому что, если на тёмном будет тёмное, то ничего не будет видно. Соответственно, меняете.
- Добавляете логотип;
- Добавляете фавиконку;
- Добавляете, здесь же можно сразу поменять номер телефона на ваш;
- Поставить ссылки на соцсети. Тут тоже особо ничего хитрого нет. Если нужно, можете поставить вот там номер Viber, номер WhatsApp сюда добавить. Вот прямо тут, как по шаблону.
- Выбрать вариант дизайна страницы контактов. Сейчас здесь выбрана компактная картинка, карта. Один офис. Но, здесь можно выбрать варианты, если допустим, у вас несколько офисов.
Выглядеть это будет приблизительно вот таким образом:
Два офиса
И вот они на карте расположены. Всё это делается прямо здесь. Также здесь мы имеем возможность настроить Яндекс. Карту сразу же, чтобы у нас здесь правильно координаты отображались. То есть нажимаем, нажимаем ещё раз и нажимаем «Изменить».
И здесь на карте уже выбираем наш адрес. Ничего сложного здесь нет.
Далее указываем:
- Адрес компании, также нажимаем здесь.
- E-mail компании
- Расписание, график работы
- И если там какое-то описание нужно, можно также сюда добавить.
- Здесь же можно добавить файл со счётчиками для Яндекса. Метрики или Google Analytics.
- Неважно, куда вы добавите сюда или сюда, будет работать.
- И если у вас настроены цели, поставить галочку.
Всё.
После того, как вы здесь базово вот это всё заполните, нажимаете «Применить» и автоматически у вас всё на сайте меняется.
Далее идёте в следующий раздел. Смотрите. Здесь больше идёт про оформление:
- Вид кнопок (круглый / не круглый)
- Текст кнопок (в нижнем регистре / в верхнем регистре).
- Можно настроить ширину сайта.
- Можно выбрать разные шрифты здесь
- Можно выбрать уровень вложенности меню для интернет-магазинов. Это в принципе, для всех важно, потому что не всем нужно допустим, «Глубокое меню». У нас здесь выбран самый короткий тип «Меню»:
А допустим, интернет-магазину, тут уже уровень вложенности нужен побольше. Допустим, здесь: раз, два, три, а тут ещё дополнительно выпадает.
Всё это настраивается здесь буквально, в один клик.
Что у нас здесь ещё есть из интересного? В основном мы видим визуальные какие-то настройки.
- Хлебные крошки, чтобы как они выглядели: где заголовок, а где сами крошки.
- Стиль заголовков.
Ну и какие-то системные:
- Допустим, использовать ленивую загрузку, чтобы побыстрее работал сайт.
Далее из важных. Когда вы обязательные и общие настройки поставили, как вам нужно. Вот это всё можно в принципе, пропустить и перейти в пункт «Главная». И здесь мы настраиваем именно главную страницу. То есть, вот эти все блоки, баннер, тип баннера, вид баннера. Вот эти тизеры, вот эти блоки. В нашем случае здесь «Преподаватели», но это могут быть, например, и какие-нибудь специалисты – врачи, как в данном случае.
Весь внешний вид главной страницы, он настраивается именно здесь.
Что здесь интересно?
Во-первых, здесь можно вот таким образом переносить нужные блоки, чтобы они сразу же на сайте вставали в нужном порядке. Например, я возьму сейчас «Сотрудников» и их под «баннер» перемещу. Нажму кнопочку «Применить». И что мы с вами увидим? У нас сразу «Преподаватели» стали под «баннерами».
Нам это не нужно, мы их сейчас опять вернём на место.
Дальше, что здесь интересно?
Проматываем вниз, здесь мы устанавливаем отступы. Что такое отступы? Сейчас на примере этих тизеров я покажу.
Вот у нас есть эти «Тизеры». И верхний отступ стоит «40», нижний «40».
Здесь можно выбрать «Тип»: текст, картинки, иконки. У нас стоит «Текст». Верхний отступ «40», а если я поставлю «ноль», обновлю страницу. У нас начинает прилипать это всё дело к баннеру.
Если я поставлю, например, «80», то наоборот, зазор увеличивается.
То есть, таким образом, мы здесь конфигурируем внешний вид под себя. И вы можете не бояться здесь что-то тыкать, потому что, сайт, если что-то вы не туда ткнёте от этого не сломается.
Я просто рекомендую, что-то сделали, какие-то изменения. Нажали кнопочку «Применить». В соседнем окне обновили главную страницу и посмотрели, как это теперь выглядит. Что-то не понравилось, вернулись, поменяли настройки и опять проверили.
Теперь идём дальше. На этой же странице в самом низу, когда мы отматываем, здесь у нас идёт «Конфигуратор дизайна отдельных элементов». Допустим, баннер. Сейчас у нас стоит «широкий», с наездом на шапку баннер. Широкий текст. По высоте здесь можно также выбрать, чтобы был высокий. «Обычный», ну, давайте, «высокий» вам покажу.
Обновляем. Теперь баннер занимает практически всю область экрана. Возвращаемся, ставим «обычный». Ну и соответственно, сам вид, сам дизайн баннеров здесь меняется.
То же самое касается и всех последующих элементов:
Тизеры — вот они меняются здесь;
Баннеры с фоном. Баннеры с фоном - в нашем случае, вот эти картинки.
Вот у нас выбран вот такой тип этих баннеров с фоном.
Баннеры с текстом - у нас отключены. И всё остальное.
Здесь надо сидеть, тут всё сразу не покажешь. Плюс, под какие-то конкретные сайты, под конкретные задачи выбирается определённая конфигурация всего. Но, идея такая. Весь внешний вид каких-то элементов главной страницы здесь настраивается и делать это не сложно. Просто тыкнул, посмотрел, что получилось и либо оставил, либо опять что-то поменял. Ну и соответственно, когда вы начинаете настраивать сайт свой, я рекомендую не торопиться его сразу заполнять каким-то уже своим контентом. За исключением там телефона, адреса, e-mail — вот этих базовых вещей, о которых мы поговорили в начале.
А сначала именно понять для себя, как он будет у вас выглядеть. Как будет выглядеть главная страница, её внешний вид.
Почему это важно сделать?
Потому что, в зависимости от того, какую конфигурацию дизайна главной страницы вы для себя выберете, от этого зависит какие по размеру вам нужно будет подбирать картинки для баннеров, картинки для этих блоков, ну и для всех последующих каких-то
блоков. Поэтому, лучше сначала на демонстрационной версии потренироваться. Выстроить себе, настроить понятный внешний вид, а потом под него уже подгонять непосредственно картинки, которые находятся в разделе «Контент», как правило. Большая часть и здесь опять же, раздел «Контент» — вот здесь вот всё это есть.
Можете редактировать через режим «Правки». Изменить элемент. Открываете картинки. Сюда заливается картинка. Можно делать таким образом.
Либо в админке. Здесь у нас «Реклама».
И вот здесь баннеры. Баннеры - такие, баннеры - сякие и так далее… Где-то там у нас тизеры ещё есть. Ну, опять же, это тоже всё можно редактировать и здесь. То есть, навели
«Изменить элемент», поменяли здесь какое-то значение. Нажали «Сохранить». У нас всё поменялось.
Ну и коротенько пройдём по остальным пунктам «Меню».
Здесь есть пункт «Шапка». Мы здесь просто выбираем внешний вид «шапки». Шапка — это вот эта вся область. Вот эта область. Сейчас у нас стоит «Тип» 3.
Мы можем допустим, выбрать «Тип» 4. Нажмём «Применить», обновим страницу. Что-то как-то ничего особо не поменялось. Они, наверное, просто очень похожи. Давайте, добавим отступы. Сейчас поменяется. Да. Вот у нас появились отступы. В данном разделе настраиваете внешний вид шапки и кнопок. То есть, «Подать заявку», что-то ещё — вот они здесь все прямо написаны. Что мы хотим здесь отображать — вот этими галочками ставите, что мы не хотим отображать.
Далее «Верхнее меню». Верхнее меню — это касается вот этого меню.
Опять же, здесь мы видим варианты настроек. Но, в основном, они все касаются внешнего вида, дизайна. Опять же, посмотрели, что понравилось выбрали. Нажали «Применить».
Регионы. Вот это очень такой, интересный раздел. И интересен он тем, что, как правило, после установки сайта, он всегда включён. А если он включён, то поменяв где-то здесь, где мы в начале с вами говорили, телефоны, у вас всё равно будут какие-то непонятные телефоны отображаться.
Это сделано потому, что для каждого региона можно задавать свои собственные контактные данные. Поэтому, если вам вот это не актуально. А это по опыту нашей работы в 99,9% случаев не актуально, то вот эту галочку здесь снимаете. И всё у вас нормально отображается.
Во всякие такие разделы «Адреса страниц» лазить в принципе, не обязательно, если вас всё устраивает.
- «Корзина». Опять же, если не нужна, галочку снимаем.
- «Каталог». Ну, тоже в основном, тут всё про внешний вид.
- То есть, тот же принцип, что и «Главная страница», что и остальное.
- Тоже самое касается страницы «Услуги».
- Тоже самое «Проекты».
- Тоже самое «Тарифы».
- Тоже самое «Галерея».
- «Разделы» тоже самое – внешний вид.
В основном, все настройки внешнего вида.
Подвал;
Боковые иконки. Боковые иконки - у нас отключены. Это вот такие вот тут иконки. «Оставить отзыв», «Задать вопрос».
Опять же, галочку поставили – у вас включились.
Баннеры — это рекламные баннеры. То есть, это не вот эти большие баннеры, а это, например, вы когда переходите на какую-нибудь страницу и здесь такая растяжка у вас. Вот это эти самые баннеры.
Формы. Здесь опять же, можно переименовать какие-то названия форм. Можно добавить какие-нибудь атрибуты. Ну нам в данном случае это не нужно.
И провести дополнительные настройки.
Настройки для «мобильной версии». И «Личный кабинет». Опять же, в большинстве случаев, особенно на корпоративных сайтах он не нужен. На интернет-магазинах он, конечно, же нужен.
Так что друзья, если кратко, не вдаваясь прям совсем в глубины — это всё. Здесь больше особо смотреть нечего. Но, тем не менее, это очень важный раздел для того, чтобы вы могли вообще ориентироваться в своём новом сайте. И имели возможность быстро настроить, пусть не весь сайт целиком, но хотя бы какие-то основные его параметры. При этом не боясь что-то там поломать.
На этом у меня всё.
Благодарю вас за внимание.
