Как изменить фон и границы сайта в Конструкторе REG.RU
Обратите внимание! Все действия выполняются в панели управления Конструктором.
Конструктор сайтов REG.RU
Готовый сайт с почтой совершенно бесплатно! Попробуйте прямо сейчас!
Заказать
Как изменить фон сайта
- 1.
Кликните на значок Шестеренка и в выпадающем меню выберите Фон:
- 2.
Укажите, для каких страниц вы будете менять фон — для всех страниц сразу или для отдельных:
Если вы хотите редактировать фон для всех страниц сразу, то выберите пункт По умолчанию (для всех страниц) и поставьте галочку Применить ко всем страницам;
Если вы редактируете фон для каждой страницы по отдельности, выберите из списка название нужной страницы.
- 3.
Выберите для редактирования фона область страницы:
- Фон страницы — фон всей страницы целиком.
- Фон шапки (хедера).
- Фон тела страницы.
- Фон подвала (футера).
- Фон страницы — фон всей страницы целиком.
- 4.
Изображение
Цвет
Видео
- 5.
Чтобы выбрать изображение в качестве фона, нажмите на Карандаш:
- 6.
Выберите изображение:
На вкладке «Галерея шаблонов» можно загрузить своё изображение или выбрать предоставленное редактором.
Чтобы загрузить изображение, нажмите Загрузить фотографию:
Кликните на изображение и нажмите Выбрать:
- На вкладке «Бесплатная галерея» вы можете выбрать изображение из предоставленных. Кликните по изображению и нажмите Выбрать
- На вкладке «URL фотографии» введите URL-адрес фотографии, нажмите Вставить и Выбрать:
- 7.
Укажите настройки:
Положение — местоположение изображения относительно страницы сайта.
Повторять — повторение изображения по всей странице сайта в вертикальном и горизонтальном направлении, если высота или ширина страницы больше, чем само изображение. Опция «Не прокручивать фон» закрепляет изображение, и при пролистывании страницы сайта вниз изображение остаётся на месте.
Прозрачность — вы можете увеличить прозрачность фонового изображения, если оно слишком яркое или сливается с содержимым вашей страницы.
Размер изображения:
Автоматически — изображение исходного размера. Если изменить Ширину или Высоту в процентах или пикселях, то размер изображения вычисляется автоматически исходя из пропорций картинки.
Содержать — изображение масштабируется с сохранением пропорций и целиком помещается внутри блока страницы.
Заполнять — загруженное изображение растягивается по всей высоте и ширине страницы. Рекомендуем загружать изображения хорошего качества с параметрами не ниже 1300х900 px.
- 8.
Если ваше изображение для фона небольшое по высоте или ширине, вы можете настроить Второстепенный фон, который заполнит оставшиеся места сайта. Нажмите Добавить другой фон поверх существующего?
Выберите Цвет или Изображение второстепенного фона, нажав на
- 9.
Для сохранения всех настроек нажмите Применить.
- 10.
Нажмите Опубликовать:
- 5.
Чтобы выбрать цвет фона, нажмите на Карандаш и выберите цвет из палитры. Нажмите Применить:
- 6.
Нажмите Опубликовать:
Важно: Видео в качестве фона можно установить только для всей страницы целиком.
Для этого в шаге 3 выберите для редактирования фона область страницы
- 5.
Чтобы выбрать видео в качестве фона, нажмите на Карандаш:
- 6.
На вкладке «URL картинки/видео» выберите Видео, введите URL-адрес видео, нажмите Вставить и Выбрать:
- 7.
Укажите настройки:
Прозрачность (%);
Начинать с — введите время в формате ММ:СС, с которого будет начинаться видео;
Закончить в — введите время в формате ММ:СС, которым будет заканчиваться видео.
Нажмите Применить
- 8.
Нажмите Опубликовать:
Готово, вы изменили фон сайта.
Как изменить границы сайта
- 1.
Кликните на значок Шестеренка и в выпадающем меню выберите Фон:
- 2.
Укажите, для каких страниц вы будете менять границы — для всех страниц сразу или для отдельных. Если вы выбрали пункт По умолчанию (для всех страниц), то поставьте галочку Применить ко всем страницам:
- 3.
Выберите для редактирования границ область страницы:
- Фон шапки. Чтобы настроить границы шапки (хедера) сайта, задайте параметр Высота шапки в пикселях. Если поставить галочку Липкая, то верхний колонтитул будет зафиксирован при прокрутке страницы. Если поставить галочку Без фона страницы, то фон страницы не будет применен к верхнему колонтитулу.
- Фон тела страницы. Чтобы настроить границы тела страницы, задайте параметр Отступ тела страницы снизу в пикселях. Опция позволяет добавить интервал между самым нижним модулем в теле страницы и подвалом сайта. Этот интервал рекомендуется, если на странице мало содержимого и её высоту нужно зрительно увеличить или для создания пустого места между последним модулем и подвалом.
Важно: Ширина рабочей области тела страницы в каждом режиме фиксированная, и увеличить её нельзя (Широкий — 1200 пикселей; Десктоп — 992 пикселей; Планшет — 768 пикселей; Смартфон — 320 пикселей). Высота страницы зависит от количества содержимого на ней. При добавлении модулей на страницу её высота будет увеличиваться автоматически. Это может повлиять на отображение фонового изображения в теле страницы.
- Фон подвала. Чтобы настроить границы подвала (футера) страницы, задайте параметр Высота подвала в пикселях.
Если поставить галочку На полную ширину экрана, то фон будет растягиваться автоматически по ширине устройства, с которого будет открыт сайт.
Нажмите Применить.
Альтернативный способ изменить границы
Также вы можете настроить основные границы сайта (верхнюю и нижнюю горизонтальные линии). Для этого наведите на линию курсор и перетащите её вверх или вниз:
Готово, вы изменили границы сайта.
Помогла ли вам статья?
Да
4 раза уже помогла
Интернет-агентство BINN » Какой фон для сайта актуален сегодня? Подборка текстур для ваших проектов
Фоновые текстуры — это важнейший элемент при создании любого дизайн-проекта. Правильно выбранный фон поможет придать вашему дизайну необходимое настроение, а также подчеркнуть важные элементы.
В этой статье мы рассмотрим несколько креативных наборов с различными фоновыми текстурами: цветочными, акварельными и геометрическими. Вы можете бесплатно использовать их в любых ваших дизайнерских проектах.
Цветочные фоновые текстуры:С помощью цветочного фона вы можете не только сделать ваш дизайн более привлекательным, но и эффектно представить ваши творческие проекты.
Эти цветочные текстуры вы можете использовать для дизайна свадебных приглашений, поздравительных открыток, заголовков блогов, презентаций и постов в социальных сетях.
Crocus — это коллекция векторных нарисованных вручную фонов с цветочными узорами. Вы можете использовать эти фоны для различных дизайн-проектов — для дизайна упаковки продуктов, плакатов, веб-сайтов и любого другого графического дизайна. Шаблоны представлены в форматах Illustrator и EPS.
Эта коллекция фонов с цветочным орнаментом, который выполнен в стиле акварели. Эти фоны отлично подойдут для создания элегантных поздравительных открыток, приглашений, а также в качестве фонов для веб-сайтов. В комплекте 2 бесшовных цветочных узора и 32 разных клип-арта. Все файлы представлены в формате PNG с прозрачным фоном и разрешением 300 dpi.
WildflowerWildflower — это набор из 20 элегантных фоновых текстур с цветочными элементами. Эти текстуры вы можете использовать для свадебных приглашений, плакатов, печатных материалов или в качестве фонов для веб-сайтов. Бонусом вам будет доступно 10 шаблонов для Instagram Stories в формате PSD.
Доступные шаблоны полностью редактируются через Adobe Illustrator — вы можете с легкостью изменить цвет и расположение цветочных элементы.
Использование фонов и текстур с эффектом акварельной живописи — это новая тенденция этого года. Такие фоны прекрасно сочетаются с любой типографикой и простыми элементами дизайна.
В этом наборе вы найдете 30 современных текстур с эффектом акварельной краски. Такие текстуры вы можете использовать в качестве фона для печати или графического дизайна, а также в качестве наложения для ваших иллюстраций и фотографий на веб-сайте. Вы будет доступно 30 файлов JPG с разрешением 6000 x 4000 px и 300 dpi.
Minimalistic Watercolor Backgrounds — это огромная коллекция из 55 различных фоновых текстур. В этот набор входят акварельные текстуры с минималистичным дизайном. Они доступны в формате JPG с разрешением 3000 x 2000 px и 300 dpi.
Abstract Watercolor Background — это набор уникальных акварельных фонов с 7-ю нарисованными вручную текстурами высокого разрешения. Эти текстуры вы можете отлично вписать в ваш креативный дизайн-проект или использовать их в качестве фонов для веб-сайтов.
Геометрические фоновые текстуры — по прежнему являются трендом в 2021 году. Они используются как в дизайне веб-сайтов, так и в графическом дизайне.
Этот набор включает в себя 24 стильных фона с креативными текстурами и геометрическими узорами. Такие текстуры идеально подойдут для создания фонов для веб-сайтов, приложений, презентаций и многого другого. Текстуры доступны в формате JPG с разрешением 6500 × 4500 px и 300 dpi.
Дизайн этого геометрического фона вдохновлен тенденцией дизайна Memphis. У фона красочный и минималистичный дизайн, который отлично подойдет для дизайна веб-сайтов, социальных сетей и визитных карточек. Фон доступен в форматах JPG, PNG, а также в настраиваемых форматах файлов AI и EPS.
Spiked Polygon — это набор уникальных абстрактных фонов с использованием остроконечных многоугольников в дизайне. Эта коллекция включает в себя 10 различных фонов, которые доступны в файлах JPG с разрешением 5000 x 3333 px и 300 dpi.
Источник: designshack.net, designshack.net, designshack.net
Цвет и изображение фона сайта
Фон сайта — это область, которая отображается за всем остальным на вашем сайте. (Чтобы установить цвет фона или изображение для отдельных блоков, строк, столбцов и т. д., см. наше руководство по этому вопросу.)
Чтобы установить цвет или изображение для фона вашего сайта, перейдите к «ProPhoto > Настройщик > Фон» и найдите настройки Внешний вид фона сайта .
Ваши настройки обычно применяются здесь, когда вы выбираете верхний уровень Базовый шаблон вашего дизайна, но при необходимости эти параметры можно переопределить для каждого шаблона.
Цвет фона сайта
На экране Фон для любого шаблона найдите параметр для выбора или переопределения цвета фона сайта, как показано здесь:
Выберите цвет фона, который вы хотите использовать, с помощью инструмента цветов и палитр.
. Инструмент позволяет выбирать цвет визуально, используя значения цвета HEX, значения цвета RGB или значения HSL. Инструмент также имеет ползунок для установки непрозрачности цвета, если вам нужны полупрозрачные цвета.
Когда вы выбрали цвет, нажмите, чтобы сохранить внешний вид макета изменения в нижней части всплывающего окна. Вы должны заметить, что цвет применяется при просмотре вашего сайта.
Фоновое изображение сайта
Используйте область загрузки изображения, чтобы применить изображение с вашего компьютера. Вы можете перетащить изображение в эту область или щелкнуть, чтобы использовать селектор файлов.
Загруженные изображения будут отображать имя файла, ширину и высоту, а также информацию о размере файла.
Фоны избранных изображений
Узнайте о настройке избранных изображений для сообщений блога, веб-страниц и галерей ProPhoto в разделе Установить избранное изображение.
Используйте избранное изображение страницы, выбрав параметр в области фонового изображения вашего шаблона.
Если выбран вариант избранного изображения, фон сайта будет отображать избранное изображение из просматриваемой записи/страницы/галереи. Если к сообщению/странице/галерее не применяется избранное изображение, вместо него будет использоваться загруженное фоновое изображение из этой области, если оно предоставлено.
Использование избранного изображения в качестве фона позволяет создать в макете динамический фон, который будет обновляться при просмотре страницы, что избавляет от необходимости создавать несколько шаблонов для нескольких страниц только для того, чтобы фоновое изображение менялось на каждой странице.
Вы также найдете дополнительные параметры для управления положением и поведением фонового изображения. Нажмите, чтобы прочитать о каждом элементе управления:
Начальная позиция фонового изображения
При использовании фонового изображения вы можете управлять его позиция .
Для позиции доступно несколько вариантов, каждый из которых расположен в соответствующем месте в этой таблице:
| слева вверху | верхний центр | вверху справа |
| в центре слева | центр центр | центр справа |
| внизу слева | нижний центр | внизу справа |
Изображение будет размещено относительно краев элемента макета в выбранном вами месте. Например, нижний центр выровняет нижний край изображения по нижнему краю элемента и выровняет горизонтальный центр изображения с горизонтальным центром элемента, как показано на рисунке:
фоновое изображение расположено нижний центр зеленого элемента
Как и другие настройки, это положение изображения можно применить в базовом шаблоне дизайна и унаследовать во всех дочерних шаблонах. Или вы можете переопределить настройки в других дочерних шаблонах.
Размер фонового изображения
Фоновые изображения имеют ширину и высоту , которые отображаются в сведениях о файле после загрузки, но вы можете использовать элемент управления размера , чтобы повлиять на то, как изображение применяется к сайту. Доступно несколько вариантов размера, каждый из которых определен ниже:
- фактический размер : без масштабирования, с кадрированием.
Это исправит изображение в размере 100% в качестве фона сайта без масштабирования. Части фона сайта останутся незакрытыми изображением, если оно недостаточно велико, и изображение будет обрезано там, где оно больше элемента. Редко используется этот параметр для фонового изображения сайта из-за различий в устройствах и размерах экрана, на которых будет просматриваться ваш сайт. - содержат изображение внутри элемента : с масштабированием, без обрезки.
Это уместит изображение за сайтом, масштабируя его до краев страницы. Область фона останется открытой, если соотношение сторон изображения отличается от соотношения сторон страницы. Поскольку веб-страницы могут иметь разную длину, этот параметр будет давать разные результаты на более коротких и длинных страницах. - покрыть весь элемент изображением : с масштабированием и обрезкой.
Это заполнит изображение за сайтом, масштабируя его до краев страницы. Область фона полностью закрыта, но изображение будет обрезано там, где оно станет больше страницы. Поскольку веб-страницы могут иметь разную длину, этот параметр будет давать разные результаты на более коротких и длинных страницах.
Поскольку изменение размера фона может привести к разным результатам для разных размеров экрана и соотношений сторон, вам следует протестировать свой дизайн, чтобы убедиться, что изображения выглядят и ведут себя так, как вы хотите.
Используйте разные размеры окна или экрана для проверки. Если изображения выглядят слишком зернистыми или пикселизированными при масштабировании, попробуйте загрузить изображение с большим разрешением для фона.
Мозаика фонового изображения
Фоновые изображения имеют ширину и высоту , показанные в сведениях о файле после загрузки, но вы можете использовать элемент управления мозаики , чтобы изменить способ повторения изображения за страницей, когда изображение слишком маленькое фактический размер . Каждый из параметров определен ниже, а затем приведен пример:
Мозаика обычно не используется в сочетании с параметром размера обложки , описанным в разделе о размере изображения выше, но может использоваться, когда фактическое значение или содержит выбранный размер .
Поведение при прокрутке фонового изображения
Фоновые изображения обычно устанавливаются на прокрутки со страницей , но вы также можете выбрать, чтобы фон оставался фиксированным на месте .
Если для фона установлено фиксированное положение, он отображается в браузере неподвижно даже при прокрутке. Положение изображения (см. раздел выше) будет относительно окна браузера , а не на всю длину сайта. Это означает, что нижний центр – это нижний центр окна браузера, независимо от длины страницы. Например:
Как правило, к этому фону элемента макета сайта применяется фиксированное положение . изображение, поскольку оно является основным фоном сайта. Но этот параметр можно применить к фону блоков, строк или столбцов для классного многослойного эффекта, часто называемого «эффектом параллакса».
Фоновый виджет — вставьте виджет изображения или видео на свой сайт! (2022)
Скоро
Отзывчивый Легко использовать Без кодирования
Зачем мне нужен фон Elfsight?
Потрясающие фоны. Невероятный пользовательский опыт
Порадуйте свою аудиторию
Поднимите визуальный опыт ваших посетителей на новый уровень с помощью потрясающих и забавных видео, изображений, используемых в качестве фона
Настройка очень проста
Так же просто, как выбрать наиболее подходящее изображение или видео и выбрать страницы, на которых вы хотите, чтобы они отображались
Выделиться на фоне конкурентов
Страницы вашего веб-сайта с уникальными изображениями и видео привлекут внимание и не дадут вашим пользователям быстро уйти
0%
поддержка веб-сайтов
0+
Вложеночасов разработки
1 мин
, чтобы начать использовать виджет
0%
уровень удовлетворенности клиентов
Присоединяйтесь к 1 078 753 клиентам, уже использующим приложения Elfsight
Вы можете начать с создания своего первого фонового виджета Elfsight бесплатно.
Зарегистрироваться
Что делает фон Elfsight особенным?
СОДЕРЖИМОЕ
Создайте привлекательное изображение или видеофон
Настройте дизайн своего веб-сайта одним щелчком мыши, используя новый виджет «Фон» от Elfsight! Выберите тип контента, который вы хотите использовать в качестве фона — изображение, видео или цвет, и начните создавать свой виджет. Вы можете выбрать изображение из нашей огромной библиотеки или загрузить свое собственное. Видео, которые вы используете, могут быть взяты с YouTube, Vimeo или размещены на собственном хостинге. Весь контент будет автоматически масштабироваться в браузере, поэтому вам не нужно беспокоиться о правильном размере, соответствующем вашему дизайну.
ПЕРСОНАЛИЗАЦИЯ
Множество опций на ваш выбор
Вы можете выбрать страницы, на которых должен отображаться виджет — все страницы, выбранные или просто выбрать исключенные страницы, на которых виджет не будет отображаться.
Как для изображений, так и для видео есть возможность отметить необязательный отступ. Если вы хотите, чтобы изображение или видео было полноэкранным, мы предоставили вам такую возможность. Для видео есть возможность добавить значок воспроизведения/паузы для пользователей вместе со значком отключения звука/звука. Вы также можете решить, будут ли ваши фоны отображаться на мобильных устройствах или нет.
СТИЛЬ
Используйте готовую цветовую схему или создайте собственный дизайн
Для тех, кто ценит свое время, мы предлагаем необычный инструмент — Генератор цветовых тем, который автоматически создаст схему для вашего виджета. Просто выберите основной цвет, темный или светлый режим, и пусть встроенный дизайнер цветов настроит все за вас. С другой стороны, если вам нужен своеобразный вид виджета, вы всегда можете продолжить изменять все составляющие виджета по отдельности. Мгновенно просматривайте все изменения в бесплатном конфигураторе без необходимости программирования.
БУДЬТЕ НА СВЯЗИ!
Скоро появится множество других функциональных и дизайнерских вариантов
В данный момент лучшие программисты и дизайнеры Elfsight работают над структурой и функциональными возможностями виджета. Будет широкий спектр функций, у вас будет возможность настроить свой контент, чтобы он стал неотъемлемой частью вашего сайта. Очень скоро можно будет протестировать все настройки и изготовить виджет, следите за обновлениями!
Что говорят наши клиенты ❤️
Легко интегрируемые плагины, которые работают так, как ожидалось. Был вопрос, и служба поддержки клиентов ответила на удивление быстро и скрупулезно. Какой свежий сюрприз!
Потрясающий сервис! Наткнулись на препятствие, связанное с определением размеров, и команде потребовалось несколько дней, чтобы разобраться с проблемой, и они поддерживали связь в течение всего процесса.
Мы используем три приложения с их виджетами. Именно то, что мы искали.
Простота управления, несколько вариантов дизайна, прекрасное обслуживание клиентов!
Еще виджеты Elfsight
Добавляйте посты из своего аккаунта Instagram или по хэштегу на свой сайт
Бестселлер
Вставляйте отзывы из Google прямо на свой сайт
Бестселлер
Дайте пользователям возможность связаться с вами в WhatsApp прямо из ваш веб-сайт
Бестселлер
Добавьте контент из Instagram, Facebook, Twitter и других социальных платформ на свой веб-сайт
Покажите обзоры из Google, FB, Amazon, Yelp и с более чем 20 других платформ для отзывов на вашем сайте
ПОПУЛЯРНЫЕ
Позвольте пользователям общаться с вами в Facebook Messenger, WhatsApp, Telegram и т. д. панели, уведомления и многое другое для любых целей
В тренде
Показ постов, фото и видео с Facebook на вашем веб-сайте
В тренде
Демонстрация отзывов клиентов на вашем веб-сайте
Отображение каналов и видео YouTube на вашем веб-сайте
Бестселлер
Отображение обзоров со страницы Facebook на вашем сайте
В тренде
Посмотреть все виджеты
Часто задаваемые вопросы
Что такое фоновый виджет?
Это простой инструмент, позволяющий легко добавить изображение, цвет или видео фон на любую страницу вашего сайта.
Как я могу встроить фоновый виджет на свой веб-сайт?
Чтобы встроить наше приложение, просмотрите все шаги из простого руководства:
- Используйте конфигуратор и начните создавать свой собственный инструмент.
- Настройте спецификации приложения и внесите необходимые изменения.
- Получите уникальный код, появившийся в окне.
- Вставьте код виджета на главную страницу и сохраните его.
- Молодец! Вы правильно внедрили виджет Elfsight на сайт.
Столкнулись с трудностями при установке? Не стесняйтесь обращаться к нашим сотрудникам службы поддержки клиентов, и они будут рады помочь.
Совместим ли он с моей CMS или конструктором сайтов?
Конечно. Плагины могут быть интегрированы с 99% популярных платформ веб-сайтов. См. список ниже:
BigCommerce, Webflow, iFrame, HTML, WooCommerce, Webnode, Squarespace, Joomla, Weebly, Google Sites, Adobe Muse, ModX, Shopify, Elementor, WordPress, Magento, Drupal, OpenCart, Wix, jQuery, страница Facebook, Blogger и многое другое.