Logo Marieu Corp
TUTORIAL

⚡Optimizar Tabla de Precios en versión móvil con Elementor

Optimizarás en versión móvil. Aprenderás a crear plantilla y usar shortcode. Con vídeo paso a paso.

 

ELEMENTOR

OPTIMIZACIÓN

Mar 20, 2024

Montoya A.

20min de lectura

Reproducir video acerca de Optimizar Elementor

Hola amigos de Marieú Technology Corporation, ¿cómo nosotros podemos optimizar nuestra página de precios? No te preocupes, en esta guía, paso a paso, aprenderás cómo optimizar una tabla de precios en versión móvil con Elementor.

Elementor es un maquetador de páginas  web o «page builder». Permite crear y diseñar páginas web mediante plantillas, widgets o bloques predefinidos. La instalación del plugin de Elementor se realiza por medio de WordPress. Donde, encontrarás una versión gratuita y otra de pago, para este último, con mayor cantidad de widgets y plantillas.

¿Cómo optimizar nuestra página de precios?

Entonces, vamos a optimizar nuestra página de precios, dentro de nuestro móvil nosotros vamos a hacer algunas que otras configuraciones, y, como resultado, tendremos que va a estar mucho
mejor optimizado. La vista de las tablas de los precios, se va a ver adecuadamente.

Tenemos lo que es el diagrama de arquitectura, recuerden que  esta optimización lo vamos a usar con Wordpress y Elementor. ¿Cuál sería ese comparativo, el antes  y el después? Los textos de la tabla están
desordenado, no están alineados. Por ejemplo, si aplicamos algún descuento, esta encima de lo que es el ahorro, cuando debería estar todo en  la misma línea.

Como solucionar problema de carga lenta en el editor de Elementor 1

Diagrama de Aquitectura: Optimizar página de precios para móviles en Elementor
Fuente: Propia, mediante software Miro.

También vemos la tabla está muy angosta, debería estar por lo menos un poco más ancho. El detalle de plan también está demasiado reducido, está muy angosto. Y  tenemos un comparativo aquí de cómo va a quedar finalmente. Tiene una dimensión mucho más cómoda  para el usuario, hemos incrementado, todo en una sola línea, el descuento, el porcentaje de ahorro, el dólar y el precio están en una distancia
adecuada. El detalle del plan también está alineado a la izquierda, sabiendo que la cantidad de texto del plan puede llegar todavía desbordar  la tabla, pero lo hemos centrado adecuadamente.

Antes de Optimizar pagina de precios para moviles en Elementor

Antes de Optimizar página de precios para móviles en Elementor.
Fuente: Propia, mediante software Elementor.

Vemos que el Plan Little está centrado, los  anuncios por correo pequeño también, concentrados adecuadamente. Eso serían los resultados que obtendríamos, ¿cómo nosotros llegamos a esos resultados? realizamos lo siguiente, tenemos  que iniciar con la actualización del plugin Wordpress y Elementor.

Después de ello, vamos  a crear una plantilla e insertar la sección. Vamos a copiar la sección de la página web y lo vamos a  crear dentro de una plantilla. Seguidamente, vamos a optimizar el plan mensual y anual en modo móvil  vertical. Recuerden que, para Elementor tenemos lo que son cuatro tipos de modos de vista. Hay una  vista panorámica, hay una vista versión desktop, hay otra vista en versión tablet y, finalmente, hay una vista en modo móvil.

Como punto número 4, vamos a guardar cambios y copiar el código de Shortcode. Cuando se crea, edita y guarda, se genera un código Shortcode. Ese código Shortcode,  nosotros lo vamos a copiar y lo vamos a insertar dentro de nuestra página de precios. Finalmente,  recordar que se elimina caché. Es más, no solamente en la etapa final vamos a eliminar  caché, vamos a eliminar caché cuando nosotros
estamos editando. Eliminamos caché y actualizamos  los cambios. Entonces aquí estamos en Wordpress, en una etapa inicial, nosotros tenemos que crear desde cero la plantilla. Ponemos añadir nueva y
aquí seleccionamos página.

Aquí vamos a colocar  el nombre de precios anuncios correo mensual y creamos. Una vez que termine de crearse,  nosotros vamos a agregar una sección aquí, en el Navigator; si no está habilitado el Navigator,  recuerden que aquí lo pueden habilitar «Navigator». Una vez abierto el Navigator, vamos a pegar la sección desde nuestra página web. Esta es nuestra página de precios anuncios  de correo electrónico. En esta página, nosotros vamos a copiar la sección. Clic derecho,  copiamos solamente la sección de las tablas, recuerden, y aquí, en la plantilla, pegamos, seleccionamos y pegamos.

Entonces, aquí tenemos lo que es el modo de edición, y en Elementor,  para nuestra página de precios y anuncios por correo electrónico. Entonces, antes recordarles  que en qué consiste ese servicio. El servicio que estamos ofreciendo es de anuncios por correo, donde, nos permite, a cada uno de ustedes, enviar mensajes publicitarios, bienvenidas, de repente  algunos newsletter, boletines informativos, promociones, entre otros. Entonces, el servicio  de anuncios por correo, estaría conformado por tres planes: Plan Little, el Plan Robust y el Plan  Elastic. Son tres planes que está conformado este servicio, que se divide para periodos mensual, o sea un pago por mes, y tenemos un pago por año, por cada año.

Entonces, ahora vamos a ingresar al modo de edición de la versión móvil, ponemos modo adaptable y vamos a colocar móvil vertical. ¡Ahí  está! como lo comentamos inicialmente, hay desborde del texto, falta alineación, ancho, falta mejorar los espacios y centrado entre los que son los precios y el dólar, falta también  centrar el botón «lo quiero» para solicitar dicho plan. Además, algo similar con los demás,  algo similar con los demás planes. Inicialmente, para que agreguen, en nuestro caso ya está  agregado lo que es el botón toggle, palanca o también le decimos switch, nosotros vamos a buscar  aquí en widgets Toggle, y ¡aquí está! Recuerden, seleccionamos, arrastramos y soltamos.

Entonces,  ahí le pueden cambiar el color, dependiendo de la página web de su empresa, ponemos estilo,  anual y aquí indicators background, el fondo de color, y lo cambiamos. Imaginemos que es verde y ahí está, se refleja el color verde. Una vez que tengan ello. Si usted visualizan aquí, tenemos  la opción de editar contenido. Algo similar aquí. Entonces, vamos a continuar con el de abajo, ¡ahí  está! Entonces, ponemos editar contenido, edit content. Recuerden que es en la parte de Toggle,  si queremos nosotros diseñar cada una de estas tablas, vamos a realizar un vídeo en particular  para ello.

De momento, solo nos vamos a centrar en optimizar las tablas de precios. Colocamos  editar contenido y, dentro lo vamos a insertar
como Shortcode, sección, columna y aquí tenemos  Shortcode. Entonces, ahí tenemos Shortcode, ¿cuál sería el código que se ha insertado?  y aquí Shortcode de elementor templates ID 4038.
Entonces, de ¿dónde llega este Shortcode? llega de  la plantilla o del template que tenemos diseñado nuestra tabla de precios de correo electrónico.  Si nosotros queremos editar el contenido de ese Shortcode, tenemos que ingresar a plantillas.

¡Aquí esta plantillas¡ y ponemos plantillas guardadas, de las cuales, vamos a ingresar a las  plantillas de precio mensual correo electrónico. Vamos a editarlo como elementor. Entonces ya aquí,  en la vista edición, tenemos solamente lo que son las tablas, donde cada actualización  que hagamos aquí, en las tablas, se van a ver aquí. Ya no es necesario, de repente ingresar,  guardar, colocar editar contents, widgets area, ya no es necesario. Automáticamente,  con este Shortcode, cualquier cambio aquí se va a ver reflejado directamente en producción,  en nuestra página de precios.

De hecho, es mucho más sencillo, es mucho más rápido porque a veces  si estamos utilizando Rank Math. De hecho, les hacemos recordar que ya tenemos un vídeo  de Rank Math SEO. Si vemos, ya tenemos instalado el SEO y, el hecho que está instalado, a veces se  hace un poco lento la edición. Recomendamos, en este caso, trabajarlo con Shortcodeshort, es integración, la plantilla llega directamente aquí. Para no estar haciendo cambios aquí y,  de repente, sentir un poco el sistema lento, hacemos los cambios directamente aquí, en la  plantilla.

Entonces, vamos a optimizar, ponemos modo de vista móvil, colocamos móvil vertical,  abrimos el Navigator. Entonces, primero vamos a reducir el espacio, para eso nosotros nos vamos a  ir aquí a sección, ponemos sección, la sección que abarca las tres columnas o sea los tres planes,  vamos a irnos avanzado, en avanzado tenemos el margen y el relleno. Vamos a ponerlo «0», se va  a incrementar, va a ser un poquito más grande. Vamos a ponerlo cero y recuerden también que,  si el enlace de los valores está activado, como en este caso está sombreado, o sea está activado,  todos los valores se van a mover al mismo tiempo.

Si subo uno, se van a mover las cuatro, las cuatro direcciones. Tanto arriba a la derecha abajo de la izquierda se va a mover al mismo tiempo.  Uno que se van a centrar el mismo valor y, dos, que se van a incrementar en la misma proporción.  Quiero que noten el cambio, voy a cambiarlo y ¡ahí está! Nosotros lo vamos a dejar en cero y aquí,  en el margen, también lo vamos a dejar en cero. ¿Qué efecto va a tener en esa tabla? va  a reducir un poco la altura. Vamos a colocar cero y ahí está. Ahora también, donde nos dice auto,  quiere decir que nosotros ya no podemos hacer un cambio en dichas direcciones. Actualizamos y vamos  a ver los resultados. Recuerden que esta es la plantilla y esto ya es nuestra página de precios,  donde está todo.

Entonces, ya hemos optimizado la sección que contiene las tres columnas,  ahora vamos a entrar a la primera columna, es decir, dónde se encuentra el primer plan, el Plan Little. Seleccionamos la primera columna, vamos a desplegar, para reconocer que tenemos un  total de dos columnas y una sección interior. Si abrimos la última columna y encontramos todos los textos, imágenes, iconos, espacios, botones, entre otros, ahí tenemos a quién pertenece. Por ejemplo, este editor de texto pertenece a los anuncios por correo pequeño. Cerramos la columna y podemos  utilizar la primera columna.

Vamos avanzado, vamos a desactivarlo y volvemos a activarlo, desactivarlo y volvemos a activar. Entonces, notamos que ya no deja un espacio tanto por  la izquierda como por la derecha; y si bajamos un poco, notamos la diferencia con la siguiente  tabla, que todavía no está optimizada. Lo que sigue es la sección interior. Seleccionamos y algo  similar, vamos avanzado desactivamos y volvemos a activar, tanto el margen como el relleno y, finalmente, la última columna, vamos avanzado, al margen y relleno en cero, desactivamos y volvemos  a activar.

Ahora vemos que está totalmente al ras, tanto arriba, izquierda como la derecha,  está al mismo nivel que el bord. Ahora para dejar
un pequeño espacio y se diferencia la tabla, vamos  a hacer lo siguiente: vamos a ir a la sección interior y vamos a colocar, solo de relleno,  vamos a colocar 15, vamos a ver la diferencia aquí, 15 ¡ahí está! Ahora vamos a continuar  con los descuentos, precio del día antes, el que está tachado, y el precio de ahora, el que se está ofreciendo el servicio del Plan Little. Listo, reducimos un poco el tamaño, vamos a colocarle  30, seleccionamos la columna, vamos a colocarle la diferencia de 70 para un 100% y ¡ahí está! Vemos  también que dejar un espacio.

Aquí vemos que el precio está para la izquierda tenemos que centrarlo, vamos a dejarlo en 70 y aquí, el dólar, vamos a dejar la diferencia, vamos a colocar en 30, ¡listo! Entonces, ya vemos que se está centrando hacia los textos y los porcentajes del ahorro y los precios. Ahora aquí vamos a alinear un poco más al centro, seleccionamos el costo y, en  contenido, seleccionamos y ponemos al medio, alineación centrada. Entonces subrayamos y ponemos alineación centrada, ¡ahí está! En el caso que veamos no cambia la derecha, no cambia el centro, recomendamos lo siguiente: nos vamos avanzado y actualizamos, desactivamos y volvemos a activar el margen y el relleno, tiene que estar en cero para que se pueda desplazar.

Vamos con los siguientes que serían los detalles en plan, vemos que el icono está totalmente al borde tabla, lo vamos a meter un poco más, al igual que el texto, seleccionamos en avanzado vamos a brindarle un poquito más de margen. Vamos a ponerle desactivamos y ponemos 10, para que se desplace un poco a la derecha. Entonces,tiene un margen a la izquierda de 10, lo mismo con los demás, avanzado desactivamos y ponemos 10.

Entonces, tenemos toda la lista como margen izquierda de 10, 500 clientes envíos de correos ilimitados, dos ventanas de formulario campañas anuncios por correo limitados, opción de html personalizados, segmentación, galería imágenes campañas RSS ,que es la frecuencia de envío, contiene un blogs cautivador, incluye análisis de informe gráfico, incluyen tres landing page y, finalmente, atenciones del cliente de 24/7.

Además, podemos mejorar el botón de la siguiente manera, agregando un espacio en la base, podemos duplicar esta capa y podemos agregar el botón abajo. Entonces, seleccionamos el espaciador, clic derecho duplicar, duplicamos, vemos el botón y arriba, ¡ahí está! Ambos espaciadores tienen 10 unidades de píxeles. Vamos a ponerlo en 25, 25 el primero y para el segundo vamos a colocar 25 también y ¡listo!

Entonces, ya para concluir esta optimización de la primera tabla del Plan Little, vamos a agregar un espaciador de 30 píxeles en la parte superior. Entonces, nos vamos a la parte de widgets y colocamos espaciador, seleccionamos, arrastramos y soltamos.

Vamos a  colocarle unos 30, actualizamos guardamos. Aquí tenemos la plantilla, recuerda que hemos estado editando lo que es precios anuncios correo mensual y esta plantilla, cada plantilla que creas y diseñas, se genera un código Shortcode. Este es el código, lo copiamos y lo pegamos en nuestra página. Entonces, aquí buscamos precios precios anuncios correo, editamos, entonces aquí tenemos la edición, abrimos el Navigator y, en Navigator, abrimos el edit content y aquí vamos a pegar el Shortcode, ¡aquí está! este es el shortcode. Oficialmente, lo tienen así.

Si queremos incluir el Shortcode desde cero, vamos a eliminarlo, vamos en widget shortcode, seleccionamos, arrastramos y soltamos. Aquí vamos a incluir el código shortcode que hemos copiado, ¡ahí está! Podenos aplicar y cerramos.

Resultados Finales

Esperamos que cargue y ahí está, cambiamos a la vista en modo móvil, ahí está modo móvil, y aquí tenemos la vista optimizada. Vamos a ver un detalle, cuando el cliente abre ese celular  puede ver el logo, puede ver el menú desplegable, ¡muy bien!. De hecho, los números, dado que es un espacio reducido, el número de celular y lo que es el botón de escribirnos no se puede visualizar, por eso que está tachado con unas rayas diagonales, en versión Mobile o en versión móvil. Tenemos lo que es la cabecera, ya está optimizado y tenemos los planes que hemos nosotros mejorado la presentación.

Despues de Optimizar pagina de precios para moviles en Elementor

Después de Optimizar página de precios para móviles en Elementor.
Fuente: Propia, mediante software Elementor.

Tenemos el botón Double mensual y aquí tenemos anual. Más abajo ya tenemos la tabla en orden, está centrado, los precios, el descuento, el detalle de plan, el botón también deja un espacio adecuado para la siguiente tabla, ¡muy bien! y lo mismo con la última, el Plan Elástic, tenemos los FAQs, que son las preguntas populares o las preguntas frecuentes que formula el usuario, preguntas y respuestas. Te tenemos lo que es el footer también está optimizado. ¡Listo, Gracias amigos de Marieú Technology Corporation!

Montoya Godenzi Daniel Alejandro escala 20

EL AUTOR

Daniel Alejandro Montoya Godenzi

Alejandro, con el grado de magíster en Administración y Dirección de Proyectos e Ingeniero Mecatrónico, dispone de experiencia en proyectos de entorno tecnológico digital. Forma parte del equipo de Marieú Technology Corporation. En su tiempo libre, le gusta crear nuevos proyectos, leer un libro o ver una serie.

SIGUE LEYENDO

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Logo Julio 2023 fondo transparente texto blanco

Marieú ofrece servicios de creación de páginas web, marketing digital, producción audiovisual y catering, que facilita los negocios en las empresas.

Boletín informativo

Al ingresar acepta nuestros T&C y las Políticas de privacidad.

Marieú Technology Corporation
©Todos los derechos reservados