[{"@context":"https:\/\/schema.org\/","@type":"BlogPosting","@id":"https:\/\/xn--adrimadiseo-beb.com\/tutoriales-wordpress\/como-crear-superposiciones-y-desplazamientos-de-flipbox-en-wordpress\/#BlogPosting","mainEntityOfPage":"https:\/\/xn--adrimadiseo-beb.com\/tutoriales-wordpress\/como-crear-superposiciones-y-desplazamientos-de-flipbox-en-wordpress\/","headline":"C\u00f3mo crear superposiciones y desplazamientos de Flipbox en WordPress","name":"C\u00f3mo crear superposiciones y desplazamientos de Flipbox en WordPress","description":"\u00bfDesea agregar superposiciones de flipbox y efectos de desplazamiento de im\u00e1genes a su sitio de WordPress? Incluso si est\u00e1 utilizando un tema de WordPress de ... Leer m\u00e1s<\/a>","datePublished":"2021-06-23","dateModified":"2021-06-23","author":{"@type":"Person","@id":"https:\/\/xn--adrimadiseo-beb.com\/author\/mitzamitza-es\/#Person","name":"adrimadise\u00f1o","url":"https:\/\/xn--adrimadiseo-beb.com\/author\/mitzamitza-es\/","image":{"@type":"ImageObject","@id":"https:\/\/secure.gravatar.com\/avatar\/4f04015a3698191a873267b006e8e8789ce30b6ee841a5518a6033860d50fe16?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/4f04015a3698191a873267b006e8e8789ce30b6ee841a5518a6033860d50fe16?s=96&d=mm&r=g","height":96,"width":96}},"publisher":{"@type":"Organization","name":"adrimadise\u00f1o.com","logo":{"@type":"ImageObject","@id":"https:\/\/xn--adrimadiseo-beb.com\/wp-content\/uploads\/2022\/05\/cropped-logo_adrima.png","url":"https:\/\/xn--adrimadiseo-beb.com\/wp-content\/uploads\/2022\/05\/cropped-logo_adrima.png","width":450,"height":90}},"image":{"@type":"ImageObject","@id":"https:\/\/xn--adrimadiseo-beb.com\/wp-content\/uploads\/2021\/06\/Como-crear-superposiciones-y-desplazamientos-de-Flipbox-en-WordPress.png","url":"https:\/\/xn--adrimadiseo-beb.com\/wp-content\/uploads\/2021\/06\/Como-crear-superposiciones-y-desplazamientos-de-Flipbox-en-WordPress.png","height":340,"width":550},"url":"https:\/\/xn--adrimadiseo-beb.com\/tutoriales-wordpress\/como-crear-superposiciones-y-desplazamientos-de-flipbox-en-wordpress\/","about":["Tutoriales Wordpress"],"wordCount":1357,"articleBody":"\u00bfDesea agregar superposiciones de flipbox y efectos de desplazamiento de im\u00e1genes a su sitio de WordPress?Incluso si est\u00e1 utilizando un tema de WordPress de alta calidad, es posible que se sienta limitado por las opciones de personalizaci\u00f3n. Los flipboxes y las im\u00e1genes flotantes a\u00f1aden efectos animados llamativos a su sitio.En este art\u00edculo, le mostraremos c\u00f3mo agregar superposiciones de cuadros abatibles y desplazamientos de im\u00e1genes a su sitio de WordPress. \u00bfQu\u00e9 es un Flipbox?Una caja giratoria es una caja que se voltea cuando pasa el mouse sobre ella. Puede agregar este efecto de animaci\u00f3n flotante a secciones espec\u00edficas de su sitio web, incluidos cuadros de texto e im\u00e1genes.El t\u00e9rmino proviene de la caracter\u00edstica \u00fanica de “voltear” que ocurre cuando el mouse se desplaza sobre la imagen. Puede controlar c\u00f3mo se voltea la imagen, junto con la informaci\u00f3n y el dise\u00f1o de ambos lados de la imagen. Si su sitio web es relativamente est\u00e1tico, puede usar un efecto flipbox para que se sienta m\u00e1s interactivo. Por ejemplo, puede agregar un flipbox flotante de imagen a una p\u00e1gina de precios de productos. De esa manera, cuando los usuarios pasen el cursor sobre sus niveles de precios, se mostrar\u00e1 el precio.O, si es un profesional independiente, puede agregar logotipos de la empresa con la que ha trabajado en ese flip y un enlace a cada proyecto. Si bien estos efectos animados pueden mejorar la experiencia del usuario de su sitio web, es importante no exagerar. Piense en el efecto flipbox como agregar condimento a una comida. Est\u00e1 ah\u00ed para mejorar los sabores e ingredientes existentes, pero demasiado y arruinar\u00e1 el plato. Dicho esto, echemos un vistazo a c\u00f3mo puede agregar superposiciones de flipbox y efectos de desplazamiento de imagen a su blog o sitio web de WordPress. C\u00f3mo crear superposiciones de Flipbox y efectos de desplazamiento en WordPressPuede agregar flipboxes y efectos de desplazamiento a su sitio de WordPress utilizando muchos m\u00e9todos, como el creador de p\u00e1ginas Elementor, o agregando CSS personalizado.Sin embargo, el enfoque que recomendamos es utilizar el Flipbox: superposici\u00f3n de im\u00e1genes de cajas abatibles de Awesomes enchufar. Este complemento es flexible y f\u00e1cil de usar. Es el mejor complemento de WordPress para flipbox e imagen flotante.La versi\u00f3n gratuita del complemento le ofrece rapidez y sencillez. Una vez que el complemento est\u00e1 instalado, puede agregar r\u00e1pidamente flip boxes atractivos a su sitio. Si necesita m\u00e1s opciones de personalizaci\u00f3n, es posible que desee actualizar a la versi\u00f3n premium del complemento. Esto le permite controlar los colores de sus flipboxes y agregar CSS personalizado. Puede encontrar que las plantillas existentes ya se ven muy bien cuando se agregan a su sitio, en este caso, no es necesario actualizar.Lo primero que deber\u00e1 hacer es instalar y activar el Flipbox: superposici\u00f3n de im\u00e1genes de cajas abatibles de Awesomes enchufar. Para obtener m\u00e1s detalles, consulte nuestra gu\u00eda paso a paso sobre c\u00f3mo instalar un complemento de WordPress. Una vez que el complemento est\u00e1 instalado y activado, puede crear su primer flipbox yendo a Flip Box \u00bbCrear nuevo.Esto muestra toda la selecci\u00f3n de plantillas. Si eso no es suficiente, puede hacer clic en la opci\u00f3n de men\u00fa ‘Importar plantillas’ para obtener a\u00fan m\u00e1s plantillas que puede usar.Con la versi\u00f3n gratuita del complemento, hay 5 plantillas diferentes para elegir, adem\u00e1s de otras 10 plantillas que puede importar.Para importar una nueva plantilla personalizable, haga clic en el bot\u00f3n “Importar” junto al n\u00famero de estilo.Ahora es el momento de seleccionar y comenzar a personalizar su plantilla. Debe hacer clic en ‘Crear estilo’ para cargar su primer dise\u00f1o de flipbox. Esto abrir\u00e1 un men\u00fa emergente donde puede nombrar su flipbox y elegir qu\u00e9 dise\u00f1o desea personalizar.Las opciones 1\u00aa, 2\u00aa y 3\u00aa de ‘Dise\u00f1os’ coinciden con los flipboxes individuales del dise\u00f1o. Haga clic en ‘Guardar’ una vez que haya realizado sus elecciones.Es importante mencionar que su dise\u00f1o final coincidir\u00e1 estrechamente con la plantilla de flipbox, por lo que es mejor elegir una plantilla que se parezca a c\u00f3mo desea que se vea en su sitio web.Hay tres pesta\u00f1as principales que usar\u00e1 para cambiar el aspecto de su flipbox, ‘General’, ‘Front’ y ‘Backend’.En cada una de estas pesta\u00f1as, puede cambiar las fuentes, el relleno y los m\u00e1rgenes. Pero creemos que las opciones predeterminadas ya se ven muy bien.A continuaci\u00f3n, cambiaremos el texto en ambos lados del flipbox. Coloca el cursor sobre el flipbox en la parte inferior de la pantalla y haz clic en “Editar”.Esto abrir\u00e1 una ventana emergente que le permite cambiar el texto frontal, el texto posterior y la imagen de fondo.Para cambiar el t\u00edtulo, edite el cuadro de texto ‘T\u00edtulo frontal’ y el cuadro ‘Icono de fuente:’ si desea que se muestre un icono diferente.Si desea agregar una imagen de fondo, haga clic en ‘Cargar imagen’ a la derecha de la opci\u00f3n ‘Imagen frontal’.A continuaci\u00f3n, cargue una nueva imagen o seleccione una imagen de su biblioteca de medios existente. Despu\u00e9s de eso, seguir\u00e1 la misma serie de pasos para la parte posterior del flipbox en ‘Configuraci\u00f3n de backend’. Aqu\u00ed puede cambiar el t\u00edtulo y el texto que se muestra cuando se voltea la tarjeta.Tambi\u00e9n puede cambiar los campos ‘Texto del bot\u00f3n de backend’ y ‘Enlace’. Estos cambian el texto del bot\u00f3n y a d\u00f3nde ir\u00e1n los usuarios cuando se haga clic en \u00e9l.Finalmente, haga clic en ‘Cargar ahora’ para cambiar la imagen de fondo en la parte posterior del flipbox.Igual que el anterior, puede cargar una imagen o seleccionar una de su biblioteca de medios.Una vez que haya terminado de editar, aseg\u00farese de hacer clic en el bot\u00f3n “Enviar” para guardar los cambios. Notar\u00e1 que sus nuevos cambios aparecer\u00e1n en la ventana ‘Vista previa’ de inmediato. Si desea crear una fila completa de flipboxes, haga clic en el \u00edcono ‘+’ en el metacuadro ‘Agregar nuevos flipboxes’. Aparecer\u00e1 un cuadro emergente similar al anterior que le permite personalizar su segundo flipbox.A estas alturas ya ha creado y personalizado sus flipboxes, por lo que es hora de agregarlos a su sitio de WordPress.La forma m\u00e1s sencilla de hacer esto es usando el shortcode incluido. En el lado derecho de la pantalla, hay un cuadro de meta con la etiqueta ‘C\u00f3digo corto’, copie el c\u00f3digo corto que se parece a la imagen de abajo.A continuaci\u00f3n, navegue a una p\u00e1gina o publicaci\u00f3n donde le gustar\u00eda agregar el flipbox y pegue su c\u00f3digo corto.Luego, haga clic en ‘Publicar’ o ‘Actualizar’ si su publicaci\u00f3n ya est\u00e1 publicada. Sus nuevos flipboxes ahora estar\u00e1n activos en su sitio. Tenga en cuenta que a medida que cambia el tama\u00f1o de la ventana de su navegador, los flipboxes se ajustan ya que responden al 100%. Este complemento tambi\u00e9n incluye un widget de flipbox que puede agregar a cualquier \u00e1rea de widgets compatible con su tema. Para hacer esto, navegue a Apariencia \u00bbWidgets y busque el widget titulado ‘Flipbox – Awesomes Flip Boxes Image Overlay’.Luego, puede arrastrar y soltar el widget en su ubicaci\u00f3n preferida.Finalmente, ingrese el ID de estilo, que se puede encontrar en el men\u00fa principal del complemento Flipbox, y haga clic en ‘Guardar’.Esperamos que este art\u00edculo le haya ayudado a aprender c\u00f3mo agregar superposiciones de flipbox y hovers a su sitio de WordPress. Es posible que tambi\u00e9n desee ver nuestra gu\u00eda sobre la optimizaci\u00f3n de im\u00e1genes para SEO y nuestra gu\u00eda de soluci\u00f3n de problemas para solucionar problemas comunes de im\u00e1genes de WordPress. Si le gust\u00f3 este art\u00edculo, suscr\u00edbase a nuestro Canal de Youtube para tutoriales en video de WordPress. Tambi\u00e9n puedes encontrarnos en Gorjeo y Facebook. 4.1 \/ 5 ( 300 votos ) "},{"@context":"https:\/\/schema.org\/","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Tutoriales Wordpress","item":"https:\/\/xn--adrimadiseo-beb.com\/tutoriales-wordpress\/#breadcrumbitem"},{"@type":"ListItem","position":2,"name":"C\u00f3mo crear superposiciones y desplazamientos de Flipbox en WordPress","item":"https:\/\/xn--adrimadiseo-beb.com\/tutoriales-wordpress\/como-crear-superposiciones-y-desplazamientos-de-flipbox-en-wordpress\/#breadcrumbitem"}]}]