Сайт модифицируется онлайн с помощью простого WYSIWYG-редактора. Цель такого редактора — отображать текст в точности так же, как он будет выглядеть на странице сайта. Это облегчает задачу — не нужно обладать специальными знаниями, можно работать с сайтом и тут же видеть результат.
Чтобы начать работу, войдите в настройки нужного сайта в контрольной панели и нажмите на кнопку «Редактировать». На открывшейся странице справа вы увидите все возможные блоки.
Меню «Избранные» представляет собой виджеты, разделенные по категориям. При выборе определенной группы вы можете просмотреть ряд вариантов из этой подборки. Например, в группе «Заголовки с пояснением вверху», представлены все виджеты, попадающие под это определение.
При нажатии на блок в верхнем левом углу панель управления блоком, а при двойном нажатии на текст или выделении сверху появится панель инструментов. Редактировать ссылки, иконки и кнопки можно при двойном нажатии; картинки редактируются с помощью элементов управления, всплывающих при наведении курсора.
Чтобы расширить функции редактирования, переключитесь в «Расширенный режим».
Выберите необходимый вам блок на панели справа и переместите его в пустую область на странице. Порядок блоков можно регулировать и располагать их по вашему усмотрению. При нажатии на блок вам станет доступна панель управления (в левом верхнем углу), с помощью которой вы можете перемещать и удалять блоки, а также редактировать фон блока. В «Расширенном режиме» появляется возможность дублировать блоки, работать с HTML и редактировать анимацию при появлении.
Редактирование происходит после двойного нажатия на текст или его выделения. Над ним вы увидите панель инструментов, в ряд возможностей которой входит: изменение вида и цвета текста, выбор шрифта, выравнивание текста и разделение на списки, добавление ссылки, выбор иконки и функция «Очистить».
В редакторе добавьте блок, в текст которого будет добавлена ссылка.
Выделите текст, при нажатии на который будет происходить переход по ссылке.
В панели инструментов сверху нажмите на «Ссылку».
В открывшейся форме выберите «Обычную ссылку», в строку «URL» введите HTTP-адрес и нажмите «Сохранить».
В этом меню можно указать, как должен осуществляться переход по ссылке, отметив галочкой окошко «Открывать в новом окне». Или добавить текст, который будет отображаться при наведении курсора на ссылку, в строку «Подсказка».
Такая возможность доступна при нажатии клавиш Ctrl+Z.
Выберите в панели виджетов справа страницы нужный виджет и переместите его на страницу. Выделите нужную область текста и найдите «Цвет» в панели инструментов, отобразившейся сверху. Выбор опции «Цвет текста» изменит цвет выбранной части текста, а «Цвет фона» изменит цвет той области, в которой находится выбранная часть текста. Далее появится окно «Выбор цвета». Выберите нужный и нажмите «Сохранить».
Изменить фон всего блока можно в панели управления в левом верхнем углу блока. Нажмите на «Редактировать фон блока» и выберите фоновый цвет, настройте наложение цвета или выберите картинку.
С инструкцией, как изменить полностью фон страницы, можно ознакомиться здесь.
Выберите подходящий виджет в выпадающем списке вверху в разделе «Карта» и переместите его в нужное место на странице. Наведите курсор на карту и нажмите «Редактировать». В открывшемся окне выберите вкладку Google Карты или Яндекс.Карты, введите в строку нужный адрес и нажмите «Сохранить».
Вы также можете указать ссылку самостоятельно. На странице maps.google.ru найдите нужный адрес. Выберите «Поделиться / Embed map» в списке меню слева, перейдите во вкладку «Код», скопируйте код, начинающийся с «<iframe...», и вставьте его в окно редактора, нажав «Указать URL карты».
Или найдите адрес на странице maps.yandex.ru, затем нажмите кнопку «Поделиться», скопируйте появившуюся ссылку (например: «https://yandex.ru/maps/-/CBa6Y8Va~D») и добавьте ее в окно редактора, кликнув на «Указать URL карты».
В правой панели с виджетами, в выпадающем списке вверху, найдите категорию «Изображения», выберите виджет и переместите его в нужное место на странице.
Наведите курсор на изображение, выберите из расположенных посередине кнопок: загрузить изображение с компьютера или выбрать снимок из галереи изображений.
При выборе фото с компьютера в открывшемся окне перейдите в папку, где лежит необходимая вам картинка и выберите изображение. После загрузки изображения вы можете увеличить или уменьшить его, обрезать или оставить изначальный вид, а также вернуться назад, если фотография вам не подходит.
При выборе галереи откроется форма поиска. Для достижения наилучших результатов лучше искать картинки, используя английский язык, но для удобства сделан автоматический перевод через Яндекс.Переводчик. После загрузки фотографии вы можете проделать все те действия, которые описаны в пункте 3.
При выборе кнопки «Настройки изображения» в разделе «Размер и форма» вы можете изменить размер картинки и ее форму, соответственно. А в разделе «Изображение» можно:
а) добавить текст, который будет отображаться при наведении курсора на фото, в строку «Подсказка»;
б) добавить HTTP-адрес в строку «Ссылка», к которому будет осуществляться переход при нажатии на изображение;
в) выбрать увеличение изображения, поставив галочку «Показывать увеличенное изображение по клику».
В правой панели с виджетами, в выпадающем списке вверху, найдите категорию «Изображения», выберите виджет и переместите его в нужное место на странице. Наведите курсор на изображение, выберите из расположенных посередине кнопок: загрузить изображение с компьютера или выбрать снимок из галереи изображений. Еще раз наведите курсор на фото и нажмите на кнопку «Настройки изображения». В разделе «Изображение» отметьте галочкой «Показывать увеличенное изображение по клику».
Выбор этой функции для всех фотографий, расположенных в одной секции, позволит просматривать их листая.
Воспользуйтесь специальными блоками. В правой панели с виджетами, в выпадающем списке вверху, найдите категорию «Слайдеры», выберите подходящий и переместите его в нужное место на странице. Нажмите на виджет — слева появится панель управления для слайдера. Нажав на «Редактировать слайдер», вы можете настроить элементы оформления, а выбрав «Редактировать фон слайда», изменить цвет фона или загрузить изображение. В этой же панели можно добавить или удалить слайд.
Если вы хотите поменять заданные параметры фото в выбранном блоке:
Наведите курсор на картинку и выберите кнопку «Настройки изображения».
Перейдите во вкладку «Размер и форма», выберите необходимые параметры и нажмите «Заменить».
Наведите курсор на изображение, выберите соответствующую кнопку, чтобы добавить фото.
Если вы уже добавили фото, но теперь хотите поменять его параметры, воспроизведите 3 шага, которые описаны выше.
В списке сниппетов справа страницы найдите категорию «Видео», выберите подходящий сниппет и переместите его на страницу.
Наведите курсор на видео и нажмите «Редактировать». Появится окно со строкой, в которой указан пример URL.
На сайте Youtube или Vimeo найдите необходимый ролик, скопируйте его URL из адресной строки браузера.
В окне редактора URL удалите пример адреса и вставьте на его место адрес нужного ролика.
В списке меню «Избранные» справа страницы найдите категорию «Ссылки на соцсети», выберите подходящий виджет и переместите его на страницу.
Нажмите два раза на кнопку соцсети и в появившейся сверху панели выберите «Ссылку».
В открывшейся форме выберите «Обычную ссылку», в строку «URL» введите HTTP-адрес и нажмите «Сохранить».
В этом меню можно указать, как должен осуществляться переход по ссылке, отметив галочкой окошко «Открывать в новом окне». Или добавить текст, который будет отображаться при наведении курсора на ссылку, в строку «Подсказка».
Нет, информация в этом случае не восстановится. Если до этого сайт просуществовал какое-то время, составьте заявку в разделе «Техподдержка / Заявки» контрольной панели «Джино» с просьбой восстановить данные.
Для этого вам нужно создать якорь. Якорь — закладка с уникальным именем (id) на определенном месте веб-страницы, предназначенная для создания перехода к ней по ссылке. Например, чтобы сделать переход с описания компании на контакты:
<div class="column full" id="contacts"> и нажмите «Сохранить». * 4.1. Если вы хотите использовать переход с кнопки, найдите подходящий виджет в меню справа на странице и переместите его в редактор. Нажмите на кнопку два раза, выберите «Ссылку» и следуйте последнему пункту.
Если вы хотите принимать платежи на сайте, воспользуйтесь вариантом, для которого потребуются небольшие знания HTML. Некоторые платежные системы позволяют создавать кнопки для приема платежей и размещать их на любом веб-сайте.
Создайте кнопку на сайте подходящей вам платежной системы и получите ее код. В интерфейсе редактирования лендинга создайте любой блок. Убедитесь, что установлен «Расширенный режим» в левом нижнем углу страницы. Нажмите на блок, в панели управления в верхнем левом углу выберите «Редактировать HTML блока» и в нужное место вставьте код кнопки.
Примечание: Сторонние виджеты исполняются сразу на сайте, но не появляются в редакторе.
В списке меню «Избранные» справа страницы найдите категорию «Кнопки», выберите подходящий виджет и переместите его на страницу.
Нажмите два раза на кнопку и в панели сверху выберите «Ссылку».
В окне «Редактирование ссылки» выберите «Обычную ссылку», в строку «URL» введите HTTP-адрес и нажмите «Сохранить».
Также можно указать, как должен осуществляться переход по ссылке, отметив галочкой окошко «Открывать в новом окне». Или добавить текст, который будет отображаться при наведении курсора на ссылку, в строку «Подсказка».
В этом же окне вы можете выбрать и настроить «Форму обратной связи».
В списке меню справа страницы выберите подходящий виджет c иконками и переместите его на страницу. Нажмите два раза на иконку — опция «Выбор иконки» в появившейся сверху панели позволит выбрать нужный вариант и его размер. Опция «Выбор цвета» позволит изменить цвет иконки.
В нижнем левом углу страницы располагается переключатель режимов: из «Простого» в «Расширенный». После перемещения переключателя рядом появится кнопка «HTML», нажав на которую, можно видеть исходный код всей страницы. Но работать с кодом удобнее через панель управления в левом верхнем углу виджета. Нажмите на «Редактировать HTML блока» и в открывшемся окне добавляйте нужный код. Если вы хотите установить сторонние виджеты, например, соцсетей, то исполняться они будут сразу на сайте, но не появятся в редакторе.
В этом же режиме можно управлять секциями, то есть вы можете создать несколько экранов для лендинга. Каждая секция может состоять от одного до трех блоков-боксов, куда вы можете добавить виджеты из меню «Избранные» справа страницы. Кнопки управления секцией расположены в верхнем левом углу. Нажав на кнопку «Редактировать секцию», вы можете переместить секцию, выбрать ее высоту и установить иконку прокрутки.
Сверху посередине страницы появятся кнопки управления блоками-боксами. Вы можете поменять фон блока (добавив картинку из галереи или загрузив свою), а при нажатии на кнопку «Редактировать блок» в меню выбрать цвет фона, стиль, размер и положение содержимого (текста), а также эффекты для загруженной для фона фотографии.
Для начала переключитесь в «Расширенный режим» в нижнем левом углу страницы. После перемещения переключателя сверху посередине страницы появятся кнопки управления. Нажмите на кнопку «Загрузить изображение», если хотите добавить фото с компьютера, или на кнопку «Галерея изображений», если хотите выбрать фото из коллекции. При нажатии на «Редактировать блок» откроется меню. Нажав на «Фон», вы можете изменить цвет фона всей страницы или настроить эффекты для загруженного фото (наложение цвета, эффект Кена Бернса), нажав на «Изображение».
Эта функция доступна в «Расширенном режиме», на который можно переключиться в нижнем левом углу страницы. С помощью кнопки «Добавить секцию» в верхнем левом углу, вы можете создать несколько экранов/секций. Каждая секция может состоять от одного до трех блоков-боксов, куда вы можете добавить виджеты из меню «Избранные» справа страницы. Нажав на кнопку «Редактировать секцию», вы можете переместить секцию, выбрать ее высоту и установить иконку прокрутки. Чтобы изменить фон, воспользуйтесь этой инструкцией.
В списке меню «Избранные» справа страницы найдите категорию «Кнопки», выберите подходящий виджет и переместите его на страницу.
Нажмите два раза на кнопку, введите текст и выберите в панели сверху «Ссылку».
В появившемся меню в строке «Обычная ссылка» удалите значок (#), введите tel:+1234567890 (для мобильной версии) или skype:+1234567890?call и нажмите «Сохранить».
В списке меню «Избранные» справа страницы найдите подходящий виджет из категории «Кнопки» или блок, в текст которого будет добавлена ссылка. Переместите его на страницу.
Кликните два раза на кнопку или выделите текст и выберите в панели сверху «Ссылку».
В открывшемся окне «Редактирование ссылки» выберите «Форму обратной связи», введите ваш e-mail, введите названия полей и настройте их количество, добавьте заголовок формы. При необходимости добавьте приветственный текст, который будет отображаться над формой сообщения, или измените надпись на кнопке и нажмите «Сохранить».
Вы можете сделать анимированным любой блок. Для начала убедитесь, что находитесь в «Расширенном режиме» в левом нижнем углу страницы. Затем выберите в меню справа и переместите в редактор необходимый блок. Нажмите на него и в панели управления выберите «Редактировать анимацию при появлении». В появившемся меню появятся типы анимации, укажите нужный и нажмите кнопку «Сохранить».