Обзоры расширений Joomla

Видео уроки Website X5 13 и 12Видео уроки Website X5 13 и 12

Видео уроки на русском языке по самостоятельному созданию сайта с нуля в Incomedia Website X5 Evolution и Professional 12, 13.

 

 

В предыдущей статье «Работа в Website X5. Уроки (часть 3)» мы продолжили рассмотрение ответов на часто задаваемые вопросы по конструктору Website X5. В этой части будет раскрыта ещё одна порция «технических моментов», своего рода инструкция.

При рассмотрении практических аспектов будет применяться последняя, на момент написания статьи (02.11.2016), русскоязычная версия Incomedia Website X5 Evolution 13.0.1.16 (x64).

Кликабельный телефон

Разместим в шапке сайта телефон компании. Причём, если посетитель зашёл на сайт с мобильного телефона и нажал на номер телефона в шапке сайта, начнётся набор этого номера телефона. Это срабатывает не на всех телефонах (зависит от модели, версии операционной системы и браузера). Если нажать на подобный номер на компьютере, где установлен Skype (и специальный плагин браузера), то начнётся набор номера телефона в Skype. Для создания подобного номера будем использовать URL-схему «tel».

Для этого на втором шаге создания сайта в Шаблон – Персонализация – Контент шапки и подвала разместите объект 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 Evolution, Professional

Где программа хранит проекты

Достаточно часто возникает вопрос, где Incomedia Website X5 Evolution, Professional хранят проекты сайтов. По умолчанию это «Мои документы - Incomedia - WebSite X5 v13 – Evolution – Название проекта». Вместо «WebSite X5 v13 – Evolution» может быть другое имя папки, в зависимости от Вашей версии программы. «Название проекта» – имя Вашего проекта в программе. Вы можете уточнить или изменить путь к папке с проектами, нажав на кнопку Предпочтения в первом окне программы (рисунок ниже).

Где Website X5 хранит проекты
Где Website X5 хранит проекты

Обратите внимание, что экспортированные на сайт диски или сайты, выгруженные в интернет, – это не проекты, которые потом можно редактировать. Вам нужна или вся папка «Мои документы - Incomedia - WebSite X5 v13 – Evolution – Название проекта» или экспортированный проект (на 5-м шаге создания сайта Экспорт – Экспортировать проект).

Вставка презентаций и PDF на страницу

Конструктор Website X5 позволяет вставлять на страницу сайта презентации PowerPoint в форматах PPT, PPS, PPTX, PPSX. Для этого добавьте на страницу сайта виджет PPT/PPS File (рисунок ниже). Можно указать как локальный файл у Вас на компьютере, так и ссылку на такой файл в интернете.

Website X5 инструкция
Website X5 инструкция

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

Зарегистрируйтесь на сайте Slideboom.com. Загрузите свой файл презентации (рисунок ниже).

Загрузка презентации
Загрузка презентации

Не забудьте проверить, чтобы опции Anyone can view my presentation и Allow embedding this presentation at other sites были включены.

Настройка доступа
Настройка доступа

После загрузки на странице просмотра презентации скопируйте код «Embed code», нажав на кнопку Embed справа от презентации (рисунок ниже).

Копирование кода для вставки
Копирование кода для вставки

Создайте на странице Вашего сайта объект HTML-код и вставьте в него скопированный код. Ширину и высоту презентации можно будет изменить, меняя соответствующие параметры в коде:

 

<embed src="//www.slideboom.com/player/player.swf?id_resource=1591779" width="700" height="600" name="onlinePlayer1591779" …

 

Конструктор Website X5 позволяет вставлять на страницу сайта файл формата PDF. Для этого разместите на странице виджет PDF File.

Виджет PDF File
Виджет PDF File

В его настройках укажите путь к pdf файлу у Вас на компьютере, выберите один из доступных типов вставки файла и задайте высоту объекта. Лучше тестировать результат на хостинге. На рисунке ниже показан пример «окошка» PDF-файла, вставленного на сайт.

Вставленный на сайт PDF
Вставленный на сайт PDF

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

Если не знаете, какую лучше подобрать ширину для своего сайта, чтобы он нормально отображался на большинстве устройств Ваших потенциальных пользователей, тут самое лучшее – посмотреть в статистике своего сайта. Например, в Яндес.Метрика эта информация находится в Отчёты – Технологии – Разрешения дисплея (рисунок ниже).

Статистика разрешений экранов. Яндекс
Статистика разрешений экранов. Яндекс

Там сразу увидите, какие расширения экранов популярны на Вашем сайте. Эти данные можно применять для более осмысленной настройки точек остановки в Шаблон – Персонализация – Разрешения и адаптивный дизайн (рисунок ниже).

Разрешения и адаптивный дизайн
Разрешения и адаптивный дизайн

Если Вы ещё не устанавливали счётчик Яндекс Метрики себе на сайт, то установите, подождите и увидите нужные Вам данные. Когда не знаете, как можно установить себе счётчик Яндекс Метрики, переходите к следующему пункту самоучителя Website X5 «Куда вставить код лайвинтернет счётчика». Добавление счётчиков Яндекс Метрики, LiveInternet и др. аналогичны.

Если Вам нужно определиться с шириной сайта для большинства мониторов, но нет возможности установки кода аналитики, можете перейти на сайт Stat Counter, выбрать в спадающем списке Stat вариант Screen Resolution, можно указать, по каким платформам Вы хотите получить данные (Desktop (компьютеры), Mobile (телефоны), Tablet (планшеты), Console (консоли)), в списке Region укажите нужный Вам регион (страну) и можно переключиться на график тип Bar (рисунок ниже).

Подбор значения ширины сайта для большинства мониторов
Подбор значения ширины сайта для большинства мониторов

Есть ещё сервис Hotlog.ru. Там тоже можно посмотреть статистику (рисунок ниже) по таким данным:

  • Браузеры.
  • Операционные системы.
  • Разрешения экрана.
  • Поисковые системы.
  • Поисковые запросы.
  • Каталоги.
Hotlog.ru
Hotlog.ru

Куда вставить код лайвинтернет счётчика

При регистрации в LiveInternet рекомендую выбрать опцию «в виде двух картинок» (это на первом шаге «Выберите тип счетчика») в нижней части страницы (рисунок ниже).

Код лайвинтернет счётчика
Код лайвинтернет счётчика

Вам порекомендуют: «HTML-код счетчика, совмещенного с логотипом (для более точного учета посещаемости код нужно вставить как можно ближе к началу страниц, между тегами <body> и </body>)». Копируем этот код и вставляем его на первом шаге создания сайта в Настройки – Расширенные настройки – Статистика, SEO и код. Вкладка Эксперт, в спадающем списке Пользовательский код выберите Перед закрывающим тегом BODY (рисунок ниже). Можно также выбрать После открытия тега BODY. Первый вариант меньше влияет на скорость, второй даёт более точную статистику. Этот способ одинаков для вставки почти любого счётчика: Яндекс.Метрика, Google Analytics и так далее.

Вставка кода лайвинтернет счётчика
Вставка кода лайвинтернет счётчика

В принципе, это и всё. Но можно ещё вставить код из поля «HTML-код логотипа liveinternet.ru (вставьте его в любое место ваших страниц)» туда, где Вы хотите отображать информер Liveinternet.ru. Если хотите отображать на всех страницах, то вставьте, например, в Шаблон – Персонализация – Контент шапки и подвала, вкладка Футер. Вставляется при помощи объекта HTML-код.

Как создать меню с выпадающими подменю

Для создания многоуровневого меню следует создать соответствующую иерархию уровней и страниц на третьем шаге создания сайта Карта (рисунок ниже).

Самоучитель Website X5
Самоучитель Website X5

В результате у Вас получится так, как показано на рисунке ниже.

Конструктор Website X5
Конструктор Website X5

То есть, добавляя Новый уровень, Вы указываете программе, что страницы, находящиеся внутри этого уровня, будут в подменю. Например, создав уровень «Уровень 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 оно выглядит так, как показано на рисунке ниже.

Меню в подвале (1920х1080)
Меню в подвале (1920х1080)

При разрешении экрана 768х1024 оно выглядит так, как показано на рисунке ниже.

Меню в подвале (768х1024)
Меню в подвале (768х1024)

При разрешении экрана 360х640 оно выглядит так, как показано на рисунке ниже.

Меню в подвале (360х640)
Меню в подвале (360х640)

Давайте рассмотрим общую «методику» создания подобного меню с поддержкой адаптивного дизайна.

  1. В Шаблон – Персонализация – Структура шаблона задайте адекватную высоту подвала (футера) для каждой точки остановки (разрешения экрана). Высота должна быть адекватной содержимому футера (вашему меню)
  2. В Шаблон – Персонализация – Контент шапки и подвала на вкладке Футер создайте для первой точки остановки меню при помощи объектов Текст. То есть, расположите объекты рядом по горизонтали, добавьте в них текст, ссылки, оформите заголовки (если нужно) и так далее.
  3. Перейдите ко второй точке остановки и посмотрите результат. Если меню выглядит некрасиво, вернитесь к предыдущей точке остановки и скройте созданные объекты при помощи инструмента Показать/Спрятать.
  4. Вернитесь ко второй точке и создайте для неё при помощи тех же объектов Текст аналогичные «блоки» меню, но расположите и оформите их так, чтобы они выглядели нормально при этом разрешении.
  5. Повторите пункты №2-4 для оставшихся двух точек остановки.

Виджет погоды

В Incomedia Website X5 Evolutio, Professional есть два виджета погоды. Виджет Weather позволяет показать погоду почти любого города мира (рисунок ниже).

Виджет погоды
Виджет погоды

На сайте он выглядит примерно так, как показано на рисунке ниже.

Виджет погоды (2)
Виджет погоды (2)

Помимо этого, при помощи объекта HTML-код Вы сможете установить почти любой виджет (информер) погоды, если к нему есть «открытый» доступ. Например, с сайта Gismeteo.

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

Видео уроки Website X5 13 и 12Видео уроки Website X5 13 и 12

Видео уроки на русском языке по самостоятельному созданию сайта с нуля в Incomedia Website X5 Evolution и Professional 12, 13.

 

Полезные ссылки: