Menu
Редактирование мобильной версии
В данном видео-уроке мы научимся редактированию мобильных версий сайт.
Редактирование мобильной версии сайта
Добрый день. В этом уроке мы разберем редактирование 3-х версий сайта.
- Компьютерная версия сайта
- Планшетная версия сайта
- Версия сайта для мобильных устройств
Первой всегда выполняется компьютерная версия сайта.
В прошлых уроках было разобрано редактирование компьютерной версии, осталось разобрать две другие версии.
Для переходов между версиями сайта следует нажать в левом нижнем углу в маленькой серой панели на значок компьютера и выбрать нужную для редактирования версию сайта (Рис.1)
Планшетная версия сайта
Планшетная версия практически не отличается от компьютерной версии, за исключением редких случаев. Она выглядит немного сжатой, редактируется также отдельно и почти идентична компьютерной, (Рис.2).
В ней очень редко возникают сложности. Чтобы просмотреть действительно рабочую версию (так как она реально выглядит на планшете), нужно нажать на стрелку бокового меню Elementor, чтобы свернуть и тогда откроется полная рабочая версия, (Рис.3).
Также можно посмотреть планшетную и мобильную версии сайта через браузер. Для этого нужно открыть Ваш сайт, нажать на клавиатуре F12 для вызова консоли (в Google Chrome и Atom). В других браузерах это может называться «Консоль разработчика», затем нажать в верхнем правом углу на иконку устройств (помечено на рисунке желтым кругом) (Рис.4).
Редактирование мобильной версии в Elementor
Таким же образом, чтобы просмотреть или откорректировать мобильную версию, Вам необходимо в левом нижнем углу, в маленькой серой панели нажать на значок компьютера и выбрать нужную для редактирования теперь уже мобильную версию сайта. На рисунке 5 представлено как она будет выглядеть при свернутой панели Elementor, (Рис.5).
Все шрифты, все элементы и изображения, так же как и в планшетной версии дублируются из компьютерной версии.
Для удобства переключения и отладки каждого элемента, а также, чтобы ускорить процесс исправления возникающих проблем, в каждой из версий сайта в панели Elementor есть маленькие значки переключения между версиями, (Рис.6).
Также как и в компьютерной версии, все элементы можно исправлять и подгонять под нужный размер, если вдруг текст или изображение выглядят некорректно.
Нельзя изменять текст в каждой версии по отдельности, он всегда будет один и тот же для всех версий. Если Вам нужно исправить текст, допустим, в мобильной версии так, чтобы он отличался от компьютерной и планшетной, тогда Вам необходимо нажать на поле текста правой кнопкой мыши и выбрать из открывшегося списка действий «дублировать». У Вас появится копия текстового поля, которое было продублировано сразу снизу элемента. Далее, выбрав основное (дублируемое) поле, в левой панели Elementor требуется нажать на вкладку «Расширенные», далее из списка открыть вкладку «Адаптивность», затем выбрать место, где мы хотим скрыть данный элемент. В планшетной и компьютерной версии все практически одинаково, в результате чего тумблера у них всегда идут вместе в одну сторону. (Рис.7)
Скрытые элементы в разных версиях будут отображаться едва заметными засветленными элементами. Это означает, что для данной редактируемой версии, этот элемент будет не активен и, соответственно, не будет отображаться в этой версии сайта (Рис.8).
Так же настраивается любой элемент сайта.
Спасибо за внимание. В следующем уроке мы разберем тему: «Основные элементы разметки сайта».
