Información Adicional

No existe información adicional para este video tutorial.

Transcripción

Muy bien, como puedes ver, esta página también la tenemos vacía, esta como teníamos al inicio la página de inicio.

Así que vamos a habilitar el editor, recuerda que debes dar clic una vez en el editor para que elimine la barra lateral y otra para abra el editor.

El editor ya se encuentra cargado y podríamos empezar a crear nuestra página, pero como te dije antes, vamos a hacer trampa.

Y es que el editor trae varias plantillas de páginas previamente creadas, así que vamos a utilizar una de ellas y luego simplemente iremos remplazando la información.

Para cargar las plantillas vamos a las opciones que tenemos al final, recuerda que las expandimos dando clic en este ícono.

Y ahora daremos clic en este ícono de más que dice cargar de la biblioteca.

Esto nos abre el listado de todas las plantillas que tenemos disponibles.

Como puedes ver tenemos muchas.

Por ejemplo, carguemos esta plantilla. Simplemente debemos dar clic y el editor comienza a cargar el contenido.

Muy bien, ahora tenemos esta página creada sin hacer nada, podríamos simplemente ir cambiando los textos, eliminando secciones, moviéndolas o incluso añadiendo nuevas secciones, filas y elementos.

Pero esta es una plantilla para una página de inicio, yo quiero algo que me sirva en la página de servicios, así que voy a modificar esta plantilla y cargaremos otra.

Así que vamos nuevamente al ícono de mas.

Y podemos seleccionar otra plantilla, es importante que tengas esta opción marcada para que la nueva plantilla pueda remplazar por completo nuestro contenido actual.

En este caso la página de servicios será nuestra página de ventas, aquí le vamos a dar 3 diferentes opciones al cliente para comprar.

Así que voy a utilizar una plantilla que se encuentra hasta el final, utilizaremos esta, la que se llama página de ventas.

Esperamos a que cargue el contenido.

Y ya tenemos la estructura de esta página lista.

Voy a cerrar estas opciones para que no causen distracción ya que ahorita no vamos a seguir utilizándolas.

Revisemos rápidamente que es lo que tenemos aquí.

Bien, primero contamos con un encabezado, luego esta sección con algunas características o beneficios de nuestros servicios.

Después contamos con la tabla de precios.

En esta sección tenemos algunos testimonios de nuestros clientes.

Mas abajo contamos con una sección de imágenes seguido por un acordeon que podemos utilizar para las preguntas frecuentes.

Y finalmente tenemos esta sección que vendría siendo otro llamado a la acción.

Así que vamos a comenzar a editar esta página.

Bien, en primer lugar, no deseo mostrar este encabezado.

Así que voy a eliminar toda esta sección.

Muy bien, quiero que la tabla de precios se muestre primero, así que arrastraré la sección de la tabla de precios a la zona superior de la página.

Esto deja al conjunto de características en la parte de abajo.

Voy a comenzar a editar esta tabla de precios, primero quiero eliminar el texto adiciona y dejaré únicamente el encabezado.

No te he mostrado esto antes, pero para editar el texto puedes simplemente darle clic al texto y comenzar a editarlo.

Vamos a modificar el texto del encabezado también.

Aquí no se ve muy bien, pero hay un pequeño espacio causado por un modulo de separación.

No quiero esta separación así que simplemente voy a eliminarlo.

Muy bien, ahora voy a modificar esta tabla de precios.

Les voy a ofrecer a mis clientes 3 diferentes planes de nutrición.

Para modificar las tablas de precios también podríamos simplemente darle clic al texto y comenzar a editar, pero yo siento más como hacerlo desde las opciones del modulo.

Así que vamos a darle clic a las opciones del modulo aquí.

Como puedes ver, aquí tenemos los diferentes planes que se muestran en este momento.

Voy a eliminar el último de ellos.

Y para editar las otras tablas damos clic aquí.

Muy bien, voy a comenzar por modificar el título de la tabla.

La moneda la dejare como se encuentra y aquí le voy a colocar mes, ya que mostraremos los precios mensuales.

Puedes modificar el precio.

Y aquí debes añadir el link para el botón de comprar.

En este tutorial no hablamos sobre como añadir una tienda en WordPress, pero tenemos un video curso completo sobre ese tema, te dejaré el link del curso en la descripción para que puedas verlo.

En este caso, simplemente los vamos a mandar hacia lievanosan.com

Aquí puedes indicar lo que dirá el texto del botón. Le voy a colocar Comprar por ejemplo.

Ahora esta zona de abajo es importante, ya que desde aquí podemos añadir las diferentes características que tiene el plan.

Como puedes ver cada salto de línea representa una característica.

También puedes notar que si le añadimos un símbolo de + antes del texto, entonces nos añadirá este círculo de color.

Y si le colocamos un menos, entonces el circulo será gris, de esta forma podemos indicarle al cliente qué características tiene cada plan.

Voy a eliminar todas estas características, y voy a colocar las que yo quiero mostrar.

Yo ya tengo por aquí un texto con todas las características que deseo mostrar en las tablas de precios, así que simplemente voy a copiar y pegar mi texto aquí.

Muy bien, ahora ya tengo todos los datos de la tabla de precios colocados.

El siguiente paso sería modificar su estilo.

Así que entramos en las opciones de diseño.

Lo primero que quiero hacer es cambiar la fuente del nombre en los planes.

Vamos a dejar en negrita los nombres de los planes y también cambiaré el tamaño hacia 34 pixeles.

También le voy a dar mas altura de línea para que exista mas espacio en el cuadro que rodea al nombre.

Lo voy a dejar en 3 em.

Vamos a bajar en estas opciones y cambiaremos el texto del precio.

Voy a dejar en negrita el precio y también le voy a cambiar el color del texto, lo dejaremos en este tono verde.

Finalmente activare las opciones de diseño para el botón y lo único que cambiare es el color de fondo.

Y listo, ya tenemos nuestra tabla, hay algunas cosas adicionales que tenemos que modificar pero lo haremos luego.

Entonces, ya tenemos nuestra primera tabla lista, vamos a regresar desde aquí al listado de las tablas.

Y creo que voy a eliminar estas otras tablas.

Y ahora voy a duplicar esta tabla dos veces más.

Muy bien, ahora voy a entrar en ellas y cambiare sus opciones.

Esta tabla será el plan destacado, así que voy a marcar esta opción.

Ahora cambiaremos el título del plan. Voy a modificar su precio, y finalmente este plan es mas caro, así que voy a indicar las características adicionales que tiene.

Y guardamos nuestra tabla.

Y modificaremos la última tabla.

Este no es un plan destacado así que no activamos esta opción.

Al igual que en el caso anterior, voy a modificar el título, y también el precio.

Y finalmente voy a colocar el símbolo más en todas las características ya que este plan lo tiene todo.

Y guardamos la tabla.

Muy bien, las tablas de precios están casi listas.

Solo quiero modificar algunos colores.

Desde el área de diseño podrás ver que tienes una gran cantidad de opciones que puedes modificar.

Pero lo que quiero es modificar el color de fondo de la cabecera, lo vamos a dejar en este color verde.

Y desde esta otra opción puedes modificar el color de la cabecera para los planes destacados.

En este caso lo dejare en este tono de color azul.

Finalmente voy a bajar un poco y modificaré el color de los puntos.

Y con esto finalizamos nuestras tablas de precios.

Muy bien, en la parte de abajo también tenemos un separador, que vamos a eliminar.

Y de hecho voy a modificar el estilo del título, vamos a entrar en sus opciones.

Primero vamos a cambiar el color hacia claro y luego vamos hacia diseño y modificare el tamaño del texto hacia 46 pixeles.

También lo vamos a dejar con negrita y en la altura de línea le vamos a colocar 1.5em para añadirle más espacio.

Como puedes ver casi está listo, y es que creo que le falta más vida a nuestros precios, así que voy a colocar una imagen como fondo de la sección.

Así que vamos a las opciones de la sección, damos clic en subir imagen y seleccionamos la que deseamos incluir.

Muy bien, ahora vamos dejar activada esta opción, el efecto paralaje o parallax hace que la imagen de fondo se mueva en una velocidad diferente que los otros elementos de la web.

Voy a guardar los cambios.

Y como puedes ver ahora nuestra tabla de precios se mucho mejor.

Si bajamos podrás notar que la imagen de fondo se mueve a una velocidad diferente, ese es el efecto parallax o paralaje.

Lo añadiremos después en otra sección en la que se pueda apreciar mejor.

Muy bien, la siguiente sección que vamos a modificar es la de características.

Voy a iniciar modificando el color de fondo de la sección, así que entramos en sus opciones y cambiamos el color del fondo por este tono de verde.

Voy a guardar los cambios.

Estos elementos ya no se ven muy bien, así que voy a cambiarles el color, entramos en las opciones en uno de estos módulos.

No voy a modificar el contenido, ya que esto es solo un ejemplo, así que únicamente modificare el color del ícono hacia blanco, y el color del texto lo dejaré en claro.

Luego voy a entrar en las opciones de diseño y activare esta opción para hacer mi ícono más grande.

Y guardamos los cambios.

Los otros módulos quiero que se vean igual, así que simplemente voy a eliminar los módulos que tenemos en este momento.

Y ya sabes cuál es el siguiente paso.

Voy a clonar este módulo dos veces más.

Y luego arrastramos los otros dos módulos a sus lugares correspondientes.

Para que se vea mejor, simplemente voy a entrar en las opciones de cada módulo y vamos a cambiar el ícono que utiliza cada módulo.

Vamos a dejar esta sección así, y pasamos a la siguiente en la que tenemos los testimonios de algunos clientes.

Bien, los testimonios no los cambiaremos mucho, lo primero que haremos aquí será modificar el título, vamos a colocar “Lo que nuestros amigos opinan”.

Ahora voy a eliminar parte del texto en los diferentes comentarios.

Quiero que tengan menos texto ya que se ven muy cargados en este momento.

Recuerda que para editar el texto, únicamente debes dar clic y comenzar a editar, no es necesario que entremos en las opciones del módulo para editar texto.

Muy bien, ahora voy a modificar las imágenes para que se vean mejor los testimonios.

Así que entramos en la edición del primer comentario, damos clic en subir y seleccionamos la nueva imagen.

También voy a cambiar el icono de cita para que sea visible. Y guardamos los cambios.

Voy a realizar el mismo proceso con los otros dos testimonios, cambiamos la imagen desde aquí por una nueva, después activamos el icono y guardamos.

Finalmente hacemos lo mismo con el último de los testimonios.

Cambiamos la imagen desde subir y seleccionamos la nueva imagen, luego activamos el ícono y guardamos los cambios.

Muy bien, eso es todo lo que haremos en los testimonios.

Pasamos a la siguiente sección, aquí voy a eliminar la fila que tenemos creada.

Y añadiré una nueva fila, voy a usar este tipo de fila.

Muy bien, le voy a colocar al lado derecho un módulo de texto.

El color de texto lo dejare en claro y la alineación en derecha.

Vamos a colocar un título y luego algo de texto de prueba.

Debes recordar seleccionar el texto que es un título y cambiarle el formato desde aquí.

Muy bien, ahora voy a entrar en las opciones de diseño. Y voy a colocar el texto del título en negrita.

También me aseguraré que el tamaño se encuentre en 30px. Y finalmente le voy a dejar 1.5em en la altura de línea.

Y terminamos guardando los cambios.

Muy bien, finalmente voy a entrar en las opciones de la sección.

Y le añadiremos una imagen de fondo, la seleccionamos y la añadimos.

Muy bien, en esta imagen también voy a dejar el efecto de paralaje activado, y guardamos los cambios de la sección.

Ahora pasamos a la siguiente sección en la que tenemos las preguntas frecuentes.

El estilo de esta sección me gusto y no lo voy a modificar, así que solo le cambiaré el título a “Preguntas frecuentes”.

Ahora voy a mostrarte como utilizar estos módulos.

Cada uno de estos elementos es un modulo independiente.

Así que para modificar el texto de las preguntas, debemos entrar en las opciones de cada módulo, desde aquí podemos modificar el título que sería la pregunta, y en esta parte podemos añadir la respuesta.

En este caso estos módulos se han utilizado para crear preguntas frecuentes, pero puedes usarlos para mostrar cualquier tipo de contenido.

Muy bien, la sección que tenemos en la parte de abajo la vamos a eliminar.

Y vamos a guardar todos los cambios que hemos realizado.

Muy bien, con esto terminamos la página de servicios, voy a salir del editor para ver mejor la página.

Como puedes ver primero tenemos la tabla de precios, con esta tabla le mostramos a nuestro posible cliente todas las opciones que tenemos disponibles.

Luego tenemos un conjunto de características, aquí podríamos añadir más información que ayude al cliente a tomar la decisión de comprar.

Después tenemos la sección de testimonios, en la que podemos mostrar lo que nuestros clientes opinan de nuestros servicios.

Debajo contamos con esta sección en la que podemos añadir más información y finalmente tenemos la sección de preguntas frecuentes.

De esta forma terminamos con la creación de la página de servicios.

Ahora pasemos a la siguiente página que debemos crear.

Entraremos en sobre nosotros.

Deja un comentario

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

¿Quieres aprender a crear sitios web?

Regístrate gratis como estudiante y aprende a crear sitios web sorprendentes. Gana certificados y medallas al completar los cursos gratuitos.
¡REGÍSTRATE GRATIS!
close-link
Crea tu sitio web con diseño profesional en menos de 15 minutos
Ver Tutorial
close-image