Con TapTap, nos propusimos crear un complemento de menú fuera del lienzo fácil de personalizar, receptivo, móvil primero para WordPress que sería lo suficientemente versátil como para usarse literalmente en cualquier sitio web.
Ya sea el portafolio de una creatividad o un sitio corporativo, mezclar y combinar fuentes, tamaños de fuente, íconos, espaciado de letras, colores, posiciones de botones y logotipos, fondos, alineaciones, velocidades de animación, etc. le permite crear rápidamente un menú receptivo que es exclusivamente suyo. Olvídese de los diseños predeterminados y cree el menú móvil que desee. Obtenga una vista previa de los cambios que realice en tiempo real y personalice su nuevo menú más rápido y más fácil que nunca.
Para obtener todos los detalles sobre TapTap, lea la lista de funciones a continuación y eche un vistazo a los ejemplos en vivo en el sitio de demostración aquí.
¡PD! TapTap está disponible con descuento en el paquete de menú móvil de WordPress.
Lista completa de características de TapTap:
TapTap es tremendamente personalizable y, con mucho, el menú móvil de WordPress más versátil disponible en cualquier lugar. Para familiarizarse con todo lo que puede editar, agregar y personalizar, eche un vistazo a los detalles completos sobre las posibilidades casi infinitas de TapTap a continuación.
Botón de menú
- Coloque el botón de menú a la izquierda o a la derecha, luego ajuste la distancia superior/lateral con precisión por píxel
- Abra el menú haciendo clic/toque o pasando el mouse
- 6 estilos diferentes de botones de menú
- Cada estilo tiene variaciones regulares y delgadas (12 diseños en total)
- Cada botón tiene dos animaciones diferentes (o ninguna animación)
- Establecer velocidad de animación personalizada
- Establecer la opacidad del botón
- Personalizar color, color flotante (+ colores cuando el menú está activo)
- Agregar etiqueta al botón de menú
- Introduce el texto de la etiqueta personalizada
- Coloque la etiqueta en cualquier lugar alrededor del botón con precisión por píxel
- Establecer tamaño de fuente personalizado
- Establecer espaciado entre letras personalizado
- Seleccione la fuente de la etiqueta (12 opciones disponibles o use una fuente de tema)
- Si el botón de menú está oculto, la etiqueta permanecerá visible (si se ingresa una) y se puede usar para activar el menú
- Personalizar el color de la etiqueta, el color de desplazamiento
- Opcionalmente, ocultar el botón de menú (útil si desea usar un elemento personalizado para activar el menú)
Colocación del logotipo
- Coloque el logotipo a la izquierda, al centro o a la derecha, luego ajuste la distancia superior/lateral con precisión por píxel
- Si el logotipo se ingresó como texto:
- Establecer tamaño de fuente personalizado
- Establecer espaciado entre letras personalizado
- Seleccione la fuente del logotipo (12 opciones disponibles o use una fuente de tema)
- Personalizar color, color de desplazamiento
- Si el logotipo se ingresó como una imagen:
- Establecer el tamaño de la imagen del logotipo personalizado
- Opcionalmente, ocultar la ubicación del logotipo
Botón de carrito de WooCommerce
- Coloque el botón de WooCommerce a la izquierda o a la derecha, luego ajuste la distancia superior/lateral con precisión por píxel
- Variaciones del icono del carrito y la bolsa de la compra
- Personalizar colores, color de desplazamiento
Botón de búsqueda
- Coloque el botón de búsqueda a la izquierda o a la derecha, luego ajuste la distancia superior/lateral con precisión por píxel
- Variaciones regulares y delgadas del botón de búsqueda
- Opcionalmente, voltee el botón de búsqueda para variaciones adicionales
- Personalizar color, color de desplazamiento
- Agregar etiqueta al botón de búsqueda
- Introduce el texto de la etiqueta personalizada
- Coloque la etiqueta en cualquier lugar alrededor del botón con precisión por píxel
- Establecer tamaño de fuente personalizado
- Establecer espaciado entre letras personalizado
- Seleccione la fuente de la etiqueta (12 opciones disponibles o use una fuente de tema)
- Si el botón de búsqueda está oculto, la etiqueta permanecerá visible (si se ingresa una) y se puede usar para activar la función de búsqueda
- Personalizar el color de la etiqueta, el color de desplazamiento
- Opcionalmente, ocultar el botón de búsqueda (y la función junto con él)
Buscando función
- Establecer velocidad de animación de apariencia personalizada
- Campo de búsqueda:
- Establecer texto de marcador de posición de campo de búsqueda personalizado
- Personalizar la altura del campo de búsqueda
- Para compatibilidad con RTL, alinee el texto del campo de búsqueda a la derecha
- Ocultar la opción ‘borrar campo’
- Establecer tamaño de fuente personalizado
- Establecer espaciado entre letras personalizado
- Seleccione la fuente de la etiqueta (12 opciones disponibles o use una fuente de tema)
- Cambiar la opacidad del fondo del campo de búsqueda
- Personalice los colores del fondo del campo de búsqueda, el marcador de posición y el texto de búsqueda, los botones cerrar y ‘borrar campo’
- Establecer la opacidad y el color de superposición de fondo
Encabezamiento
- Mostrar/ocultar encabezado
- Establecer la altura del encabezado personalizado
- Cambiar el color de fondo del encabezado
- Cambiar la opacidad del fondo del encabezado
- Mostrar/ocultar la sombra de fondo del encabezado (+ establecer la intensidad de la sombra)
Contenedor de menú, menú, widgets, etc.
- General:
- Muestre el menú flotante como pantalla completa o establezca un ancho/alto personalizado
- La altura es aplicable cuando el menú está configurado para animar desde arriba/abajo.
- El ancho es aplicable cuando el menú está configurado para animar de izquierda a derecha.
- Configure el menú para que aparezca desvaneciéndose o deslizándose desde la izquierda, derecha, arriba o abajo
- Establecer la velocidad de aparición del menú personalizado
- Opcionalmente, muestre el submenú cuando esté actual (tenga los menús abiertos cuando esté en el elemento del menú actual)
- Opcionalmente, cierre el menú después de hacer clic en el elemento del menú (útil en sitios web de una página)
- Alinear el contenido del menú a la izquierda/centro/derecha y arriba/medio/abajo
- Dar contenido dentro del ancho máximo del contenedor del menú
- Altere la animación de escala del contenido del menú (cualquier nivel de escala, positivo o negativo, o desactívelo por completo).
- Establecer contenedor de menú de relleno personalizado izquierdo, derecho, superior e inferior
- Si está en el escritorio, al presionar el botón ESC se cierra el menú y se busca
- Cambiar el color y la opacidad de la superposición de fondo del menú
- Fondo:
- Agregar imagen de fondo o patrón
- Controle la redondez de las esquinas y la distancia desde los bordes de la pantalla
- Cambiar el posicionamiento de la imagen de fondo
- Cambiar la opacidad de la imagen de fondo
- Cambiar color de fondo
- Cambiar la opacidad del color de fondo
- Cree fondos de color animados, pulsantes o degradados (+ cambiar la velocidad de la animación)
- Agregar títulos, subtítulos:
- Cambiar fuentes (12 opciones disponibles o usar una fuente de tema)
- Cambiar tamaños de fuente
- Cambiar espacios entre letras
- Cambiar alturas de línea
- Convierta los textos de encabezado en enlaces
- Agregar imagen de encabezado:
- Establecer tamaño máximo
- Convierte la imagen del encabezado en un enlace
- Establecer márgenes superior e inferior
- Menú acordeón:
- Cree un menú de varios niveles (sin límite de profundidad)
- Agregar descripciones a los elementos del menú de un solo nivel
- Establezca el espacio vertical entre los elementos del menú y las descripciones del menú
- Cambiar fuentes (12 opciones disponibles o usar una fuente de tema)
- Cambiar tamaños de fuente
- Cambiar espacios entre letras
- Cambiar alturas de línea
- Cambiar todos los colores
- Todas las opciones de fuente se pueden configurar individualmente para elementos de nivel superior y subnivel, así como para descripciones de menú
- Agregue iconos a los elementos del menú:
- Más de 600 iconos disponibles
- Cambiar el tamaño del icono (por separado para los elementos de nivel superior y submenú)
- Cambiar el color del icono (por separado para los elementos de nivel superior y de submenú)
- Barra de desplazamiento con estilo personalizable:
- Personalizar los colores de la barra de desplazamiento
- Personalizar el grosor de la barra de desplazamiento
- Personaliza la distancia de la barra de desplazamiento desde los lados
- Personalizar la redondez de las esquinas de la barra de desplazamiento
- Mostrar la barra de desplazamiento siempre o solo al pasar el mouse
- Si la barra de desplazamiento con estilo está habilitada, se mostrará solo en el escritorio. En dispositivos móviles, se utiliza el comportamiento de desplazamiento nativo del dispositivo.
- Efectos de animación de contenido (aplicados al contenido seleccionado cuando se abre/cierra el menú):
- Escalada
- Opacidad
- Difuminar
- Ubicaciones de widgets:
- Ubicaciones de widgets encima y debajo del menú
- El widget de texto acepta códigos cortos
- Seleccionar fuentes (12 opciones disponibles o usar una fuente de tema)
- Establecer tamaños de fuente personalizados
- Establecer espaciado entre letras personalizado
- Establecer alturas de línea personalizadas
- Cambiar colores (títulos, contenido, enlaces)
- Establezca la configuración de fuente individualmente para títulos y contenido de widgets
Varios
- Mostrar/ocultar en resoluciones específicas (mostrar en dispositivos móviles y ocultar en escritorio, o viceversa)
- Ocultar completamente en publicaciones/páginas específicas
- Opción ‘Encabezado inteligente’ (los elementos del encabezado se deslizan fuera de la vista cuando el sitio se desplaza hacia abajo, se deslizan hacia atrás cuando se desplaza hacia arriba).
- Ocultar menú de tema, logotipo, etc. cuando TapTap está activo, por clase/ID de los elementos del tema
- Opcionalmente, bloquee el desplazamiento del cuerpo cuando se abre el menú
- Se incluyen una docena de variaciones de fuentes cuidadosamente seleccionadas (o use las fuentes de su tema)
- Abrir submenús desde el indicador de flecha o el elemento de menú de nivel superior completo
- Opcionalmente, haga que TapTap se abra de forma predeterminada en la página principal
- Alternar el menú a través de un elemento personalizado, a través de una clase de activador
- Muestra el botón de menú de cierre alternativo. Las opciones disponibles incluyen posicionamiento izquierdo/derecho y ajuste de posición, posicionamiento fijo o absoluto, una animación de desplazamiento opcional, ajustes de color y grosor.
- Soporte RTL
- Compatible con WordPress multisitio
- Posicionamiento absoluto/fijo
- Haga que el logotipo, la búsqueda y el encabezado aparezcan encima o debajo del menú
- Opcionalmente, no cargue el conjunto de iconos FontAwesome (útil si no usa iconos en su menú o si algo en su instalación ya carga este conjunto de iconos ampliamente utilizado)
- Opcionalmente, deshabilite el soporte de retina (en caso de que no haga uso de las posibilidades de imagen en el complemento)
Menú basado en imágenes experimentales
Tenga en cuenta: cuando se utiliza, el diseño del menú basado en imágenes se puede usar en lugar del menú principal y además del mismo. El menú basado en imágenes tiene su propio conjunto de configuraciones que no se aplican al menú principal y viceversa.
- Cambiar todos los colores
- Cambiar la redondez de las esquinas
- Admite hasta nueve elementos de nivel superior y submenús ilimitados
- Cargue imágenes principales y cambie otras configuraciones en la sección «Menú basado en imágenes»
registro de cambios
Quick update (no version change) - Some JS script and translation string updates Update 5.4 - Added option to open the menu by moving the mouse over the menu button (on touch devices, menu still opens by tapping the menu button even if this option is enabled). Update 5.3 Added options to: - freely customize corner roundess - control menu distance from edges - apply gradient background animation (up to 3 colors) See example #8 on demo site. Update 5.2 - Added customizable WooCommerce cart icon to the header Update 5.1 - Added alternate menu button label option (will be shown when menu is opened) - Added option to apply menu content scaling animation to the menu background as well - Menu item descriptions can now be displayed either above or below menu items - Added appearance animation origin/opacity and spacing options to new experimental layout Update 5.0 - Added new experimental image-based menu design which can be used instead of or in addition to the main dropdown menu. The new menu has its own menu location (TapTap: Image-Based Menu) and customization section in the Customizer (TapTap Plugin > Image-based Menu) - Added optional stand-alone close button (useful in cases where a custom element is used to activate the menu while TapTap's own menu button is hidden)
Actualizaciones anteriores
- added options to apply additional appearance animation to menu items - added option to display secondary logo when menu is opened (useful if for example you'd like to show a light logo when the menu is closed but a dark one when the menu is opened) - it is now possible to add a background image to the header (either as full image or pattern), as well as control the background image opacity for see-through effect - added another widget area; there are now widget areas above as well as below the menu - added option to hide menu button label when menu opened Added content animation options. When menu is opened, it is now possible to add and freely adjust the following animation effects for specified site content: - Scaling - Opacity - Blur (done via CSS3, can be disabled for non-touch devices due to possible rendering issues in some versions of Chrome) - Added option to lock body scroll when menu is opened. - TapTap is no longer just a full-screen menu; width and height of the menu fly-out can now be customized. - Added optional 'smart header' option. When enabled, header elements will slide out of view when scrolled down and slide back into view when scrolled up (see example #6 on demo site). - Added option to hide TapTap on specified posts/pages - Added option for pulsating background color (view example #5 on demo site) - Added option to change pulsating background color animation speed - Added option to change heading image maximum width - Updated icon set to latest version - Added optional, heavily customizable styled scrollbar (If enabled, displayed on desktop only. On mobile, the device's...
