Конструктор страниц для modx

Обновлено: 30.04.2024

ContentBlocks is a powerful content manager for MODX allowing editors to create modular, multi-column content.

Version: 1.12.1-pl

MODX Compatibility

Downloads: 15916

Rated: 4.5/5

Price: € 79 per site

By modmore

Smaller Blocks for More Control

The Modular Content principle means that you break up your content into smaller pieces of content, that can be used or parsed separately. So instead of a single blob of content, you may set a headline, an image and a text description.

Each of those small blocks of content have their own template so you can do amazing things with their values. Maybe you want to automatically resize an image or add a filter, or add a clickable anchor to each heading. The sky is the limit!

Multiple Columns of Content

If you'd like, ContentBlocks lets you define layouts that are made up from multiple columns. Each column can contain blocks of content, and you decide how it gets rendered into HTML. This works great with CSS grids like Foundation, Bootstrap or Skeleton, but you're free to use it with your own CSS as well.

With powerful drag & drop sorting, you can easily move any field from one column to another, or even to a completely different layout.

Template away the Complexity

Most editors aren't as tech-savvy as the people designing the site. This can add complexity to content editing where the editor needs to memorise specific steps in the rich text editor to get a certain result. By templateing small blocks of content, even complex markup requirements are easily implemented.

Developers love it too!

Our clients tell us it's hard to go back to how sites were built before after working with ContentBlocks. Powerful templating, easy to configure and customise, and XML import & export features to enable reusing your favourite blocks on new projects make it a developers dream. And of course our support team has your back when you need a nudge in the right direction.

Our Clients love ContentBlocks for its flexibility, ease of use and the ability to integrate with their existing processes and tools

James Burgoon

Ohio State University

Using ContentBlocks has changed the way I approach site building and made it much easier to train non-technical end-users on how to maintain their site—all while giving them more creative freedom over how content is displayed. It's a shame this isn't part of core Modx, but the unlimited license is worth it in for the amount of time that can be saved throughout site building and training.

The 1.0 release was great, I can't wait to see what's coming down the road from Mark and the modmore team! And while the product itself is top-notch, their quick and attentive customer service and support adds even more value to the purchase.

Shawn Himmelberger

Looking back on the history of MODX we'll have Evo then Revo before Content Blocks and Revo after Content Blocks. Every project we do will use it. A deal at twice the price.

Jörg Lippmann

ContentBlocks offers the user handy building blocks to create complex content areas with just some clicks. It's easy to setup or configure by the designer and even easier to use by the client/editor. It works perfectly and intuitively with modern - responsive - grid systems and makes sure that you end up with clean HTML-code.

ContentBlocks turns the content field into a powerful canvas. With a complete set of flexible content types you can build immersive landing pages and complex designs, without the editor touching any code.

Text, Rich Text, Headings and Quotes

For the simple - yet perhaps most important - types of content, we've got a suite of text-based inputs for you. Varying from a single line of text, all the way to a rich text block. And for special, common types of text like headings and quotes, we pre-built some inputs for you too.

Easy Image Upload & Browse

For all your images, from a single image through a full-featured inline gallery and file attachments, our media input types make it easy to upload or browse previously uploaded media.

With the separately distributed oEmbed input type, you can embed various types of content from dozens of different sources, just by pasting in the link.

Linking the way

With the Link input type - also available as field and layout setting - you can link to local resources, public urls or email addresses all from the same field. By simply typing in the title of a resource, a dropdown will appear with the option, and it will add the full link tag automatically. Perfect for read more buttons and other call to actions.

In this example, a local resource (Gallery) was selected, so it shows the page title to the user, while the actual link uses the ID.

Organised Lists

Very much optimised for keyboard usage, the list and ordered list input types allow you to easily generate lists. They support multiple levels for your really complex lists, and have an embedded (optional) tiny rich text editor to add bold, italic and underline formatting, as well as links.

Add Snippets or Chunks without tags

With the Snippet, Chunk Selector and Chunk input types, your editor will be able of adding those elements into the page, optionally with element-specific properties, without needing to understand the MODX tag syntax.

To them, they just choose a type of content. In this example, the Chunk is fixed and the preview uses a screenshot of what it might look like to the visitor.

Fancy Videos

With the Video input type, the user can paste in a link to YouTube and see the proper embed appear instantly. But there's also a search - simply enter the search term, and they're provided with a list of matching videos. Great for cats and dogs!

Settings for Advanced Features

With the Field and Layout settings in ContentBlocks, you can add advanced features for advanced editors. These can be shown directly on the canvas to ensure the user fills it, or made available from the Settings button here. Common use cases taking advantage of settings involve setting classes or backgrounds.

Add Layouts

Need to add another layout somewhere in the middle? The Add Layout button (new in 1.3) gives you that ability. There's also a big button bar at the bottom.

Rename Layouts on the fly

When adding layouts, you might give them a descriptive name like "main and sidebar", or "full width". But once added to the canvas, that doesn't quite cut it anymore - so you can change them to something that describes the content accurately by just clicking on the name.

Rich Text Editors

We recommend using Redactor with ContentBlocks, however other Rich Text Editors like TinyMCE (the classic and "RTE" release) and CKEditor are also supported.

Приветствую, друзья!
Наткнулся на видео «Конструктор сложных страниц на Evolution CMS».
Подскажите, есть ли что-то подобное для MODX Revo? В идеале с возможностью добавлять собственные блоки со своей версткой. Чтобы можно было действительно конструировать сложные страницы с нужными блоками (галереи, слайдеры, блоки преимуществ, блоки с выборками ресурсов через pdoTools и пр.), которые можно было бы встраивать в произвольном порядке?
Если таких решений нет, поделитесь своим опытом, кто как конструирует подобные сложные страницы? Создавать миллион чанков для привязки только к одной странице вроде бы не целесообразно. Хочется более изящного решения.

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

Да, чем-то похоже ) Но цена в 79 евро за сайт останавливает от его использования… А для Evolution CMS это расширение Page Builder является бесплатным. Почувствуйте разницу ))) Я был бы за покупку подобного расширения для сайта, но за вменяемые деньги ))

Есть бесплатный почти аналог — Structures. Насколько это решение рабочее в данный момент не знаю, раньше работало =)

Есть новый компонент — Fred.

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

Ну и как то всегда интересно читать про сложные проекты, для которых нельзя выделить аж целых 6000 рублей, без обид =))

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

Ну и как то всегда интересно читать про сложные проекты, для которых нельзя выделить аж целых 6000 рублей, без обид =))

Сложные проекты и сложные страницы разница большая. Часто вёрстка подразумевает несколько типов страниц в которых используются различные текстовые блоки по-разному оформленные. Нужно иметь возможность менять порядок следования блоков и забивать туда информацию. Сайт при этом самый обычный, просто наполнить такую страницу в редакторе менеджеру не по силам. Отваливать 6 тыс. за эту возможность как-то накладно… Особенно если знаешь, что в Wordpress, Evolution, October и других движках Builder'ы бесплатные. Если себестоимость сайта на MODX без учёта работы будет по цене как лицензия на Битрикс, то потребуется долго объяснять потенциальному заказчику чем MODX лучше любой другой системы где много всяких тем, дополнений и всего всего и ещё и бесплатно. Такого заказчика нужно будет ещё и найти. По моему ИМХО цена за дополнение сильно завышена. Да и само дополнение перегружено функционалом, который в большинстве случаев и не нужен вовсе. Получается, покупаешь дорогой комбайн ради того, чтобы пару грядок обработать.

Лично я под каждый блок завожу категорию TV полей и там размещаю TV-поля и таблицы MIGX, а потом всё это собираю в одной таблице MIGX:

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

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

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

У меня slider_firstblock получился следующий. Вкладки формы:

Теперь, мы можем приступить к нашим блокам. Для начала создадим категорию “Блоки” и запомним ее идентификатор. У меня он получился – 41.

И перейдем к самому интересному, реализации конструктора страниц. Первым создадим TV-параметр block_types с типом ввода “Список с одиночным выбором”, а в поле “Возможные значения” укажем:

Где 41 – идентификатор нашей категории “Блоки”. Параметры вывода должны стоять “По умолчанию” и шаблоны отмечать не нужно.

Конечно, нужно понимать, что в каждом нашем блоке есть подблоки, поэтому создадим TV-параметр blockitems с типом ввода MIGX. Вкладки формы:

Обратите внимание на поле “descriptions”, оно названо так не случайно. Слово “description” зарезервировано.

Следующий наш шаг будет создание основного рабочего TV-параметра blocks c типом ввода “MIGX”. Вкладки формы:

Обязательно отметьте здесь соответствующие рабочие шаблоны. Если вы посмотрите на данное TV-поле на странице ресурса, то увидите, что по сути у нас получился MIGX в MIGX’се. При заполнении, главное, не запутаться в таблицах.

Следующим шагом создадим два снипета, которые помогут нам при выводе наших блоков. Непосредственно сниппет по работе с MIGX get_sections.php (я работаю с файлами, вы можете создать в панели управления):

Снипет thumb_youtube.php, который будет брать миниатюры к видео с Youtube:

Класс! Теперь создадим чанки блоков (они обязательно должны быть в панели управления MODX). Конечно, у вас это могут быть другие чанки. Я же приведу примеры своих, основанных на Bootstrap 4. У всех чанков должна быть категория “Блоки”, которую мы с вами создавали в начале, и обязательно должно быть заполнено поле “описание”.

Простой чанк (имя: simpleBlockTpl, описание: Простой блок на всю ширину):

Видеогалерея (имя: videoBlockTpl, описание: Блок видеогалереи):

Блок с кругляшами (имя: roundedBlockTpl, описание: Блок с кругляшами):

Блок в две колонки (имя: simpleHalfBlockTpl, описание: Блок в две колонки):

Блок отзывов (имя: reviewBlockTpl, описание: Блок отзывов):

Блок формы (имя: formBlockTpl, описание: Форма на черном фоне):

Блок аккордеон (имя: faqBlockTpl, описание: Блок аккордеон):

Нам осталось вызвать все это дело корректно в шаблоне текстовой страницы:

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

Дорогие друзья, сегодня мы с вами сделаем лендинг на MODx Revo на основе HTML-шаблона из нашего магазина. Я думаю, что вы уже знаете, как устанавливать MODx Revo на сервер, поэтому я не буду на этом останавливаться. Если же все-таки среди вас есть тот, кто этого делать пока не умеет, то вот вам ссылка на статью “Как устанавливать MODx Revo”.

Если вы уже развернули MODx на сервере, то вам необходимо поставить следующие компоненты в разделе “Приложения -> Установщик”:

Ace – редактор кода (официальный репозиторий)
AjaxForm – компонент для отправки форм по технологии AJAX (репозиторий Modstore.pro)
Filetranslit – для транслитерации наименовании файлов при загрузке (официальный репозиторий)
FormIt – компонент для отправки форм (официальный репозиторий)
frontendManager – для удобного администрирования сайта (репозиторий Modstore.pro)
MIGX – для создания мульти TV-параметров (официальный репозиторий)
pdoTools – пакет сниппетов для выборки ресурсов и пользователей (официальный репозиторий)
TinyMCE – визуальный редактор (официальный репозиторий)
sdStore – для добавления нового репозитория Modstore.pro (официальный репозиторий)
Sendex – компонент для организации рассылок (репозиторий Modstore.pro)
translit – для транлитерации URL (официальный репозиторий)

Установили? Если возникли вопросы, то вы сможете почитать статью “Первоначальная настройка MODx” и заодно вы сможете произвести базовую настройку нашей CMS.

Теперь непосредственно перейдем к самому основному. Если внимательно посмотреть шаблон, то мы увидим, что в папке “assets” лежат все необходимые файлы для отображения шаблона в браузере. Поэтому нам необходимо взять и загрузить все эти файлы в папку “assets” на нашем сервере. Выглядеть должно примерно так:

Сейчас нам с вами необходимо разбить наш HTML-шаблон на части. Если мы внимательно посмотрим, то у нас четко проявляются следующие элементы:

часть кода между
хедер нашего сайта: лого и меню
футер нашего сайта
часть кода со скриптами

Все эти части нам нужно выделить в отдельные чанки, которые мы назовем meta, header, footer и scripts соответственно. Перед тем как создавать данные чанки, я вам советую создать категорию “Элементы страниц” и при создании чанков указывать данную категорию, чтобы в дальнейшем в панели администратора был полный порядок. Вот, например, как у меня выглядит чанк “meta”

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

Следющий чанк у нас будет называться “header”, это часть шаблона с логотипом и меню:

В чанк футер я еще включил блок с контактами. И, наконец, у нас остался чанк “scripts”:

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

Я не буду здесь приводить полный код шаблона, который у меня получился, так как он занимает достаточно много места. В шаблоне я заменил те части кода, которые мы вынесли в чанки, на конструкцию вида [[$meta]], где meta – это наименование чанка.

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

Почти год назад, в ноябре 2010, у меня появилось желание сделать обучающее видео по созданию сайта на MODx Evolution. Не прошло и полугода, как прошел год и я с удовольствием могу показать вам свое творение. Так как длинное видео это не формат Хабра, я сделал короткий тизер под названием «Сайт на MODx за 5 минут», а под катом полное видео.

Специально для тех, кто заинтересовался или не успевает так быстро усваивать информацию — под катом полное видео (30 минут) о том, как установить и настроить MODx, подготовить шаблон к интеграции в MODx, интегрировать и получить готовый сайт. И все это я подробно объясняю.

Вот полное видео, а ниже рассказ о том, как я его делал.

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

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

В итоге я выбрал CamStudio 2 для записи видео, у них же на сайте скачал какой-то кодек, который давал приемлемые по размеру файлы на выходе. Звук я записал уже весной 2011 в студии у знакомого, но оказалось, что микрофон тихий и надо было сидеть ближе к нему, однако другой возможности записаться мне не подвернулось и пришлось разбираться в первом попавшемся редакторе звука, им оказался Adobe Soundbooth. Честно пробовал использовать Audacity, но он несколько раз упал вместе со всеми изменениями и я забросил эту идею.

Значительная часть времени ушла на чистку ахов, вздохов и шумов в аудио. Но потом встал вопрос куда более интересный — а чем же все это объединять, ведь у меня звука было минут на 15, а видео на 40.

Разобраться с Adobe Premiere у меня не вышло просто по тому, что все мои попытки создать проект и добавить туда видео были тщетны. Раз за разом шайтан машина отказывалась показывать мне мое видео и тогда я вернулся к тому, с чего начал — Camtasia Studio. Именно из-за того, что запись видео в ней глючила у меня на машине, а переустанавливать из-за этого винду не было ни малейшего желания я и начал писать видео в CamStudio.

Процесс шел медленно, на меня постоянно наваливалась работа вперемешку с ленью и 2 месяца назад было готово минут 7 готового видео. Однако волевое усилие помогло и в этом случае, я начал каждую субботу уделять по 2-3 часа на это благое дело и работа пошла.

Вы не представляете, как я волнуюсь, выкладывая это видео на всеобщее обозрение, т.к. очень не легко оно мне далось =)

Тем кто дочитал до сюда полагается бонус — подборка полезных ссылок из видео, а также исходники.
Запасная страница, а то мало ли =)

PS: Ютуб сказал, что не покажет жителям Германии короткий ролик, вот он на Vimeo. А большой ролик вообще отказался размещать из-за его размера.

PS2: Предлагаю всем желающим сделать подобное видео про свою CMS. Я имею ввиду короткий ролик.

Читайте также: