HubSpot - одна из самых мощных маркетинговых платформ, доступных на данный момент, и я всегда рад признать, что это также моя любимая CMS (система управления контентом).
CMS - это лишь часть множества доступных функций и дополнений HubSpot, но, возможно, одна из самых важных.
Это потому, что он действует как катализатор для других функций HubSpot, предоставляя вам интерфейс, необходимый для легкого управления вашим веб-сайтом. Если вы читаете это, надеюсь, вы уже знаете, насколько важен ваш веб-сайт для индивидуальности вашего бренда.
Ваш веб-сайт похож на цифрового продавца, который работает 24 часа в сутки, 7 дней в неделю, заботясь о ваших потенциальных клиентах и клиентах, и может обеспечить неограниченную рентабельность инвестиций.
Однако это означает, что ни один веб-сайт никогда не будет завершен, потому что всегда будет возможность для улучшения, будь то в форме маркетинговой кампании, поисковой оптимизации или обновления контента.
Поэтому одинаково важно, чтобы ваш веб-сайт выглядел и работал хорошо, а также то, что его можно было легко обновлять без необходимости участия разработчика.
Эта концепция не характерна для HubSpot, но именно поэтому HubSpot мне больше всего нравится.
Простота редактирования - приоритет
Как веб-разработчик, у меня в первую очередь есть две обязанности: создать сайт, который будет хорошо работать для посетителей, и создать сайт, который мои клиенты смогут легко обновлять.
Оба этих требования определяются тем, как я создаю шаблон.
Что такое шаблон?
CMS HubSpot состоит из множества частей, но в основном она включает в себя страницы веб-сайтов, целевые страницы, блоги, электронные письма и любые связанные инструменты, связанные с этими функциями, такие как менеджер дизайна.
Каждый из этих типов контента использует среду, называемую шаблоном, для определения разметки HTML («дизайн») и модулей, доступных при его редактировании («входные данные» или «модули»).
Почти каждая CMS использует шаблоны для определения структуры страниц таким образом, поскольку большинство веб-сайтов часто имеют по крайней мере несколько групп страниц, которые имеют схожий дизайн или макет, но имеют свой собственный уникальный текстовый контент и изображения.
Настроив эти макеты в качестве шаблонов, один и тот же дизайн можно использовать неограниченное количество раз без необходимости создавать макет с нуля.
Ни один макет не подойдет для каждой страницы, поэтому важно учитывать, как вы планируете использовать шаблон и как может выглядеть контент на страницах, использующих его.
По этой причине вам следует начинать все проекты шаблонов с каркаса, прежде чем приступать к их созданию в HubSpot.
Сначала придумайте план
Возможно, вам знаком термин «каркас», который представляет собой упрощенный визуальный пример того, что кто-то задумал для окончательного шаблона.
Каркас позволяет дизайнеру и создателю контента определить общий макет шаблона и согласовать, какие типы контента и элементов можно использовать, прежде чем дорабатывать все более мелкие детали.
Например, текст-заполнитель или визуальная подсказка могут использоваться для отображения части шаблона, предназначенной только для одного или двух предложений, а добавление большего количества текста может вызвать проблемы с дизайном.
Хороший разработчик понимает, что иногда финальный контент немного отличается от того, что изначально ожидалось.
Наша задача - сделать все возможное, чтобы настроить каждый шаблон таким образом, чтобы дать редактору дополнительный контроль над настройкой макета по мере необходимости, не перегружая его опциями и не позволяя ему случайно испортить дизайн.
Разработчики должны предоставить редакторам контента любые элементы управления, которые могут оказаться полезными при создании страницы, или любые элементы управления, которые, по словам редактора, им понадобятся, чтобы сделать шаблон максимально полезным. Здесь HubSpot становится моей любимой CMS.
Визуальный конструктор и кодированные шаблоны
Внимание: это может оказаться техническим.
HubSpot предлагает два разных способа создания шаблона: Visual Builder и Coded.
Оба этих типа шаблонов имеют много общего и без проблем работают с большинством других функций платформы HubSpot, таких как формы и призывы к действию, но между ними есть несколько ключевых различий, о которых стоит знать.
Визуальный конструктор
Тип шаблона HubSpot по умолчанию - Visual Builder, и это единственный тип, который HubSpot разрешает использовать на рынке шаблонов (единственным исключением являются шаблоны электронной почты, в которых также разрешены закодированные шаблоны).
Эти шаблоны используютдружественный интерфейс перетаскивания который позволяет создателям шаблонов легко переставлять модули и настраивать важные настройки без необходимости разбираться в большом количестве кода (но это поможет, если вы делаю).
Шаблоны Visual Builder HubSpot используютструктуру сетки из 12 столбцовна основе Bootstrap 2.
Вся базовая разметка HTML и CSS для сетки обрабатывается автоматически в зависимости от расположения столбцов в вашем шаблоне.
Этоидеально подходит для пользователей, которым удобно создавать базовые шаблоны таким способом, но у которых нет технических знаний для написания кода самостоятельно, но в итоге получаетсяпроблемно для разработчиков, которым нужен более сложный контроль над структурой кода.
Например, структура сетки HubSpot также имеет встроенную адаптивность, но ее нельзя легко переопределить, что означает, что каждый столбец в вашем шаблоне станет полной ширины, если размер экрана устройства составляет 767 пикселей в ширину или меньше. - независимо от того, подходит ли это для вашего дизайна шаблона.
Еще один примечательный аспект сетки HubSpot заключается в том, что разметка HTML может оказаться несколько раздутой из-за всех дополнительных классов CSS, в которые HubSpot оборачивает каждую строку, столбец и модуль.
Это часто не вызывает заметных проблем с производительностью сайта, но определенно не поможет вам улучшить его, и вы не сможете его изменить, даже если захотите.
HubSpot позволяет добавлять собственные классы CSS и идентификаторы в некоторые части разметки шаблона, но это предназначено для специального пользовательского форматирования, где это необходимо, а не для переопределения сетки.
Если вас интересует, как выглядит CSS сетки и поддерживающая HTML-разметка, вы можете узнать больше об этом здесь.
Эти ограничения могут затруднить разработчикам создание конкретных проектов и сложных шаблонов, включая шаблоны с большой гибкостью.
Независимо от того, являетесь ли вы экспертом или нет, с Visual Builder может быть сложно работать, если вы пытаетесь сделать что-то большее, чем просто базовый дизайн, и обычно он лучше подходит для простых веб-сайтов.
Однако, если вы не знакомы с созданием шаблонов на HubSpot и хотите поэкспериментировать с CMS, тогда шаблоны Visual Builder - идеальный способ начать.
Закодированные шаблоны
Другие типы шаблонов HubSpot называются кодированными шаблонами и представляют собой HTML-файлы, полностью написанные с помощью кода.
В отличие от шаблонов Visual Builder, это означает, что у вас есть доступ к полной HTML-разметке вашей страницы, включая элементы, и.
Шаблон этого типапредназначен для опытных разработчиковсвободно владеющих HTML и CSS.
Хотя HubSpot выдаст вам предупреждение или сообщение об ошибке, если обнаружит синтаксическую проблему в некоторых частях вашего кода, это не помешает вам написать неверный или неправильно отформатированный HTML. Итак, вам нужно знать что ты делаешь.
Помимо HTML и CSS,Закодированные шаблоны также используют возможности HubL, уникального языка разметки, используемого в CMS HubSpot и основанного на существующем языке шаблонов, используемом для Программирование на Python под названием Jinja 2.
Один из главных недостатков HubSpot заключается в том, что онне дает разработчикам возможности использовать PHP или другие серверные языки сценариев, которые необходимы для сложных операций. Вместо этого они предоставляют нам возможность использовать HubL, который дает нам доступ к различным переменным, фильтрам и функциям.
HubL - это то, что делает HubSpot прекрасным способом создания шаблонов.
Хотя разработчики не имеют такой гибкости в использовании своих пользовательских функций, как в CMS на основе PHP, такой как WordPress, HubL можно использовать для добавления большинства элементов управления и условных аргументов, необходимых для создания HubSpot. шаблон бесконечно полезен.
Это позволяет разработчикам создавать гибкие шаблоны, корректируя макет или дизайн при необходимости.
HubL также можно использовать в шаблонах Visual Builder, но из-за ограничений интерфейса Visual Builder HubL нельзя использовать так же творчески, как в кодированных шаблонах.
Вы можете узнать больше о HubL здесь.
Закодированные шаблоны отлично подходят разработчикам по другой причине: оптимизация процессов.
HubSpot - постоянно развивающаяся платформа. Компания часто выпускает новые обновления и улучшения, но все еще отсутствуют некоторые базовые функции, которые разработчики хотели бы иметь.
Самый важный элемент в этом списке желаний - это предварительная обработка, такая как SCSS.
Предварительная обработка - это концепция написания сокращенного кода, который компилируется приложением для создания полного кода.
Например, SCSS - это часто используемый синтаксис, который делает написание CSS более эффективным.
Подобно SCSS, существует множество других способов использования языков предварительной обработки, но все они требуют компилятора.
Закодированные шаблоны в HubSpot позволяют разработчикам использовать эту эффективность, создавая свои шаблоны за пределами HubSpot, а затем загружая скомпилированные версии через FTP или API.
Это означает, чторазработчики могут использовать индивидуальный процесс разработки, который лучше всего подходит для них, не будучи ограниченным отсутствием предварительной обработки в HubSpot.
Однако у этого есть большой недостаток.
При таком рабочем процессе вся разработка шаблонов осуществляется за пределами HubSpot и
в результатешаблоны невозможно редактировать в HubSpotпоскольку процесс компиляции кода является односторонним действием.
Это означает, что скомпилированный код невозможно декомпилировать в исходную форму.
Если пользователь внес изменения в шаблон непосредственно в системе HubSpot, то шаблон теперь не будет синхронизирован с предварительно скомпилированной версией и будет перезаписан при следующем обновлении разработчиком через свою пользовательскую версию. настройка.
Подобные пользовательские рабочие процессы необходимо тщательно планировать и реализовывать, особенно если разработкой занимается другая сторона, например партнерское агентство HubSpot.
Хотя этот метод позволяет разработчикам работать максимально эффективно, он может вызвать путаницу у владельцев шаблонов, поскольку они не смогут редактировать свои шаблоны, не рискуя потерять свои изменения в будущем.
Это требует, чтобы все стороны, участвующие в создании и использовании шаблонов, были согласованы и понимали, кто будет нести ответственность за редактирование шаблонов.
Когда использовать шаблоны Visual Builder вместо кодированных шаблонов
В CMS HubSpot можно использовать как шаблоны Visual Builder, так и кодированные шаблоны, но обычно существует лучший вариант в зависимости от способа создания сайта и уровня сложности.
Visual Builder лучше подходит для простых проектов
Как правило, шаблоны Visual Builder являются лучшим вариантом для базовых страниц, которые не требуют большого количества сложных функций или опций.
Часто это лучший вариант для людей с небольшим опытом веб-разработки или вообще без него, для тех, у кого нет постоянного доступа к разработчику, или для тех, кто планирует приобретать шаблоны на Template Marketplace.
Шаблоны с кодом лучше подходят для разработчиков
Закодированные шаблоны лучше всего подходят для команд или агентств, у которых есть доступ к штатному разработчику или команде разработчиков, которые будут заниматься созданием всех шаблонов. Это позволяет разработчикам проявлять творческий подход к созданию шаблонов и экспериментировать с автономными инструментами предварительной обработки или собственными настройками.
При наличии необходимых знаний и неограниченном количестве времени разработчик может заставить работать практически все, как с помощью шаблона Visual Builder, так и с кодированным шаблоном, но лучше всего спланировать и обсудить все ожидания от вашего веб-сайта до начало сборки любых шаблонов.
Независимо от вашего выбора, рассмотрите возможность использования пользовательских модулей
Хотя и кодированные шаблоны, и шаблоны Visual Builder имеют свои плюсы и минусы, продуктом любого из них должен быть веб-сайт, который дает редакторам контента интуитивно понятную гибкость, необходимую им для настройки и экспериментирования со своими страницами без необходимости изменять шаблон. сам.
В феврале 2018 года HubSpot выпустил новую версию Design Manager.
Это обновление значительно улучшило интерфейс и добавило множество новых опций для разработчиков шаблонов, но мы обнаружили, что это изменение было наиболее полезным для пользовательских модулей и редакторов страниц.
Пользовательские модули по сути представляют собой автономные блоки кода со своими собственными связанными модулями, которые можно использовать либо в кодированных шаблонах, либо в шаблонах визуального компоновщика.
Это позволяет разработчикам со знанием HTML, CSS и HubL проявлять творческий подход к созданию шаблонов и созданию веб-сайтов с возможностью редактирования. Обычно это то, что мы выбираем здесь, в IMPACT.
Лучшие шаблоны=счастливые маркетологи + счастливые пользователи
В целом, хороший веб-сайт – это тот, который одновременно хорошо работает для пользователя и бесконечно полезен для своего владельца. И Visual Builder, и кодированные шаблоны могут стать мощной основой для вашего веб-сайта, но в зависимости от структуры вашей команды и внутренних процессов вы можете в конечном итоге предпочесть один другому.
В IMPACT мы почти всегда рекомендуем веб-сайт, созданный на основе мощных шаблонов с множеством опций. В большинстве случаев мы обнаружили, что он почти полностью построен из пользовательских модулей благодаря новому менеджеру дизайна HubSpot, но есть много возможностей. Спасибо, HubSpot!
Если вам нужна помощь в начале работы, поговорите с нами о создании вашего веб-сайта на HubSpot.