в этом видео мы поговорим про и тип в стандартных это и иконки раз отвесно находится у нас во второй в корочке менюшки имеется вот следующие варианты по сути дела простая картинка вписанная картинка круглая картинка картинка с эффектами это одна и та же один и тот же блок который имеет просто уже предустановлены и заранее разные настройки сути дела выбрав любую картинку перетащив в рабочую секцию мы можем получить доступ к настройкам соответственно здесь мы можем настройках добавить загрузить видео с компьютера или посылки с другого ресурса соответственно можем сделать настройки то здесь можно настроить название файла качество картинки по умолчанию редактора сампери обжимает картинку под нужные размеры и станет качество картинки 8 если вы обрабатываете картинки дополнительно самостоятельно что очень рекомендуется то учитывайте этот фактор то есть занижайте совсем качество не надо потому что сам конструктор немножко его занизить и оптимизировать так чтобы картинки легче грузились соответственно есть настройка раз размытые предпросмотр это когда грузится не вся ну точнее как грузится сначала маленькая копия которая она в большом размере кажется размытой затем просто загружается уже основная большая картинка эффект как будто картинки грузится не сразу значит здесь у нас есть размер предпросмотра чем меньше картинкой тем выше скорость загрузки страницы поэтому когда у вас ну это влияет на четкость картинки то есть в принципе здесь можно уменьшить значение и четкость картинки в размытом состояние будет еще хуже но по крайней мере это даёт понимание пользователю что что-то грузится если у вас большие тяжелые картинки то стоит здесь уменьшать размер размер картинки для предпросмотра обязательно оставлять размытый включенную галочку размытый предпросмотр и тогда взаимодействие сайтом будет более красивым более удобным для ваших пользователей здесь есть тест видите какая была картинка сделан побольше она уже такая более четко это чисто для больших картинок для галереи я думаю очень полезная настройка ну и также настройка умные масштабирования это как раз если вы хотите прямо загрузить чтобы ваша страница грузилась долго тяжело ваших пользователей то эту галочку можно убрать и отключить умные масштабирования тогда вашим посетителям вашего сайта будут будет грузиться в оригинальном размере картинка без оптимизации без обработки самим редакторам также здесь у нас еще есть возможность использовать картинки с фотостоков то есть здесь можно разные выбирать [музыка] любые так скажем любые картинки здесь можно найти потому что это фотосток и здесь очень много разного так настройки вида да то есть соответственно вот то о чем я изначально сказал то есть у нас есть обычная картинка вписанная картинка круглая и с эффектом до ровно те которые вот здесь указаны давай есть обычная картинка вписанная картинка круглая картинка и картинка с эффектами все это именно при до настройки я выбрал круглая поэтому просто могу сменить на любую другую горизонтально выравнивание обращаю внимание что здесь есть дополнительная настройка для всех устройств либо для выбрать можно для ноутбуков планшетов телефонов по центру справа слева то есть картинка перемещается это удобно для центрирования в каких-то других внутри других сект блоков так высота картинки да опять же здесь есть настройка для разных устройств и размер можно очень удобно настраивать радиус скругления да то есть если у нас круглое то предназ тройка меняется на сто процентов если вписано это ноль процентов но тем не менее ей так это видимо в другом месте страну что тогда показывается капельки еще можно настроить скругление углов можно растянуть обры изображение нужно конкретно вписать так также можно настроить действия то есть по картин на картинку можно привязать открытие ссылки причем открытие в новой вкладке атрибут nofollow то есть чтобы поисковики вес насчитывали вот а также можно просто увеличить картинку чем хочу здесь сказать это вот об этой функции группа картинок есть конечно есть подсказка но многим она не совсем понятным суть ее проста когда вы группируйте картинку по какому-нибудь названию то есть вы можете определить какое то название и если это название будет совпадать у нескольких картинок то при клике и увели в увеличенном предпросмотре появится слайдер и все сгруппированные картинки этим названием будут показываться в этом слайде ли это удобно например когда вы делаете карточку товаров с несколькими фотографиями и делать встроенные слайдер неудобно либо нет как вот такого специфического для вас решения то можно просто сделать сетку из таблицы из колонок накидать туда фотографий и соответственно и сгруппировать их по названию таким образом при клике в картинку у вас будет открываться и и предпросмотром но этот предпросмотр будет виде слайдера и пользователь сможет эти фотографии пролистать также есть сила настройки то есть можно прописать атрибут тайтл и атрибут alt если вы не знаете что такое to welcome изучать html это основа основ тайтлы заголовок alt это заголовок когда картинка не а брожу не отображается то есть есть браузеры которые позволяют отключать картинки и видеть только текстовую составляющую и тоже можно может быть использоваться в специальных страницах облегченных и тогда значение картинки будет выведена из вот этих данных то есть из этих полей вместо картинки будет показываться то что вы здесь напишите так по настройкам все настройки непосредственно самого фона вида в принципе здесь все абсолютно точно также как и в тексте то есть мы можем всего виджета настраивать фон границы [музыка] понял да видимо вот в этой настройки что-то что-то до конца не доделано потому что по идее возможно вот тогда то есть понятно кругло на в тем не менее она не круглое закругленными углами вписанная настройка есть но нам не на что не влияет скажем так ошибка бак ладно вернемся к настройкам виджета то есть у нас есть возможность также как и в принципе у всех абсолютно всех блоков настраивать вот эту историю да то есть и стене отступ и эффекты многие говорят ой нет эффектов как же так никаких анимаций нет ребята будьте внимательны вот они анимации они во вкладке эффекты то есть да они конечно ограниченные есть только при прокрутке страницы при наведении курсора но в основном этого вот прям ну за глаза как бы вот играясь подобрав оптимальный какие-то для себя на стройке вот она анимация куда вы смотрите много много пишут нет анимации гадайте анимацию она есть вопросы там искали видим вот так же есть анимация по наведению курсора тут она конечно не слишком сильно так скажем развита но тем не менее она также есть параметры но тут каких предыдущего настройках которые я уже рассказывал якорь это сюда можно вбить метку которая позволит сделать ссылку чтобы на эту картинку перейти это атрибуты классов которые дают дополнительные возможности для работы с ними например с внешними скриптами а также видимость то здесь мы также можем регулировать настройки которые нам необходимы в общем то вот данный вид настроек для всех блоков для всех виджетов они одинаковые так ну что ж непосредственно по картинкам это все теперь у нас есть иконки да то есть иконок у нас просто огроменное множество соответственно вот это основная модель с иконками то есть мы здесь можем заранее выбрать предустановленные иконки которые по-разному выглядят да но после выбора конечно их уже можно будет еще и сменить то есть у нас есть огроменная библиотека настрой библиотека иконок в каждой библиотеки ну вот видите здесь до 55 тысяч разных иконок 300 иконок 600 иконок 1000 иконок просто на любой вкус цвет для любой задачи иконки есть единственный минус все это истории это здесь нет поиска поэтому найти и иконки какие-то специально для себя это надо весь раздел прямо прочекать изучить и значит вот том разделе там в то это категории да то есть как бы в какой-то категории там плюс минус верху внизу где-то есть необходимая вам иконка да то есть вот мы решили бургер заменить на bitcoin и в общем то все так же тут есть настройка иконок настройка цвета иконок здесь у нас соответственно система наследования это мы берем из настроек странице да то есть вот у нас здесь странице здесь есть цвета и вот у нас настроенные цвета и мы их можем использовать как я уже говорил [музыка] в обзоре про текст либо также выбрать какой-то свой необходимый нам цвет сюда можно ставить формате rgb также можно формате их вставить да то есть [музыка] цвет с решеткой он также будет считан там не знает 12 такой цвет вот пожалуйста он увидите считался все прекрасно просто он автоматически конвертируется в rgb и как бы очень удобно из любой цветовой программы вы можете вставить выбрать вставить сюда и получить необходимый оттенок цвета так значит у нас есть форма это как раз вот эта история вот эта форма это форма иконок и мы их соответственно можем выбирать то есть только здесь их 4 заполненные незаполненная сам водочкой не заполнены с заполнены другим вариантом ну и по сути дела здесь можно играться с настройками выбирать тот размер который необходимо чтобы виджете отображался и соответственно вы могли уже сдать прямо четко тот вариант который вам нужен очень часто бывает в эти настройки просто люди не заходят не подозревая их существование это очень важно да у вас есть допустим если смоделировать мы забежим вперед возьмем какое-то поле поместим иконку соответственно в поле уберем текст здесь там напишем какой-то просто случайный текст и зачастую когда текста текстовом очень много там вам нужно расположить сидела в пять строк то иконка выглядит на фоне текста очень маленькой да это можно легко поправить путем и увеличения внутри виджета также еще это увеличение можно за счет уступов то есть убираем отступы и иконка начинает занимать максимальное место максимально возможное место относительно размера текста да то есть можно этим воспользоваться и соответственно получить определенный определенный результат формат тени то есть тут есть разные форматы тени конечно для объема фигуру вы можете этим пользоваться можете использовать собственные специфические настройки если у вас это необходимо по дизайнерскому решению то есть есть простые настройки которые предустановленны задают сразу да то есть некие некий формат можно использовать простые настройки и и там увеличивать уменьшать каким-то образом влиять на это визуальном плане так вид еще один из вариантов увеличения вот формате нашей задачи у нас типовой размер был задан 128 ну мы можем глупите аж до 750 то есть вот эта история с иконкой с управлением форме это вот относительно внутри блока до настройка внутри блока а также можно и настроить размер и тогда можно выбрать вообще фактически и индивидуальное решение под необходимые задачи так обычно рекомендуемая то есть в принципе для иконки это особо ничего не не влияет кроме как дополнительно управления расположение на то есть если вы говорите обычно и тоже можно расположение варьировать а если она вписана это мы вот можем сделать такую несчастную историю об это размер ну то есть мы в принципе из иконки можем сделать какой-то интересный символ который в принципе на иконку даже не похож а то есть и тут вариантов для вариантов для взаимодействия очень много экспериментируйте пробуйте это прям очень хорошо будет влиять на ваши результаты так по иконкам все ну то есть у нас есть действие также у нас есть без иконки и можно открыть ссылку то есть мы можем прописать ссылку ну так же как и в картинке осела ровно такая же история то есть это можно прописать заголовок можно заголовок для скрытия скрытой иконки записать тут все как обычно также есть настройки стандартные которые я уже подробно рассказал что еще у нас есть в этом разделе у нас еще есть иконка с текстом да это отдельный специальный блок который также по сути дела это все опыт одно и то же все эти шесть вариантов это одно и то же просто они заданы разные предназ тройки я таким блоком пользуюсь редко потому что он на мой взгляд очень плохо оптимизируется для мобильный для мобильных экранов поэтому практически не использую в принципе ничего нового в них нету это просто иконка просто текст примерно то же самое что вот я сделал сейчас с колонками когда мы дойдем до колонок я более подробно буду рассказывать как из колонок собирать правильные интересные блочные элементы тут по сути дела уже как бы собран в отдельный виджет он также имеет настройки которые вы можете посмотреть выбрать иконку форму этом тени положение и дополнительно есть поля заголовок мы можем показывать и можем показывать текст то есть и тут кое какие настройки в целом все есть конечно специальная настройка для мобильных телефонов но честно скажу этот блок не сильно не нравится я прям настоятельно рекомендую его не использовать идем дальше одна из интереснейших блоков это сравнение до и после то есть прям очень очень интересная история этой картинке и очень много где можно использовать . сейчас ещё раз что что будешь делать вот так ну тут принцип работы этого блока очень прост то есть когда вы загружаете сюда картинку негатив сюда картинку уже фантастическую допустим это можно использовать для а здесь вас какое-то проектное решение здесь фактически как это получилось живую очень интересное решение при предпросмотре у вас появляется возможность как бы сравнение да то есть вот эта разделенная картинка она позволяет перетаскивать и смотреть как же это вот фактически было так это фактически выглядела вот такая вот история очень интересный виджет для каких то таких специфичных вещей можно использовать соответственно здесь есть типовые настройки это размер и цвет и показывать там до после метки если необходимы там какое-то пояснение здесь соответственно можно изменять то есть вносить изменения и там переименовать а тут обязательно примерно там вот то есть такая вот удобная штука что еще соответственно здесь есть управление это включение при наведении при перетаскивании то есть можно навести тогда это полоска бегает за мышкой если включить перетаскивание то надо будет кликнуть зажать и перетащить в целом необычной если использую этот блок то использую его по умолчанию дополнительных каких-то настроек кроме вот там подписей я не делаю так ну и капелька это в принципе стандартная штука тут про нее нет смысла рассказывать оно идентично как и все остальное далее далее у нас есть некие микро галереи это микро что чтобы сделать микро галереи которые соответственно просто ну просто позволяют группировать картинки иконки то есть в принципе можно там собрать какую-то собственную микро галерею сделать в нее загрузить там выбрать свои фотографии она просто уже как готовый блок может выглядеть в нее добавлять картинки мы вот таким образом по сути дела можем выбирая загружая картинки настройки у нее в принципе достаточно понятны и открывать по клику слева справа центрирование положения равномерно отступ и между картинками высота непосредственно самой этой картинке галереи в каких-то проектах когда у вас нет большого предпросмотра и вам просто нужно сгруппировать картинки эту галерею использовать полезно принципе достаточно просты и примитивны и настройки но сам по себе виджет очень интересный и удобный для быстрого редактирования и быстрой работы с данным виджетом по капельке также стандартные настройки которые в принципе можете использовать они ничем не отличаются от предыдущих от того что я раньше рассказывал так по картинкам у нас получается все галереи это был последний этап в целом в целом по данному разделу все ну что же до встречи в следующем видео