Секции, ряды и колонки #2: настраиваем макет в Elementor

Продолжаем цикл уроков по секциям, рядам и колонкам. В этом уроке мы разберёмся с настройками макетов #Elementor - одного из лучших конструкторов сайтов для #WordPress
Серия уроков: секции, ряды и колонки
1) Структура макета Elementor • Cекции, ряды и колонки...
2) Настройка макета Elementor (вы здесь) • Секции, ряды и колонки...
3) Стили макета Elementor • Секции, ряды и колонки...
4) Расширенные параметры макета Elementor • Секции, ряды и колонки...
Elementor
Обзор Elementor - • Elementor - первый обз...
Обзор Elementor PRO - • Elementor Pro - обзор ...
Скачать Elementor бесплатно - digitalalex.ru...
Купить Elementor PRO - digitalalex.ru...
#️⃣ Присоединяйся:
Канал - digitalalex.ru...
Сайт - digitalalex.ru/
Telegram - digitalalex.ru...
Вконтакте - digitalalex.ru...
Я.Дзен - digitalalex.ru...
Rutube - digitalalex.ru...

[@DigitalAlex]

Нравятся видео про Elementor? Поддержите выпуск новых! donatepay.ru/donation/wplovers Друзья, я очень стараюсь делать хорошие, понятные уроки и это занимает целую прорву времени. В то время, пока я записываю и монтирую видео, я мог бы заниматься другой работой, но так я помогаю очень малому количеству людей. Записывая уроки для массовой аудитории, я получаю возможность помочь сразу большому количеству людей и это здорово! Поддержать WPlovers donatepay.ru/donation/wplovers Более того, хочется делать больше обзоров на платные плагины и темы. К сожалению, но не все разработчики соглашаются предоставить их для теста бесплатно и приходится выделять деньги из собственного кармана. Я буду очень признателен, если вы поддержите проект WPlovers. Поможет любая, даже малая сумма. Спасибо! donatepay.ru/donation/wplovers

[@ВладиславПолехин-ю7б]

Я был далек от творчества такого рода. Пару лет назад, случайно, попал на ролик WPlovers. Автор впечатлил своей увлеченностью, и я досмотрел видео до конца. Содержание видео не помню, но отложилось то, как автор, с заботой, с задоринкой, преподнес информацию. Теперь эта тема интересна. С большим удовольствием изучаю ролики Александра. Очень помогают. Спасибо за ваш труд!

[@МаркетологЭлемент]

Отличные видео! Просто и понятно, без воды. Спасибо! ПС. Извините, "height" правильно произносить "хайт" ("хейт" - это "ненавидеть, ненависть").

[@DigitalAlex]

Есть такое )) Возьму на заметку.

[@victorsokoluik4573]

Спасибо ты мне сберег кучу времени и сил!

[@eugenia7655]

Скажите, пожалуйста, как менять секции местами. Надо сделать это в готовом сайте.

[@eraDJh]

ПОдскажите как изменить положение колонки. Она всегда посредине. Нужно опустить вниз чтобы была внизу фото

[@korchevoy_d]

Спасибо вам за ваши видео!

[@SardanaKorotova]

привет! видео старое, но все же, вдруг) только установила элементор. в целом разобралась в колонках, рядах. но вот вопрос: как сделать так чтобы, например, текст или изображение с соседней левой колонки "накладывалось" на, например, правую или нижнюю? или, например, заголовок чтобы был прямо на изображении, не рядом, не снизу-вверху, а "на". решить проблему зашивкой фото как фон или как? z-index и отступы вертела всяко - не помогает. тема сама изначально собранная на элементоре, просто переделываю страницы под себя. заранее спасибо!

[@ArtMay]

Здраствуйте. Сейчас нужно добавлять тег див или везде оставляем по умолчанию, в родительской и внутренней секции ? 7:13 минута

[@pakrisk5985]

Добрый день. Можно ли менять цвет текста, картинки и разделителя при наведении на колонку

[@welserkz3678]

Александр, здравствуйте. Спасибо за видео. А где можно посмотреть где какой HTML тег следует применять?

[@HDMetalPrints-77]

Ну вот эти колонки, как я понимаю, они на языке слов паразитов - "как бы колонки". )) По сути это таблица. А вот как сделать настоящие текстовые колонки, в газетном, журнальном стиле, НО, что бы при наборе текста, он распределялся автоматически во вторую колонку? При существующем варианте "колонок", если я набираю много текста в одной, то она становится очень длинной, а вторая остается пустой, и распределять текст по колонкам приходиться в ручную. )) Или есть вариант, но я не в курсе? ))

[@ОлегТополев-л7и]

А можно ли как-нибудь "закрепить" ширину колонки? Во вкладке "макет" ширину колонки можно задать только в %, в пикселях нельзя, из-за этого при добавлении новых колонок ширины старых сбиваются и каждый раз приходится заново редактировать эти %

[@DigitalAlex]

Часто спрашивали. Подождём Elementor Pro 3.4 там должны брейкпоинты добавить, может и колонкам перепадёт. Есть в этом дополнении wplovers.pw/r/pafe/ но не покупать же его ради этого.

[@moneton]

Уровень знаний Elementor был в пределах 10-30 level. После просмотра видео уровень взлетел до 90 level. И теперь то чувство, думаешь когда начнешь экспериментировать, легко достигнешь уровня 150 и даже 200. Что раньше не смотрел эти видео, не понимаю.

[@АИПАлдриан]

Здравствуйте, подскажите, пожалуйста, как обращаться к настройкам табличной колонки или блока, если при форматировании на верх таблицы или блока наехал вышестоящий блок, который в данном оформлении имеет более высокий Z-индекс и перекрывает кнопку выбора свойств нижележащих элементов?

[@DigitalAlex]

Здравствуйте, знакомая проблема. Писал разработчикам, чтобы сделали палитру слоёв, пока тишина. Я делаю так: 1) Зажимаю Ctrl и "+" или "-" страница меняет размер и получается ухватиться за элемент управления; 2) Более сложный, но рабочий. Открываю прям в редакторе по F12 инструменты разработчика, выделяю блок и задаю ему, к примеру position: relative; top: 200px; (или bottom) блок двигается и получается ухватить то, что нужно. Костыли, но пока это единственное, что могу порекомендовать.

[@yuriyb5286]

Здравствуйте. Скажите существует ли в элементоре или вообще в WordPress возможность выравнивать элементы относительно друг друга. Я имею ввиду не секции, колонки и ряды, а именно элементы в разных секциях и колонках. Ну или может быть есть что то типа направляющих как в фотошопе?

[@DigitalAlex]

В Elementor есть возможность выравнивания по верху, по низу и по центру на уровне колонок и секций. Как такового выравнивания по направляющей в веб-вёрстке нет. Да и в принципе вертикальное выравнивание в вебе весьма капризная штука. Уточните что и как нужно выровнять и мне будет проще подсказать решение.

[@ЖеняШвец-к5ы]

привет не могу понять вот сделал я секцию как мне уменьшить ее размер в целом ? как влиять вообще на размер добавляемых колонок?

[@DigitalAlex]

Точно видео смотрел? Вот с этого момента ещё разок kzbin.info/www/bejne/inTSfIdpZs6Amckm53s Там и про ширину и про высоту секции есть. И впредь прошу использовать именно эти определения, а не просто "размер". Колонки тянутся автоматически в процентном соотношении в зависимости от их количества.

[@kirovtitan]

здравствуйте. как сделать, чтобы на мобильном разметка шла не в одну колонку, а например в 2, там где это требуется?

[@DigitalAlex]

Есть целое видео об этом kzbin.info/www/bejne/ppCUpY2phKllp9E и на канале всё поделено по плейлистам.

[@lvasmart3516]

Можно ли как то отменять (возвращать на шаг, 2 назад или более) изменения !?

[@DigitalAlex]

Посмотрите это видео kzbin.info/www/bejne/eJqvq3mtrcxmick

[@ruslanbolsun8023]

Можно что бы в мобильной версии все виджеты тексты не перескакивали друг под друга а были как и в компьютерном виде в строку только меньше???

[@КсенияСанькова-ъ7ъ]

а как делать переходы? к примеру у меня 3 колонки 1) блог - хочу с кликабельными последними статьями 2) переход на страницу интенсива 3) форма записи на интенсив. как осуществить эти все переходы на страницы

[@DigitalAlex]

Видимо поставить кнопки и задать св соответствующих полях ссылки. Если переформулируете вопрос, возможно я его пойму и отвечу точнее ))

[@ЖеняШвец-к5ы]

и еще один вопрос сделал три сайта на теме астра. А лого везде не отображается особенно на телефонах. на компах то есть то нет. подскажи пожалуста в чем тут проблема. так же и с фавикон

[@DigitalAlex]

Кто ж его знает, ситуаций может быть 100500. У меня всё работает.

[@max_sim2848]

подскажите, как создать таблицу или что то с ней схожее?только так что бы она была адаптивна на мобильной версии.

[@DigitalAlex]

Штатными средствами никак. Есть стороннее платное дополнение где есть этот виджет wplovers.pw/r/jet-elements/

[@ВиолеттаСамокиш]

Добрый день! У меня стоит Elementor Pro, при добавлении Woo-Products на страницу все товары выстраиваются в одну колонку и ничего не меняется, когда я выбираю другое количество колонок в настройках Layout. Не подскажете, с чем это может быть связано и как решить проблему? Заранее спасибо!

[@DigitalAlex]

Здравствуйте, Виолетта. Скорее всего у вас тема Storefront и дело в ней. В этом обзоре kzbin.info/www/bejne/goi2qnxso8ZraM0 было то же самое. Это известная проблема именно с этой темой. В комментарии под тем видео писал, как решить, но вот ещё раз: нужно добавить секции, в которую вы вставляете виджет товаров или категорий, класс site-main на вкладке Расширенные.

[@ВиолеттаСамокиш]

Спасибо огромное! Все заработало)

[@DigitalAlex]

Пожалуйста =)

[@pavelvorobev9101]

Александр, здравствуйте! У меня совершенно банальный вопрос, но я, все же, не могу сам разобраться. Как делать высоту секции равной высоте вложенной колонки? Например у меня есть секция, внутри колонка, в колонке виджет "изображение", я добавляю контент - изображение, его высота 60px, и я хочу что бы секция была тоже 60px, т.е. равна по высоте вложенному контенту. Но колонка имеет сверху и с низу отступы по 10px, и в итоге моя секция уже 80px. И это справедливо для любого контента - добавляю Заголовок высотой 10Px, секция в итоге все равно получается 30px (по 10px отступы сверху и с низу).

[@pavelvorobev9101]

Несколько дней мучился, не мог понять, стоило написать вам - сам через минуту сообразил что надо было убрать Разрыв Колонок )) На всякий случай не буду убирать свой вопрос, вдруг кто то будет тупить так же как и я ))

[@DigitalAlex]

Иногда полезно тормозить с ответом =) Ну и вы просто написали свои мысли и поняли, что в вашем вопросе заложен ответ - отступы =) Конечно вопрос пусть висит. Не нужно боятся показаться где-то недогоняющим. Человек не может знать всё.

[@jannavelizhanina3537]

Спасибо

[@nikolaykhomutinnikov9434]

Не могу установить виджет "Заголовок" посередине

[@DigitalAlex]

Николай, напишите, какая тема у вас. У меня подозрение на несовместимость.

[@ihabia]

как сделать секцию в которой 4 колонки, и при добавлении следующей она была уже с новой строки, у меня почему то добавляется в тот же ряд, хотя изначально ставлю всем 25%, а когда добавляю следующий то эти проценты слетают

[@DigitalAlex]

Иван, колонки не переносятся на новый ряд и при добавлении новой, значения всех колонок пересчитывается. Точнее, могут переносится, но только в режиме планшета или смартфона. Это нормальное положение вещей для любой адаптивной сетки.

[@ihabia]

Это не практично, вот у меня есть допустим 8 элементов, которые должны лежать в одной секции, т.е. по 4 в каждом ряду: prntscr.com/hlj5cw. А на планшете по 3. И вот тут загвоздка! Если они не переносятся, я попробовал сделать 2 секции по 4, но получается секции разные и на планшете получается вот такое prnt.sc/hlj4g6, а мне нужно чтобы было так: prntscr.com/hlj4t6 Можно это как то решить?

[@DigitalAlex]

Делаете секцию с 1 колонкой. В неё вставляете 2 виджета Колонки и добавте колонки. Получаете 2 ряда с 4 колонками в каждом. Для планшета выставьте размер колонок по 25% и будут все 4 в один ряд. Шириной колонок можно управлять для устройств в отдельности. Вы все видео из серии посмотрели? kzbin.info/door/14zLpi3uwdqYaa1P2zPvqwsearch?view_as=subscriber&query=секции+ряды

[@ihabia]

Не совсем понял, почему для планшета по 25%, мне же для планшета по 3 в ряду нужно? prnt.sc/hlj4t6

[@DigitalAlex]

Нет, не получится. Да, это своего рода ограничение сетки, но пока так. Соглашусь, что сетка не идеальна, но я работаю с тем, что есть.

[@user-jv2km7sl4j]

Всем привет! Проблема такая: есть три колонки, в каждой текст с заголовком, под каждой кнопка. Но так как в каждой колонке текст разного размера, то кнопки под колонками оказываются не на одном уровне, все съезжает. Сначала попытался решить эту проблему добавив отступ к съехавшей кнопке, но проблема в том, что текст респонсивен, а значение отступа статично и когда я меняю ширину браузера, текст опять съезжает и кнопки под текстом оказываются на разной высоте. Такая же проблема с заголовками, при изменении ширины браузера текст переносится как попало и все опять разъезжается. Как сверстать текст адекватно с учетом респонсивности? Помогите!

[@DigitalAlex]

К сожалению, но это особенность отзывчивого дизайна. Его можно только понять, простить и проектировать сайты так, чтобы это смотрелось нормально. Поищите виджеты в сторонних расширениях wordpress.org/plugins/search/elementor/ Возможно, сделали что-то готовое с кнопкой. Хотя, мне кажется, что это будет то же самое. Текст разного размера и всё равно будет "плясать".

[@user-jv2km7sl4j]

Спасибо за оперативный ответ! Я вот что подумал: когда я меняю ширину браузера, то контент на странице "перекомпоновывается" четыре раза (по крайней мере у меня), прежде чем приходит к мобильному варианту. То есть, я сужаю браузер и вид приходит к мобильному в четыре шага, где последний - мобильная версия. Может быть можно как-то в коде отключить эти шаги оставив только первый (десктопный) и четвертый (мобильный), а промежуточные убрать, например? Чтобы по мере сужения браузера вид до определенного момент оставался десктопным, а потом сразу перескакивал на мобильный, без промежуточных вариантов компоновки, где собственно и вылезают все эти косяки? В любом случае, спасибо за ответ!

[@DigitalAlex]

Это не косяки, а такая сетка. На форуме разработчиков довольно активно ведётся обсуждение произвольных точек разлома. Скорее всего нам это светит в ближайшем будущем. Если хотите изменить сетку, вам карты в руки если знаете CSS. К сожалению, я не готов сейчас ковырять код, чтобы подогнать сетку только для вас.

[@user-jv2km7sl4j]

WPLovers - о Wordpress понятно и с любовью Нет проблем, я на это и не рассчитывал)) Большое спасибо за ответы! Проблему с кнопками решил простым выносом кнопок в отдельную секцию, под секцией с текстом. С переносами - ждём обновлений и учим CSS 👍

[@Sapfirinka]

нет ссылки на предыдущий урок , разобраться какой урок за каким очень трудно. Под видео желательно давать ссылку на предыдущий урок , а так же их нумеровать, что бы легче было бы откапывать.

[@DigitalAlex]

Поставил ссылки на все уроки и отметил на каждом, какой вы смотрите. Также добавил цифры в заголовки. Спасибо за вклад в удобство и развитие канала!

[@Sapfirinka]

очень трудно разобраться в структуре сайта , хотелось бы видео о создании структуры - страницы, записки, рубрики, подрубрики . , да еще в перемешку с шапкой и подвалом. Хотелось бы схем построений и глубин сайтов . Очень мало инфы , я запуталась, а вот с эффектами разобраться для новичков с вашей помощью очень даже легко. Ваши уроки просто отличные ! Смотрю с большим интересом! Спасибо

[@DigitalAlex]

Про рубрики и подрубрики и остальное понял. Тема обширная, нужно продумать подачу и сделать. Сам давно понимал, что надо.

[@ЖеняШвец-к5ы]

вот мой сайт scooterpro.com.ua поставил плагины хуки и все такое создал шапку в елементор но почему-то шапка получилось толстая поэтому я ее в низ засунул. подскажи пожалуйста как уменьшить ее. да и вообще по дизайну может что посетуешь? буду очень признателен.

[@DigitalAlex]

Я не понимаю слова "толстая". Есть понятия высокая (по вертикали) и узкая (по горизонтали). И что ты считаешь шапкой, которую ты "засунул вниз" я тоже не понимаю.

[@ЖеняШвец-к5ы]

WPLovers - о Wordpress понятно и с любовью привет я просто в елементоре в шаблонах ее шапкой назвал и вставил хук как ты на видео но он в шапке получилась такая (высокая) что по сайта закрывает. как ты сделал свою шапку сколько поставил высоту?

[@ЖеняШвец-к5ы]

у меня скромность загрузки моб версии 15 )))) подскажи пожалуста что бы мне изменить или что я сделал неправильно?

[@DigitalAlex]

Велкам сюда kzbin.info/aero/PL32QYVIEEOw8VxdiwmpS1BD20k2LU8OIn

[@DigitalAlex]

Так бы и сказал,что блок с таймером, а то шапка-шапка. Как у себя делал уже не помню, дело было несколько месяцев назад. Возможно задавал произвольные CSS max-height: 100px; этой секции.

[@kotoboss]

3:33 Автор, у тебя открыта "основная секция", а мышкой показываешь на расстояние "внутренней секции"... Я повторяю по шагово и не могу понять почему не меняется растояние во "внутренней секции", пока уже сам не разобрался что ты уважаемый автор накосячил... Ну а в целом, конечно ты молодец.

[@valeevadward]

Пытаюсь у верхней наклонной секции сделать прозрачность, не могу разобраться как это сделать, блин :( Для нагляндости скриншот предоставляю: xn--80aaccclfe0anyqibbix0ci3m.xn--p1ai/wp-content/uploads/2019/09/prozrachnost.png

[@LAVILASIS]

А как сделать отступ между 4-мя колонками при вкл параметра "граница" колонки? prntscr.com/kjv9fp

[@DigitalAlex]

Задайте колонкам отступ снаружи на вкладке Расширенные.

[@LAVILASIS]

WPLovers - о WordPress понятно и с любовью получается подгонка на глаз? Ясно, спс

[@DigitalAlex]

Причём здесь на глаз? Ставите отступ и готово.