Cómo crear un anuncio de barra superior deslizable con el módulo de código Divi

Como mencioné hace unos días con mi publicación sobre cómo agregar un botón de acción flotante a su sitio usando el Módulo de código Divi , he estado creando más bolígrafos en Codepen.io para usar con Divi, ambos con Módulo de código para publicaciones individuales. o páginas, así como las opciones de temas de Divi para la implementación en todo el sitio. Hoy me complace compartir otro, basado en un elemento de diseño del sitio web de Elegant Themes: el anuncio de la barra superior deslizable.

Ahora, por supuesto, hay muchos complementos que pueden hacer lo mismo, pero me gusta evitar que los complementos se hinchen si es posible si se puede hacer algo con un fragmento simple. Así que dicho esto, ¡vamos al grano!

Concepto e inspiración

El concepto y la inspiración para esto provienen de la barra superior deslizable que usamos aquí en Elegant Themes luego del lanzamiento de Divi 3.0 para llamar más la atención sobre nuestra nueva página de Divi Theme. Funcionó maravillosamente para nosotros, así que pensé en compartir una versión con toda la comunidad que no requiere un complemento, ¡solo un simple fragmento de código!

Actualización: cómo funciona el generador de código

Como en mi publicación anterior más reciente, hoy usaremos un generador de código abierto que creé para la comunidad Divi . Lo que hace este generador de código es compilar el código de un codepen dado y exportar un solo bloque de código que se ejecutará correctamente dentro del módulo de código Divi.

La mecánica de usarlo no podría ser más sencilla. Todo lo que tiene que hacer es copiar la URL de codepen que ha creado (o que alguien más haya creado para usar dentro de Divi) y pegarla en el espacio en el campo en la parte superior del generador. Luego haga clic en el botón azul «Generar».

Esto llenará el cuadro de texto a continuación con un bloque de código para usar dentro del módulo de código Divi. También notará que el botón azul ahora dice «Copiar código». Vuelva a hacer clic para copiar el código compilado en su portapapeles para pegarlo fácilmente en el módulo de código Divi deseado.

Cómo crear un anuncio de barra superior deslizable con el módulo de código Divi

Suscríbete a nuestro canal de Youtube

Para agregar el codepen anterior a su sitio web Divi en una sola publicación o página, haga lo siguiente:

Primero, navegue hasta el bolígrafo en codepen.io. Asegúrate de haber iniciado sesión allí. Si no tiene una cuenta, continúe y cree una cuenta gratuita (solo toma unos segundos).

Cuando haya iniciado sesión y esté en la página del bolígrafo anterior, presione «comando + s» para guardarlo. Esto creará automáticamente un duplicado del bolígrafo en su cuenta. Este es el bolígrafo que editará y luego compilará.

Ahora, ubique la siguiente línea de html y reemplace el texto con su mensaje.

01
<div class="at-banner__text">Hey friend, check out my <b>new and improved</b> blog!</div>

A continuación, ubique esta línea de html y cambie el enlace y el texto por los suyos.

01
02
<a class="at-banner__button" href="https://andytran.me">VIEW BLOG</a>
  </div>

Cuando haya terminado con los cambios, guarde el lápiz nuevamente. Luego, copie la URL del bolígrafo y péguela en el generador de código como se muestra arriba. Finalmente, copie ese código en su portapapeles para que pueda pegarlo en su sitio web de Divi.

Ahora navegue a la publicación o página en la que desea que aparezca este banner. Agregue un módulo de código en la primera sección estándar de su página.

Pegue el bloque de código en la sección de contenido de ese módulo de código, guárdelo y salga.

Luego, actualice su página y eche un vistazo a la interfaz de su sitio web. Ahora debería mostrar un anuncio de banner en la parte superior que se desliza cuando se carga la página.

Al usar el módulo de código de esta manera, podrá agregar un banner a una sola página o publicación a la vez. Esto es útil si desea que el banner solo aparezca en ciertas páginas o con diferentes mensajes en diferentes páginas.

Si desea que aparezca el mismo banner en todas las páginas de su sitio web, siga las instrucciones en la sección a continuación.

Cómo agregar el anuncio de la barra superior deslizable en todo el sitio

Si desea que su banner aparezca en todas sus páginas al mismo tiempo, navegue en su administrador de WordPress a Divi > Opciones de tema > Integración . Desplácese hacia abajo hasta el cuadro de texto etiquetado como «Agregar código al < encabezado > de su blog». Pegue su código compilado allí y guarde los cambios. Su banner ahora aparecerá en todas las páginas de su sitio web Divi cuando se carguen.

¡Asegúrate de volver por más!

Bueno, eso es todo por este tutorial en particular. Espero que estés disfrutando de estos consejos sobre cómo sacar más provecho del módulo Divi Code. Mi esperanza es que estas publicaciones y mi generador de código comiencen a fomentar el intercambio de fragmentos de código y scripts entre la comunidad Divi de manera similar a lo que hemos visto con diseños y temas secundarios.

También me gustaría repetir algo que dije en mi publicación anterior sobre el uso de otros bolígrafos con el generador de código codepen que creé :

“Si está interesado en crear un bolígrafo que funcione con Divi y se pueda agregar fácilmente al módulo de código usando el generador, simplemente cree sus bolígrafos teniendo en cuenta los posibles conflictos de CSS que podrían causarse con los estilos de Divi. Por ejemplo, en el bolígrafo de arriba utilicé el prefijo `at-` para evitar cualquier conflicto que pudiera surgir”.

Así que tenlo en cuenta cuando uses el generador por ti mismo o crees bolígrafos en codepen para compartir con otros usuarios de Divi.

¡Hasta la próxima, siéntase libre de dejarme algunas solicitudes en los comentarios a continuación!

¡Asegúrate de suscribirte a nuestro boletín de correo electrónico y canal de YouTube para que nunca te pierdas un gran anuncio, un consejo útil o un obsequio de Divi!