Доработка сайта на WP
Задача:
Обновить существующую страницу на платформе Wordpress+ Gutenberg. Страница должна быть адаптивна для таких разрешений: 1440 (основной макет), 1920, 1536, планшет 768 (1024), мобильные 375 (основная), 360, 414 – для промежуточных версий подставляем наиболее подходящую. Также должна быть легкой и быстро загружаться. Поэтому необходимо использовать только CSS и векторную графику (SVG), где это только возможно.
Все работы должны вестись на субдомене http://uberem.cosmos.studio , после утверждения нужно перенести на рабочий сайт.
Перед переносом страницы на рабочий сайт, нужно обязательно сделать бэкап сайта Uberem.com.ua и установить на Сosmos, затем начинать работать.(бэкап предоставим)
По возможности переносить наработки точечно то есть только те файлы, которые нужно. Это будет буквально пару файлов: js/app.js; gutenberg/init.php
и новые блоки: gutenberg/block-first-name.js
Правильно настроить все отступы блоков по макету для всех разрешений и адаптивов.
Все блоки и элементы должны соответствовать макету. То есть после добавления новых блоков, страница должна соответствовать всем макетам. (все адаптивы и разрешения указанные выше)
В админ панель WP нужно добавить все недостающие блоки (описаны ниже). Каждая наша секция - это отдельный блок для редактора. Блоки для редактора Gutenberg.
Макет:
https://www.figma.com/file/Zu04pgL9AThIXOTPDQz4Wt/Uberem-2.0?node-id=913%3A0
Задачи:
Добавить блок на страницу “Нам по силам навести порядок”
Сверху слева расположен заголовок H2, справа описание. Далее в блоке есть карточки с видами помещения для уборки. Карточки кликабельны, ведут на шаблон “Услуга”, то есть на отдельные страницы. Снизу кнопка “У меня специфическое место”, которая ведет на попап заказа звонка. (есть шаблон похожего поп-апа, его можно скопировать, при этом заменить заголовок, использовать уже готовый обработчик так как поп-апы одинаковые)
Также должен быть на карточках ховер (показан на второй карточке, работает как везде на сайте - см. https://www.uberem.com.ua/nashi-uslugi/)
Добавить блок “Что говорят бизнесмены”
В этом блоке будет расположено до 10 отзывов. Справа расположены две кнопки-стрелочки, отвечающие за смену отзывов.
При смене отзывов здесь появляется анимация в виде звездочек. Она уже реализована на сайте на странице Дом в блоке Выполненных заказов: https://tppr.me/8k5BN Но тут происходит по краям экрана: слева-снизу - фиолетовые звезды, справа-сверху - белые;
Сама смена отзывов будет сопровождаться анимацией такого типа http://overpass.studiovoila.com/ (прогресс бар вокруг фото). Также меняются фото, нижняя становится в центр, центральная вверх, в нижней появляется новая. Нужно обсудить как это будет лучше реализовать с точки зрения верстки: чтобы менялись фотографии внутри кругов, или смещались сами круги.
Отзывы будут двух типов: видео и текст.
При ховере на сам отзыв/видео и при клике на видео автоплей приостанавливается до момента ухода курора с отзыва или нажатия на стоп в плеере. Видео будут с ютуба.
3)
Добавить блок “Нам доверяют уборку”
В данном блоке должны добавлять лого через админку.
Добавить блок “Уберем в любое время суток”
Здесь расположена анимация https://codepen.io/mahdyar/pen/mdVGbWP смены “день-ночь” при нажатии кнопки “Выберите время”. Также на фоне разная анимация: день - бегущие облака, ночь - сияющие звезды https://codepen.io/ste-vg/pen/oNgrYOb. При выборе “ночного режима” вторая карточка становится активной, при этом меняются также стили галочки.
Блок “У нас прозрачные цены”. Нужно настроить заголовки правильного размера по макету, для всех разрешений и адаптивов.
Также в планшетной версии нужно правильно настроить отступы между переключателем и подзаголовком.
Блок SEO текст: тут фото должно подстраиваться под высоту блока с текстом. Также нужно добавить маркированный список, как показано в макете.
Блок “SEO - текст”. Требуется сделать верную таблицу по макету. + добавить подзаголовок на место второй таблицы.
Анимация смена фонов. Проверить правильность работы анимации, и исправить баг. (касается всех разрешений и адаптивов)
У нас на сайте происходит плавная смена цвета в тех местах где в макете показан градиент и там, где резкие переходы как тут.
Блок с карточками. Поправить анимацию карточек, которая сейчас работает через раз. Как должно быть: при скролле карточки подтягиваются одна за другой. Так как это реализовано на данной странице. https://www.uberem.com.ua/
Блок “Нам по силам навести порядок”, “Дополнительные услуги”, “У нас прозрачные цены”. В этих блоках с карточками тоже должна быть такая же поэтапная анимация появления. Ориентир - карточки преимуществ на главной “Дом”. https://www.uberem.com.ua/
Раскоментировать переключатель Офис-Дом после переноса данной страницы на рабочий сайт.
Если вы дочитали до конца, напишите, пожалуйста, слово «Ракета» в начале вашей ставки.
-
214 1 0 Ракета
Добрый день!
Качественно и в срок доработаю сайт.
Предлагаю для удобства и оперативного обсуждения проекта связаться в любом удобном для вас мессенджере: WhatsApp, Telegram или пришлите Skype - я вам напишу.
Без дополнительной информации по проекту, указываю почасовую ставку! Нужно связаться в мессенджере и обговорить проект!
Пример моих работ на WordPress:
https://kto-chto-gde.ru/
https://alienlabs.in.ua/
… https://www.seedolab.com/
https://m-rest.ru/
С примерами других моих работ можете ознакомиться тут: https://verstkovo.ru/portfolio/
Актуальные фриланс-проекты в категории Веб-программирование
Vue API developer for AIScreen Software | App Store Project
13 728 UAH
О нас: AIScreen - ведущая компания в области программного обеспечения для digital signage, посвященная трансформации визуального взаимодействия в бизнесе через инновационные решения. Наша передовая цифровая платформа для сигналов позволяет организациям создавать динамичный… Javascript, Веб-программирование ∙ 1 ставка |
Wrap the site with a figma with a backend
1000 UAH
Обернуть сайт с помощью Figma. Вот файл Figma - https://www.figma.com/file/mFiSJnTp9g6J2tCc41TNoO/Untitled?type=design&node-id=0%3A1&mode=design&t=7P9mPonSSDtVjEvf-1 Веб-программирование ∙ 15 ставок |
Создание лендинга в сфере HRСоздание лендинга с целью предоставления информации о вакансиях в сфере HR, включая позиции менеджера по работе с клиентами, директ менеджера и HR. Лендинг должен быть привлекательным, легким для восприятия и удобным для взаимодействия. Лендинг должен быть на weblium Веб-программирование, Дизайн сайтов ∙ 11 ставок |
Оптимизация сайта на WordPressGood day! I am looking for a developer who will help with optimizing a Wordpress website. Currently, the Litespeed plugin is already installed, and Redis+Opcache are enabled on the server. Here is the detailed task,… Веб-программирование |
Доработка сайта на Webflow ВебфлоуЕсть задача доработать сайт на вебфлоу. Доработка заключается в том что нужно переделать формы на сайте. На данный момент формы на сайте интегрированы с сервисом Make через который мы принимаем данные и передаем в различные источники(почта, Гугл таблицы, телеграмм бот). Но у… Веб-программирование ∙ 1 ставка |