Конструктор

увеличить текст уменьшить текст

Дизайн макета Конструктор предлагает Вам инструменты и функции для персонализации выбранного шаблона или темы. Он не предлагает перетаскивания элементов или JavaScript / CSS фреймворков. Обычно эти приемы приводят к созданию медленных и низкокачественных сайтов, которых и так предостаточно в сети. Вместо этого выбран путь чистого и структурированного кода, что позволит Вам создать высококачественный, легкий, супербыстрый и красивый сайт.

Требуются технические знания

Мы сделали конструктор максимально удобным для пользователя, но с большим количеством функций приходит и более крутая кривая обучения. Рекомендуется изучить основы HTML и CSS Если Вы не хотите тратить время и силы, можно пропустить эту страницу.

Вот другие варианты дизайна, не требующие технических знаний:

Перейдите в Настройки > Макет и щелкните на вкладке Дизайнер Затем нажмите Start. Сам конструктор не подходит для использования на мобильном телефоне. Мы рекомендуем использовать большой экран (не менее 1920x900 пикселей) для комфортной работы с конструктором.

Дизайнер макетов

Конструктор состоит из превью на заднем плане, окна с мобильным видом Вашего сайта и окна дизайнера.

Мобильный вид

Большинство людей будут посещать Ваш сайт со смартфона. Мобильный вид дает Вам пример того, как Ваш сайт будет выглядеть на маленьком экране.

Убедитесь, что Ваш сайт не стал слишком широким, чтобы не появилась горизонтальная полоса прокрутки. Все шаблоны и темы по умолчанию являются дружественными к мобильным устройствам (отзывчивыми), но дизайнер дает много свободы, поэтому это может быть нарушено.

Значки вверху позволяют просматривать сайт в разных разрешениях.

Мобильная версия дизайнера

Иконка Обновить позволяет Вам обновить скрипты на сайте, чтобы увидеть последнюю версию.

Окно дизайна

Ниже приведены пояснения ко всем значкам на панели инструментов. По умолчанию показаны только значки основных функций. Щелкните на значке Параметры и активируйте Дополнительный режим, чтобы увидеть все значки.

Панель инструментов дизайнера

Мои дизайны

Первая иконка дает Вам представление о Ваших персонализированных дизайнах.

Добавить дизайн: С помощью этой кнопки Вы можете добавить новый дизайн или скопировать дизайн из другого интернет-магазина.
Опубликовать: После публикации дизайн будет жить и будет виден Вашим посетителям.
Редактировать: Это позволит Вам редактировать название, комментарии и права на копирование дизайна.
Удалить: Это действие позволяет Вам удалить дизайн. Это действие нельзя отменить.

Вам нужно будет подтвердить, что Вы хотите удалить дизайн. Удаление дизайна нельзя отменить. Вместо этого Вам придется создать новый дизайн.

Элементы

Элементы формируют HTML-структуру Вашего сайта. После выбора элемента Вам будет предложена веб-форма, позволяющая изменить свойства элемента.

Существует множество элементов и свойств, которые можно настроить с помощью веб-формы. Основным элементом является тег body страницы Webpages. Эта форма автоматически изменит базовый селектор CSS.

Свойства, которые уже были настроены, отмечены зеленым фоном в поле формы. Если оставить значение свойства пустым, это свойство будет удалено.

Элементы

Некоторые элементы содержат подэлементы. Щелчок по ссылкам вызовет новую форму, с помощью которой можно изменить свойства подэлемента.

Медиа

Свойства элементов могут применяться только для определенных размеров экрана или в печатной версии. Щелчок по ссылкам настраивает свойства элемента для определенного носителя.

Сохранить

Используйте этот значок, чтобы сохранить дизайн. При этом дизайн не будет опубликован.

Цвета, изображения и тип шрифта

Эти значки являются копией функций в базовом управлении макетом Они также показаны здесь для удобства.

Структура

Иконка структуры позволяет Вам изменять HTML-структуру сайта. Вы можете добавлять, перемещать и удалять объекты.

Существуют видимые объекты (функция поиска, корзина, выбор языка, навигация) и невидимые контейнеры, которые используются для структурирования сайта. Контейнеры обычно используются для группировки элементов или добавления фона.

Вы можете вносить изменения в структуру, перетаскивая элементы или используя стрелки Вверх и Вниз. Вы можете добавить новый элемент, нажав на кнопку Добавить внизу. Чтобы удалить элемент, нажмите на иконку Удалить.

Ваш веб-браузер обновит пример дизайна автоматически. Если обновление не произошло автоматически, нажмите Сохранить в окне дизайна, а затем Перезагрузить в мобильном представлении.

Настройка CSS

Обновление CSS позволяет Вам изменять коды верстки (CSS-код) сайта и является самой важной функцией конструктора.

CSS - Cascading Style Sheets - это не язык программирования, а язык стилей, который можно использовать для определения форматирования элементов сайта.

Настройка CSS - это что-то для непрофессионалов?

CSS можно легко освоить. Мы рекомендуем этот метод тем пользователям, которые хотят персонализировать свой собственный сайт и потратить время на изучение CSS.

Полезные ссылки с информацией о CSS:

W3Schools - учебники по изучению CSS
CSS-Tricks - наш фаворит с большим количеством информации о CSS

Помощь по настройке CSS

Для модификации CSS-кода наша служба поддержки не может предоставить поддержку. Добавление поддержки CSS означало бы создание индивидуального веб-дизайна, а это сделало бы EasyWebshop намного дороже. У нас есть Лето веб-дизайна для помощи в создании индивидуального дизайна.

Мы не рекомендуем разрешать веб-дизайнерам входить в Ваш интернет-магазин напрямую или с учетной записью администратора. Это иногда приводит к обсуждению изменений, которых не хотелось. Разрешайте входить в Ваш магазин только тем людям, которым Вы доверяете! Вместо этого веб-дизайнер может создать базовый веб-магазин и создать дизайн в этом магазине. Затем Вы можете скопировать дизайн в свой магазин с помощью функции копирования.

Во время редактирования CSS появляются дополнительные значки для отмены и повтора изменений, уменьшения и увеличения текста, а также функция поиска. Введите текст в строку поиска, чтобы найти его в коде CSS. Нажмите Enter, чтобы выделить текст, если он найден, и перейти к следующему экземпляру, если таковой имеется.

Параметры

Здесь Вы можете включить или выключить темный режим, полноэкранный режим и подсветку синтаксиса CSS-кода. Также есть возможность сделать окно дизайна прозрачным. Эти настройки относятся к окну дизайна, а не к сайту.

Предпочтения дизайнера

Как изменить свойство X?

Изменение фона

Выберите нужный Вам элемент, например, Webpage. В разделе Фоновое изображение. нажмите на иконку Редактировать изображение. Выберите изображение из списка или Загрузите новое изображение.

Вы также можете приобрести изображение, используя Галерею. Если Вы хотите использовать изображение на странице, мы рекомендуем Веб формат. Для фоновых изображений мы рекомендуем формат Большой.

Нажмите Вставить, чтобы установить изображение в качестве фона. После того, как фоновое изображение будет установлено, появится значок Удалить изображение.

Изменение кнопок

Выберите элемент Webpage и подэлемент Кнопки. В форме можно настроить такие свойства, как цвет, размер, стиль границ и т.д.

Подэлемент Кнопки mouse-over позволяет Вам изменить стиль кнопок при наведении на них мыши. Например, кнопке можно придать более светлый цвет.

Настройка цветов

Самый простой способ изменить цвета - это код CSS. Коды цветов выглядят как #ffffff или rgba(255, 255, 255, 0.5). В последней нотации последний параметр (0,5 в примере) - это прозрачность.

Полезные ссылки для составления цветов:

Конструктор цветов - легко создавайте цветовые палитры
Color Combos - собирайте цветовые комбинации

Настройка шрифтов

Вы можете изменить шрифт, выбрав элемент и настроив Шрифт в форме.

По умолчанию во всех наших шаблонах установлен один шрифт для основного элемента Webpage. Можно установить разные шрифты для разных элементов. Мы рекомендуем использовать только один шрифт, чтобы не загромождать пространство.

Часто задаваемые вопросы о конструкторе

Я все еще вижу старую версию сайта: Обычно это происходит потому, что старые изображения все еще находятся в кэше веб-браузера. Веб-браузер (Firefox, Google Chrome...) сохраняет веб-страницы и изображения на Вашем жестком диске. Таким образом, при следующем посещении страница будет загружаться быстрее. Когда Вы посетите страницу, Вы увидите старую версию фотографии на жестком диске, а не живую версию на Вашем сайте.

Чтобы решить эту проблему: очистите кэш Вашего браузера. Как это сделать, зависит от конкретного браузера.

Также проверьте, что Ваш дизайн опубликован.

Следующая страница: Редактирование текстов и веб-страниц

Стартовая вики

Часто задаваемые вопросы Контакт