Cómo adaptar mi web a dispositivos móviles | Guía WORDPRESS
HTML-код
- Опубликовано: 28 июл 2020
- Aprende cómo puedes optimizar tu web para dispositivos móviles aprovechandote de las posibilidades de AMP en WordPress. Aprende a instalar y configurar AMP en tu web para mejorar el aspecto en dispositivos móviles.
Suscríbete a nuestro canal aquí 👉 bit.ly/3klwP8z
Aprenderás:
👉 Cómo añadir AMP a tu web
👉 Cómo configurar AMP en WordPress
👉 Que plugin instalar para activar AMP en WordPress
👉 Cómo revisar el aspecto de tu web en dispositivos móviles desde tu ordenador
👉 Cómo adaptar tu web a dispositivos móviles
👉 Cómo optimizar tu página web para móviles
¿Ya has terminado con este vídeo? Adelante con el vídeo #16 del curso, donde aprenderás a cómo crear una página web de venta.
▶️ • Cómo crear una página ...
Y si quieres ver el curso completo, te dejamos aquí el enlace a la playlist:
▶️ 📋 cutt.ly/Za6ItPQ
💡 ¡No olvides suscribirte a nuestro canal para estar al tanto de todos nuestros nuevos vídeos!
🗒️ INFORMACIÓN ADICIONAL
➡️ Sobre Fernando Tellado:
Fernando es el fundador de Ayuda WordPress, el blog de habla hispana más grande sobre recursos, servicios e información de WordPress, con miles de visitas y seguidores en todo el mundo. Es un profesor experto en WordPress, branding digital, SEO de contenido y optimización web. Es un participante activo, ponente habitual y uno de los fundadores de la Comunidad española de WordPress y WordCamps.
🔗 @Ayuda WordPress
🔗 / fernandot
🔗 ayudawp.com
🔗 tellado.es
➡️ Sobre SiteGround:
Desde 2004, SiteGround ha ofrecido servicios de hosting de calidad donde en la actualidad se alojan más de 2.000.000 dominios. Somos una empresa líder de hosting reconocida internacionalmente por nuestro enfoque único en alojamiento web. Con un enfoque en rendimiento, seguridad y atención al cliente superior, las soluciones creadas por SiteGround te protegen de posibles ataques y pueden hacer que tu web sea 100 veces más rápida. Además te ayudaremos desde nuestro soporte técnico rápido, experimentado y amigable, disponible las 24 horas, los 7 días de la semana en tu idioma. Los usuarios más técnicos estarán encantados con herramientas extra como certificados SSL gratuitos con cada cuenta de hosting, actualizaciones de software automático, caché a nivel de servidor, CDN, herramienta staging y la integración de GIT.
🔗 siteground.es
🔗 / siteground_es
🔗 / siteground.es
🔗 / siteground.esp
🔗 / siteground-web-hosting...
--
#CursoWordPress #WordPress #AMP #GoogleAMP #AMPWordPress 
Наука
No os olvidéis de revisar la lista completa de videos de esta Guia WordPress: cutt.ly/Za6ItPQ
señor usted es un santo!, estuve viendo 10000 videos de como hacer responsive mi web y nada me resultaba se seguía viendo horrible desde el móvil y gracias a usted entendí que era porque tenia activado AMP jajaj muchas gracias.
Maravilloso! Me tomó demasiado encontrar un tutorial guiado para adaptación en móviles. Mi web continúa en naranja pero ha incrementado de 46% a 75%, aún estoy buscando solucionar el resto de problemas como Reducir tiempo de respuesta inicial del servidor, eliminar recursos que bloqueen el renderizado y otros. Pero te agradezco muchísimo por el video, pues me ayudó un poco más con el plugin que recomendaste. ¡Capo!
Barbaro!, buenisima explicación gracias por compartir tu conocimiento.
Excelente. Muchas gracias. Ahorita tengo una situación con mi sitio web.
Muy buen tutorial. Gracias! Por cierto el chroma perforaba tus anteojos. Saludos
Brutal! Es justo lo que buscaba! Gracias
¡Gracias por tu comentario!
Muchas gracias!
Bien explicado !!
Buenos consejos maestro, pondre en practica la optimizacion de mi web en movil que me ha marcada 24 puntos, le actualizo si mejoran los tiempos de carga
¡Esperamos que te haya sido de mucha ayuda!
Muchas gracias
Hola, muy buena la información. Consulta cómo se pueden visualizar los productos de subcategorias en celular?. Gracias
La neta !! Gracias !!
Te agradezco por el vídeo!
pero me gustaría saber si me puedes ayudar con respecto a la versión móvil de mi página. Tengo el tema Astra que se adapta muy bien a los móviles y tablet, pero al desplegar el menú (tres lineas), las letras se ven muy grandes y se amontonan entre sí, en vez de desplegarse todas hacia abajo.
Hola amigo, muchas gracias por tu video. Una pregunta por favor. ¿ Tu sabes porqué mi sitio web no se visualiza desde IPhone? Sólo de Smartphone. que raro eso.. Agradecería mucho pudieras responderme si sabes. Un abrazo y muchas gracias ..
hola en mi caso ya esta adaptada, pero al activar un plugin que se llama pixel your site cambia la visualización en el móvil como lo podría corregir?
saludos estupendos sus tutoriales, me permito hacerle una pregunta como puedo poner un menú stiki en wordpress.
Mira a ver si te ayuda este artículo de mi blog:
ayudawp.com/cabecera-menu-fijo/
Saludos, Fernando, en mi blog lo de la usabilidad en móviles no estaba dando problemas, pero ayer comenzó a fallar, me sale primero que todo está bien (cuando verifico en el google search console) y después me dice que falla, ¿por qué será ese cambio? gracias de antemano
Hola! no logro entender porque en mi pc veo el menu en determinado orden y en el movil se ve distinto. Mi tema es Responsive. Borre el caché del google chrome del movil y sigue igual. que puede ser?
Hola una pregunta, hice las vistas de todo lo que comenta y todo bien pero cuando lo veo al IPAD AIR directo al dispositivo no se ve bien tiene algunos detalles . Que se puede hacer en este caso?
Saludos cordiales, por que mi sitio web no se carga en un iphone (todas las versiones), se carga con normalidad en cualquier dispositivo móvil pero menos en un iphone.
Hola, Edgar. Este es un error bastante extraño. ¿Has probado a utilizar las devtools de tu navegador para simular la visita desde un dispositivo móvil? De la misma manera te recomendaría revisar los plugins de optimización que puedas estar utilizando actualmente para ver si están causando conflictos.
Mi web no se ve en Iphone solo Android
y eso que tengo una de las mejores plantillas de pago para Inmobiliaria :( Habrá alguna opción para ello? Muchas gracias
Al ver este video entré en crisis jaja
La interfaz del AMP a cambiado un poco, al seleccionar modo "Lector" de una me dijo que no era recomendable, aún así lo dejé como usted especificó.
Realicé los pasos con el SG Optimizer y quedé en 65% para Teléfonos y 88% para Ordenadores.
Y eso que aún no hay casi contenido en la web. ¿Que más puedo hacer para optimizar? El apartado de Medios de SG Optimizer no lo toqué.
Has hecho bien, el modo lector es el más compatible con LO QUE PUEDA PASAR EN EL FUTURO, porque Google no se sabe nunca qué hará con sus proyectos.
Para empezar deberías aplicar la optimización de imágenes y la carga diferida, muy importante, pero sobre todo no te obsesiones con los medidores de velocidad, si tu web, desde el punto de vista humano, se percibe, se ve que carga razonablemente rápido (en torno a los 3 segundos en cargar completamente) es que está perfecta.
¡Empieza a crear contenidos! Tu web optimizada no servirá de nada a nadie si no tiene nada que ofrecer ;)
@@FernandoTellado excelente, pues así será. Muy buenos consejos 😉 lo felicito por su contenido y espero nos siga ofreciendo mas.
Buenas, cuando activo el AMP y compruebo si funciona no sale nada de la página solo el nombre de la plantilla
En ese apartado aparece como si fuera responsive, pero a su vez, aparece diferente a como yo lo veo desde mi celular
Buenas
mil gracias de antemano, tenngo un problema y cuando visualizo mi pagina en la version movil muestra el logo del demo de la plantilla pero en la version escritorio si sale perfecto mi logo, por favor me pueden ayudar, que tengo mal?
Hola Nicolas, gracias por tu comentario. En tu caso habría que revisar las opciones de la plantilla, te recomendaríamos contactar con el desarrollador de la plantilla para revisar que podría estar causando la incidencia. ¡Un saludo!
Haga por favor un video de como enlazar a una aplicación Android o ios
Todo muy bonito, pero si me permites me gustaría invitarte a que me demuestres que se puede hacer una web utilizando Elementor, que se adapte a toda clase de dispositivos móviles, pero no en el simulador de Elementor. En vivo en diferentes modelos de dispositivos móviles y comprobarás que sin código no es posible. Me encantaría que me demostraras que estoy equivocado. Saludos !!!
Hola amigo lo pudiste solucionar? , yo tambien busco solucion a eso , gracias
@@antonymoreno_ .Mira desgraciadamente no tengo un sistema general, lo que he hecho es utilizar los 3 puntos de ruptura que vienen por defecto y tener 2 móviles 1 de pantalla grande y otro más pequeño. Yo utilizo el Motorola E4 y el LGX Power. , luego verifico con un ordenador portátil y una Tablet y procuro que los Títulos en general tengan suficiente márgenes para permitir el ajuste a los diferentes tipos de pantalla. Yo trabajé con WIX y en muchísimas cosas es fabuloso. Todos los seguidores de WP lo miran con desprecio pero en la actualizad luego de muchísimas actualizaciones creo que es lo mejor. Cuál es el problema? Que te atas para siempre a pagarles una mensualidad y a mi WP además del hosting y el dominio y Elementor PRO, me sale gratis. Pienso que tiene que haber un sistema en que hacer una web con WP sea sencillo y funcione para todas las pantallas, pero nadie lo dice de momento. Un saludo y suerte
Eres programador?
Hola pueden ayudarme a solucionar esta falla en mi página web, cuando ingreso al sitio web desde un móvil, me aparece una opción de salir de la versión móvil y todo está modificado en las posiciones de los bloques por favor ayuda
Ai tabien me pasa lo mismo ya lo solucionaste bro??
Cuando le doy a comprar en el ordenador me lleva al lugar adecuado pero desde movil no funciona el boton. Que puede ser?
Hola Mario, parece el botón podría no estar configurado correctamente. Te recomendaríamos revisar que el diseño de la página es totalmente compatible con la versión móvil (puede que haya una actualización que solucione este error) y si aún así sigue dando error, sería necesario revisarlo con un diseñador.
Esperamos que esto te sea de ayuda. ¡Un saludo!
en ese link lo explica fácil
Hola, cuando modifico la versión móvil , se cambia modo escritorio y tablet.
¡Hola! Ten en cuenta que los cambios que realices se aplican al tema que estes utilizando y esto afecta a todas las versiones de la web. Te recomendamos revisar las distintas opciones del tema para asegurarte que los cambios son correctos en todas las versiones.
Hola. Los plugins en wordpress son para planes business, para planes menores no se puede. Entonces, cómo se hace para adaptar un sitio para móviles sin posibilidad de instalar plugins?
Hola, Matias. Gracias por tu comentario. Me temo que estás utilizando WordPress.com para tu web. En nuestros vídeos del curso utilizamos una instalación de WordPress.org alojada en los servidores de SiteGround en la cual se pueden instalar plugins sin depender del tipo de plan contratado. Te dejo el enlace a este artículo donde se detallan las diferencias: boluda.com/tutorial/diferencias-entre-wordpress-org-y-wordpress-com/
Hola buenas tardes, estoy editando una página con wordpress y por algún motivo que aún no logro descifrar en mi computadora puedo reproducir un video y en mi dispositivo móvil no, me podrían ayudar por favor
¡Hola! ¿Qué error aparece al intentar reproducir el vídeo desde el dispositivo móvil? ¿Desde que plataforma has insertado el vídeo?
¡Hola! Intenté varias veces, pero no se activa el complemento SG Optimizer. ¿Cuál es la solución?
¡Hola! Ten en cuenta que SG Optimizer solo esta disponible para clientes de SiteGround. Si ya eres cliente, por favor, ponte en contacto con nuestro equipo para poder revisar la incidencia. Estamos disponibles las 24 horas siguiendo los pasos de este enlace: stgrnd.co/contacta
hola buenos dias, en mi caso yo le agregué un slider a mi pagina y esta estaba perfecta en la pc, pero en el celular estaba desefoncada y muy grande, lo he intenado reducir y editarla de principalmente solo en el tamaño para celular y aun asi sigue sin estar centrada, agradeceria algún consejo, gracias
Depende mucho del tema que uses, pero vamos, que la tendencia actual, y lo más recomendable, es crear un slider para escritorio y otro solo para móviles. Con el editor de bloques y el plugin EditorsKit es facilísimo.
@@FernandoTellado y como creas un slider para escritorio y otro para movil..yo estoy usando wordpress y elementor pero me pasa que hago arreglos en elementor en imagenes y al final no los agarra la pagian web cuand los reviso en otro dispositivo
tengo muchas dudas si kieres ayudarme me dices
@@pauladonaire7870 Claro, precisamente con Elementor puedes especificar en qué dispositivo se verá cada elemento, cada sección. Creas 2, una para escritorio y otra para móviles diferente
@@FernandoTellado gracias averiguare mas ..para poder hacerlo
Se agradece que expliques los plugins, pero usado en una pagina vaciá la verdad no es agradable.
¡Gracias por tu comentario! Lo tendremos en cuenta para próximos vídeos.
04:20:00 la hora adecuada
Alguien sabe como hacer para que la pantalla a los lados del notch (por ejemplo de iphone) tenga el mismo color que la cabecera de mi web?
¡Hola! Tienes varias formas de realizarlo a través de código CSS - stephenradford.me/removing-the-white-bars-in-safari-on-iphone-x/
Hola amigo, mi página se adapta a la versión móvil, pero tengo un inconveniente, tengo un enlace para abrir archivos Pdf y le doy clic y no se abre, en la version de escritorio si. Cuando en el escritorio coloco la versión móvil y voy a darle clic al enlace para abrir el archivo me sale un icono de prohibido, ojo y en mi movil tengo instalado acrobat reader y el visor, y no es eso. Como hago?. Gracias
Solucionaste tu problema?
Yo tengo un problema parecido al desplegar mi menú en moviles, se ve todo apelotonado y es muy incomodo visualmente.
No amigo lo que hice con el pdf fue que lo coloque como imagen@@ReyRojoOficinaArq
Hago cambios en mi página, pero en el movil no se ven esos cambios, como puedo solucionar, ayuda porfavor
Hola, es importante verificar que el tema que estas utilizando sea compatible con versión móvil. También tienes que revisar si hay algún tipo de caché activada, y vaciarla si fuera asi, para que se vean los cambios de manera inmediata.
Y como se puede optimizar para todos los dispositivos o no se puede
Hola Joel, en muchos casos lo que tendrás que buscar será un tema 'responsive' que se adapta a cualquier tipo de dispositivo que utilices (tablet, móvil, distintos tamaños de pantalla...etc.). Adaptar a Móvil puede solucionar muchos de estos casos pero para que sea compatible para todos los dispositivos lleva más trabajo.
Un saludo
Ayudaaaaa!
En la versión móvil de mi web. Me aparece un botón debajo del footer que dice "salir de la versión móvil". Como lo quito?
Hola José, gracias por tu comentario. Parece que esta es una opción dentro del tema que tienes seleccionado. Sería necesario revisarlo en la documentación del tema para eliminarlo. También puedes consultarlo directamente con el creador del tema.
Un saludo
como accedo al personalizador?
¡Hola, Maryori! Puedes acceder al personalizador desde el Panel de control de WordPress > Apariencia > Personalizador
instale el plugin pero no me deja activar la seccion de productos, me sale este error Error: Ha habido un error crítico en tu web.Aprende más sobre la depuración en WordPress.
Me pasó exactamente lo mismo. Cómo lo solucionamos? O mejor utilizar otro plugim como autoptimizer? Gracias por el contenido!!!
Pues no conozco ninguna incompatibilidad, lo ideal sería que avises al autor del plugin explicándole tu instalación concreta (tema, plugins, etc) para que lo revise. Así sin ver más imposible decirte qué puede ser. yo lo tengo instalado en casi todos los sitios y sin problemas
Y si no es para wordpress sino para un sitio convencional?
¡Hola! Cada sitio web tiene sus propias opciones para optimización web. Te recomendamos revisar en específico para tu sitio.
¿Cuál es la mejor forma de trabajar "RESPONSIVO"? ¿En porcentaje "%", en píxeles "px", en "EM" o en "REM"?
En porcentaje (%)
Donde esta el personalizador, se pierde uno solo empieza el video
Hola, Cristobal. Puedes acceder al personalizador de WordPress desde el Panel de administración >> Apariencia >> Personalizar
Yo mejor uso programación
Hola, Carlos. Claro, hay diferentes maneras para realizar las adaptaciones. ¡Un saludo!
@@SitegroundEspana ok :D