[Гостевой] Руководство по созданию собственного сайта на MotoCMS

[Гостевой] Руководство по созданию собственного сайта на MotoCMS

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

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

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

Ещё раз предупреждаю. Автор статьи не я. Более того, автор даже другого пола, поэтому написана статья от женского лица.

Итак, поехали...

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

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

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

Я не профессиональный веб-дизайнер или разработчик, так что я хотела найти для себя простой в настройке конструктор, который не требовал бы от меня того, чтобы я целыми днями учила HTML код или CSS, разбиралась в тонкостях дизайна и тратила кучу своего времени.

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

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

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

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

Настройка хедера

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

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

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

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

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

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

Если вы выберете дизайн для одной длинной страницы, то важно убедиться в том, что пользователи не будут теряться на сайте и легко смогут найти ту или иную секцию из любой части сайта. Поэтому, вам необходимо, чтобы меню всё время оставалось видимым, даже когда пользователь прокручивает страницу вверх-вниз. В MotoCMS функция “Sticky” позволяет “приклеить” меню к верхней части экрана браузера. Я ставлю галочку возле опции “Sticky”, поэтому меню навигации по моему сайту всегда вверху.

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

Как вы видите, я добавила виджет “слайдер” в контейнер заголовка, который открыл окно лайтбокса, где я могу выбрать изображения из своей медиа-библиотеки. Большинство дизайнеров и UX-специалистов утверждают, что оптимальное количество фото слайдера от 3 до 5, поэтому я добавлю 4.

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

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

Чтобы улучшить пользовательский интерфейс, вы можете отключить показ слайдов и позволить пользователям вручную с помощью стрелок переключать слайды с изображениями тогда, когда им нужно. Ваша CMS может также позволить выбрать тип анимации, который будет использоваться в режиме слайд-шоу. Я выбрала вид анимации FadeIn.

Настройка участка контента

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

Вы можете добавить столько контейнеров или строк в разделе Содержимое, сколько вам нужно. Во-первых, нужно решить, какие разделы вы хотите иметь в своем содержании. Я собираюсь добавить следующие участки содержания для этого сайта: секция “О программе” ; раздел “Персонал”; раздел “Меню” с изображениями и ценами; “Календарь”, чтобы размещать информацию о предстоящих скидках, акциях и различных промо-акциях; и раздел “Обратная связь”, чтобы поддерживать контакт с клиентами или позволить им оставлять заказы. Ниже я расскажу подробнее, как добавлять и настраивать каждый раздел и что необходимо учитывать, когда вы создаете их.

После выбора раздела “Content”, я добавила контейнер, в котором я создаю свой первый раздел: приветствие. Также я добавила фон. При создании фона в MotoCMS, контейнер будет соответствовать высоте изображения, поэтому я добавила изображение высотой 550 пикселей.

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

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

Если хедерслишком близко к верхней границе, Header Divider виджет устанавливает дополнительный узкий ряд между верхней границей контейнера и текстом. Установите Header Divider на “0”, чтобы удалить тонкую линию по умолчанию в нём.

Вот, я перетащила виджет “Ряд” в “Интервал”, что позволяет мне установить несколько элементов в колонках. Я буду использовать эту опцию, чтобы расположить текст в более узкой области, которая расположена по всей ширине контейнера. Я добавила виджет “Ряд” в контейнер под первым виджетом “Ряд” с текстом приветствия, и установила 3 колонки из левой панели.

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

Раздел Меню

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

Я добавила Контейнер в раздел Содержание под секцией Приветствие. Затем я добавила текст и виджеты изображения, как я это делала для Приветствия.

Вот, я создала простое меню с двумя рядами разделов и тремя пунктами в каждой строке. Я установила виджет строку ниже моего текста, выбирая опцию "3 колонки" на левой панели. Я добавила изображение для каждого столбца и текста с заголовком и описанием блюда, а затем сделала это для второго ряда.

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

Новости и события

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

Раздел новости должен постоянно обновляться. Именно по этому разделу посетители знакомятся с сайтом, если страница заинтересует - они пройдут дальше и увидят больше информации.

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

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

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

Раздел персонала

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

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

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

Обратная связь

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

Для ресторана контактная форма может позволить клиентам найти адрес ресторана или разместить заказы на резервирование столиков через сайт.

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

Чтобы создать контактную форму в MotoCMS, я использовала специальный виджет. После добавления контактной формы, я тщательно подобрала поля, чтобы и клиентам было удобно заполнять и для владельца сайта информации было достаточно. Можно добавить поле номер телефона, если вы планируете созваниваться с клиентами. Некоторые поля стоит сделать обязательными - пусть это будет один или два поля. Ну и конечно же, нужна кнопка Отправить.

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

Настройка футера

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

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

Для моего сайта, я добавляю адрес кафе, кнопки социальных сетей, а также номер телефона моего кафе.

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

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

Параметры SEO

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

Кроме того, можно оптимизировать изображения путем добавления соответствующего названия и ALT-тег для каждого из них.

Вот так, шаг за шагом я настроила свой сайт. Вы также можете сделать себе сайт самостоятельно придерживаясь этих рекомендаций даже если вы не профессионал и делаете сайт первый раз в жизни. А если вашим выбором станет MotoCMS - то всегда можно воспользоваться удобной технической поддержкой, которая работает 24/7.

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

Подпишитесь на обновления блога

Получить в подарок мини-книги и 21-дневный тренинг по личностному росту.

Подписаться на рассылку «Инструменты Интернет для онлайн бизнеса»

Поделиться ссылкой:


Комментарии:

Оставьте комментарий [форматирование]

Пожалуйста, воздержитесь от спама и идиотских высказываний. Жёсткая модерация. Ссылки закрыты атрибутом nofollow, а значит не несут пользы для продвижения!
Ссылки на всё кроме личных блогов и тематических блогов, сходных по тематике с данным, вырезаются.



Мой RSS фид