Добавить изображение на страницу в визуальном редакторе можно. Как правильно обновить решение. Работа в публичной части

27.12.2013

CMS "1С-Битрикс: Управление сайтом " – это не только инструмент для разработки сайтов, но и рабочее пространство для контент-менеджера. В этой статье вы найдете 12 простых советов о том, как контент-менеджер может сделать сайт на "1С-Битрикс" лучше: удобнее для посетителей, более посещаемым, красивым и профессиональным.

С помощью CMS "1С-Битрикс: Управление сайтом" вы можете публиковать информацию на статических страницах и в элементах инфоблоков. В обоих случаях при редактировании вам помогает визуальный редактор, который автоматически расставляет теги в HTML-коде при вводе текста.

1. Контролируйте исходный код сообщения. Визуальный редактор не всегда правильно интерпретирует вводимую информацию, кроме того, при копировании блоков текста в режиме визуального редактирования появляется "мусор", который может быть незаметен вам, но проявится у ваших читателей, если они используют другой браузер.
2. Используйте оформление из стилей сайта. Так у ваших текстов будет единый внешний вид и ничто не будет отвлекать читателя от восприятия информации.
3. Пишите грамотно, внимательно прочитывайте тесты перед публикацией, исправляйте все ошибки. Привлеките профессионального редактора или корректора, если вашей квалификации недостаточно.
4. Не ставьте точку в конце заголовка. Не забывайте ставить точки в конце предложений в тексте сообщения. Разделяйте слова в предложении одним пробелом. Помните, что пробел ставится после запятой, а не до нее.
5. Выработайте единый стиль оформления теста для сайта и всегда его придерживайтесь. Если работаете над сайтом не в одиночку, запишите проавила в виде стандарта и потребуйте от остальных членов команды его выполнения. В частности, в стандарте должны быть записано, какие кавычки и тире использовать (есть разные варианты), как оформлять списки (перечни), открывать ли внутренние ссылки в новом окне и т.д.
6. Делайте однотипные сообщения примерно одного размера. Например, определите, что все описания товаров в интернет-магазине должны состоять из 3 абзацев теста. Если есть необходимость в публикации дополнительной информации по какому-то товару, сделайте это отдельной статьей.
7. Готовьте картинки для ваших сообщений заранее – обрежьте или уменьшите их до нужных размеров, сохраните в формате, который знаком большинству браузеров. Сохраняйте картинки в файлах с "говорящими" названиями, но используя строчные латинские буквы и цифры, с символом подчеркивания вместо пробелов. Используйте медиа-библиотеку "1С-Битрикс: Управление сайтом" для хранения всех картинок.
8. Делайте картинки "кликабельными", если это подразумевается в содержании сообщения или в изображении на картинке.
9. Избегайте соблазна превратить сообщение в "SEO-текст". Такие тексты вызывают чувство брезгливости у тех, кто их пытается прочесть. Возможно, чрезмерное употребление ключевых слов даст вашему сайту некоторый дополнительный приток посетителей, но, как только читатель поймет, что тесты на сайте написаны не для него, а для поисковых роботов, вы потеряете его навсегда.
10. Помните, что заголовок сообщения будет проиндексирован поисковиками, делайте заголовки информативными и уникальными в пределах вашего сайта. Например, для заголовка описания товара в интернет-магазине подойдет развернутое наименование товара по прайс-листу.
11. Не забывайте также о заголовке окна браузера. В идеале он должен формироваться автоматически (или вручную) из заголовка сообщения и общего заголовка сайта. Например, для интернет-магазина StoreRU может быть быть такой заголовок описания товара GoodRU: "Купить GoodRU в магазине StoreRU с доставкой".
12. Постарайтесь окружить сообщение связанной с ним информацией. Так, на странице с описанием товара могут быть анонсы, ведущие на страницы новостей по этому товару или производителю. Этот прием позволит одновременно удержать посетителя на сайте, а также повысит позиции сайта в поиске без применения искусственных методов "продвижения".

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

Обратите внимание! Для задания идентификатора можно использовать латинские буквы (A-Z, a-z), цифры(0-9), нижнее тире(_) и дефис(-).

Создание страниц на сайте JustClick возможно с использованием конструктора страниц и в визуальном редакторе.

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

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

Дальнейшая работа с вновь создаваемой и редактируемой страницами абсолютно одинакова.

Основные параметры

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

Шаблон страницы

По умолчанию в системе содержится несколько шаблонов страницы.

Шаблоны default.html, wide.html, adaptive.html содержат рамочку вокруг страницы и ссылку на JustClick в нижней части.

Шаблоны default.html и wide.html имеют фиксированную ширину (первый уже, второй шире). Шаблон adaptive.html меняет ширину в зависимости от размера экрана.

Обратите внимание! Текст и блоки внутри страницы могут так же менять взаимное расположение при изменении ширины страницы.

Шаблон empty.html представляет собой абсолютно пустую страницу, может использоваться для создания собственных шаблонов.

Шаблон image.html предназначен для создания страницы с фоновым изображением. При его выборе появится окно с предупреждением:

После нажатия на кнопку ОК появятся дополнительные поля.

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

Поле Положение контента

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

При выборе этого шаблона вы увидите окно с предупреждением:

После нажатия кнопки ОК откроются дополнительные поля

В поле ID видео YouTube необходимо ввести буквенно-цифровой код видеоролика.

Все записи на YouTube имеют адрес вида

www.youtube.com/watch?v=ADVK7AmdTNw

Необходимо ввести часть адреса, которая находится после знака «равно». В нашем примере это

ADVK7AmdTNw

Поле Положение контента позволяет задать расположение содержимого страницы относительно картинки.

Обратите внимание! Если вы выбрали шаблон с фоновой картинкой или видео, не стоит перегружать страницу текстом или другими элементами. Например, продающий текст может быть в записанном видеоролике, а на странице расположена только форма подписки или заказа.

Боковая панель

Боковая панель позволяет добавить специальные элементы на страницу.

Вставка макета для контента

Клик по верхней кнопке открывает окно:

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

Графические кнопки

Вторая сверху кнопка позволяет выбрать кнопки заказа продукта:

Необходимо ввести адрес страницы оплаты и выбрать кнопку, при клике на которую будет осуществляться переход на эту страницу.

Графические блоки

Третья сверху кнопка предназначена для вставки графических блоков – рамок и фоновой заливки отдельных элементов страницы.

Используя кнопки вверху, можно выбрать вид готового блока (простой или графический). Либо переключиться в Конструктор и задать вид блока самостоятельно.

Можно задать ширину блока, цвет фоновой заливки, тип, толщину и цвет границы блока, а так же скругление углов.

Графические элементы

Четвертая кнопка предназначена для вставки графических элементов – стрелок, лент, маркеров, гарантий и т.п.

Это библиотека готовых рисунков – элементов выделения и внимания, которые повышают конверсию страницы.

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

Графические заголовки

Следующая кнопка служит для вставки графических заголовков – типовых продающих призывов, выполненных в виде картинки.

Маркеры

Следующая кнопка позволяет создать красивый маркированный список – с графическими элементами вместо стандартных бюллетов.

Необходимо выбрать маркер из выпадающего списка и задать количество пунктов в списке.

Мультимедиа

Следующая кнопка позволяет вставить на страницу видео или аудио без использования html (в визуальном режиме).

Необходимо указать идентификатор видеоролика или адрес аудиозаписи, выбрать внешний вид плеера.

Чекбоксы в нижней части окна позволяют включить/отключить автовоспроизведение ролика, скрыть/показать элементы управления, разрешить/запретить полноэкранный режим.

Таймер

Предпоследняя кнопка позволяет вставить таймер на страницу. Его надо предварительно настроить, речь о настройке пойдет чуть ниже.

Таймер будет виден только на реальной странице. В режиме предпросмотра он не отображается.

Формы подписки

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

Нужная форма выбирается из выпадающего списка.

Настройка таймера

Клик по кнопке Установить открывает форму настройки таймера.

В верхней части с помощью радиокнопки необходимо выбрать тип таймера:

• с абсолютным временем окончания (например, в случае проведения распродажи, которая закончится в 0ч00м заданного дня);
• с относительным временем окончания, тут возможны 2 варианта:
  • отсчет времени идет с момента захода на страницу;
  • отсчет времени идет с момента отправки письма (эта опция используется в автоматической серии писем, например, когда мы предлагаем что-то купить со скидкой новым подписчикам).

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

Сплит-тестирование

Сплит-тестирование (А/В тестирование) позволяет выбрать вариант с лучшей конверсией путем анализа отклика аудитории на изменение какого-либо элемента страницы.

Клик по заголовку Вариант №… позволяет свернуть/развернуть текущий вариант страницы. Это удобно для переключения между вариантами страницы.

Для проведения А/В тестирования необходимо кликнуть на кнопку Добавить вариант . Под первым вариантом добавится аналогичное окно редактора, позволяющего ввести второй вариант страницы. Аналогичным образом можно добавить 3-й, 4-й и т.д. варианты.

Обратите внимание. Суммарное значение в окне вероятность показа должно составить 100%. Т.е. если мы тестируем 2 варианта, выставляем по 50%, если 3 – 33%, 33% и 34% и так далее.

Дополнительно

Вкладка дополнительно позволяет задать код в секции страницы. Например, именно здесь размещается код ретаргетинга. Также на этой вкладке включается «защита роликов YouTube»

Кроме того, здесь же можно подключить комментарии из Facebook и ВКонтакте.

Чтобы отображать комментарии на странице, необходимо проставить галочку в чекбоксе разрешить и указать ID Facebook , либо APIID Вконтакте .

ID Facebook

По умолчанию, аккаунты пользователей в Facebook имеют адрес вида:

https://www.facebook.com/profile.php?id=100000110123456

Цифры после знака «равно» и будут пользовательским ID в Facebook.

Если вы сделали себе желаемый адрес аккаунта в Facebook вида:

https://www.facebook.com/профиль_facebook

https://graph.facebook.com/профиль_facebook

Вы увидите следующую информацию

цифры в первой строчке будут искомым ID.

APIID Вконтакте

Чтобы получить APIID Вконтакте, необходимо создать приложение.