Решение задач адаптивного веб-дизайна с помощью Elementor — мастер-класс в понедельник

В этом руководстве мы рассмотрим несколько проблем адаптивного веб-дизайна и рассмотрим различные способы их элегантного решения с помощью Elementor. Совет №1. Адаптивный дизайн начинается и заканчивается правильным планированием. В этом деле никто в здравом уме не пойдет за проект без плана, эскиза или эскиза. Чем больше предусмотрительности и планирования вы вложите в процесс проектирования, тем лучше вы сможете предвидеть технические проблемы и соответствующим образом корректировать свои идеи. Совет №2. Позиционирование элементов для мобильного адаптивного просмотра Когда дело доходит до правильного позиционирования разделов для мобильного адаптивного просмотра, мы рекомендуем избегать установки значений в пикселях. Установка значений в процентах (%) или в EM сохраняет их относительно общего размера экрана. Благодаря адаптивному режиму мы пришли к выводу, что в нашем следующем примере мы должны установить отступы на 17 % по обе стороны от текстового виджета, чтобы получить одинаковое позиционирование как на рабочем столе, так и на мобильных устройствах. Совет №3. Отзывчивый дизайн: горизонтальный подход Традиционно веб-дизайн представляет собой вертикальный процесс, поэтому многие дизайнеры предпочитают сначала завершить дизайн всей страницы для одного устройства, пытаясь заставить тот же дизайн работать и на следующем устройстве. Более простой способ сделать это — спроектировать наши представления горизонтально, по одному разделу за раз, на всех наших устройствах по мере продвижения. После того, как мы убедились, что этот раздел выглядит так, как мы хотим, в представлениях для настольных компьютеров, планшетов и мобильных устройств, мы можем перейти к следующему. По возможности дублируйте разделы, столбцы или виджеты и обновляйте соответствующий контент; повторно используйте их в качестве основы для создания других подобных элементов на странице. Совет №4. Изменение/расположение фонового изображения Некоторые фоновые изображения, такие как в приведенном ниже примере, могут отлично смотреться на рабочем столе. Однако не требуется большого опыта, чтобы увидеть, как это не будет хорошо работать при просмотре сайта на экране мобильного телефона. Совет № 5. Создать альтернативный раздел Как и было обещано, мы будем очень рады поделиться своим опытом и знаниями с нашим сообществом, которое, несомненно, будет знакомо с нашим следующим примером. В верхней части нашей домашней страницы нам нужно было найти решение для трехколоночного текстового раздела. Вместо того, чтобы отображать это как 3 скучных строки текста в представлении для мобильных устройств, мы решили создать альтернативный раздел с текстом внутри виджета ползунка. Прочитайте полный пост: Получить Elementor: Получить Elementor Pro: про сломался вордпресс.