Добро пожаловать на седьмой урок. В нём мы рассмотрим основные виджеты, доступные в Elementor, и их функционал. Мы обсудим, как каждый из них может быть использован для создания уникального дизайна и функциональности страницы.
Elementor предлагает широкий спектр виджетов, которые позволяют создавать уникальные и функциональные веб-страницы. На предыдущих уроках мы немного посмотрели на некоторые из них, такие как заголовок, текстовый редактор, изображение и кнопка. Теперь разберём их более подробно.
Практически каждый виджет имеет три вкладки. Это «Содержимое», «Стиль» и «Расширенные». Например, в заголовке меняется текст заголовка. Давайте посмотрим на наш макет и возьмём самый первый. Копируем. Меняем. Вот, он применился. Про ссылки и теги мы поговорим попозже более подробно. Сейчас не буду на этом останавливаться.
Также в текстовом редакторе меняется текст. Возьмём, например, этот. Копируем и меняем.
Здесь задаётся буквица. Это первая буква такая будет большая.
Также можно сделать несколько колонок. Давайте посмотрим на большой текст. Например, когда он такой, выбираем несколько колонок: от двух до десяти. Три колонки. Две колонки. Также меняется отступ: либо ползунком, либо через нажатие здесь. Также можно напечатать. Но так как у нас в дизайне сделано в одну колонку, то применим в одну — «По умолчанию».
В «Изображении» выбираем изображение. У меня уже есть несколько подобранных картинок. Вставляем самую первую здесь. Настраивается разрешение изображения. Я обычно ставлю полное (Full). Также можно сделать «Произвольно», но я это не делаю никогда. Например, 100*100.
Видите? Изображение поменялось. Сделаем полное. Также здесь подпись, «Подпись вложения» или «Произвольная подпись». Например, «Подпись». Как видите, она здесь проявляется. Сделаем «Отсутствует».
Про ссылки скажу пару слов. Медиафайл, например. Это когда нажимаем на картинку, она появляется в таком лайтбоксе. Про произвольную ссылку, как я говорил, поговорим позже.
У кнопки меняется текст. Например, «Перейти в каталог», «Подробнее», «Все акции» и т. д. Давайте возьмём, например, «Перейти в каталог». Копируем текст и заменяем на нужный. Как видите, он у нас применился.
Далее идёт у нас вкладка «Стиль». Давайте по порядку: начнём с заголовка. Вкладка «Стиль». Можно делать выравнивание, менять цвет, типографику и другие настройки. На всех виджетах плюс-минус похожие настройки, но есть уникальные для каждого.
Давайте по порядку. Выравнивание. Текст выравнивается по умолчанию по левому краю, но можно задать принудительно: по центру, по правому краю или по ширине. Сейчас пока короткий текст — не видно, как это выглядит. Также можно менять цвет, например красный, зелёный, синий и т. д. Меняется также прозрачность до самого непрозрачного. Сбросим, отручистим. Оставим наш глобальный цвет — графит.
Также можно поменять типографику. Например, поменять семейство. Выбрать какое-нибудь другое. Например, Helvetica. Или ещё какое-нибудь подобрать из библиотеки Google.
Также меняется размер, толщина. Например, самая жирная, 900, полужирная. Верхний регистр можно сделать или поставить все строчные. Первую — заглавную. Обычно это по умолчанию.
Также можно поменять стиль. Обычный — это по умолчанию. Курсив или наклон. Они визуально ничем не отличаются. Но если вам интересно, то можете почитать в интернете. Я же на этом не буду заострять внимание. Оформление: подчёркнутый, линия, перечёркнутый, отсутствует. Линия над, перечёркнутый.
Высоту линии задаёт обычно дизайнер. Давайте посмотрим на макете. Например, здесь. Заголовок. У него высота линии 100%. Это значит, если здесь заголовок 96, то и высота линии будет 96. Или же ставится авто. Для этого надо очистить.
Letter Spacing — это расстояние между буквами. Его тоже задаёт обычно дизайнер. Посмотрим на макете. Letter Spacing — 0%. Возьмём какой-нибудь текст. Например, этот. Тут у дизайнера везде 0 пикселей по умолчанию. Так что здесь оставляем также — по умолчанию.
Но вернёмся к глобальным шрифтам.
Далее идут эксклюзивные настройки, если вам интересно, можете сами в них поразбираться. Не бойтесь экспериментировать. А теперь перейдём к тексту. Тут настройки примерно такие же, как и в заголовках. А вот с изображением, например, немножко сложнее. Его можно размещать по левому краю, по центру, по правому краю.
Ширина задаётся в процентах, относительно нашей колонки. Здесь, например, две колонки. Про контейнеры колонки мы поговорим отдельно, подробно. А сейчас просто покажу. Допустим, ширина 100% относительно нашей колонки. Можно её уменьшить либо сделать максимальной. Выравниваем.
Также меняется высота. Можно поставить в процентах (100%) или в других единицах измерения. Я очищу. Вернемся к этой картинке. Изменить можно и уровень прозрачности: совсем непрозрачная, полупрозрачная.
Фильтры накладываются. Но я, опять же, не советую тут ничего менять, так как дизайнеры уже делают картинки, накладывая на них всякие фильтры и т. д., так что ничего не меняем.
Можно сделать границу. Например, сплошную. Добавить толщину. Давайте пожирнее сделаем — 10. Цвет границы — рыжий по умолчанию. Скругление углов — 20 пикселей или больше. Если отвязать значение, то можно сделать справа, например, 40. Слева — тоже 40. Это у нас уже по-другому будет выглядеть. Но мы свяжем, чтобы одинаково везде было.
Вернём границу по умолчанию. Как видите, скругление углов осталось. Тоже вернём на прежнее. А здесь задаётся тень. В нашем макете дизайнер нигде её не использовал, но обычно бывает наоборот. Для этого здесь меняются все показатели. Также цвет настраивается: полупрозрачный, потемнее. Горизонтальное смещение и вертикальное смещение; размытие и размах.
Вернём по умолчанию все значения. Далее посмотрим на кнопку. Кнопка, «Стиль», также выравнивание по ширине. Вот она. Тут заметно, как она меняется во всю ширину, в отличие от заголовка.
Также меняется типографика. Давайте посмотрим, какая она здесь у нас. Roboto Condensed, medium 16, 34; Letter Spacing — 2 пикселя. Расставляем всё так же. 16. Medium — это нормальный. Нет, 500 (Средний). Трансформация — верхний регистр. Высота линии — 34. Letter Spacing — 2 пикселя.
Далее «Тип фона». У нас он по умолчанию рыжий. Также можно сделать какой-нибудь градиент. Например, первый цвет рыжий, а второй — красный. Можно поменять местонахождение. Угол направления — 360, справа налево. У меня по умолчанию 0. Вернем обратно.
Также тип границы. «По умолчанию», «Отсутствует». Добавляем сплошную, например. Толщину также задаём. Давайте пожирнее, чтобы виднее было. Цвет ставим чёрный. Или поближе, красный.
Скругление углов и отступ внутри — его тоже задаёт дизайнер. Давайте посмотрим поближе на кнопку. Выбираем текст. Сверху 10, по краям — 41. Связываем. Сверху-снизу — по 10, справа-слева — по 41. Границы отсутствуют. Скругление углов — 10 пикселей. И вот: наша кнопка выглядит, как в макете.
А во вкладке «Расширенные» для всех виджетов одинаковые настройки. Мы их подробно будем разбирать на следующих уроках. А пока посмотрим ещё на несколько виджетов, которые часто используются для вёрстки.
«Разделитель». Добавим его сюда. Иногда в макетах попадается разделительная черта как элемент дизайна. Её также можно настроить. Стилей может быть много на выбор: штриховой пунктир, например, или зигзаги. Ширина — в процентах относительно нашего блока или в других, в пикселях, например. Вернём пока сплошную. Также линия выравнивается: по центру, по левому краю. В стилях можно поменять цвет: графит, например. Толщину линии зададим пожирнее, чтоб видно было. Отступ: сверху, снизу. Так оставим. Как видите, настраивается практически всё.
Далее идут «Карты Google». Редко какой-нибудь сайт обходится без карты. Добавляем её. Смотрим «Местонахождение». Адрес сайта вводится в простом формате. Т. е., например, как у нас в макете. Пункт выдачи: Нижний Новгород, улица Центральная, дом 56. Так и вводим.
Google сам найдёт правильный адрес. Если не нашёл, значит такой улицы или дома не существует. Google-карты. «Увеличение». Это масштаб карты, т. е. удалённость от объекта. Например, приблизим или немножко отдалим.
Здесь задаётся высота блока карты. Можно сделать побольше, поменьше. Также в разных единицах измерения. Например, в пикселях.
Настраиваются стили. Обычно ничего тут не меняется.
Следующий виджет — иконка. Сюда поставим. Добавляется из библиотеки Font Awesome. Или, как вариант, можно загрузить свою в svg-формате. Нажимая на «Библиотеку иконок», мы попадаем в библиотеку. Здесь находится множество иконок, которые разделены на обычные, сплошные и бренды.
Также можно найти иконку по названию. Правда, они все на английском языке. Например, давайте выберем какую-нибудь стрелочку и поменяем. Можно найти какую-нибудь другую кнопочку, например такую. А потом сделать её вписанной или обрамлённой в круг или квадрат.
В стилях задаётся выравнивание. Меняется цвет. Оставим графит в качестве основного. Также есть второстепенный цвет. Пусть рыжий будет. Можно и очистить. Задаётся размер иконки, отступ внутри. И можно повернуть её на несколько градусов. Также задаётся толщина границы, скругление. Ну, у нас она и так в круге, поэтому необязательно. Ещё иконки попадаются в кнопках: загрузить svg. Есть какая-нибудь. Её сейчас не видно: она под цвет кнопки. Или также из библиотеки иконок. Также меняются расстояние, позиция (лево-право) и отступ от текста.
Следующий блок — pro-элементы. Здесь находятся специфические виджеты. На них я пока не буду останавливаться подробно. Их мы рассмотрим, когда будем говорить про формы, слайдеры, галереи, карусели и другое. А пока перейдём к общим.
Блок с изображениями. Иногда можно, конечно, сделать блок, где будут отдельно расположены картинка, заголовок и текст. Но иногда просто удобно использовать такой блок. Также выбирается изображение. Такое, например. Меняются заголовок и текст. Также задаются отдельно все стили: лево, право; выравнивание вертикальное, относительно картинки, по центру; отступ от изображения; отступы от заголовка до текста.
Также настраиваются отдельно изображение и содержимое: заголовок и текст. Похожий блок у нас — блок с иконкой. Можно изменить как саму иконку, так и блок с изображениями.
Обычно этот блок я использую для логотипов. Как видите, здесь иконка и текст. Добавляется иконка, загружается, и меняется заголовок, а текст просто удаляется.
Также часто используется список с иконками. Берётся какой-то список. Цвет текста — белый. Задаётся иконка. Например, такая. Вводится сюда какой-то текст.
Теперь можно удалить эти ненужные списки и продублировать, чтобы везде была одинаковая иконка. А текст можно поменять. Например, текст 2, здесь текст 3 и т. д. Можно добавить новые элементы или продублировать ещё.
Далее настраивается стиль. Точно так же. Расстояние между текстом, выравнивание. Разделитель можно включить, выключить. Настраивается иконка: размер поменьше сделаем. Отступ от текста. Вертикальное и горизонтальное выравнивание. Можно также настраивать иконку, чтобы она была выше или ниже. Сделаем 0.
Также настраивается текст, как и в обычных текстовых редакторах. Также часто используются иконки соцсетей. Давайте посмотрим в макете, как у дизайнера сделано. VK, Telegram и WhatsApp. Давайте также сделаем. Библиотека иконок. Набираем VK. Telegram. WhatsApp. Ставим форму: «Скругление», «Квадрат» или «Круг».
Колонки — «Авто». Выравнивание по левому краю сделаем. Также зададим стили — цвет — «Произвольно». В основной цвет добавим графит. Второстепенный цвет — белый по умолчанию.
Так же настраиваются размеры иконки. Отступы внутри между иконкой и кругом, отступы между собой и отступы колонок. Это немного разные отступы. Мы про них поговорим попозже.
Также можно сделать глобальный виджет. Например в макете используются обычные кнопки (рыжие) и вспомогательные (прозрачные). Давайте создадим прозрачную кнопку. Добавляем кнопку. Теперь стилизуем. Например, возьмём текст «Все акции». Цвет — графит, настройки кнопки: 16, Medium; размер — 34, 2 пикселя. Ставим такие же параметры: 16, средний, Letter Spacing — 2 пикселя. Текст Roboto Condensed, верхний регистр. Цвет текста белый ставим, а цвет фона мы убираем в прозрачность полностью. Нет, пусть будет графит. Тип границы — поставим сплошную. Один пиксель, цвет — рыжий. Скругление — 10 пикселей. Также назовём нашу кнопку: «Все акции».
Теперь нажимаем правой кнопкой мыши на нашу кнопку. Выбираем «Сохранить как глобальный». Давайте назовём её «Прозрачная кнопка». Сохраняем. И теперь она у нас появилась в глобальных виджетах.
Теперь, когда на любой странице сайта вы добавляете эту кнопку, она будет иметь точно такие же стили и содержимое. Также на страницу будет вести ссылка. Она будет использовать динамические теги, но об этом поговорим на следующем уроке. Так что, если поменяем здесь текст, он поменяется на всех виджетах.
Помимо этого, виджеты можно использовать интуитивно. Например, заголовок не только для заголовков как таковых, а для коротких текстов. Или блок с картинкой. Удаляем картинку, и у нас просто блок с заголовком и текстом. Но это к вам придёт уже с опытом.
На этом урок окончен. Сегодня мы познакомились с функционалом виджетов; узнали, как и где они применяются; ознакомились со стилями. На следующем уроке мы продолжим работать с виджетами. А на сегодня всё. Пока.
