Использование Div Block в Webflow создание landing page

Автор Andrei Golubev
Использование Div Block в  Webflow создание landing page

Привет мы продолжаем наш изучение и так по списку идём дальше колонки мы с вами разобрали в прошлом уроке и приходим в блок.

Что же — это за штука такая на самом деле — это универсал штучка которая является как раз. Скажем народным единственным объектом который представляет в верхней части потому, что издевака можно сделать из секции контейнера и колонки вообще без проблем особенно используя технологию Flexbox который был с вами разговаривать позже, но devblog, что же такое на самом деле именно в практическом смысле и я вам покажу на небольшом как можно использовать devblog достаточно быстро для разных случаев да сейчас мы с вами которая залито картинкой бэкграундом вот здесь вот установлены мне background картинка параметры ковёр и центровка посередине дальше, а внутри расположена. Давайте смотреть через навигацию до.

В контейнере находится.

Хай хэт дату и заголовок дальше параграф тексты кнопка по умолчанию вот которая за дизайнер лица и за выкном. Если вы её перетащите. А дальше я поставил тексту белый цвет чтобы он как-то выделялся вот на этом фоне, но я могу сделать немножко по-другому всё — это оформление чтобы читаемость повысилась как. Мы — это сделаем смотреть я становлюсь на контейнер иду в плюсик добавляю de blob. Вот он у меня появился и теперь в этот devblog мы добавляем вернее всё содержимое да то есть вот таким образом кидаем в devblog. Давай дружочек параграф и кидаем кнопочку. Теперь если. Вы посмотрите. Да у нас контейнеры в контейнере идёт devblog и в блоке уже находятся все составляющие вот этого контента стоим на блоке переходим в параметры и сделаем следующее сделаем ширину этого блока. Ну примерно. Давайте посмотрим на 500 пикселей. Да отлично даже 500. Давай сделаем вот так и. Как видите по ширине div блоков сразу выстроилась ширина у нас текста. Ну если будет длинный какой-то заголовок он тоже выстроить как раз по ширине блока теперь смотри, что мы делаем мы опускаемся в самый низ и в раздел бэкграунда заходим цветовое решение и ставим ему вот такой какой-нибудь вот такой белый цвет в цветовой форме. У нас есть колонка прозрачности убираем прозрачность как-нибудь вот так уже появился белый и смотрите. Теперь мы если переходим на заголовки инотекст и переводим его в чёрный то читаемость у нас будет немножко в другом формате сейчас мы — это всё немножко поправим так кнопочки оставим. Давайте теперь перейдем ещё раз баграм и подымим цветовое. Решение вот так уже интереснее стилизованный. Да всё получается теперь. Заходим в блоке сделаем небольшую центровку зажимаем клавишу Shift и начинаем подтягивать ведь одновременно у меня высота и ширина отступов начинает меня вот так вот она уже более интересное стилизации теперь блоку я ещё могу добавить к примеру тени давать опускаемся. Они же у нас есть куда box-shadow добавляем тень. Вот она у нас появилась теперь увеличим диск увеличим Blur изменим немножко Says зайдём в цветовое решение изменим нашу прозрачность нашей тени сразу появилась совсем другое дело согласитесь ты совсем другая стилизация, но и ещё дополнительно крутой вариант заключается в том, что если вам нужно сделать таких блоков несколько то нажимаем Control CC получаем 2 блок такой же который можно разместить к примеру уже на каком-то блоги ниже. Да какой-то вставки секции только поменять уже цветовые решения если нужно сделать в таблицах то из таблицы в таблицу перекидывать контент не надо нужно достаточно просто добавить в блог в него положить весь контент. Ивора скопировать в любую сердце уже с готовым ремонтом. Ну — это всё друзьям. Добавляйтесь подписывайтесь на мой канал также пишите чтобы из уроков и всё-таки ещё хотели увидеть, что вам было непонятный. Я обязательно добавлю урок по этой тематике. Ну и не забудьте там есть такой звоночек он будет вас уведомлять о появлении слайм был. Максим Соколов до следующего урока пока друзья каждый месяц у нас проходят бесплатные три по разработке сайтов в сервисе Flow деньги за 3 недели вы пройдёте полностью весь. Вы научитесь верстать сайты с полностью с нуля даже если вы не понимаете, что такое домен хостинг и прочее премудрой касающейся веб-разработке тем не менее мы вас научим создавать сайты. Занятия проходят 3 недели какой он сказал с поддержкой в онлайн чате с домашними заданиями и качественными видеоуроками. Спишите пока данный тренинг бесплатен ссылку выписали.

0 комментариев
0

Читайте также