Ocean

Ocean is powerful and intuitive aligned to HubSpot suite for Growth.

Comment

Inspiration

CMS Hub's drag and drop page builder certainly provides a lot of versatility and we wanted to design a Theme with custom modules that in combination with the columns and other CMSHub functions, have a great experience with functional modules to create a great website.

What it does

Ocean Theme helps you to be a leader in your industry thinking and implementing the key elements that generate trust in your clients.

With 40+ Ocean Theme templates, you will accelerate your business growth following the structures, functions and procedures fully aligned with the HubSpot CMS.

Ocean Theme includes usual sections like about, services, customer, team or contact… and also we create other more visual and powerful sections like a video library page with filters, pillar pages, learning center, power pages for leads, careers page, newsletter page and more.

The custom modules were created thinking that just some of them were using the full-width section, and the rest would be using columns.

Has over 40 modules designed to make it easy to display text, image, video content and more.

We built them using the Content and Styles tabs in order to get a better user experience.

Content tab will have the structure of the content. The Styles tabs, will have all the options to customization, it means how the content would be displayed.

According to the configuration it will be chosen, the related options, will be displayed to get a more organized editing experience.

The full-width was used in modules that look better as a complete section such as the Hero Page and Heading Hero among others.

The rest of the modules that we classify as flexible are all those that you can accommodate in 1, 2, 3, 4 or 5 columns, in the same way in rows… there is no limit and the adjustment is perfect.

Additionally, in each module we have established from 2 to 3 settings and options that change the appearance of the content, we did this taking care that the user experience editing was extraordinary. Although Ocean has 48+ custom modules, in reality you have more than 90 blocks with totally different layout and style.

In addition, some custom modules have a predefined design, which you can totally change without having to get into the code, although we leave an option for advanced users who wish to place their own css.

Mega menu? of course we include it in Ocean Theme, and best of all is that you do not have to add labels or strange things, everything is so simple and easy that you will not believe it.

How we built it

Always thinking about the user, taking care that their experience was the best, with the content and design team we tested what was necessary or what was left over and on that we improved and optimized. HubSpot´s tools and documentation for CMS Hub was very helpful.

Challenges we ran into

Adding the mega menu function was a challenge, we tried several options and in most cases a tutorial was required, until we got that just by reading the small help, the configuration of the mega menu can be made really easy.

Another challenge was the pillar pages, which usually have very valuable and extensive content, but to guarantee an excellent experience it is necessary to add a table of contents, and what better way than to make it beautiful.

In addition to the beautiful table of contents, we knew that the user should be able to create the pillar page using all the custom modules. The result was great, creating pillar pages is now magic, you simply choose to sync a custom module with the pillas pages menu, and voila!. Nothing to code.

Accomplishments that we're proud of

The extreme easy way to add a Mega-Menu with which you can create multiple variations.

Powerful modules that allow you to build Pillar Pages that encourage users to consume your content.

Hero Ocean Module: we created multiple options to display content that give more than 200 possible combinations: Video background, to add more than 1 video, or choose image, gradient or solid color and more. Add rotation text to the title. Add modal video to the main button. Choose 2 columns and in the second column choose: image grid, a video, a form and more. Choosing Ocean Layout there is a background grid where you can choose from 3 to 5 images.

Search bar + Quick links: We have created more power to the Search Bar adding quick links to make the user’s life easier finding your key information.

Blog Post Dark Options Blog Post with the dark options was thinking about giving users an incentive to read blog posts at night.

What we learned

We learned that we can build a theme with powerful custom modules for the CMS Hub. Even if some are a great challenge, they can be built taking care of the designers and content creators’ experience.

What's next for Ocean

Ocean Theme have the guarantee of continuous updates. Each personalized module has the field that will assure improvements and new delivering options and layouts.

Built With

Share this project:

Updates