Как создать сайт с интернет-магазином на Weblium с нуля? Возможности онлайн-конструктора Вэблиум

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

Помимо ведения данного канала, я еще занимаюсь плетением макраме. Поэтому решила сделать сайт для моего макраме проекта.

Для создания сайта выбрала конструктор Weblium.

Weblium — универсальный конструктор сайтов, на котором с одинаковым удобством можно создать и простой лендинг, и многостраничный сайт, и портфолио-визитку или полноценный интернет-магазин с онлайн-оплатой. Основная особенность Вэблиум: простота использования: привлекательный интерфейс, простой для использования визуальный редактор, простые настройки.

Конструктор Weblium позволяет создавать сайты:

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

Как создать сайт с интернет-магазином на Weblium с нуля? Возможности онлайн-конструктора Вэблиум

Выбор шаблона на Weblium

Есть краткий список шаблонов, но полный будет доступен сразу после БЕСПЛАТНОЙ регистрации. Все шаблоны конструктора разделены на категории. Мне подходит “Магазин”, выбираю его. Для меня открывается 11 вариантов на выбор. Выбрала Christmas Decor Store

Как я поняла уже потом, ЛЮБОЙ из шаблонов может быть использован в качестве интернет-магазина. Т.к. включение функционала магазина есть в настройках для любого шаблона, хоть сделанного самостоятельно с нуля. Поэтому, если нравится какой-то другой шаблон, кроме того, что размещён в разделе каталога шаблонов «Интернет-магазин» — можно легко использовать и его.

Как создать сайт с интернет-магазином на Weblium с нуля? Возможности онлайн-конструктора Вэблиум

Редактирование шаблона

После выбора шаблона кликаем на “Редактировать” и отрывается панель редактирования. Всё интуитивно понятно. Начала с шапки сайта: изменила название, отредактировала категории меню, ненужные категории удалила. Далее поработала с большой красной кнопкой: решила добавить к ней номер телефона, чтобы посетители сайта могли со мной связаться. Затем добавила соцсети: выбрала инстаграм и ВК и добавила ссылки на себя в этих соцсетях и проверила работает ли при нажатии на иконку соцсети

Как создать сайт с интернет-магазином на Weblium с нуля? Возможности онлайн-конструктора Вэблиум

Работа с блоками на Веблиум

У каждого блока при наведении появляется значок шестеренки — это настройки. Я, конечно же, решила заменить эту новогоднюю картинку. Для этого перехожу во вкладку “Фон” и загружаю изображение с компьютера. Советую заранее подготовить папки с фотографиями, логотипами и другими картинками, которые вам понадобятся при редактировании сайта. Фотографию добавила и удалила лишнее, захотелось оставить так.

Далее при нажатии на “Добавить блок” я выбираю элемент для краткого описания моего проекта. Они разбиты по категориям, найти нужный легко. Выбираю из категории “О нас”. Он появляется ниже моей фотографии, перехожу к его редактированию. В то место, где должна быть картинка, добавляю свою фотографию. Изображение можно увеличить или уменьшить, это очень удобно. Заголовок и описание отредактировала, перехожу к кнопке. Решила сделать так, что при нажатии на эту кнопку, клиент попадет на мою страничку в инстаграмм. Для этого нажимаем на шестеренку и находим блок “Действие при нажатии”, выбираю “Веб-адрес” и оставляю ссылку на инстаграмм.

Как создать сайт с интернет-магазином на Weblium с нуля? Возможности онлайн-конструктора Вэблиум

Дизайн кнопки тоже можно изменить во вкладке “Стиль”. Внизу видим “Глобальный стиль кнопки”, там мы можем выбрать цветовую палитру для нашего сайта или настроить вручную цвет наших кнопок. Цвет применяется ко всем кнопкам на сайте.

Как создать сайт с интернет-магазином на Weblium с нуля? Возможности онлайн-конструктора Вэблиум

Продолжаю работу с блоками шаблона. Меняю заголовки под себя, придумываю тексты. Данный блок тоже имеет общие настройки, работаю там с фоном. Есть предпросмотр.

Иконки тоже можно заменить, кликнув на них. В конструкторе подключены сервисы иконок Noun Project и Icom8 — что дают более 50 тыс возможных вариантов иконок. С одним нюансом — поиск по библиотеке иконок идёт на английском языке. Машинка с елкой мне не подходит, выбираю другую из категории Доставка.

Далее идет элемент Коллекции, редактирую его под себя: меняю фото, текст и кнопку.

Как создать сайт с интернет-магазином на Weblium с нуля? Возможности онлайн-конструктора Вэблиум

Добавление и редактирование товаров на Weblium

Т.к. я выбрала шаблон для магазина, в нем уже есть добавленные товары. Мне нужно их отредактировать под себя. Для этого перехожу в настройки магазина и во вкладке “Товары” вижу список товаров. Нажимаю “Редактировать” и здесь всё максимально просто: заменить картинку, заголовок, описание, цену и указать, есть ли товар в наличии или изготавливается под заказ.

Как создать сайт с интернет-магазином на Weblium с нуля? Возможности онлайн-конструктора Вэблиум

Товары можно разделить по категориям. Для этого их нужно создать и отправить товар в нужную категорию. Нажимаем сохранить и переходим к добавлению остальных товаров и категорий. Всё очень просто и быстро.

Как создать сайт с интернет-магазином на Weblium с нуля? Возможности онлайн-конструктора Вэблиум

Для того, чтобы добавить новый товар, нажимаем “Добавить товар”

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

Ну и не забываем изменить категории товаров.

4 товара добавила. Выглядит красиво, мне нравится.

Как создать сайт с интернет-магазином на Weblium с нуля? Возможности онлайн-конструктора Вэблиум

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

Как создать сайт с интернет-магазином на Weblium с нуля? Возможности онлайн-конструктора Вэблиум

Обращение в техподдержку Weblium

Я решила проверить, как быстро техподдержка мне поможет решить вопрос. Отправила в чат запрос о добавлении товаров. Меня попросили оставить почту и через 2 минуты поступил ответ от Юрия. К слову, в техподдержке консультируют реальные люди, а не роботы.

Как создать сайт с интернет-магазином на Weblium с нуля? Возможности онлайн-конструктора Вэблиум

Редактирование блоков

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

Ниже идет раздел с Вопросами и ответами. Очень классно и удобно всё. Просто навожу на текст, пишу вопрос и ответ и готово!

Подвал сайта

В самом низу нашего сайта идет информация с контактами, картой, телефоном и почтой. Опять же, редактирую всё под себя. Затем при клике на карту, появляется возможность добавить местоположение. Вбиваю свою Северную Столицу)

Перед повалом сайта можно сделать такую галерею с моими работами. Добавляю их и получается такая красивая лента

Ниже меняю логотип и подпись под ним, фон всего блока, пункты меню, удаляю ненужное и немного перемещаю элементы

Как создать сайт с интернет-магазином на Weblium с нуля? Возможности онлайн-конструктора Вэблиум

Блок с отзывами

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

Меняю картинку и подпись к ней. Решила сделать минималистично, оставив только одну подпись. То же делаю и с соседним блоком.

Создание Pop-up

В этом конструкторе очень удобный функционал по созданию всплывающих окон.

Конструктор попапов ВХОДИТ в стоимость месячной или годовой подписки, что экономит немало денег на подключение сторонних сервисов с аналогичной услугой.

Я решила тоже попробовать сделать. Для этого кликаем наверху на “Pop-up” и выбираем форму, меняем название нашего окна и выбираем, когда будет показываться наше всплывающее окно. Я выбираю “Перед выходом” и перехожу к редактированию. Добавляю фото и описание, редактирую кнопки. Можно сделать так, чтобы при нажатии на кнопку, клиент попал на нужный мне раздел сайта.

Теперь мне нужно выбрать, каким образом окно будет “всплывать”. Перехожу в настройки pop-up и смотрю, какие есть анимации и как часто будет окно показываться.

Как создать сайт с интернет-магазином на Weblium с нуля? Возможности онлайн-конструктора Вэблиум

Добавление логотипа в шапку

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

Изменение валюты

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

В магазине перехожу в “Настройки” и в графе “Отображение данных” вижу информацию про отображение цены. Выбираю рубли и забываю поставить пробел перед указанием валюты, поэтому вид цены будет слитым. И затем меняю в карточке товара стоимость под рубли, а то у меня стояли доллары)

Как создать сайт с интернет-магазином на Weblium с нуля? Возможности онлайн-конструктора Вэблиум

SEO настройки на Weblium

Для настройки seo параметров обратилась к подсказкам в редакторе. Решила добавить заголовок и описание. Для начала мне нужно было поменять название сайта, затем при нажатии на шестеренку перешла к детальной настройке сео. Обязательно нужно отредактировать Title и Description. Они будут отображаться в поисковике. Также добавляю ключевые слова. И в графе “Социальные сети” тоже всё отредактировала.

Как создать сайт с интернет-магазином на Weblium с нуля? Возможности онлайн-конструктора Вэблиум

Добавление фавикона

Фавикон — это иконка, которая отображается в открытой вкладке сайта. До сих пор у меня там было что-то на новогоднюю тему, меняю на свой логотип в настройках общей информации.

Как создать сайт с интернет-магазином на Weblium с нуля? Возможности онлайн-конструктора Вэблиум

Редактирование готового блока на Weblium

Хочу еще раз показать, как можно редактировать готовые блоки. Выбираете любой, который вам приглянулся и можете его подстроить под себя: менять текст, удалять ненужное, добавлять картинки и менять местами элементы блока. Я решила сделать такой небольшой блок, посвященный уходу за изделиями.

Есть классное видео с демонстрацией того, как можно изменить блок до неузнаваемости!

Перемещение блоков

Перемещать блоки удобно, когда масштаб сильно уменьшен. Кликаем справа на “Переместить и удалить блоки” и меняем местами так, как нам нравится. Всё очень просто.

Как создать сайт с интернет-магазином на Weblium с нуля? Возможности онлайн-конструктора Вэблиум

Проверка функции заказа

Теперь я решила проверить, работает ли функционал заказа товара. Для этого открыла уже опубликованный сайт, отправила товар в корзину и оформила заказ. Мне на почту пришло письмо, что на сайте совершен новый заказ.

Настроить уведомления не только на почту, но и на Телеграм. Вскоре, как обещают в Weblium, будет работать уведомления и на другие мессенджеры: facebook, Whatsapp, Viber.

Как создать сайт с интернет-магазином на Weblium с нуля? Возможности онлайн-конструктора Вэблиум

Готовый сайт

Вы можете перейти по ссылке на мой сайт и посмотреть его.

PRO-подписка на Weblium

Я оформила PRO-подписку и смогла бесплатно на 1 год выбрать себе домен. Теперь у меня сайт с красивым доменным именем, а не набором каких-то букв, никак не относящихся ко мне) В этом, конечно, огромный плюс PRO-тарифа.

Помимо домена, на этом тарифе появляются расширенные SEO-инструменты и функция отслеживания событий.

Как создать сайт с интернет-магазином на Weblium с нуля? Возможности онлайн-конструктора Вэблиум

Кратко расскажу о своих впечатлениях о работе на конструкторе Веблиум:

  • В редакторе всё было очень понятно и интуитивно. Первые несколько минут нужно понажимать на всё и приходит осознание, как редактируются блоки
  • Быстрая техподдержка и база знаний внутри редактора. Если я не могу что-то найти, можно быстро найти в подсказках
  • Шаблонов реально очень много!
  • Очень важно, что можно посмотреть, как будет выглядеть мой сайт на смартфоне и планшете
  • Интересно было поработать с всплывающими окнами. Можно поиграться с анимацией и менять их постоянно, пробуя новые форматы
12.04.2021 Это Просто