Как я могу оптимизировать свой лендинг для мобильных устройств?

Наш новый мобильный редактор лендинга позволяет просматривать и редактировать мобильную версию вашего лендинга. Он даёт возможность настроить мобильную версию путём:

  • изменения размера текста и изображений
  • скрытия и восстановления инструментов
  • перемещения элементов
  • замены фоновых изображений

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

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

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

Как перейти к редактору мобильной версии лендинга?

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

иконка мобильного редактора в верхней панели

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

После того, как мобильная версия будет создана, её можно будет просматривать на мобильных устройствах. Контрольная ширина страницы – 600 пикселей. Поэтому, если страница будет открываться на экране меньше 600 пикселей, будет отображаться мобильная версия.

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

Как я могу настроить расположение элементов мобильной версии лендинга автоматически?

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

  1. Кликнуть иконку мобильного редактора.
  2. Кликнуть в любом месте внутри поля редактора.
  3. Для Windows, используйте комбинацию клавиш Ctrl + O (буква «О») на клавиатуре. Для Mac, используйте комбинацию Command + O.
  4. Появится новое окно, предлагающее вам оптимизировать страницу. Кликните Да, оптимизировать, чтобы продолжить.
Оптимизировать страницу

Лендинг автоматически будет настроен для мобильных устройств.

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

Как я могу перемещать элементы в мобильном редакторе?

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

  • Перемещение элементов в другую секцию, или удаление объекта из блока повлияет на десктопную версию страницы.
  • Перемещение элементов внутри секции влияет только на мобильную версию страницы. В десктопной версии ничего не меняется.

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

цифра, отображаемая на иконке ноутбука

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

Вы можете перемещать элементы только внутри заданного поля. Невозможно поместить элементы за его пределами (отображаемыми диагональными полосками). Эти элементы не будут видны при отображении на мобильном устройстве. Посетителям страницы потребуется прокрутить страницу, чтобы увидеть размещенные там объекты. Мы хотим убедиться, что мобильная версия отображается верно на маленьких экранах, поэтому мы показываем вам, где лучше располагать элементы.

поля мобильной версии

Как изменять размер элементов в мобильном редакторе?

Вы можете изменять размер объекта, чтобы увеличивать или уменьшать размер шрифта в мобильной версии.

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

1. Кликните объект, чтобы отобразить элементы для изменения размера.

элементы изменения размера

2. Чтобы изменить размер, кликните и перемещайте иконки по бокам – это изменит ширину рамки.

изменение размера текста

3. Для изменения масштаба, двигайте иконки в углах рамки.

изменение масштаба текста

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

Могу ли я удалять элементы в мобильной версии?

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

иконка видимости

Чтобы показать скрытые элементы, кликните кнопку показать скрытые элементы в верхней панели. Рабочая область затемнится, и скрытые элементы станут видны. Теперь вы можете:

  • Восстановить элемент. Для этого кликните еще раз иконку видимости.
  • Оставить элемент скрытым. Для этого кликните кнопку Скрыть элементы.

скрытые элементы отображены

Примечание: В мобильном редакторе невозможно добавлять или удалять элементы. Вам необходимо переключиться на десктопную версию, чтобы делать эот

Могу ли я рредактировать текст и заменять фоновые изображения в мобильном редакторе?

Вы можете редактировать текстовые поля и заменять фоновые изображения в мобильном редакторе. Для этого:

  • Для текстовых элементов, кликните элемент два раза, чтобы открыть меню инструментов с опциями редактирования. Вы можете изменять размер, цвет и выравнивание текста.
  • Для фоновых изображений, кликните изображение, чтобы увидеть кнопки **Редактировать и Заменить. Кликните изображение два раза, чтобы открыть панель инструментов с дополнительными опциями редактирования.