Контейнеры в Elementor. Как использовать и перейти с секций
HTML-код
- Опубликовано: 4 июл 2024
- 🎓 Курс CSS Flexbox - bit.ly/3JRwcCj
📖 Версия для чтения - digitalalex.ru/konteinery-ele...
Контейнеры - это часть эволюции редактора #Elementor в котором создание макетов стало быстрее и гибче. Так, например, внутренние секции нельзя было вставлять друг в друга, а #контейнеры поддерживают бесконечную вложенность.
Другой аспект - скорость сборки сайтов и страниц. За счёт настроек направления, выравнивания и распределения, элементы выстраиваются как нужно в пару кликов.
Третий момент -теперь, чтобы разместить виджеты не требуется создавать колонки. Виджеты вставляются непосредственно в родительский контейнер и распределяются по горизонтали и по вертикали в пару кликов.
В видео от #ЦифровойАлекс посмотрим как включить контейнеры, как перейти с секций без потери наработок, настройки контейнеров и элементов, преимущества и недостатки контейнеров, попрактикуемся в сборке нескольких макетов.
🎓 Курс CSS Flexbox - bit.ly/3JRwcCj
📋** В этом видео **
00:00 - Начинаем
00:45 - Контейнеры в CSS Flexbox
01:08 - Интеграция
01:30 - Визуальное управление CSS Flexbox
01:55 - Как включить контейнеры
02:26 - Конвертация из секций в контейнеры
03:39 - Обзор настроек контейнера
03:59 - Размеры контейнера
05:41 - Направление
06:45 - Распределение содержимого
08:00 - Философия осей на пальцах
08:49 - Выравнивание элементов
10:17 - Отступ между элементами
11:10 - Перенос рядов
11:52 - Выравнивание содержимого
12:46 - Обзор настроек элемента
13:03 - Ширина
13:14 - Индивидуальное выравнивание
13:42 - Порядок
15:42 - Размер
18:51 - Глобальные параметры контейнера
20:41 - Преимущества и недостатки
27:44 - Практика - шапка
31:09 - Практика - шаблон записи
34:01 - Практика - кнопка с ссылкой
35:22 - Практика - подвал
40:59 - Практика - несколько рядов
41:46 - Выводы и резюме
👉🏻 Купить Elementor PRO - digitalalex.ru/r/elementor/
👨🏼💼 Услуги - digitalalex.ru/r/uslugi/
🎓 Курсы - digitalalex.ru/r/kursy/
⚙️ Арсенал digital-предпринимателя - digitalalex.ru/r/arsenal/
#️⃣ Присоединяйся:
Канал - digitalalex.ru/r/youtube/
Сайт - digitalalex.ru/
Telegram - digitalalex.ru/r/telegram/
Вконтакте - digitalalex.ru/r/vk/
Я.Дзен - digitalalex.ru/r/zen/
Rutube - digitalalex.ru/r/rutube/
В видео есть реклама ИП Парфилов Александр Юрьевич, ОГРНИП: 319547600174325 
Наука
🎓 Курс CSS Flexbox - bit.ly/3JRwcCj
МММ Курсы, пойду протестирую=)
"Новое видео через неделю..."? Хм.... длинная у тебя неделя, Бро....
Alex, дизайн сайта слетел
лет 6 назад сделал для своей фирмы сайт, сам, при помощи видео Александра. Такого подробного, простого и понятного описания нет не у кого. Спасибо, Александр и хорошо что вернулся!
Новье подлетело)) красота)! Спасибо, смотрим и комментируем)
с возвращением! интересная новинка, будем изучать )
Вот это преображение! Как всегда лучший канал по wp!
Александр! Рады видеть!!!
Хороший человек, всегда радует своими делами и знаниями. Огромное спасибо. Вам всегда рады за ваш профессиональный подход подачи информации.
С возвращением!!!! 🎉 Как всегда лучшее видео о wp! Спасибо! Ждём ещё!
Подписан на вас уже очень давно. рад что вернулись
Полезно было очень посмотреть, спасибо!
спасибо друг, я их не понимал, а теперь вот в процессе понимания
Маэстро WP! Огромное спасибо тебе!!!
Когда Александр анонсировал курс, сначала купил, а потом стал смотреть что же за курс такой. Ни разу не пожалел))))
Спасибо, дельное видео!
С возвращением!
Спасибо большое!
приветствую! очень рад видеть вновь) по традиции сначало лайк, потом смотрю)
Что за брутальный мужчина 🤔😄
😅
Алекс ждём такое же подробное видео по GRID , и ещё хочется увидеть, первоначальная грамотная настройка Elementor , глобальные шрифты , глобальные цвета, container, отступы, кнопки и т.д. чтобы это как-то сразу всё применялось на компьютере , планшете, мобильном. Спасибо
По Grid будет скоро. Перевод закончу.
спасибо огромное
Скорость изложения отличная, профессионализм и погружение в вопрос прекрасные.
Желательно только не так быстро перепрыгивать между элементами - возникает мельтешение и в ряде случаев даже при замедлении/повторном просмотре не видно куда нажали. Спасибо.
Кто-то на 1,5 смотри, кто-то замедляет. Всем не угожу. Думал над тем, чтобы включить индикатор курсора, но и в этом будет деление на 2 лагеря.
Возвращение джедая! Обиван Флексбокс!
Привет и с возвращением! Сделай пожалуйста сравнение конструктора Spectra с Elementor
Записал. Доберёмся и до Spectra
Как всегда отличный урок!
На какой теме работаешь в данном видео?
Hello Elementor в основном, поскольку Elementor давно позволяет делать и шапку с подвалом, и клиентские части в интернет-магазине.
Лайк не глядя!
Лайк!
По таймингу 27:23 - при выставлении внутренним контейнерам ширины 33.33% перенос третьего контейнера происходит потому, что в родительском установлен отступ между элементами (20px по умолчанию). Если отступ обнулить - переноса не будет.
Всё верно. Претензия к тому, что колонки не переносятся, а виджеты переносятся. Grid решает вопрос.
Здравствуйте Алекс. У меня проблема в Вордпресс не могли бы помочь?
Здравствуйте. К сожалению формат комментариев не позволяет запросить у вас скриншоты и полноценно задавать уточняющие вопросы, поэтому могу порекомендовать следующее:
Вступить в закрытый клуб digitalalex.ru/club/ и в течение месяца задавать вопросы там.
Накопить вопросы и прийти на консультацию - digitalalex.ru/catalog/uslugi/konsultaczii/
Что бы билдер выглядел так же как на видео не забудьте включить в настройках - "верхняя панель редактора" на базе React)
Панельку посмотрим в другом видео. Сейчас буду отдельные делать, чтобы проще искать было
Здравствуйте! Не сталкивались ли с тем, что немного прокручивая сайт - страница прокручивается сама (когда уже не скроллишь) бывает до середины контейнера или до начала следующего?...да и самом редакторе тоже - то выше, то ниже прыгает...
Сталкивался. Вам нужно выполнить эту процедуру ruclips.net/video/F95YSXgQ0rA/видео.html
@@DigitalAlex Кстати дело было в Настройки страницы - Расширенные - Scroll Snap (зачем они это вообще придумали не пойму) - отключил и всё ок...может кому-то пригодиться инфо...НО, если отключить - появляется какая-то единица слева вверху выше всего контента...???...что это не понятно...
Здравствуйте, когда-то тут уже поднимался вопрос автоподстановки заголовков из рекламы я директ
а как сейчас с этим обстоят дела? Очень нужно именно подставлять заголовки, но!
чтоб индексация была ... никак не соображу, как это сделать...
Никак потому что это частный случай клоакинга. Нужно выбирать либо делать динамический контент под рекламу, а под SEO какой-то один постоянный заголовок, либо делать разные проекты, один под SEO, другой под PPC.
Про автоподмены у меня есть видео ruclips.net/video/wCq0s4tL7bw/видео.html
Еще теперь контейнер весь ссылкой можно делать делать , с помощью дополнительной опции
Да, верно. Можно назначить тег всему контейнеру. Часто использую в loop'ах
Как купить курс по Елементор?
У меня его нет
Здравствуйте. Как применить сохраненный шаблон элементора к нескольким страницам сразу, а не редактировать страницы по одной?
Здравствуйте. Про шаблоны было видео ruclips.net/video/W2jzaZPurlU/видео.html
интерфейс изменился, но общий принцип остался прежний
Резюмирую -- новые новшества редактора Elementor, за которые нам обещали трехкратное сокращение объема кода --- не больше чем пропаганда.
Вы скорее всего не сверстали ни одного сайта кодом, а потому и не понимаете что говорите.
Да код Elementor не идеален, но это конструктор и его преимущества не в этом.
@@DigitalAlexЭто правда. Я позволил себе сравнить Elementor До и после этого новшества.
Привет друг, ждем обещанный видос по сетке в elementor?
Ждём с нетерпением ))
Отличный учебник!
Не могли бы вы создать учебник для Quill Forms?
Вряд ли. Я ей не пользуюсь
@@DigitalAlex Просто попробуйте.
@@DigitalAlex У них есть бесплатная демо-версия их веб-сайта, чтобы попробовать профессиональную версию.
Благодарю за видео.
Замечу, что переход на флексы и не ускоряет разработку и ....вообще. Сейчас конец 2023. Крч Эл. очень сырой пока. Например, gap отступ между элементами контейнера НЕ РАБОТАЕТ НА iOS и Mac. То есть подстава редкостная. Красиво делаешь, паришься -- а на половине устройств будет криво.
Приходится ставить отступы = 0. И задавать индивидуальные поля и отступы каждому элементу по-старинке. Вот так.
Новшество -- В сомнительно красивой верхней панели (выключил её) пропали числовые размерности дисплея в режиме адаптивности.
При переходе из десктопа в планшет или мобилу квартет чисел паддингов/маргинов оказывается склеены между собой. Выглядит не очевидно: меняешь одно значение и тут бац ... все разом обнуляются. Ага, давай вспоминать что там было и ходить возвращать....
Даже если знаешь что всё обнулится -- нет очевидного способа сохранить прежние значения четырёх ячеек.
Режим смены числа роликом мыши стрелками клавы -- очень сырой. Бесит просто когда не могу выделить число ни двойным НИ ТРОЙНЫМ кликом.
Такие "навороты" мне напоминают постепенное превращение конструктора в детсадовскую игрушку. При всём уважении...
Спасибо за комментарий, но тут ваши стенания никто из команды Elementor не услышит.
Я не разрабатываю этот продукт, поэтому неуместно добавлять "при всём уважении". Я его также местами ненавижу, как и любой пользователь любого продукта, и много бы сделал иначе, но не могу сделать.
А раз не могу лучше, то пользуюсь тем что есть и иногда пишу обратную связь на их Github.
Gap на mac работает, и на iOS тоже. Я сам пользователь этих систем и проблем не замечал. Ну и тут есть инфа про поддержку браузерами caniuse.com/?search=gap
@@DigitalAlex -- Деловой ответ!)) Редко пишу, но теперь схожу, дам им ... в обратную связь!
Алекс, где ты опять пропал?
Ребят, кому сложно, смотрите Сашу на скорости 0,75. Помогает успевать смотреть за всем, что он делает)))
Да есть кому медленно, есть кому быстро, всем не угодишь
Hey there, I am Jessica from the Ays-Pro marketing team. Would love to discuss working together on our plugin review. Let us know what you think about it!
Hi Jessica. Most of my viewers are from Russia and, alas, we are under sanctions. SWIFT does not work, which means my viewers will not be able to buy your products. If you have any suggestions and options, write to facebook.com/alexparfilov
Ре-релоцировались?
С чего вы решили, что я когда-то релоцировался?
Ну вот смотрю, что тот же принцип и у Spectra, контейнерами, и у других конструкторов страниц. Старое, естественно, привычнее и удобнее, но и новое надо практиковать, куда ж без этого
Принцип тот же, потому как, как я сказал - это визуализация CSS Flexbox.
странно слышать от профи что вы называете Флэкс - флексом.
Хорош душнить. В абсюлютном большинстве русских справочников пишется через е, если пишется по-русски.
Кто то еще использует эту не оптимизированную забоговонную дичь как Elementor? Все нормальные парни давно перешли на Bricks
Всему есть свой котёл в аду. До кирпича тоже доберёмся.
@@DigitalAlex Я перешел на него как только тот вышел, купил его когда он стоил 99$ вместе с налогами и очень доволен им. Да не хватает фильтра толкового (при всем уважений jet smart filter очень медлительный и еще он ломает все снипеты), но в остальном сайты я строю быстрее и лучше чем на Elementor.
Я его купил в конце 2021, за 149$. Мне он не нравился. Было время когда редактор вообще не работал нормально, постоянно кэшировался. Несколько раз начинал делать несколько проектов и в итоге возвращался к тому, что работает.
Буду делать новые заходы на разработку. Единственный вопрос у меня к ценообразованию. При такой политике проекты долго не живут.
@@DigitalAlex у них есть еще 2 проекта отдельно от Bricks и он активно задействуется с ним. Так же скоро (пока хз когда) появится магазин шаблонов от них же, где можно будет продавать свои шаблоны внутри Bricks и они будут забирать комиссию за это. Понятно что Может захлопнутся проект, но радует тот факт что все можно будет перевести в Gutenberg и не парится (ну по крайне мере я точно, я не использую Bricks как все, я подключил свой фреймворк отключив все стили Bricks) мне просто нравится как у него реализованные некоторые функций и его хтмл рэндер. С версий 1.4 до 1.8.3 каждый раз обновляюсь и не знаю проблем вообще.
С поддержкой активно общаюсь если вижу какие то проблемы или недочеты, например по СЕО я многое подкинул для изменений. В элементор что то писать бесполезно, тут поддержка может иногда задерживается но прислушивается и в обновлении это правят или добавляют если что то косячит.
Да я ж не спорю, но у меня принцип - не пользоваться чем-то одним, поэтому есть почти всё, что есть на рынке.
Рекомендую курс я приобрёл он лучший в этой теме он стоит своих денег на все 1000%. Алекс тебе спасибо за подробное видео ты как всегда лучший в этой теме
Привет. Вы когда нажимаете на квадратик блока в верхнем левом углу, то у вас появляется менюшка. Как ее йключить? Если не понятно написал, то вот на таймлайне 26:35
В старой панели: Бургер меню > Пользовательские предпочтения
В новой: лого Elementor в левом верхнем углу > Пользовательские предпочтения
Тумблер - Кнопки управления
как всегда все испоганили, как вордпресс со своим гутенбергом
Не городи чушь, сделали в разы лучше
ты просто не понял как его использовать и не понимаешь, что такое flexbox. У старых секций нет будущего.