  |
- Тип – программа создания сайтов.
- Купить WebSite X5 Evo (скидка 20%).
- Купить WebSite X5 Pro (скидка 20%).
- Кликабельный телефон.
- Где программа хранит проекты.
- Вставка презентаций и PDF на страницу.
- Как подобрать значение ширины сайта для большинства мониторов.
- Куда вставить код лайвинтернет счётчика.
- Как создать меню с выпадающими подменю.
- Как делать абзацы в тексте.
- Как отключить изменение цвета текста ссылки.
- Как сократить кол-во полей при заказе.
- Как изменить междустрочное расстояние.
- Как в почтовой форме сделать прикрепление файла.
- Как создать меню в подвале.
- Виджет погоды.
В предыдущей статье «Работа в Website X5. Уроки (часть 3)» мы продолжили рассмотрение ответов на часто задаваемые вопросы по конструктору Website X5. В этой части будет раскрыта ещё одна порция «технических моментов», своего рода инструкция.
При рассмотрении практических аспектов будет применяться последняя, на момент написания статьи (02.11.2016), русскоязычная версия Incomedia Website X5 Evolution 13.0.1.16 (x64).
Кликабельный телефон
Разместим в шапке сайта телефон компании. Причём, если посетитель зашёл на сайт с мобильного телефона и нажал на номер телефона в шапке сайта, начнётся набор этого номера телефона. Это срабатывает не на всех телефонах (зависит от модели, версии операционной системы и браузера). Если нажать на подобный номер на компьютере, где установлен Skype (и специальный плагин браузера), то начнётся набор номера телефона в Skype. Для создания подобного номера будем использовать URL-схему «tel».
В Website X5 16 специально для этого был добавлен новый тип ссылки/действия.
Для этого на втором шаге создания сайта в Шаблон – Персонализация – Контент шапки и подвала разместите объект HTML-код и в него добавьте следующий код:
<a href="tel:+380951234567">+38 095 123 45 67</ a>
Где «+380951234567» – номер телефона в международном формате.
Обратите внимание, возможно понадобится изменить стиль ссылки в соответствии с дизайном Вашего сайта. Как вариант, можно изменить ссылку так:
<a href="tel:+380951234567" class="telefon">+38 095 123 45 67</ a>
Где «telefon» – стиль оформления ссылки.
А во вкладке Эксперт (в настройках объекта HTML-код) добавить стиль для оформления ссылки (рисунок ниже). Например, (делает ссылку белой и без подчёркивания):
.telefon {
color: #fff;
text-decoration: none;
}
Где программа хранит проекты
Достаточно часто возникает вопрос, где Incomedia Website X5 Evolution, Professional хранят проекты сайтов. По умолчанию это «Мои документы - Incomedia - WebSite X5 v13 – Evolution – Название проекта». Вместо «WebSite X5 v13 – Evolution» может быть другое имя папки, в зависимости от Вашей версии программы. «Название проекта» – имя Вашего проекта в программе. Вы можете уточнить или изменить путь к папке с проектами, нажав на кнопку Предпочтения в первом окне программы (рисунок ниже).
Обратите внимание, что экспортированные на сайт диски или сайты, выгруженные в интернет, – это не проекты, которые потом можно редактировать. Вам нужна или вся папка «Мои документы - Incomedia - WebSite X5 v13 – Evolution – Название проекта» или экспортированный проект (на 5-м шаге создания сайта Экспорт – Экспортировать проект).
Вставка презентаций и PDF на страницу
Конструктор Website X5 позволяет вставлять на страницу сайта презентации PowerPoint в форматах PPT, PPS, PPTX, PPSX. Для этого добавьте на страницу сайта виджет PPT/PPS File (рисунок ниже). Можно указать как локальный файл у Вас на компьютере, так и ссылку на такой файл в интернете.
Могут возникать ситуации, когда файл не отображается на странице сайта, а просто загружается пользователю на компьютер. В таком случае предлагаю альтернативный способ.
Как подобрать значение ширины сайта для большинства мониторов
Если не знаете, какую лучше подобрать ширину для своего сайта, чтобы он нормально отображался на большинстве устройств Ваших потенциальных пользователей, тут самое лучшее – посмотреть в статистике своего сайта. Например, в Яндес.Метрика эта информация находится в Отчёты – Технологии – Разрешения дисплея (рисунок ниже).
Там сразу увидите, какие расширения экранов популярны на Вашем сайте. Эти данные можно применять для более осмысленной настройки точек остановки в Шаблон – Персонализация – Разрешения и адаптивный дизайн (рисунок ниже).
Если Вы ещё не устанавливали счётчик Яндекс Метрики себе на сайт, то установите, подождите и увидите нужные Вам данные. Когда не знаете, как можно установить себе счётчик Яндекс Метрики, переходите к следующему пункту самоучителя Website X5 «Куда вставить код лайвинтернет счётчика». Добавление счётчиков Яндекс Метрики, LiveInternet и др. аналогичны.
Если Вам нужно определиться с шириной сайта для большинства мониторов, но нет возможности установки кода аналитики, можете перейти на сайт Stat Counter, выбрать в спадающем списке Stat вариант Screen Resolution, можно указать, по каким платформам Вы хотите получить данные (Desktop (компьютеры), Mobile (телефоны), Tablet (планшеты), Console (консоли)), в списке Region укажите нужный Вам регион (страну) и можно переключиться на график тип Bar (рисунок ниже).
Есть ещё сервис Hotlog.ru. Там тоже можно посмотреть статистику (рисунок ниже) по таким данным:
- Браузеры.
- Операционные системы.
- Разрешения экрана.
- Поисковые системы.
- Поисковые запросы.
- Каталоги.
Куда вставить код лайвинтернет счётчика
При регистрации в LiveInternet рекомендую выбрать опцию «в виде двух картинок» (это на первом шаге «Выберите тип счетчика») в нижней части страницы (рисунок ниже).
Вам порекомендуют: «HTML-код счетчика, совмещенного с логотипом (для более точного учета посещаемости код нужно вставить как можно ближе к началу страниц, между тегами <body> и </body>)». Копируем этот код и вставляем его на первом шаге создания сайта в Настройки – Расширенные настройки – Статистика, SEO и код. Вкладка Эксперт, в спадающем списке Пользовательский код выберите Перед закрывающим тегом BODY (рисунок ниже). Можно также выбрать После открытия тега BODY. Первый вариант меньше влияет на скорость, второй даёт более точную статистику. Этот способ одинаков для вставки почти любого счётчика: Яндекс.Метрика, Google Analytics и так далее.
В принципе, это и всё. Но можно ещё вставить код из поля «HTML-код логотипа liveinternet.ru (вставьте его в любое место ваших страниц)» туда, где Вы хотите отображать информер Liveinternet.ru. Если хотите отображать на всех страницах, то вставьте, например, в Шаблон – Персонализация – Контент шапки и подвала, вкладка Футер. Вставляется при помощи объекта HTML-код.
Как создать меню с выпадающими подменю
Для создания многоуровневого меню следует создать соответствующую иерархию уровней и страниц на третьем шаге создания сайта Карта (рисунок ниже).
В результате у Вас получится так, как показано на рисунке ниже.
То есть, добавляя Новый уровень, Вы указываете программе, что страницы, находящиеся внутри этого уровня, будут в подменю. Например, создав уровень «Уровень 1» и добавив внутрь него страницы «Страница 1-1», «Страница 1-2», «Страница 1-3», Вы получите иерархию вложенности, показанную на первом фрагменте рисунка выше. Как видите, меню может быть многоуровневым. То есть, внутри уровня могут быть не только страницы, но и вложенные уровни, внутри которых тоже могут быть страницы. Например, «Уровень 3» и вложенный в него подуровень «Уровень 3-1».
Если у Вас много страниц и подуровней на каком-то уровне, то можно их расположить в несколько столбцов. Например, на рисунке ниже показана иерархия странниц внутри «Уровень 1».
Это подменю на сайте выглядит так, как показано на рисунке ниже. То есть, страницы с №1 по №5 находятся в одном столбце, а с №6 по №10 - в другом.
Этого можно добиться при помощи опций в Шаблон – Персонализация – Раскрывающееся меню. Там есть опции Тип меню и Максимальное количество объектов в столбце (рисунок ниже). Настраивая эти опции, можете добиться показанного выше эффекта.
Как делать абзацы в тексте
Для добавления абзаца к тексту перейдите в Настройки – Расширенные настройки – Статистика, SEO и код, зайдите на вкладку Эксперт, в спадающем списке Пользовательский код выберите, например, Перед закрывающим тегом BODY и вставьте следующий код.
<style>
.text-inner, .imBlogPostBody {
text-indent: 7px;
}
</style>
Где «7px» – это и есть величина абзацного отступа в пикселях. Или можно добавить вышеуказанный CSS-код (без тегов «style») в Вашу «пользовательскую» таблицу стилей и подключить её как внешний файл. Если Вы вносите много правок в стили, то для быстродействия лучше подключать таблицу стилей. Как это сделать уже было рассмотрено в видео-уроках.
Как отключить изменение цвета текста ссылки
Как отключить смену цвета для конкретной ссылки было рассмотрено в этой статье выше в разделе «Кликабельный телефон». Если Вам нужно сделать так, чтобы ссылки на сайте были одного цвета в любом из состояний (активная, реагирующая на курсор мыши, посещённая), то перейдите в Шаблон – Персонализация – Стиль текста и в спадающем меню Элемент страницы поочерёдно выбирайте каждое из состояний ссылки и указывайте одинаковый цвет текста (рисунок ниже).
Как сократить кол-во полей при заказе
Для сокращения\изменения состава и количества полей, которые видит пользователь при оформлении заказа в Вашем интернет-магазине, в Incomedia Website X5 Evolution, Professional перейдите в Настройки – Расширенные настройки – Корзина и на вкладке Данные покупателя скройте все поля, которые не нужно отображать на форме при помощи инструмента Видимое поле, или сделайте поля не обязательными при помощи инструмента Обязательное поле (рисунок ниже).
В принципе, конструктор Website X5 не даст Вам отказаться только от одного поля «Адрес e-mail». Оно обязательно для заполнения. Всё остальное можно отключить. На рисунке ниже показан пример того, как лаконично может выглядеть форма оформления заказ.
Как изменить междустрочное расстояние
Это делается аналогично тому, о чём написано в этой статье выше в разделе «Как делать абзацы в тексте». Код для вставки выглядит так:
<style>
.text-inner, .imBlogPostBody
line-height: 1.5;
}
</style>
Где «1.5» – это множитель, определяющий междустрочное расстояние. Не обязательно этот фрагмент кода вставлять отдельно. Можно дописать «line-height: 1.5;» к существующему.
Как в почтовой форме сделать прикрепление файла
Подробнее о том, как работать с объектом Почтовая форма можете прочесть в статье «Обзор Incomedia WebSite X5 Evolution 10 (часть 5). Создание веб сайтов». Для создания возможности прикрепления файлов в форме пользователями добавьте в форму поле тип Приложенный файл (рисунок ниже).
Настоятельно рекомендую ограничивать расширение файлов, которые можно загружать (в целях безопасности). Можно указать только «zip, rar, jpg, jpeg, png».
Обратите внимание, что на сервере могут существовать ограничения на размер загружаемых файлов. О подобных ограничениях можно поинтересоваться в службе технической поддержки или документации своего хостинг-провайдера.
Также проверьте, чтобы папка, которую Вы указали в Настройки – Расширенные настройки – Управление данными – Папка на сервере с правами на запись (рисунок ниже), была доступна на запись (права доступа «755»).
Как создать меню в подвале
На официальном сайте конструктора Website X5 в подвале сайта есть меню, состоящее из 4-х столбцов. При разрешении экрана 1920х1080 оно выглядит так, как показано на рисунке ниже.
При разрешении экрана 768х1024 оно выглядит так, как показано на рисунке ниже.
При разрешении экрана 360х640 оно выглядит так, как показано на рисунке ниже.
Давайте рассмотрим общую «методику» создания подобного меню с поддержкой адаптивного дизайна.
- В Шаблон – Персонализация – Структура шаблона задайте адекватную высоту подвала (футера) для каждой точки остановки (разрешения экрана). Высота должна быть адекватной содержимому футера (вашему меню)
- В Шаблон – Персонализация – Контент шапки и подвала на вкладке Футер создайте для первой точки остановки меню при помощи объектов Текст. То есть, расположите объекты рядом по горизонтали, добавьте в них текст, ссылки, оформите заголовки (если нужно) и так далее.
- Перейдите ко второй точке остановки и посмотрите результат. Если меню выглядит некрасиво, вернитесь к предыдущей точке остановки и скройте созданные объекты при помощи инструмента Показать/Спрятать.
- Вернитесь ко второй точке и создайте для неё при помощи тех же объектов Текст аналогичные «блоки» меню, но расположите и оформите их так, чтобы они выглядели нормально при этом разрешении.
- Повторите пункты №2-4 для оставшихся двух точек остановки.
Виджет погоды
В Incomedia Website X5 Evolutio, Professional есть два виджета погоды. Виджет Weather позволяет показать погоду почти любого города мира (рисунок ниже).
На сайте он выглядит примерно так, как показано на рисунке ниже.
Помимо этого, при помощи объекта HTML-код Вы сможете установить почти любой виджет (информер) погоды, если к нему есть «открытый» доступ.
Если у Вас есть вопросы касательно работы программы, задавайте их в комментариях. Стараюсь отвечать максимально оперативно. В следующей статье «Обзор WebSite X5 Professional 13.1. Магазин продажи файлов» мы рассмотрим новшества, добавленные в последнем обновлении программы (март 2017).
| Похожие материалы |
|---|
 |
| Автор статьи – Хорошевский Алексей |
|---|
 Кандидат технических наук, преподаватель Харьковского национального университета радиоэлектроники, веб-мастер и SEO-оптимизатор с опытом более 15 лет. Специалист по созданию сайтов на Joomla и WebSite X5. Автор научных публикаций, видеокурсов и обучающего контента по веб-разработке и SEO. Ведёт блог и YouTube-канал, где делится своими знаниями и практическим опытом. Предоставляет услуги по созданию, доработке, сопровождению и продвижению сайтов. Подробнее об авторе… Публикации и работа: |
Полезные ссылки:
