ButterCMS Introduces Dynamic Landing Pages with Components
ButterCMS has been a favorite of developers for years, garnering some of the best reviews of any headless CMS on the market. Now, with the addition of its new Components feature, Butter is poised to gain some serious ground with marketing teams as well.
Components give marketers the ability to build dynamic landing pages. This means marketers can try new ideas, run new tests, and publish entirely unique pages - all with minimal support from their engineering teams.
The addition of components opens up a new world of possibilities for marketers while simplifying the development process for sites and apps built on many popular tech stacks.
A new way of doing things
As ButterCMS Founder Jake Lumetta points out, the addition of components adds new layers of flexibility and control that traditional CMS doesn’t offer.
“Many marketers have to schedule a developer each time they want to make a change to a page. Even marketers who already have a good CMS are often limited to controlling content within a static layout,” says Lumetta. “Components give marketers the ability to add, remove, and reorder the elements of a page. This is a level of control some marketers have never had before.”
Today’s results-oriented marketing teams need the ability to continually test content and page variations. Components enable this, and they allow the marketing team to implement many changes on their own, without a developer.
Engineering configures a standard set of components upfront and creates the code to render those components as desired. Marketing can then choose which components to include in a page, and also gets complete control over the content.
How components work
While this change represents a major turning point in the workflow for developers and content marketers, it is a relatively small change to the ButterCMS user interface. Two new field types enable the component-based approach.
The first new field type is components. A component is essentially a repeatable grouping of fields. One component might include all of the copy and images for the page’s hero section, while another might include all of the links for the footer.
Components enable marketing teams to create standardized page elements, control their content, and easily reorder them within a page.
The second new field type is the component picker. The component picker provides a library of components that marketing can use to build whole pages. Components can be repeated and reordered within a page, providing the flexibility to use any combination and any number of components.
The result is that engineering builds one template, while marketing gets access to many dynamic landing pages.
Building a page with ButterCMS components
Building a page with components is simple and intuitive. To illustrate, let’s look at the process you would follow to create this landing page:
This is a fairly standard landing page, but it has many different elements, each with its own layout requirements. If we break this page down into components, a few of them might look like this:
This component contains the content fields for the hero section.
This component contains content fields for a call-out section with an image.
This component contains content fields for a call-out section without an image.
This component contains content fields for a use case section.
When your components have been configured, the component picker allows you to choose which of them you want to include in the layout of your current page. You can choose as many custom components as you need, and you can repeat them within a page. Just click on the plus “+” sign to see all available components that your team has customized for you.
You can reorder entire sections of the page simply by clicking and dragging.
Setting up a page like this is a simple, straightforward process for both engineering and marketing.
After a component has been configured, it can be reused any number of times. ButterCMS maintains a library of your configured components, and you can use them every time you create a new page, even across different page types.
Working with component repeaters
Component repeaters bring even more flexibility to a page by allowing users to repeat groups of fields for related items. It’s a great way to handle image galleries, feature grids, content sliders, and much more.
Looking at the e-commerce site below, you can see that there are multiple product slides that rotate within the hero section.
To model this in Butter, you would create a page with a hero component, add a repeater to the component, and finally, add fields to the repeater.
After your page configuration has been saved, you will see the Product Hero component and the Product Slides repeater in the content UI.
At this point, you can begin building your page by clicking the button to add a new Product Slide, and completing the fields that were specified above in the page configuration.
For additional details, check out this quick tutorial about configuring pages in ButterCMS: https://buttercms.com/kb/create-dynamic-landing-pages-using-components.
More new features have arrived
The team at ButterCMS recently released several exciting new features. These are a few of the changes that Butter fans are loving:
- New dashboard and updated UI
- Advanced image editing
- Drag and drop images
- Advanced content search
- Scheduled content releases
ButterCMS already supports many popular tech stacks such as React, Angular, Vue, and more. They have recently added support for React Native, Gridsome, Java, Nuxt JS, and Ionic to help more enterprises add headless CMS capability to their modern, cross-platform apps. If your company uses any of those frameworks, be sure to check out Butter’s updated official guides.
Visit buttercms.com to learn more about Butter’s enterprise CMS solutions. You can set up a trial account today for free.
About ButterCMS
ButterCMS is an API-first content management system that integrates with websites and apps to deliver content headlessly, connecting with a wide range of frontend frameworks including React, Angular, Vue and more.