What is Storyblok?
Storyblok is a so-called "Headless CMS". In short, this means that your content is separated from your website.
This provides enormous flexibility and opportunities for innovation. Your company can quickly adapt and reuse content across different platforms - web, mobile apps, IoT devices - without needing to change the content itself.
It's a technical structure that is future-proof and easy to integrate with new technologies. The company can be agile, rapidly adjust its digital presence to market changes, and personalize the customer experience more effectively.
In a world where digital presence is becoming increasingly diverse and personalized, Storyblok offers a robust and flexible solution that meets both current and future needs.
The main features of Storyblok
Headless Architecture
Storyblok differs from traditional CMS like WordPress with its headless architecture. Imagine your content as infinitely customizable, equally easy to use on websites, mobile apps, and IoT devices. It's the flexibility that today's rapidly changing business world demands.
Visual Editing in Real Time - See Changes Instantly
With Storyblok, you get a real-time visual editing experience where changes are visible immediately. This eliminates the guesswork often associated with traditional WYSIWYG editors and CMS, where it can be difficult to predict how content will actually look live.
The Media Library – Structure, Optimization and Editing
Storyblok's media library is a powerful platform for media content. Here, images and other files are automatically optimized for the web, resulting in faster loading times with maintained quality. With the built-in image editing tool, you can adjust and edit images directly in Storyblok, saving time and streamlining workflows.
The files in the media library can be structured and organized according to personal preferences. They are delivered via a global Content Delivery Network (CDN), ensuring fast and efficient accessibility worldwide. Unlike WordPress, which often requires external plugins for similar functionalities, all of this is built into Storyblok. It's an ideal solution for companies looking to manage and present their digital content smoothly and professionally.
Design Without Limits
Storyblok frees you from the constraints of predefined themes found in platforms like WordPress. You gain the freedom to create unique web experiences that fully reflect your brand's identity.
Scalability for the Future
Storyblok smoothly handles traffic spikes and large volumes of content. It's a platform that scales with your business.
Enhanced Security
Thanks to its headless architecture, Storyblok offers a higher level of security compared to WordPress, providing a safer digital presence and protecting your content from unauthorized access.
Version Control - Easily Restore and Customize
With Storyblok's version control, you can easily revert to previous versions of content, a flexibility often lacking in WordPress.
And much more...
Support for multiple languages, User roles, Data sources, Workflows, Extend the functionality of Storyblok with your own apps and plugins, Webhooks, etc.
What's included in Storyblok Boilerplate?
Storyblok
We assist you in getting started with Storyblok and provide a basic course on how to use the tool.
Website including web hosting
You receive a fast and responsive website ready to showcase the content you create within Storyblok.
A plethora of ready-made building blocks
To help you create your unique website experience, we offer a variety of ready-made building blocks within Storyblok. See a complete list here.
Four hours of development time
Use this time for whatever you need immediately or save it for future development.
Building blocks
FAQ Section
A block where you can select individual FAQs. Read more about "Frequently Asked Questions (FAQ)" under "Other functionality".
Hero
A block with a multitude of configuration options to display the content in a way that really stands out.
Logo Grid
A block to display different logos or collaborators.
Media Grid
Display several different media building blocks in a grid.
Picture Grid
Select images from the media library in StoryBlok and display them in a grid with a gallery function.
Separator
A simple divider for your content.
Store Grid
List your offices in a grid. You can choose to show individual offices or all of them.
Text
The block for writing longer amounts of text. Choose whether you want to display the text in one or two columns.
Timeline
Create a nice timeline of your company's history or present an upcoming field trip with milestones. Only the imagination sets the limits.
FiftyFifty
A block with a picture, film, etc. on one side. Text on the other. Perhaps the most popular form of presenting content on the web.
Forms
If you have HubSpot, you can integrate forms from there on your website. You can also create your own form directly in Storyblok.
Media
Show a picture, movie or why not a Tweet or a Spotify playlist.
News Section
View the latest news from your news archive, or select specific news related to your content.
Promo Grid
"Promo" is our abbreviation for "promotional". With this block you create any number of links to whatever you want. Choose from ready-made looks for your links. With image, icon, text, etc. Or use your free development time to create a completely new look.
Staff Grid
List your staff in a grid. You can choose to group the list by professional roles, related office, department, etc. Show your entire workforce or just selected people.
Table
Create a table like in Excel. The data is automatically transformed and presented in an accessible way on smaller screens.
Block Collection
Create a collection of blocks to quickly reuse them in multiple places on your website.
Smaller building blocks
Often, plain text isn't enough. You might want to spice up your text with an eye-catching info box or add a paragraph that expands when the visitor clicks on the heading. For this purpose, we have created smaller building blocks that can be used within text content.
Accordion
Content that is shown or hidden when you click on the header. Choose whether it should be open or closed initially.
Highlighted Content
Content that is extra eye-catching. Use this for an info box or similar.
Icon List
Create a bulleted list where each row can have its own unique icon.
Media Grid
Create a grid with multiple media components.
Buttons
Add one or more button links wherever you want in the body.
Hubspot Form
Add a form in the middle of your body text.
Media
Embed a Spotify playlist, a movie or an image from the media library, etc.
Picture grid
Create a picture grid where each picture can be opened in a modal overlay.
Other functionality
News
Create news items. Display them in the global news archive. Tag news items in various ways for organization and order. Select and display individual news items in the "News Section" block that you can use anywhere.
Frequently Asked Questions (FAQ)
Define common questions with answers. Display them in the global archive. Tag questions in various ways for organization and order. Select individual questions to display in the "FAQ Section" block that you can use anywhere.
Documents and Document Archives
Present documents such as PDFs with a stylish cover image. List the documents in a filterable document archive.
Locations
Create specific stories for your offices, facilities, premises, etc., and display them using the "Store Grid" block.
Staff
Create specific stories for your staff and display them using the "Staff Grid" block.
Block Collections
If you frequently use one or more blocks on your website, instead of creating the block on each individual page, you can create a "block collection". Then use the "Block Collection Picker" block to display your selected block collection(s). This way, you only need to update the collection in one place.
SEO, Redirects, Sitemap
Fill in relevant SEO data on your story to optimize the chances of your story appearing on Google's first page. If you're migrating from an old website, use "Redirects" to direct visitors correctly on your new website. Automatic sitemap generation is included!
Search Engine Optimization (SEO) included
By delivering fast-loading, correctly structured code and providing tools to fine-tune meta data, all prerequisites are in place for your website to rank highly in search engines.
A significant part of the responsibility for SEO lies with the editor. We have compiled a list of points to consider when creating SEO-friendly content.
Is anything missing?
With StoryBlok Boilerplate, we aim to cover the most common needs of a website. It serves as a perfect foundation to build upon. Don't hesitate to ask if something is missing. Perhaps we already have a ready-made solution. If not, it's something we can develop together!
A comparison with Wix and Squarespace
Why choose Storyblok Boilerplate over traditional and well-established website builders like Wix and Squarespace? This is an important question to address. In the following paragraphs, we'll describe the differences and leave the decision-making to you.
Many choices and easy to make mistakes
A traditional website builder aims to give you as much freedom and configuration options as possible. This naturally sounds positive. However, our experience (and that of many others) shows that things can quickly become chaotic as your website grows. You might not be able to achieve everything you envisioned, the site could slow down, stop functioning properly, or even be deprioritized by Google. Additionally, you're locked into the platform, and migrating can be costly. Getting in touch with helpful support can also be challenging.
A more conservative approach
Instead of making you think about everything yourself, we've chosen a more conservative approach. We want to automate and simplify things as much as possible so that your website looks great and works in all situations imaginable. In summary: It should be difficult to make mistakes!
This is ensured in the following ways:
Building blocks
We've selected the most common "components" that make up a modern website. Each of these components is delivered as a "Building Block" or "Block". You then assemble these building blocks according to your preferences (think LEGO).
Separation of content and design
Our building blocks provide an accessible and functional appearance out of the box. You can make some adjustments to how the building block is presented, but these adjustments are well thought out in advance. This ultimately leads to a more uniform website where we can guarantee that everything works in all situations.
Because the content (Storyblok) and design (Storyblok Boilerplate) are separated, there's nothing stopping you from changing how a block is presented at any time (though this should be done together with us). If you no longer want Storyblok Boilerplate, you still own your content and can build another platform to consume it.
The 80/20 rule
We want to be clear from the start that Storyblok Boilerplate doesn't attempt to be a complete solution. It's what the name suggests: a "Boilerplate" or stable platform to build from. It solves many needs (80%). But it might not provide that precise unique solution you specifically need (20%).
Built to scale up
As your website grows, new needs may arise. New building blocks? Changes to existing building blocks? Integrations? E-commerce? We're here to help if those needs arise. This is where the included support agreement with benefits like discounted hourly rates comes in handy.
Always close at hand for help
Sometimes you need assistance. The support agreement includes access to our issue management system where you can quickly get in touch with a real developer.
Does this sound interesting to you?
Contact kristofer@polr.se for more information or a presentation. Click here to view a website built with Storyblok Boilerplate.