Skip to content
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

00Days
00Hours
00Minutes
00Seconds

Light

00Days
00Hours
00Minutes
00Seconds

Backdrop filter

00Days
00Hours
00Minutes
00Seconds

Para contenido

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

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

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