Skip to content
    Custom modules

    Custom modules in Ocean Pro

    Check out some of our favorite modules you can find in the Ocean Pro theme for HubSpot.

    Modules_Ocean_Pro
    Selection

    The Favorites

    Hero Ocean

    We created a Hero module that is functional, but does not limit your creativity, so with Hero you will be able to add 1 to 2 columns, choose between several types of content and invert the columns. In addition, you can choose a background image, video, a solid color or gradient background and many other options.

    One column

    Add a label, title, description... if necessary, add a button or, for each element, change the style and add your creative touch.

    Hero Module

    One module, many combinations. The best part: adding your style and touch will be a breeze.

    Two columns

    A second column adds hundreds of combinations. In the second column you can add an image, a video, a form or any other element.

    Hero Module

    One module, many combinations. The best part: adding your style and touch will be a breeze.

    Ocean_GuideStyle

    Invert columns

    We know you might need more, so you can reverse the columns... and there are more options.

    Hero Module

    One module, many combinations. The best part: adding your style and touch will be a breeze.

    Rotating tittle

    Add text that rotates... The best part is that you can choose where you want it to be displayed: at the beginning, at the end or in the middle of words!

    Hero easy, beautiful, wow

    The rotating text and image grid, combined with the styling options, make Hero totally different.

    Images grid with filters

    Add a filter and choose the number of columns

    Filters help your users find content faster. The best thing is that you can create them very easily.

    Hide "All" button

    Depending on the amount of content you add, you may need to not show the "show all" button. Activate the first category to improve your visitors' experience.

    Hero Ocean Angle Image/Video

    Light mode

    Convert your content into a success

    The most important thing is your client, so deliver the best content and without complications using a theme with personalization in every detail.

    pexels-huseyn-kamaladdin-667838

    Modo obscuro

    A beautiful, functional, creative site

    The most important thing is your client, so deliver the best content and without complications using a theme with personalization in every detail.

    pexels-huseyn-kamaladdin-667838

    Countdown

    Dark

    Light

    Backdrop filter

    For content

    Accordion

    Ocean Style

    😎 Lorem ipsum dolor

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa massa ultricies mi quis hendrerit dolor magna eget. 

    😎 Lorem ipsum dolor

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa massa ultricies mi quis hendrerit dolor magna eget. 

    😎 Lorem ipsum dolor

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa massa ultricies mi quis hendrerit dolor magna eget. 

    Plain Style

    😎 Lorem ipsum dolor

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa massa ultricies mi quis hendrerit dolor magna eget. 

    😎 Lorem ipsum dolor

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa massa ultricies mi quis hendrerit dolor magna eget. 

    😎 Lorem ipsum dolor

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa massa ultricies mi quis hendrerit dolor magna eget. 

    Backdrop filter in accordion

    😎 Lorem ipsum dolor

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa massa ultricies mi quis hendrerit dolor magna eget. 

    😎 Lorem ipsum dolor

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa massa ultricies mi quis hendrerit dolor magna eget. 

    😎 Lorem ipsum dolor

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa massa ultricies mi quis hendrerit dolor magna eget. 

    Number row

    Listing

    Listing with numbers. Use this module to display a process.

    01

    Lorem ipsum

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mauris commodo quis imperdiet massa tincidunt nunc.

    02

    Lorem ipsum

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mauris commodo quis imperdiet massa tincidunt nunc.

    03

    Lorem ipsum

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mauris commodo quis imperdiet massa tincidunt nunc.

    04

    Lorem ipsum

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mauris commodo quis imperdiet massa tincidunt nunc.

    Timeline

    You can create a timeline with the same module. You choose and customize.

    01

    Lorem ipsum

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mauris commodo quis imperdiet massa tincidunt nunc.

    02

    Lorem ipsum

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mauris commodo quis imperdiet massa tincidunt nunc.

    03

    Lorem ipsum

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mauris commodo quis imperdiet massa tincidunt nunc.

    04

    Lorem ipsum

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mauris commodo quis imperdiet massa tincidunt nunc.

    Fancy list

    One, two or three columns

    • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    • Aliquam tincidunt mauris eu risus.
    • Vestibulum auctor dapibus neque.
    • Nunc dignissim risus id metus.
    • Cras ornare tristique elit.

    Customize color, icon size and more.

    • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    • Aliquam tincidunt mauris eu risus.
    • Vestibulum auctor dapibus neque.
    • Nunc dignissim risus id metus.
    • Cras ornare tristique elit.

    Fancy Rich Text

    One or two columns

    Add images, videos, tables... you can change the background color, add shadows, etc.

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

    Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sagittis aliquam malesuada bibendum arcu vitae elementum curabitur vitae.

    Combine it with other modules

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

    Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

    pexels-huseyn-kamaladdin-667838

    Icon box

    HubSpot Icon Library

    Drive people to your products and services

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tempor arcu non commodo elementum.

    Drive people to your products and services

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tempor arcu non commodo elementum.

    Font Awesome Icon Library

    Change the style of the icon box and add the unique touch for your brand.

    Drive people to your products and services

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tempor arcu non commodo elementum.

    Drive people to your products and services

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tempor arcu non commodo elementum.

    Font Awesome Pro Icon Library

    Do you have a Font Awesome Pro account? You can easily use them and edit the size, color and style.

    Drive people to your products and services

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tempor arcu non commodo elementum.

    Drive people to your products and services

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tempor arcu non commodo elementum.

    Icon 1
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Icon 1
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Icon 1
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Icon 1
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Icon 1
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    Button

    One module and many combinations: display 1 or 2 buttons; choose between 3 styles: primary, secondary and simple; 3 sizes: small, regular and large; alignment: right, center, left. Change background color, icons and many options more.

    One button

    Two buttons: secondary and simple

    Two centered buttons: primary and secondary large

    Two buttons justified

    Color Image Cards

    You can add as many cards as you need and arrange them from 1 to 4 columns, modify the background individually or in general and add a logo.

    Backgrounds with different colors

    pexels-chevanon-photography-302902
    Lorem ipsum

    Lorem ipsum dolor sit amet

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    pexels-chevanon-photography-302902
    Lorem ipsum

    Lorem ipsum dolor sit amet

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    pexels-chevanon-photography-302902
    Lorem ipsum

    Lorem ipsum dolor sit amet

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    pexels-chevanon-photography-302902
    Lorem ipsum

    Lorem ipsum dolor sit amet

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    Line Box - Title Content

    Columns

    Muestra las cajas en 1, 2, 3 o 4 columnas.

    Hit heavy, stay small

    Tight-knit, dynamic teams work with more agility, communication, and freedom than large-scale companies.

    Hit heavy, stay small

    Tight-knit, dynamic teams work with more agility, communication, and freedom than large-scale companies.

    Hit heavy, stay small

    Tight-knit, dynamic teams work with more agility, communication, and freedom than large-scale companies.

    Hit heavy, stay small

    Tight-knit, dynamic teams work with more agility, communication, and freedom than large-scale companies.

    100% customizable

    Add a background, shadow, round edges and more.

    Hit heavy, stay small

    Tight-knit, dynamic teams work with more agility, communication, and freedom than large-scale companies.

    Hit heavy, stay small

    Tight-knit, dynamic teams work with more agility, communication, and freedom than large-scale companies.

    Hit heavy, stay small

    Tight-knit, dynamic teams work with more agility, communication, and freedom than large-scale companies.

    Hit heavy, stay small

    Tight-knit, dynamic teams work with more agility, communication, and freedom than large-scale companies.

    For images or videos

    Place a row of logos...

    Ocean
    Ocean
    Ocean
    Ocean

    You can add videos that play when the user clicks on the image.

    Image or video background with text

    Combine and impact your visitors

    Add an image or video in the background and display visual content that will make your visitors know about the services or products you offer.

    Ocean Image

    Lorem ipsum dolor sit amet, consectetur adipiscing elit

    Ocean Image

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    Ocean Image

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Risus nullam eget felis eget nunc lobortis. Pulvinar etiam non quam lacus suspendisse. Aliquam ut porttitor leo a diam sollicitudin.

    Images on devices

    Display an image in a browser

    Details are important; edit the url displayed in the beautiful browser.

    ocean.mediasource.mx
    preview-desktop-ocean

    Prefer a tablet?

    You are covered. You can add a 3D effect or remove it if you prefer.

    preview-desktop-ocean

    Mobile devices are not forgotten

    You can add one mobile or combine them and place two.

    preview-ocean-mobile
    preview-ocean-mobile

    Combine tablet or browser mobile

    Sure you can combine and surprise even more.

    preview-ocean-mobile
    ocean.mediasource.mx
    preview-desktop-ocean

    Logos slider

    Choose the number of logos displayed and the speed, among other things.

    Combine with other modules

    Each display option in the modules helps you to customize and combine them with others. It's so simple and amazing that we're sure you'll love it... and 100% code-free!

    Hit heavy, stay small

    Tight-knit, dynamic teams work with more agility, communication, and freedom than large-scale companies.

    Hit heavy, stay small

    Tight-knit, dynamic teams work with more agility, communication, and freedom than large-scale companies.

    Hit heavy, stay small

    Tight-knit, dynamic teams work with more agility, communication, and freedom than large-scale companies.

    Map

    Create and embed

    You can embed the map using Google Maps or any free map tool... just copy and paste the embed code and you're done.

    Information box

    Add an information box. You can align to the right, left, top, bottom, center...

    Ocean Theme Pro

    Headquarters, Mexico
    • 100% Remote
    • hola@mediasource.mx

    Mosaic Img - Video

    Add an image mosaic and a video; images are adjusted. We will be adding more display and customization options soon.

    Newsletter

    A module that you can use in your blog listing and in thank you pages.

    Classic Style

    Minimalist Style

    Dark Style

    Show more than one field in a column

    Show more than one field in two columns

    Ocean CTA

    Add an image, a background video or a color. Enable parallax if you choose image background, content alignment and more.

    Ocean CTA

    Powerful and beautiful cta with multiple options to create and test the best. Background image, background video, background color or gradient. Blend a color layer or a gradient on top of the image or video.


    Ocean CTA

    Powerful and beautiful cta with multiple options to create and test the best. Background image, background video, background color or gradient. Blend a color layer or a gradient on top of the image or video.

    People cards

    Choose any of the three available layouts and also edit sizes, spacing, among other details. You can also select the number of columns.

    Plain Style

    pexels-yan-krukov-4458421

    Fernanda Duarte

    CEO and Co-Founder
    Lorem ipsum dolor sit amet, consectetur adipiscing elit
    pexels-yan-krukov-4458421

    Fernanda Duarte

    CEO and Co-Founder
    Lorem ipsum dolor sit amet, consectetur adipiscing elit
    pexels-yan-krukov-4458421

    Fernanda Duarte

    CEO and Co-Founder
    Lorem ipsum dolor sit amet, consectetur adipiscing elit

    Elegant Style

    pexels-yan-krukov-4458421

    Fernanda Duarte

    CEO and Co-Founder
    Lorem ipsum dolor sit amet, consectetur adipiscing elit
    pexels-yan-krukov-4458421

    Fernanda Duarte

    CEO and Co-Founder
    Lorem ipsum dolor sit amet, consectetur adipiscing elit
    pexels-yan-krukov-4458421

    Fernanda Duarte

    CEO and Co-Founder
    Lorem ipsum dolor sit amet, consectetur adipiscing elit

    Classic Style

    pexels-yan-krukov-4458421

    Fernanda Duarte

    CEO and Co-Founder
    Lorem ipsum dolor sit amet, consectetur adipiscing elit
    pexels-yan-krukov-4458421

    Fernanda Duarte

    CEO and Co-Founder
    Lorem ipsum dolor sit amet, consectetur adipiscing elit
    pexels-yan-krukov-4458421

    Fernanda Duarte

    CEO and Co-Founder
    Lorem ipsum dolor sit amet, consectetur adipiscing elit