Diseño en vivo de sección Hero en Web de Agencia

Inicio / Blog / Diseño en vivo de sección Hero en Web de Agencia

Autor: Jefferson M

Publicación: 24 Jul, 2021

En nuestro #UXDIVILiveDesign​​ número diez haremos el diseño en vivo de una sección HERO completamente orientada a un sitio web de agencia de Marketing o de Diseño.

En este caso buscaremos crear un diseño de una sección HERO con elementos flotantes e interactivos, usando todo el poder del plugin Divi Pixel.

Resultado:

Código Usado:

Para crear el botón “liquid”

HTML a insertar en un módulo de código.

Aquí puedes cambiar donde esta el “#” por el enlace a donde quieres que dirija el botón y “Get in touch” por lo que quieras que diga el botón. En este texto es recomendable que uses un texto corto.

<a href="#"><span>Get in touch</span>
<div class="liquid"></div>
</a>

Al módulo de código asígnale la clase: btn4

Y luego añade el siguiente CSS personalizado en opciones del tema Divi > Generales > CS personalizado

/* Tamaño Boton */

.btn4 a {
  position: relative;
  padding: 15px 35px; /*Tamaño*/
  display: block;
  text-decoration: none;
  text-transform: uppercase; /*Mayúsculas texto*/
  width: 200px; /*Ancho Boton*/
  overflow: hidden;
  border-radius: 40px; /*Radio boton*/
  margin:0px;
}

/* Estilos de texto */
.btn4 a span {
  position: relative;
  color: #fff; /*Color del texto*/
  font-size: 16px;
  letter-spacing: 1px;
  z-index: 1;
}

/*Estilos del efecto "liquid"*/
.btn4 a .liquid {
  position: absolute;
  top: -80px;
  left: 0;
  width: 200px;
  height: 200px;
  background: #ff5b2e; /*Color principal del boton*/
  box-shadow: inset 0 0 50px rgba(0, 0, 0, .5);
  transition: .5s;
}

.btn4 a .liquid::after,
.btn4 a .liquid::before {
  content: '';
  width: 200%;
  height: 200%;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -75%);
  background: #424242;
}

.btn4 a .liquid::before {
  
  border-radius: 45%;
  background: rgba(20, 20, 20, 1);
  animation: animate 5s linear infinite;
}

.btn4 a .liquid::after {
  
  border-radius: 40%;
  background: rgba(20, 20, 20, .5);
  animation: animate 10s linear infinite;
}

/*Estilos del efecto Liquid on hover*/
.btn4 a:hover .liquid{
  top: -140px;
}

/*Animación*/
@keyframes animate {
  0% {
    transform: translate(-50%, -75%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -75%) rotate(360deg);
  }
}

Si eres premium, descarga el layout completo desde acá abajo 👇

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Iniciar Sesión

¿No tienes cuenta? Registrarse

Otros planes

¡Accede a más de 1330 contenidos especializados en Diseño Web con Divi por un solo precio!

Trimestral

Ahorra 6 USD 🔥

$US 18/ Mes

*Pagando US$ 54 cada 3 meses

¿A qué accedes con este plan?

Lifetime

Un solo pago 🔥

$US 499/ Lifetime

*UN SOLO PAGO DE POR VIDA

¿A qué accedes con este plan?

Con este plan accedes a:

  1. ✅ Todos los cursos
  2. ✅ Todos los tutoriales prémium
  3. ✅ Todos los plugins y layouts
  4. ✅ Soporte prémium vía email
  5. ✅ Acceso a la comunidad en Discord

Con este plan accedes a:

  1. ✅ Todos los cursos
  2. ✅ Todos los tutoriales prémium
  3. ✅ Todos los plugins y layouts
  4. ✅ Soporte prémium vía email
  5. ✅ Acceso a la comunidad en Discord
  6. ✅ Descuentos en Templates para Divi

Solicitud de cancelación de suscripción

Aviso importe

🚩 Debes solicitar la cancelación de tu suscripción al menos 24 horas antes de tu renovación, de otro modo, no podremos procesar a tiempo la cancelación antes de tu renovación.

Al cancelar tu suscripción, perderás el acceso a todo esto:

🚩 A más de mil contenidos especializados en el aprendizaje del diseño web
🚩 El soporte personalizado en Divi
🚩 Acceso al grupo de Discord
🚩 Acceso a la descarga de las actualizaciones de los plugins, el contenido y las descargas de nuestro sitio.
🚩 Puntos y rangos obtenidos en la plataforma

✅ Te ofrecemos la opción de pausar tu suscripción 2 o 3 meses y así no perderás el progreso obtenido en la plataforma.

Lamentamos mucho 😩 que tu experiencia en nuestra plataforma no haya sido la mejor. Para poder procesar tu solicitud y hacerla efectiva, necesitaremos que por favor nos envíes lleno este formato. Esto nos ayudará a poder seguir mejorando nuestra propuesta de valor y siendo útil para todos los usuarios.

Solicitud de cancelación

¿Por cuál o cuáles razones deseas cancelar tu suscripción?

¿Qué características mejorarías en nuestra web?

¿Cuál es tu nivel de satisfacción en relación con la calidad del soporte que ofrecemos por diferentes medios? donde 1 es insatisfecho y 5 es satisfecho

¿En esta escala que tanto recomendarías a UXDIVI a un amigo o colega? donde 1 es "no lo recomendaría" y 5 es "Lo recomendaría totalmente"

11 + 15 =