Полноэкранный блок – 100% высоты и ширины экрана.
Как создать первый экран сайта, чтобы он был 100% ширины и высоты экрана, а также чтобы контент на этом экране все время центрировался по высоте при изменении высоты экрана браузера? Многие задают такой вопрос. Вот и мой видеоответ появился с использованием бесплатного виджета – Полноэкранный блок.
Виджет позволяет разместить любой контент, который будет центрироваться по высоте и сделать любой дизайн полноэкранному блоку. Смотрите подробнее в этом видео.
Скачать виджет Полноэкранный блок
Полноэкранный блок. Описание и обзор.
В этом видеоуроке мы рассмотрим еще один интересный виджет. Виджет называется «Полноэкранный блок». Он позволяет создать на сайте блок высотой на весь размер экрана и с возможностью центрировать контент по центру данного экрана. Т. е. какой бы высоты не был экран пользователя, данный контент будет все время располагаться по середине экрана.
Таким образом, мы получаем блок, который адаптируется по высоте. Притом, если дальше прокручивать сайт с помощью колеса мыши, то мы увидим снизу продолжение сайта и следующие блоки. На демо-странице этого виджета все это наглядно видно. Если мы прокручиваем сайт, то он работает как обычно. Если мы сейчас изменяем высоту первого экрана, то у нас данный контент, который расположен на первом экране сайта, центрируется по высоте. И если мы начинаем прокручивать, у нас данный блок адаптируется к высоте браузера в данном случае и дальше контент идет как обычно.
Если мы чуть-чуть сдвинем сейчас высоту блока и начнем прокручивать, то у нас как раз таки начинается вот отсюда прокрутка – следующий контент начинается именно с этого места. Т. е. какой бы высоты не был у нас размер экрана, данный первый блок сайта всегда будет на всю его высоту. А располагаемый внутри него элемент – в данном случае он реализован с помощью стандартной кнопки «Состояние», внутри которой можно поместить любой контент, вы сможете размести здесь контент и получите вот такой результат.
Полноэкранный блок. Скачать виджет.
Скачать виджет можно бесплатно с этого сайта. А сейчас я покажу вам, как он работает в действии. После скачивания виджета у вас будет вот такой архив. Открыв который, у вас будет один единственный виджет «Полноэкранный блок». Кликнув на него два раза левой кнопкой мыши, он установится у вас в программу. И будет расположен в разделе «Библиотека» в папке «Полноэкранный блок».
Полноэкранный блок. Установка и настройка виджета.
У меня на этом сайте уже есть какой-то блок. Давайте я его сдвину вниз. И теперь расположу здесь модуль «Полноэкранный блок», поскольку под этим блоком не должно быть расположено никакого контента. Сдвину его немного вверх. И теперь, например, сделаю данному синему блоку другую заливку. Сделаю здесь свою картинку, которую я хочу. Ставлю «Заполнение». И моя картинка разместилась. Сейчас она, конечно, выглядит неважно. Давайте я удалю то, что у меня было раньше и вставлю эти две надписи «Adobe Muse Уроки» и «urokimuse.ru», например, в кнопку «Состояние». А то, что там было удалю. Т. е. теперь у меня эти две надписи будут расположены в данной кнопке «Состояние». Давайте я еще немного увеличу размер надписей, сделаю например 36 шрифтом. И расположу их немножко по центру.
Полноэкранный блок. Просмотр результата.
Теперь при просмотре страницы в браузере, мы увидим, что у нас есть моя картинка, которая на заднем фоне и есть эта надпись. Если мы сейчас уменьшаем размер браузера по высоте, то у нас надпись моя сдвигается ровно по центру и фоновая картинка обрезается. И следующий контент уже начинается после этой картинки. Т. е. начальная картинка сайта все время будет обрезаться под высоту браузера, а надпись, которая расположена в кнопке «Состояние» будет по высоте окна браузера.
Вот такой замечательный виджет, который позволит вам сделать первый экран сайта более интересным. А на этом я заканчиваю данный урок, подписывайтесь на мой канал, ставьте лайки, пишите комментарии. С вами был Дмитрий Шаповалов и до встречи в следующих видео!
Смотрите также:
Виджеты лаборатории Muwilab для Adobe Muse
Виджеты магазина Amandea для Adobe Muse.
Автор видеоурока
Дмитрий Шаповалов
Виджет не корректно работает если закрепить менюшку сверху и прикрепить к ней любой лайтбокс, типо кнопки “заказать звонок”
Всё возможно. Попробуйте написать разработчикам виджета, возможно исправят этот недочет в следующих версиях.
Извините за столько вопросов, но я не до конца понимаю, как мне расположить элементы(например форму обратной связи или таймер) в полноэкранном модуле так чтобы они правильно встали(т.к заливка модуля у меня картинкой) и мне надо поставить например формусвязи так, чтобы она была ровно в окне браузера картинки (посмотрите пож-та сайт, который выше я прислал)
По Вашему сайту вообще не видно, что Вы использовали виджет полноэкранный блок… Вставляйте форму и таймер в кнопку состояния виджета и они будут центрироваться по высоте. Положение фоновой картинки тоже можете центрировать в параметрах заливки.
Здравствуйте, воспользовался виджетом и когда на него вставляю текст или что-то другое в режиме редактора всё красиво(по середине), а когда смотрю в браузере сайт, то текст не в том месте вообще, что это значит?
Здравствуйте. Смотрите внимательно куда Вы вставляете текст. Он должен быть расположен внутри кнопки состояния, которая размещается в проекте вместе с виджетом.
А текст или другой элемент всегда будет “центрироваться” в полноэкранном модуле или можно расположить как тебе угодно?
И вопрос не по теме, если можно. Почему указываю якоря в нужных местах, а на выходе по переходу по кнопке в меню, якоря не в тех местах?
Если расположите текст или элемент вне кнопки состояния, то они не будут центрироваться в полноэкранном виджете. Что касается якорей – не совсем понимаю что значит “в тех или не в тех местах”. Программа прокручивает сайт по якорной ссылке до начала якорной метки, там где вы ее расположили. Устанавливайте якоря с точностью до пикселя. Возможно Вы где-то что-то перепутали или назначили ссылку кнопке не на тот якорь.
Да я понимаю, что надо до пикселей, но вот ( http://wwweeqw.businesscatalyst.com/), кнопка “услуги” выставляю прям пиксель в пиксель, а якорь все равно съезжает ниже
Я понял свою ошибку) Потому что у меня ж меню прилипающее)
Да. У Вас меню зафиксировано вверху. Якорь нужно ставить раньше того места, до которого хотите прокрутить ровно на высоту меню, чтобы нужный блок начинался сразу под меню.
очень нужный виджет, спасибо за разъяснения!
Пользуйтесь на здоровье, смотрите и другие виджеты .
Спасибо. Полезно и понятно. Давно искала информацию о полноэкранном отображении.
Благодарю за отзыв, Полина! Рад что в этом уроке оказалась полезная, понятная и необходимая Вам информация. 🙂