Tutorial Divi: Cómo hacer clicable el teléfono de la barra secundaria

Número de teléfono clicable en los sitios de Google

Hay varios plugins que le permiten cambiar la apariencia del menú móvil Divi, pero ¿qué pasa si usted puede hacer algunas personalizaciones sin necesidad de utilizar un plugin? ¿No te gusta el menú desplegable y te gustaría un menú Slide-in? ¿Te gustaría que el menú móvil Divi permanezca pegajoso en la parte superior? ¿O desea utilizar un logotipo diferente para el menú móvil? Para todos estos casos, hay un hack que te permite personalizar tu Divi Menu Mobile usando sólo fragmentos de código CSS.

Cómo personalizar este código: Lo único que tienes que hacer es sustituir el enlace de la imagen que ves dentro de los corchetes por el enlace de tu imagen. También si quieres cambiar el color del overlay, solo tienes que cambiar los valores del color rgba, realmente muy sencillo.

Un hack que seguro te encantará es el que te permite añadir un efecto slide-in al menú móvil Divi sólo con código CSS. Sin plugins, solo puro código CSS que te permite cambiar totalmente el aspecto de tu menú móvil Divi.

Cuando se utiliza el estilo Centrado o Centrado en línea para el menú de escritorio, el diseño del menú móvil cambia también. Pero con este hack se puede aplicar el diseño por defecto, dejando el menú de escritorio sin cambios.

¿Cómo puedo hacer que un número de teléfono sea clicable en mi sitio móvil?

Añadir un enlace HTML de llamada al número de teléfono a su sitio web

  WooCommerce: Cómo añadir un texto después del precio (sufijo) a ciertos productos

Href=tel: crea el enlace de llamada. Indica al navegador cómo utilizar el número. “Tel: 123-456-7890 “crea el número de teléfono HTML. El número entre comillas es el número al que se llamará.

¿Qué es el menú de navegación secundario?

¿Qué es la navegación secundaria? La navegación secundaria aparece junto con la navegación primaria, a menudo en sitios web más grandes y complejos. La navegación secundaria comprende los enlaces a contenidos menos importantes que las páginas principales, pero a los que se debe poder acceder fácilmente desde cualquier lugar del sitio.

Número de teléfono de Divi

En este tutorial te mostraré Cómo crear un efecto de colapso de menú móvil en Divi. Es una gran manera de personalizar el menú móvil Divi en su sitio y es MUY importante para UX (experiencia del usuario) cuando se tiene una gran cantidad de elementos de menú.

Hay un montón de tutoriales por ahí en esto y he utilizado varios en los últimos años, pero este método en particular ha sido el mejor y más fiable. En realidad he modificado el código del post OG aquí en el efecto de colapso.

Sólo tiene que añadir esto a su tema personalizador CSS área o idealmente su hoja de estilos tema hijo. Puede personalizar el color, tamaño, etc a su gusto. Una vez más, asegúrese de hacer referencia a la guía de iconos ET (enlace más abajo) si desea cambiar los iconos.

Sólo tiene que añadir esto a su tema personalizador CSS área o idealmente su hoja de estilos tema infantil. Puede personalizar el color, tamaño, etc a su gusto. Una vez más, asegúrese de hacer referencia a la guía de iconos ET (enlace más abajo) si desea cambiar los iconos.

Barra de navegación Divi

Además, me resulta útil abrir un editor de texto por separado. Yo uso el Bloc de notas o Notepad ++ en mi PC, pero el uso que sea más fácil para usted. Hago esto para tener un lugar a mano para poner el código que voy a copiar y pegar sin tener que abrir y cerrar módulos constantemente.

  Cómo ocultar los enlaces a categorías y etiquetas en GeneratePress

Haga clic derecho en el botón que acaba de estilo y seleccione Inspeccionar. Usted querrá copiar el código html. Se verá como el código de abajo. Pegue ese código en su editor de texto abierto (de mi sugerencia es el Paso 1) para que lo tenga a mano.

Haga clic derecho en el botón que acaba de estilo y seleccione Inspeccionar. Querrás copiar las reglas de clase. Asegúrate de copiar todo el CSS que corresponde al botón que has creado. En nuestro caso, buscamos todas las reglas que corresponden a .et_pb_button_0.

Después de pegarlo tendrás que darle al botón un nombre de clase único. La clave aquí es cambiar el 0 (o cualquier número que se ha asignado al botón que ha creado) a un número único (o puede cambiar el nombre por completo, me parece más fácil cambiar el número). En mi caso, cambio el nombre a .et_pb_button_99.

Divi servicio al cliente

Aquí está un diseño simple. (Es un poco bandy, pero esto es sólo para fines demostrativos, así que por favor disculpe la bandiness. jaja. Ah, y me he ofrecido a rehacer el sitio web del gimnasio de mi hija, así que tengo algunas fotos de archivo de gimnastas, bailarines y ballet .. ers ..? ballers? no .. bailarines de ballet ..?. de todos modos, es por eso que estoy usando esas fotos ..)

a. El diseño original se hizo de una manera para que las 4 imágenes sean sólo una franja horizontal, y la imagen debajo de esa sección se supone que es más prominente. Sin embargo, en el móvil, las 4 imágenes son MUCHO más prominentes. No es lo ideal.

  Como mostrar los posts mas comentados

Entonces, ¿por qué hice eso? Creo que 2 o 3 imágenes lado a lado en el móvil está bien, pero 4 es un poco demasiado. Es un poco demasiado pequeño por imagen, así que creo que deben ser una cuadrícula de 2 X 2. Así que he añadido otra clase para hacer esa sección diferente.

(actualización: en algún lugar alrededor de mediados de la versión 3.20 de Divi, ET bajó y cambió la especificidad de CSS, así que quité los !importants. Si estás en una versión anterior, y el CSS por defecto está anulando este CSS, a continuación, añadir el !importants de nuevo después de las partes ‘50%’).