⭐ ВАШ САЙТ СКУЧЕН? ЭТОТ ЭФФЕКТ В ELEMENTOR ЗАСТАВИТ ПОСЕТИТЕЛЕЙ ВОСХИЩАТЬСЯ | УРОКИ WORDPRESS
Summary
TLDRВ этом видео Эва демонстрирует, как можно переделать блок сайта с непривлекательного в привлекательный. Она показывает, как создать плавный скролл и реализовать интерактивный переход к блоку по нажатию. Эва решает свои задачи с помощью админки, добавляя контейнеры, настраивая отступы и стили, а также использует CSS для дополнительного оформления. Она также добавляет эффекты при скролле, такие как уменьшение блоков, и реализует плавный скролл к якорям для лучшей навигации. В конце видео Эва рекомендует подписаться на канал и оставаться в течении обновлений.
Takeaways
- 🎨 В видео автор показывает, как переделать блок на сайте с неприятным для глаз видом на более привлекательный и удобный.
- 🔧 Эва начинает с того, что рекомендует подписаться на канал и ставить лайк, прежде чем начать просмотр видео.
- 🛠️ Она решает проблему с блоком цен на своем сайте, который ей не нравится, и начинает процесс редизайна.
- 📦 Эва использует админку для удаления старого блока и добавления новых контейнеров с горизонтальным и вертикальным расположением.
- 🖌️ Она описывает, как настроить фон, отступы и стили для контейнеров, включая теневую обводку и закругленные углы.
- 🔄 В видео рассматривается создание плавного скролла и интерактивных переходов при нажатии на контейнеры.
- 👁️ Эва подчёркивает важность корректного выравнивания и центрирования элементов для удобочитаемости и привлекательного вида.
- 📏 Она устанавливает минимальную высоту для блоков, чтобы обеспечить единообразный дизайн и структуру сайта.
- 🖥️ Эва также обсуждает настройку эффектов для различных устройств, включая ограничение некоторых эффектов только для ПК.
- 🔗 Она добавляет якорные ссылки для плавного перехода между различными блоками контента на сайте.
- 🔧 В конце видео автор рассматривает добавление плавного скролла и корректировку кнопок для более гладкого взаимодействия с сайтом.
Q & A
Чему научит видео о переделке блока на сайте?
-Видео показывает, как изменить внешний вид блока на сайте, добавить плавный скролл и реализовать интерактивный переход к другому блоку при нажатии.
Какой эффект используется для привлечения внимания к блоку на сайте?
-В видео используется эффект 'стака', который позволяет контейнерам на сайте изменять свою форму при прокрутке.
Какие шаги предпринять для начала переделки блока?
-Сначала нужно удалить старый блок, а затем создать новые контейнеры с желаемыми настройками для реализации нового дизайна.
Как настроить отступы в контейнерах для улучшения дизайна?
-В видео рекомендуется установить отступы, например, 40 пикселей сверху и снизу, и 30 пикселей слева и справа.
Чему поможет добавление тени к основному контейнеру?
-Добавление тени поможет контейнеру выделяться на фоне и не сливаться с основным фоном сайта.
Какова цель использования эффекта Scale Down в контейнерах?
-Эффект Scale Down используется для создания динамичного эффекта, при котором блоки уменьшаются в размере при прокрутке.
Как настроить плавность прокрутки для улучшения опыта пользователя?
-В видео рекомендуется добавить определенный код в раздел 'Код' в админке сайта, который обеспечит плавность прокрутки.
Что нужно сделать для реализации плавного перехода к блоку при нажатии на кнопку?
-Для плавного перехода необходимо настроить якорные ссылки и использовать скрипты, которые реализуют плавное изменение позиции при прокрутке.
Какие настройки нужно сделать для корректного отображения блоков на разных устройствах?
-В видео описывается, что нужно убедиться, что блоки корректно отображаются на ПК и мобильных устройствах, возможно, применив медиа-запросы для разных экранов.
Какие дополнительные настройки рекомендуются для завершения переделки блока?
-В видео упоминается необходимость добавления кнопок для перехода к различным блокам, настроить цвет фона и текста, а также корректно настроить отступы и тени для визуального комфорта.
Outlines
🛠️ Реконструкция блока на сайте
В видеоруководстве автор показывает, как перерабатывать блок на сайте, делая его более привлекательным и удобным для пользователей. Обсуждается идея добавления плавного скролла и интерактивных элементов, таких как кнопки перехода к различным контейнерам. Также рассматривается процесс удаления старого блока и замены его на более современную версию с использованием админ-панели.
🎨 Настройка стилей и эффектов для контейнеров
Второй параграф посвящён настройке стилей и визуальных эффектов для новых контейнеров. Включает в себя выбор цветов фона, добавление теней и скругления углов, а также настройку отступов для улучшения визуального оформления. Также рассматривается вопрос о том, как сделать эффекты прокрутки доступными только на ПК и как настроить прокрутку для мобильных устройств.
🔗 Добавление якорных ссылок и плавного скролла
Автор продолжает инструкцию, добавляя якорные ссылки для быстрого перехода между различными секциями сайта. Поясняется, как настроить плавный скролл, чтобы улучшить опыт пользователя и сделать переходы между блоками более гладкими и приятными. Также рассматривается вопрос о том, как настроить кнопки для достижения желаемого эффекта.
👨💻 Заключение проекта и взаимодействие с аудиторией
В заключительном параграфе автор завершает реконструкцию блока и предоставляет обзор всех внесенными изменениями. Он также обсуждает возможные вопросы и предложения по улучшению, призывает к взаимодействию с аудиторией через комментарии и Telegram-чат, и подчёркивает важность подписки на канал и лайков для поддержания интереса к контенту.
Mindmap
Keywords
💡Стака
💡Скролл
💡Контейнер
💡Плавный скролл
💡Эффект
💡Админка
💡Якорь
💡Прозрачность
💡Кнопка
💡Плавная прокрутка
💡CSS
Highlights
Видео демонстрирует переделывание блока сайта с непривычным дизайном в более привлекательный вариант.
Добавление плавного скролла для улучшения взаимодействия пользователя с сайтом.
Возможность нажатия на контейнер для перехода на другой раздел сайта.
Удаление непривлекательного блока с ценами и замена его более привлекательным вариантом.
Добавление новых контейнеров и настройка их направления для улучшенной структуры сайта.
Использование горизонтального ряда для выравнивания контейнеров.
Добавление заголовка, текста и кнопки для интерактивности блока.
Задание белого фона для контейнера и настройка отступов для эстетического дизайна.
Добавление блока с картинкой и настройка отступов для гармоничного расположения.
Настройка минимального размера контейнера для единообразия высоты блоков.
Добавление тени и закругления углов для визуального отделения блока от фона.
Создание четырех контейнеров для организации сайта на одном экране.
Установка фона для контейнеров, чтобы избежать наложения текста.
Изменение последнего блока на черный цвет для выделения среди других блоков.
Определение индекса и высоты остановки для каждого блока при скролле.
Настройка эффекта Scale Down для создания динамичного вступления блоков при скролле.
Добавление плавной прокрутки для улучшения впечатления от навигации по сайту.
Использование виджетов якоря и кнопок для реализации плавного перехода между блоками.
Добавление и настройка кода для реализации плавного скролла на сайте.
Transcripts
Всем привет Эва на связи и в сегодняшнем
видео Я хочу вам показать как можно
переделать блок вот с такого вот на вот
такой вот получается у нас здесь
стакаются
контейнеры здесь есть плавный скролл и
есть ещё одна очень прикольная штука это
вы можете нажать на какой-то контейнер и
будет туда переход Так ну или вот так
вот перед просмотром этого видео
подпишитесь на канал поставте лак видео
ну а мы начинаем
погнали я вот думал где можно применить
эффект стака но потом вспомнил что у
меня есть сайт и мне здесь не нравится
блок с ценами на самом деле здесь есть
несколько блоков которые не нравятся но
вот вот этот вот самый такой напряжены
для моего глаза поэтому Вот его мы будем
переделывать
вот так вот всё выглядит в админке здесь
не доступом не пугаемся так и должно
быть потому что здесь вот идт переход
Света ну ладно В любом случае мы этот
блок будем удалять Так я наверное
отда вот так вот Сай чтобы было удобнее
работать так нажимаем на плюсик
добавляем контейнер направление вниз
потом сюда добавляем ещё один
контейнер внутрь этого я добавлю е
один и второй и у основного поставлю
направление в бок горизонтальный ряд вот
у меня есть два моих
контейнера так нажимаем на плюсик у
одного не Нет мы даже не плюсик мы будем
заголовок добавим по левому краю дальше
у меня будет
текст по левому и дальше у меня будет
кнопка А с правой стороны у меня будет
так мне нужно задать белый
фон для моего блока вот так вот так а с
правой стороны у меня будет блок с
картинкой
А так картинка будет там по левому
краю м и внутри самого контейнера Мне
нужно сделать отступы ну к примеру
сделаем 40 40 30 30 Так
а ещё можно через вкладку стиль добавить
ни или нет Давайте я вот сейчас вот это
вот всё заполню и потом мы пройдёмся по
основному оформлению блока Вот такой вот
у меня получился блок можно ещё всё по
выравнивать по центру здесь и здесь так
и переходим в настройки нашего
контейнера только не левого и не правого
А вот основного вот тот который здесь а
дальше давайте через макет мы зададим
минимальную высоту нам нужно чтобы все
наши следующие блоки были одной высоты к
примеру в моём случае это где-то
пикселей 600 600 много 500 нормально так
500 пикселей дальше так давайте вот в
этом контейнере сделаю отступы сверху и
снизу чтоб нам было удобнее вот так
теперь для нашего основного контейнера
Давайте зададим тень чтобы оно как-то
как-то отделяла и не было слито с нашим
фоном поэтому Заходим в границу тень
бокса вот у нас появилась
тень очень много начинающих
разработчиков делают очень очень жирную
такую тень Вот как сейчас она на самом
деле выглядит не очень красиво лучше
сделать её там 30
пикселей 30 пикселей и цвет вот здесь
вот у нас стоит прозрачность 0,5
поставим 02 и он Так смотрится гораздо
лучше
так Вот так оно смотрится но нам бы ещё
закруглить углы наши поэто опять же в
настройках этого контейнера в границе
скругления углов Ну поставим 25
пикселей и в принципе вот так вот
выглядит симпатично наш
блок закрою навигатор берём вот этот вот
контейнер и дублируем его в моём случае
будет одностраничный сайт будет сайт
визитка будет интернет-магазин и будет
ещё один блок с дополнительной
информации то есть Мне нужно четыре
блока сделать поэтому делаю четыре блока
и теперь просто их мне нужно
заполнить У меня получилось вот такие
четыре контейнера единственное что у
меня здесь вот отступа между ними Нет
потому что у меня по умолчанию там стоит
по-моему нулевой отступ Давайте поставим
20
даже больше 50к Примерно вот так уже
получше оно всё смотрится единственно
что
тень
там Вот
так мы забыли ещё для каждого контейнера
нам нужно задать фон потому что без фона
может быть такое что так как у них
прозрачные фоны у них текст будет просто
друг на друга накладываться поэтому
задаём
фон я буду задавать немного й
раз не чисто белый каким-то лёгким
оттенком пришла идея переделать
последний блок и сделать его вот прям
чёрным цветом чтобы он выделялся среди
остальных и теперь начинаем делать сам
эффект переходим в наш контейнер примеру
первый переходим в расширенные во-первых
ставим за индекс за индекс ставим этому
контейнеру один этому контейнеру Будем
ставить этому Ну а этому просто по
порядку дальше переходим в раздел
движение стики ставим топ дальше здесь
где Осе нам нужно указать высоту это
будет расстояние где у нас будет
останавливаться блок то есть чтобы он не
скролл в самый верх а чтобы Он где-то
останавливался обычно у меня здесь
прозрачная шапка и мне нужно чтобы мой
блок останавливался где-то Ну чтобы он
был не под шапкой поэтому у меня здесь
шапка по-моему где-то пикселей
120 и мы поставим осет здесь ну 120 и
поставим
также не забываем ставить галочку чтобы
этот блок оставался в самой нашей
колонке чтобы он не выезжал так
переходим к следующем контейнерам
расширенный за индекс 2 э эффекты
движения ки топ так я ещё хотел чтобы
этот эффект у меня был только на ПК у
меня здесь просто много информации и на
мобильной версии Я не уверен что он
будет как-то нормально смотре нормально
читаться поэтому я оставлю
только так здесь 140 пикселей то есть
разница будет 20 пикселей 120 140 160 и
так далее сейчас только вернусь к
первому
и оставлю чтобы это было только на
ПК так второй 140 пикселей оставляем
колонки The инкс я ему задал дальше
третий The Index 3 эффекты
движения 160
вставляем колонки и
четвёртый за индекс
4 по 80 и тоже оставляем в
колонке нажимаем обновить и Давайте
посмотрим как как это выглядит
тепер вот наш первый
блок второй блок третий блок и четвёртый
обращаю внимание у нас при скролле у нас
едет отступ Поэтому отступ нужно будет
скорее всего задать вручную такое
Частенько бывает на разных сайтах может
быть по-разному на реагировать где-то
может быть отступ Уехать А где-то может
сам блок уехать вбок А так сейчас я
покажу что нам нужно с этим
делать переходим в настройки контейнера
давайте к первому
перейдём расширенные Custom CSS
и вручную ему
пропишет то есть для этого контейнера и
вручную пропишет справа и
слева и зададим ин ему ещё так это нам
нужно чтобы это было только на ПК
версии
так это версия и теперь для
мобилки а стоп на мобилке У нас отключен
этот эффект поэтому только для
ПК так оставляем нажимаем обновить и
опять смотрим смотрим Как работает наш
эффект так Смотрим уже у нас ничего
никуда не едет уже всё О'кей только
теперь нужно это сделать на всех
остальных на всех остальных контейнерах
У нас их здесь четыре поэтому к каждому
мы прописываем этот код
сюда
А сюда и вот
сюда теперь у нас вроде как всё О'кей
ничто никуда не едет Теперь давайте
добавим эффект чтобы у нас не просто
блоки собирались А чтобы оно какое-то
движение было поэтому для этого мы
переходим к первому
контейнеру опять же Заходим в эффекты
движения и здесь есть слин эк заходим
сюда включаем его
Нам нужен эффект
Scale Нам нужен эффект Scale Down и
Поставим к примеру двойку А дальше здесь
где viewport нам нужно поставить от нам
нужно поставить от нуля до Давайте
поставим до двадцати дальше во втором
контейнере эффекты движения с
Effect Down тоже поставим двойку только
теперь от 20 до 40
третий
контейнер всё тоже самое
[музыка]
только только уже от 40 до
6 и четвёртый от 60 до 80
Так теперь смотрим Что у нас получилось
у нас получается оно как бы уменьшается
дальше идёт следующий блок который
уменьшается и наезжает потом ещё
один и вот так
вот если нужно Можно попробовать Скейл
поставить не два а примеру че и тогда он
будет просто с большего размера
уменьшаться стандартном своим положением
но если мы посмотрим меру там обычным
размером экрана то это в принципе как
раз нормально единственное что у
нас у нас вот нет расстояния между
блоком Видите вот оно очень маленькая
здесь поэтому Как вариант можно сделать
У нашего
контейнера здесь где пробелы поставить к
примеру 70
расстояние между нашими контейнерами
чтобы
было ещё под такой эффект было бы хорошо
добавить плавную
прокрутку Потому что сейчас у меня стоит
более резкая
прокрутка
так так так и вот
так кстати вот последний блок У меня как
раз он видим что он съезжает
немного поэтому давайте давайте его
спасать переходим к последнему блоку
если он у нас съезжает тогда мы
дописывая ещё к
тоже кстати съезжает Короче нужно будет
эту строку ко всему
прописать так просто
скопирую и пропиши везде
сюда
сюда и вот
сюда и смотрим Как это работает так
первый блок потом идёт
второй потом идёт
третий и четвёртый
и потом переход дальше так нам нужно
добавить вот здесь вот отступ добавить
заголовок этот блок нам нужно убрать и
добавить плавную
прокрутку Теперь у нас есть Сколько
стоит сайт мы листаем у нас дальше идут
каются
блоки и я понял что было бы прикольно
сделать если бы при нажатии на вот эту
вот
вкладок переход в блоку дава
бы сделать при помо
ярей так получается мы основной наш
контейнер вот он мы ищем виджет Якорь
меню и добавляем его ну добавим куда всё
равно куда нам нужно его перенести Перед
первым внутренним контейнером Надеюсь
Понятно Сейчас
объясню есть у вас должна быть Вот такая
структура и
потом Якорь следующий
контейнер Это я наверное вовнутрь Да
добавил
так и вот
так Так теперь по идее всё правильно так
те просто подписываем первый контейнер у
меня
[музыка]
А это у меня лендинг так и напишем
Дин второй контейнер - это у
меня
визитка третий контейнер - это у меня SH
и четвёртый
контейнер назовём его но просто так и
назовём А дальше Мне нужно
вовнутрь давайте так вовнутрь моего
первого контейнера добавить
кнопку виджет
кнопка Я вообще это не планировал делать
но просто интересно сработает или нет И
кнопку
выносим Ну да вот сюда Пускай она
будет Нет на нужно чтобы оно было внутри
первого контейнера
так Да она у меня внутри первого
контейнера только вот не в левой и не в
правой части А вот просто вот просто
внутри Так теперь переходим в
расширенные позиционирование ставим
абсолютное растягиваем кнопку во всю
ширину во вкладке расширенной ширину
ставим во всю ширину у нас должно
получиться вот так вот высота кнопки
должна быть Ну где-то минимум 20
пикселей она у нас здесь у нас есть 20
пикселей по-любому пото что у нас
разница между блоками когда они
стакаются 20 пикселей дальше нам нужно
просто
содержимым ссылку кнопки ставим
лендинг потому что у нас лендинг - это
вот первый Якорь который надо страничный
сайтом дальше вкладка стиль цвет текста
делаем
прозрачным цвет кнопки тоже делаем
прозрачным просто эту кнопку копиру
и закидываем её в каждый
контейнер только меняем
ссылку Так вторая Кнопка - это у нас
визитка третья Кнопка - это у
нас
SH Ну и четвёртая кнопка
это у
нас это у нас так Ага всё правильно это
у нас
ноче кнопку по идее Можно не добавлять
Ну да
ладно добавили уже так
сохраняем Ну и смотрим Как это работает
приме мы там листаем первый блок
второй хотим вернуться ко второму просто
нажимаем и у нас идёт переход у меня
резкий переход потому что у меня здесь
стоит шаблон и мне кнопки с переходом
нужно делать немного по-другому
нестандартный кнопку но если у вас там
Астра стоит или Hello Element то у вас
всё будет О'кей Так сейчас я хочу просто
переделать кнопку и тогда мы и тогда мы
сделаем плавный скролл потому что у меня
вот вот она слишком резко так я
переделал
кнопки и теперь
при нажатии у нас идёт переход к нужному
блоку то есть всё
работает и вот так прикольно Так теперь
давайте сделаем плавный скролл потому
что мне не нравятся вот эти вот резкие
тут такие переходы У меня
есть для этого мы переходим в
админку нашего сайта заходим элементе
кастом
код добавим новый код назм его рол к
примеру дальше Location выберем Body и
нажмём просто ent чтобы у нас сохранился
он как
черновик потом просто копирую и Вставляю
вот этот вот код если что этот код будет
в Telegram канале у меня можете взять Я
по нему не буду проходиться просто
публикуем и смотрим Что у нас на сайте
если что это просто Len сл А так и
пробуем Так теперь у нас всё более
плавно
и смотрится намного
приятнее так и у нас нет вот этих вот
подёргивание Ну в целом в целом
круто так на этом всё если у вас
остались какие-то вопросы Вы можете
задать их в комментарии под видео можете
задать их в Telegram чате ссылка в
описании Подписывайтесь в Telegram чат
Подписывайтесь в Telegram канал ставьте
лайки этому видео подписывайтесь на
канал Ну короче Спасибо за просмотр пока
N
Weitere ähnliche Videos ansehen
The Best Way to Manage Tasks and Projects in Notion
Как раскрыть свой потенциал? Кого ждет процветание на Земле и как раскрыть свой потенциал?
ШОК!!!!Жидкая поталь своими руками за копейки!!! Часть 2
Make Money Blogging in 2024 Google AdSense ( My Secret Online Earning Method)
О чем я хочу спросить Путина / Мои процедуры для омоложения лица и тела / Проблемы с мужем и с мамой
GPT-4o - Безумные ИЗМЕНЕНИЯ уже сейчас. Исторический поворот от Open Ai
5.0 / 5 (0 votes)