Арсенал интернет решений

Как создать сайт в Канва

как создать сайт в канве
Арсенал Решений
Арсенал Решений
VK
Telegram
WhatsApp
Оглавление

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

Из статьи вы узнаете:

  • какие инструменты есть для просмотра готового сайта, его публикации,
  • как выглядит сайт в мобильной версии,
  • как вставить ссылки на соцсети,
  • о приеме оплаты за товары или услуги.

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

Поиск и замена шаблона для сайта

Галочка пнгВ поисковой выдаче по ключевому слову «Сайт» выберите проект или загрузите пустую страницу.

Галочка пнгКак изменить шаблон, если вы видите, что это не ваш вариант? В боковом меню во вкладке шаблоны выбирайте новый. Кликайте по выбранному, вставляйте все страницы. Замена происходит автоматически.

Стандартный макет сайта в Canva

Как правило, шаблон сайта из нескольких страниц:

  1. заголовок, название проекта;
  2. о нас (о компании, обо мне и т.д.);
  3. информационная страница;
  4. список продуктов, услуг, того, что вы предлагаете;
  5. отзывы или наша команда;
  6. контакты, как связаться, как заказать.

В совокупности эти страницы представляют собой лендинг или одностраничник.

Визуально макет похож на презентацию.

Инструменты управления макетом

Над каждым слайдом-страницей есть набор функциональных кнопок:

  • переместить слайд вверх или вниз;
  • дублировать слайд-страницу;
  • удалить;
  • добавить чистую страницу.

кнопки канвы для макетов

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

масштабирование в Канва

Просмотр выбранного сайта в интернете

Галочка пнгВ верхней части кликните по кнопке «Публикация как веб-сайта»

Галочка пнгВ выпавшем меню несколько блоков. Спускайтесь до выбора веб-стиля.

Доступны 4 варианта:

  • Презентация,
  • Прокрутка,
  • Классическая навигация,
  • Стандарт.

Выбирайте стиль и кликайте по кнопке в низу – открыть сайт.

варианты сохранения сайта в Канве

1Режим презентации

Превратит ваш сайт в обычную презентацию, которую можно посмотреть онлайн.

2Прокрутка

Вы получаете действительно современный лендинг, страницы которого плавно перетекают одна в другую.

3Классическая навигация

Превращает сайт в многостраничный. Навигация расположена справа вверху. Содержит все ваши страницы. Название – это название вашего выбранного дизайна. Его нужно сменить при редактировании, об этом чуть позже.

4Стандарт

Сохраняет и меню вверху, и одновременно показывает все страницы одна за другой, можно перемещаться с помощью прокрутки. Неплохой вариант тоже.

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

Как выглядит ваш сайт в мобильной версии

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

сайт на мобильнике

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

Редактирование сайта в Канве

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

Замена названия сайта в Канва

Галочка пнгПрежде, чем менять фото и текст замените название вашего сайта. Такая возможность скрывается на кнопке «Файл» в верхней панели.

 

Смена названия сайта в канва

Замена названий страниц сайта в Канва

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

замена заголовков в канва

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

Изменение графики

Замена картинок, текста, фона и других элементов на самом сайте происходит точно так же, как в обычных шаблонах – перетаскиванием.

Текст набираете с клавиатуры свой собственный, если не нужен – удаляете.

Прием оплаты на сайте

Вы можете вставить ссылку на прием оплаты за какой-либо товар или услугу.

У вас должна быть возможность приема денег на Яндекс-кошелек или любую другую систему приема платежей.

Галочка пнгСкопируйте нужную ссылку из системы приема платежей и привяжите ее к определенному тексту или картинке на сайте.

Галочка пнгВставьте на сайт кнопку «Купить»

Галочка пнгПривяжите к кнопке ссылку на оплату. Как это сделать смотрите в видео уроке (в начале статьи).

Теперь при клике на кнопку пользователь будет переходить на систему оплаты.

Галочка пнгАбсолютно точно также вы можете вставить кнопки соцсетей и привязать к ним ссылки.

Ссылка вставляется не только на картинки, но и на текст.

Таким образом, вы можете оформить последний слайд с контактами.

Как показать готовый сайт пользователям

Есть несколько вариантов.

По ссылке Канвы

Галочка пнгВ верхнем правом углу выберите формат показа сайта, откройте его и скопируйте ссылку из адресной строки.

Именно по ней и будет работать ваш сайт.

Галочка пнгСсылку рекомендую сократить, например, в сервисе сокращения ссылок  ВКонтакте.

Короткую удобно публиковать в соцсетях, рассылать по электронке и т.д.

Вставка html кода на сторонний хостинг

Можно сделать сайт на Канве и затем перенести его на другую платформу. Такой вариант предлагает Canva, однако не все получается гладко.

Галочка пнгДля переноса на WordPress cкопируйте html-код. Его найдете в правой верхней части меню.

htmlкод в канве

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

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

Подробности смотрите в видео (в начале статьи)

Как создать сайт canva и вносить изменения

Канва автоматически сохраняет ваш проект. В любое время вы можете зайти и отредактировать данные.

Например, вы сделали каталог вашей продукции. Он меняется – что-то раскупили, что-то новое поступило в продажу.

На сайте соответственно удаляете ненужное, добавляете новое.

Видео урок

Как видите, сделать сайт в Canva не сложно. Изучайте основы работы с графикой и текстами, остальное в этой статье.

Внимательно посмотрите ролик, вам будет более понятен весь материал.

Похожие материалы