Skip to content
    Quick Links
    Comprar
    Módulos personalizados

    Módulos en Ocean Pro

    Conoce algunos de los módulos favoritos que puedes encontrar en el tema Ocean Pro para HubSpot.

    Agenda un demo Ver demo
    Modules_Ocean_Pro
    Selección

    Los Favoritos

    Hero Ocean

    Creamos un módulo Hero que fuera funcional, pero que no limite tu creatividad, así que con el Hero vas a poder añadir de 1 a 2 columnas, elegir entre varios tipos de contenido e invertir las columnas. Además, puedes elegir una imagen de fondo, video, un color sólido o un fondo degradado y muchas otras opciones.

    Una columna

    Añade una etiqueta, título, descripción... si es necesario, agrega un botón o dos botones, a cada elemento cámbiale el estilo y añade tu toque creativo.

    Ocean

    Módulo Hero

    Un módulo, muchas combinaciones. La mejor parte: añadirle tu estilo y toque será muy sencillo.

    Get started

    Dos columnas

    Una segunda columna añade cientos de combinaciones. En la segunda columna puedes agregar una imagen, un video, un formulario o cualquier otro elemento.

    Ocean

    Módulo Hero

    Un módulo, muchas combinaciones. La mejor parte: añadirle tu estilo y toque será muy sencillo.

    Get started
    Ocean_GuideStyle

    Invertir las columnas

    Consideramos que podrías necesitar más, así que puedes invertir las columnas... y hay más opciones.

    Ocean

    Módulo Hero

    Un módulo, muchas combinaciones. La mejor parte: añadirle tu estilo y toque será muy sencillo.

    Get started

    Título rotativo

    Añade texto que rote... ¡así es! La mejor parte es que puedes elegir en qué parte quieres que se muestre: al inicio al final o en medio de unas palabras.

    Ocean

    Hero fácil, hermoso, wow

    El texto rotativo y el grid de imágenes, combinado con las opciones de estilos, vuelven a Hero totalmente diferente.

    Get started

    Images grid with filters

    Añade un filtro y elige el número de columnas

    Los filtros ayudan a tus usuarios a encontrar el contenido más rápido. Lo mejor es que puedes crearlos de manera muy sencilla.

    Oculta el botón todos

    Dependiendo de la cantidad de contenido que agregues, quizás necesites no mostrar el botón "mostrar todos". Activa la primera categoría para mejorar la experiencia de tus visitantes.

    Hero Ocean Angle Image/Video

    Modo claro

    Convert your 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.

    Get started Start here
    pexels-huseyn-kamaladdin-667838

    Modo obscuro

    Un sitio hermoso, funcional, creativo

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

    Get started Start here
    pexels-huseyn-kamaladdin-667838

    Countdown

    Dark

    Light

    Backdrop filter

    Para contenido

    Accordion

    Ocean Style

    😎 Lorem ipsum dolor
    😎 Lorem ipsum dolor
    😎 Lorem ipsum dolor

    Plain Style

    😎 Lorem ipsum dolor
    😎 Lorem ipsum dolor
    😎 Lorem ipsum dolor

    Backdrop filter in accordion

    😎 Lorem ipsum dolor
    😎 Lorem ipsum dolor
    😎 Lorem ipsum dolor

    Number row

    Listado

    Listado con números. Usa este módulo para mostrar un proceso.

    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.

    Línea de tiempo

    Puedes crear una línea de tiempo con el mismo módulo. Tú eliges y personalizas.

    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

    Una, dos o tres columnas

    • 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.

    Personaliza color, tamaño del icono y más.

    • 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

    Una o dos columnas

    Añade imágenes, videos, tablas... puedes cambiar el color de fondo, añadir sombra, 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.

    Combínalo con otros módulos

    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

    Librería de iconos de HubSpot

    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.

    Librería de iconos de Font Awesome

    Cambia el estilo del cuadro del icono y añade el toque único para tu marca.

    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.

    Librería de iconos de Font Awesome Pro

    ¿Tienes una cuenta Pro de Font Awesome? Puedes usarlos y editar el tamaño, color y estilo de forma sencilla.

    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.

    Button

    Un módulo y muchas combinaciones: muestra 1 o 2 botones; elige entre 3 estilos: primario, secundario y simple; 3 tamaños: pequeño, regular y grande; alineación: derecha, centro, izquierda. Cambia el color del fondo, iconos y muchas opciones.

    Un botón

    Dos botones: secundario y simple

    Dos botones centrados: primario y secundario grandes

    Dos botones justificados

    Color Image Cards

    Puedes añadir tantas tarjetas como necesites y acomodarlas de 1 a 4 columnas, modificar el fondo de forma individual o general y agregar un logo.

    Fondos con colores diferentes

    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

    Columnas

    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% personalizables

    Añade un fondo, sombra, redondea los bordes y más.

    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.

    Para imágenes o videos

    Gallery images and/or videos

    Coloca una fila de logos...

    Ocean
    Ocean
    Ocean
    Ocean

    o añade una increíble galería

    Puedes añadir videos que se reproducen cuando el usuario da clic en la imagen.

    pexels-huseyn-kamaladdin-667838
    pexels-huseyn-kamaladdin-667838
    pexels-huseyn-kamaladdin-667838
    pexels-huseyn-kamaladdin-667838
    1+
    pexels-huseyn-kamaladdin-667838

    Image or video background with text

    Combina e impacta a tus visitantes

    Añade de fondo una imagen o un video y muestra contenido visual que haga que tus visitantes conozcan sobre los servicios o productos que ofreces.

    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

    Muestra una imagen en un navegador

    Los detalles son importantes; edita la url que se muestra en el hermoso navegador.

    ocean.mediasource.mx
    preview-desktop-ocean

    ¿Prefieres una tableta?

    Estás cubierto. Puedes añadir un efecto 3D o quitarlo si lo prefieres.

    preview-desktop-ocean

    No olvidamos el móvil

    Puedes añadir un móvil o combinarlo y colocar dos.

    preview-ocean-mobile
    preview-ocean-mobile

    Combina la tablet o el navegador con el móvil

    Claro que puedes combinar y así sorprender aún más.

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

    Logos slider

    Elige el número de logos que se muestran y la velocidad, entre otros aspectos.

    Combina con otros módulos

    Cada opción de visualización en los módulos ayuda a que puedas adaptarlos y combinarlos con otros. Es tan sencillo e increíble que estamos seguro de que lo amarás... y ¡100% sin código!

    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

    Crea e incrusta

    Puedes incrustar el mapa usando Google Maps o alguna herramienta de mapa gratuita... simplemente copia y pega el código de inserción y listo.

    Caja de información

    Añade un caja de información. Puedes alinear a la derecha, izquierda, arriba, abajo, al centro...

    Ocean Theme Pro

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

    Mosaic Img - Video

    Añade un mosaico de imágenes y un video; las imágenes se ajustan. Pronto añadiremos más opciones de visualización y personalización.

    Newsletter

    Un módulo que puedes usar en el listado de tu blog y en páginas de agradecimiento.

    Estilo clásico

    Estilo minimalista

    Estilo Oscuro

    Mostrar más de un campo en una columna

    Mostrar más de un campo en dos columna

    Ocean CTA

    Añade una imagen, un video de fondo o un color. Activa parallax si eliges fondo de imagen, alineación del contenido y más.

    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.

    Start here

    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.

    Start here
    Ocean CTA

    People cards

    Elige cualquiera de los tres diseños disponible y, además, edita tamaños, espacios, entre otros detalles. También puedes seleccionar el número de columnas.

    Estilo plano

    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

    Estilo elegante

    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

    Estilo clásico

    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

    Image or video background with text

    Combina e impacta a tus visitantes

    Añade una imagen o un video de fondo y muestra contenido visual que haga que tus visitantes conozcan sobre los servicios o productos que ofreces.

    Starter

    $ 25 /mo
    • 10 Page
    • 1 Blog
    • Video
    • CTA
    Try free for 30 days

    No card required

    Professional

    $ 500 /mo
    • 10 Page
    • 1 Blog
    • Video
    • CTA
    Try free for 30 days

    No card required