Создание веб - сайта на основе системы управления контентом (cms) hubspot?
CMS HubSpot прошла долгий путь с тех пор, как я начал продавать ее в 2007 году.
В частности, в Редактор CMS предоставляет маркетологам возможность изменять текст, изображения и даже элементы дизайна своих веб-сайтов в режиме реального времени без каких-либо навыков кодирования. В свое время вам нужно было выбрать один из пяти стандартных шаблонов, в которых макет был заблокирован.
Однако с последней версией CMS HubSpot вы обладаете максимальной гибкостью.
В результате вам больше не нужно проходить долгий, исчерпывающий процесс проектирования и сборки, и вам не нужно будет ждать команды веб-разработчиков для каждого небольшого изменения, которое вы хотите внести. CMS означает “маркетинговую” свободу!
А с CMS HubSpot есть даже Рынок шаблонов где вы можете мгновенно загрузить готовые шаблоны, многие из которых созданы агентствами, специализирующимися на разработке сайтов HubSpot.
Но “будьте осторожны с покупателем” при покупке шаблона или найме разработчика для создания вашего сайта на CMS HubSpot.
“Значительная часть нашей работы заключается в исправлении ошибок других разработчиков и плохо разработанных шаблонов”, говорит Джо Джером, Президент Решения для создания брендов, агентство, специализирующееся исключительно на оказании помощи другим компаниям и агентствам в запуске сайтов на CMS HubSpot.
“Многие шаблоны CMS HubSpot являются лишь небольшим улучшением по сравнению с исходным кодом HTML, CSS и JavaScript. Конечно, они выглядят потрясающе на рынке, и для неподготовленного глаза они могут даже показаться, что их можно легко отредактировать, как только вы разместите их на своем портале HubSpot. Но на первый взгляд некоторые шаблоны полны зависимостей, которые нарушат весь дизайн, если вы выйдете за рамки незначительных изменений”. добавил Джером.
Шаблоны CMS HubSpot похожи на айсберги, и вы капитан корабля — вам нужно беспокоиться о том, что находится под поверхностью.
Даже с помощью дрянного шаблона вы, вероятно, все равно сможете изменять существующий текст и изображения. Но как только вам понадобится что-то сделать, например, изменить макет раздела или добавить новый раздел содержимого на страницу, вы будете вынуждены обратиться к разработчику.
Чтобы помочь вам не тратить время и деньги на неправильный шаблон или разработчика, мы попросили Brand Builder Solutions команда, чтобы поделиться наиболее распространенными проблемами, которые они видят, и тем, как мы, нетехнические маркетологи, можем их обнаружить.
Это руководство, а также наша предыдущая статья о наиболее экономически эффективные способы создания CMS HubSpot, это поможет вам задать правильные вопросы на ранней стадии процесса, пока не стало слишком поздно.
Прежде чем мы перейдем к распространенным ошибкам, вот…
6 Простых Вещей, Которые Вам Нужно Знать о Системе Шаблонов HubSpot
1. Макеты страниц и электронной почты построены на наборах блоков, называемых модули. Например, представьте изображение баннера в верхней части вашего веб-сайта как один модуль, меню навигации как модуль, текстовую область как еще один и форму как еще один. Когда функции этих блоков или расположение этих блоков меняются для определенной страницы вашего сайта, вам нужен новый шаблон.
2. В Конструктор шаблонов в менеджере по дизайну позволяет настраивать эти шаблоны веб-страниц и электронной почты с помощью интерфейса перетаскивания. Он обеспечивает визуальную структуру для макета фактической страницы. (См. Изображение ниже.)
3. Один и тот же шаблон можно использовать для нескольких страниц. Использование шаблона для нескольких страниц не означает, что каждая из этих страниц будет выглядеть одинаково. На самом деле, хорошо разработанный шаблон может придать вам совершенно другой внешний вид, используя одни и те же модули. Хорошо разработанные шаблоны и модули предоставляют вам встроенную гибкость и возможности для изменения внешнего вида раздела с помощью нескольких простых переключателей.
4. Однако веб-сайт может и обычно использует несколько шаблонов. Если ваш дизайнер выполняет работу правильно и/или вы покупаете отличный пакет шаблонов, запуск и редактирование сайта, где разные страницы имеют разные макеты, должно быть очень простым.
5. Вкладка “Редактировать модуль” в Редактор страниц позволяет добавлять копии, изображе��ия и стили в каждый из разделов или “модулей”, которые вы видите ниже. Здесь вы будете редактировать контент.
Как только вы внесете изменения на саму страницу, изменения сразу же будут видны для просмотра, и вы сможете обновить живую версию страницы в два клика. Эта система позволяет вам полностью избегать HTML и CSS. На самом деле, если ваш сайт построен правильно с отличными шаблонами, вам никогда не придется самостоятельно редактировать HTML или CSS.
6. С помощью CMS каждая страница ваш��го сайта не должна быть создана разработчиком на заказ. “Некоторые разработчики не скажут вам об этом, потому что они захотят создать страницы для вас. Но прелесть CMS в том, что вы можете самостоятельно заполнять свой контент”.
Теперь, когда у вас есть базовое представление о системе, давайте рассмотрим ошибки, часто допускаемые разработчиками, которые помешают вам полностью контролировать свой сайт.
Будьте осторожны с этими 5 распространенными ошибками веб-дизайнера CMS
Хотя существует более 5 способов, которыми разработчик может реализовать дерьмовый шаблон для вашего сайта, мы спросили команду Джерома, какие из них наиболее распространены.
Вот что они видят чаще всего…
1. Закодированный файл в качестве шаблона
Если вы откроете редактор шаблонов и увидите что-то вроде захвата экрана ниже, убегайте с криком.
Вы были бы счастливы, если бы вам пришлось отредактировать это после того, как вы заплатили разработчику за создание вашего сайта на CMS?
Я бы не стал.
Хотя вы все еще можете редактировать содержимое в редакторе страниц с помощью шаблона, подобного приведенному выше, подобные шаблоны не позволяют разработчикам вносить изменения в макет вашего шаблона с помощью редактора шаблонов перетаскивания.
2. Один большой Не Редактируемый пользовательский модуль в Диспетчере проектирования
Используя Менеджер по дизайну Hubspot, вы должны иметь возможность быстро просмотреть макет шаблона, чтобы увидеть, какие части доступны для редактирования без участия разработчика.
Например, в шаблоне со скриншотом выше вы можете увидеть 4 раздела на веб-сайте:
- Панель заголовка (зеленая верхняя часть)
- Гибкая колонна (загар)
- Контейнер для ссылок компании в социальных сетях (серый)
- Нижний колонтитул (зеленое дно)
Вот пример части страницы, созданной с использованием этого шаблона:
Как вы, вероятно, уже поняли, сравнив два изображения, это неподходящий шаблон для подобной страницы. Что не так? Вся сложность заключена в секции № 2, гибкой колонке.
Как только вы откроете эту страницу в редакторе страниц, вы увидите, что все содержимое находится в одном текстовом поле, как показано ниже:
Из-за этого редактировать этот контент сложно. На изображении экрана выше вы можете видеть, что каждое изображение и текстовая подпись помещены в маркированный список. Это трудно редактировать, потому что существует относительно сложный HTML и CSS, написанный непосредственно в редакторе расширенного текста, чтобы поддерживать точное расположение изображения и текста.
Не дай Бог, вам понадобится удалить значок, или если вы добавите его или удалите случайно. Чтобы что-либо изменить или исправить, вам нужно будет проверить и изменить код.
Хотите знать, как должен выглядеть шаблон для страницы, подобной приведенной выше? Приведенный ниже шаблон показывает, как выглядит лучшая дисциплина в менеджере по дизайну. В нем есть множество пользовательских модулей, которые отражают макет всей страницы, поэтому вы можете редактировать страницу, даже не глядя на код.
3. Разрешить Пользователям редактировать только Текст И Изображения
Третья наиболее распространенная проблема, с которой сталкиваются решения Brand Builder, почти полностью противоположна описанной выше проблеме.
В процессе создания шаблона некоторые разработчики создают идеальный макет для определенного модуля и разделяют его на ряд текстовых и форматированных текстовых полей. Для страниц со сложным дизайном это хороший способ упростить пользователям внесение изменений.
Но, если это сделано не очень хорошо, это ограничивает пользователя от редактирования других вещей, таких как элементы дизайна, например, цвета, модуля.
Чтобы определить, будет ли это проблемой, откройте редактор и проверьте редактируемые поля в данном модуле. Если шаблон содержит пользовательские модули, вы сможете редактировать каждый из них по отдельности. Они могут выглядеть так:
Вот как выглядит сам сайт:
Это один столбец со страницы с ценами в три столбца. Как вы можете видеть на скриншотах, вы можете редактировать слова ТОЛЬКО в этих разделах:
- Название колонки
- Список функций
- Вспомогательная копия
- Цена
С помощью этого шаблона вы НЕ МОЖЕТЕ изменить макет или цвета, добавить новые текстовые разделы или выделить идеальный ценовой план — без редактирования таблицы стилей, которую нелегко найти.
Представьте, что вы изменили руководство по стилю вашего бренда на немного другой оттенок того же цвета, и вы хотели, чтобы ваша страница с ценами соответствовала новому стилю. Вам нужно будет покопаться в CSS и узнать, как обновить цветовую схему для всего шаблона.
Правильный шаблон позволит вам изменить эти вещи с помощью редактора страниц, как показано на скриншоте ниже:
4. Использование Одного Пользовательского Модуля, Когда Он Должен Использовать Несколько
В приведенном выше примере, где HTML и CSS, необходимые для страницы ценообразования, относительно сложны, имеет смысл использовать модули с жестко закодированными полями. Используя этот подход, есть несколько шаблонов, которые отлично справляются с разделением различного контента на отдельные редактируемые поля. Это делает его более удобным для обслуживания и гарантирует, что веб-сайт не потеряет свое форматирование при изменении одного элемента.
Но для большинства страниц лучше использовать настраиваемые модули, чтобы легче было вносить изменения в макет.
Ниже приведен пример того, что происходит с чрезмерно спроектированным модулем. Вот как выглядит эта страница.
К сожалению, весь этот раздел был построен с помощью одного пользовательского модуля. На изображении экрана ниже представлена 1/4 часть того, как выглядит модуль. В частности, вот часть модуля, которая управляет зеленым полем слева.
С помощью этого шаблона вы будете заблокированы в 4 полях содержимого для этого раздела веб-сайта. Если вы хотите превратить это в 3 поля содержимого или 5 полей содержимого, вам нужно покопаться в коде. Конечно, это стандартный формат, и вы, вероятно, могли бы заставить его работать, но если вам нужно было убить или добавить коробку, вам нужно было бы связаться с разработчиком.
С другой стороны, если бы шаблон использовал один модуль для каждого раздела, вы могли бы добавить или вычесть столбец в диспетчере проектирования.
5. Использование Пользовательских Модулей, Когда Они Должны Использовать Модули Форматированного Текста
Разработчик, создавший вышеприведенный шаблон, на самом деле допустил две ошибки. Нет необходимости – и также ограничительно – иметь так много однострочных текстовых полей.
Правильный способ закодировать один из этих ящиков-использовать форматированное текстовое поле, как показано ниже, что позволит вам настроить заголовки, основной текст и кнопки в соответствии с любым расположением.
Как убедиться, что Вы получаете высококачественный шаблон веб-сайта
Это было сразу много технических деталей, я признаю это.
И, по общему признанию, нет единственно правильного способа разработки шаблонов и модулей на CMS HubSpot.
Однако, если вы видели что-либо из перечисленных 4 лучших вещей, у вас, вероятно, возникли проблемы с тем, где вы получаете свои шаблоны и кто их создавал. Эту проблему нелегко решить. Шаблоны - это основа страниц вашего сайта. Если шаблоны не сработают, вы окажетесь в углу…
Чтобы избежать таких колдобин, как зависимость от разработчиков в том, что вы должны уметь делать сами, попробуйте сделать это для предстоящих проектов.
Во-первых, обнаружьте эти риски на ранней стадии пр��цесса покупки, попросив разработчика шаблона показать вам примеры работы, ко��орую они выполнили в видеочате. Обратите внимание на 4 распространенных ошибки, перечисленные выше.
Во-вторых (и если вы не хотите ни с кем связываться) загрузите некоторые бесплатные шаблоны разработчика на свой портал HubSpot и проверьте их, чтобы убедиться, что они обеспечивают вам необходимый уровень гибкости. Многие разработчики шаблонов публикуют бесплатные Шаблоны HubSpot на рынке.
Изучив работу вашего разработчика, прежде чем нанимать его или покупать его шаблон, вы можете быть уверены, что сможете воспользоваться возможностями редакти��ования веб-сайта, предоставляемыми CMS HubSpot.
Джером добавил, “Это не " приятно для имущие". Покупатели приняли неприемлемый стандарт, не понимая этих вопросов. Даже если вы не программист, вам решать, чего ожидать, установить стандарт и найти продукты и экспертов, которые могут предоставить вам то, что вам нужно”.
