Información Adicional

No existe información adicional para este video tutorial.

Transcripción

Muy bien, y hasta este momento, así tenemos nuestra web.

Como puedes ver tenemos nuestro menú principal, la página de inicio se encuentra vacía y si vamos a otras páginas también se encontrarán vacías.

Pero vamos al inicio que es la primera página que vamos a crear.

Posiblemente también ya viste que el logo actual de la web es el de Divi, no te preocupes que más adelante lo vamos a cambiar también.

Entonces, para iniciar con la creación de nuestra página de inicio debemos dar clic en este elemento dentro de la barra de herramientas que dice habilitar el constructor de Divi.

Muy bien, lo que ha sucedido es que nos ha modificado la base de esta página, y como ves ha eliminado la barra lateral.

Ahora damos clic otra vez en la misma opción de habilitar el constructor de Divi.

En este momento el editor ya ha cargado y podemos comenzar a crear nuestra web.

El editor nos permite hacer nuestros diseños muy fácilmente, todo el contenido se encuentra organizado en un sistema como de cajas.

Donde tenemos una caja grande, y otras más pequeñas que van dentro.

Te lo voy a mostrar.

Si nos colocamos aquí, puedes ver que tenemos una zona azul.

Bien, esa zona es el contenedor más grande, se llaman secciones.

Y luego podemos añadir filas dentro de las secciones, para añadir una fila, simplemente damos clic en este botón de mas.

Y podemos seleccionar varios estilos de filas; en este caso voy a seleccionar este tipo de fila.

Muy bien, y ahora tenemos la tercera y última caja que son los módulos, en los que podemos añadir el contenido.

Entonces tenemos los módulos, que van dentro de una fila y la fila que se encuentra dentro de una sección.

Es importante que entiendas esto ya que es un sistema de organización muy fácil de comprender y que te ayudará a crear cosas increíbles, como vamos a ver.

Bien, entonces, voy a empezar creando mi cabecera.

Y de hecho, no quiero este tipo de fila, creo que prefiero la que solo tiene un área para modulos.

Así que voy a eliminar esta fila dando clic aquí.

Ok, añadiré otra y esta vez utilizaré este tipo de fila.

Muy bien, ahora voy a empezar a colocar mi contenido, desde aquí tenemos varios tipos de contenidos que podemos añadir.

Vamos a ir viendo varios de ellos mientras vamos creando la web.

Ya que podría comenzar a explicarte para que sirven cada uno, pero solo te aburriría, así que es mejor que te los muestre.

Vamos a comenzar añadiendo algo de texto en esta cabecera.

Así que vamos a bajar, como ves tenemos muchos módulos, pero vamos a utilizar el módulo de texto.

Bien, cada vez que seleccionas un módulo, se te abre una ventana que puedes mover y en la que se encuentran las opciones de ese modulo.

Si te parece muy pequeña la ventana para trabajar, puedes expandirla desde este botón.

O también puedes fijarla con este otro botón, y arrastrando los bordes la puedes hacer más grande.

Pero yo creo que la voy a dejar pequeña, me resulta más cómo para trabajar.

Bien, entonces, para mi texto, primero puedo definir su color, lo voy a dejar como se encuentra ahorita.

Y luego vamos a darle una orientación, en este caso lo dejare centrado.

Aquí abajo puedes colocar tu texto, yo ya tengo algo de texto copiado para esta sección, así que simplemente lo voy a pegar aquí.

De hecho creo que si voy a hacer un poco mas grande el editor, muy bien.

Como puedes ver tenemos ya nuestro texto en el sitio web.

Esto nos permite previsualizar que tal va quedando nuestro diseño.

Desde aquí, también tenemos la posibilidad de indicar si deseamos desactivar este contenido para alguno de estos dispositivos.

De modo que podríamos indicar que este texto no se vea en los teléfonos por ejemplo, o que no se vea en las tablets, o incluso en las computadoras normales.

Pero yo quiero que lo puedan ver en cualquier dispositivo así que no marcaré ninguna de estas opciones.

Muy bien, ahora vamos a modificar un poco nuestro texto.

Para eso, entramos en las opciones de diseño.

Desde aquí podemos modificar prácticamente cualquier cosa que quieras.

El tamaño del encabezado, el del texto que se encuentra abajo, el tipo de fuente, el color del texto, incluso puedes modificar el espacio entre cada línea de texto y el espacio entre cada letra.

Tienes toda la libertad para poder modificar tu texto.

Pero en este caso, lo que deseo hacer es modificar primero el tamaño del encabezado, lo voy a dejar con un tamaño de 42 pixeles.

Y la altura de línea la dejaré en 1.5 em, esto hace que el espacio entre el encabezado y el texto del mensaje sea mas amplio.

Muy bien, ahora al texto del mensaje solo le cambiaré el tamaño a 16.

Y ahora me voy a mover hasta abajo.

Aquí me interesa modificar el tamaño que hay entre el texto y los bordes de la pantalla, podemos modificarlo utilizando los márgenes o podemos desde esta otra opción añadir un espacio dentro del contenedor del texto.

Así que voy a utilizar la opción de relleno para añadir este espacio adicional, ya que actualmente ocupa casi todo el ancho de la pantalla, pero lo quiero un poco más centrado, así que le voy a colocar un relleno al lado izquierdo y derecho.

Podemos añadir los rellenos en pixeles, pero también podemos utilizar porcentajes, así que el margen será de 20% a cada lado.

Muy bien, como puedes ver, ahora el texto se ve mucho mejor.

Pero esto nos podría generar un problema cuándo el visitante vea el sitio web desde una Tablet y más desde un celular, debido a que el espacio es pequeño en esos dispositivos, el texto se vería demasiado apuñado.

Para solucionarlo, podemos indicar diferentes tamaños para diferentes dispositivos, como puedes ver, en varias de estas opciones tenemos este ícono de un teléfono aquí.

Si le damos clic nos permite colocar diferentes valores para los tres diferentes tipos de pantallas.

En desktop tendríamos el tamaño para computadores normales, aquí tenemos los valores para las tablets y aquí el de los Smartphone.

Creo que el de tablets estará bien con 20% también, así que solo voy a modificar el de los smarthphone.

Como puedes ver, también nos muestra una pequeña previsualización de como se en los diferentes dispositivos, así que puedes observar el problema que te mencionaba antes.

El texto se ve demasiado junto, no hay mucho espacio.

Así que en los teléfonos móviles le voy a dejar únicamente un 5% a cada lado.

Y con esto terminaríamos de editar nuestro texto principal.

En la parte de debajo de cada modulo tenemos estos 4 botones, con este botón podemos descatar todos los cambios que hemos realizado.

Aquí podemos deshacer o rehacer las últimas modificaciones y con este último botón guardamos y aplicamos los cambios.

Así que damos clic aquí para guardar.

Perfecto, ahora ya tenemos el texto de nuestro encabezado.

Muy bien, ahora vamos crear un botón abajo, ya que quiero que entren a la página de servicios.

Desde este botón gris podemos añadir un nuevo módulo, así que damos clic sobre él.

Y vamos a utilizar el modulo llamado botón.

Bien, en la URL del botón debemos añadir el link que el botón debe seguir, en este caso será nuestro dominio y luego /servicios.

Esta opción la voy a dejar como se encuentra para que el botón abra el link en la misma página.

Aquí puedo indicar el texto del botón, le voy a colocar visita nuestros servicios.

En la alineación lo dejare al centro.

Y por el momento eso es todo lo que voy a hacer con este botón.

Así que damos clic aquí para guardar los cambios.

Muy bien, como puedes ver ya tenemos los dos elementos que deseamos en nuestro encabezado.

Pero podemos mejorar mucho este encabezado, y lo primero que debes hacer es añadir una imagen de fondo.

Ahora, la imagen de fondo podemos añadirla en varias partes, la podemos añadir en las opciones de la fila, o en la sección, y como deseo que se vea como fondo del encabezado, la vamos a colocar en la sección.

Para entrar en las opciones de las filas o las secciones, podemos dar clic en este botón de engranaje.

Aquí tenemos todas las opciones de esta sección, y lo que haremos será subir una imagen de fondo, así que damos clic aquí.

Esto nos lleva a la biblioteca multimedia de WordPress.

Desde aquí tendremos disponibles todas las imágenes y archivos que hemos subido, pero en este momento aún no hemos subido nada, así que vamos a entrar en subir archivos.

Damos clic aquí para entrar en nuestra computadora y buscar la imagen.

La seleccionamos y la subimos.

Aquí tienes las opciones de la imagen, puedes ignorar casi todas estas opciones menos una, te recomiendo mucho añadirle una pequeña información en donde dice texto alternativo.

Esto ayuda a los buscadores y a las personas con problemas de visión a comprender de que se trata tu imagen.

Ok, ahora damos clic aquí para añadir nuestra imagen.

Y como puedes ver ahora tenemos la imagen como fondo de nuestro encabezado.

Lo mejor de todo es que no solo podemos utilizar imágenes, también puedes utilizar colores o incluso videos.

Voy a guardar los cambios.

Aunque la imagen se ve muy bien, mi texto no se ve tan bien, debería ser blanco, así que para modificarlo simplemente nos colocamos sobre el y damos clic en el botón de engranaje.

Recuerda que las secciones son azules, las filas verdes y los modulos grises, para que no te confundas.

Aquí simplemente cambiaré el color del texto a claro y guardamos los cambios.

Y para terminar nuestro encabezado también le voy a cambiar los colores al botón, así que entramos en sus opciones nuevamente.

Desde aquí vamos a la pestaña de diseño.

Y activaremos esta opción para utilizar nuestro propio diseño.

Muy bien, en primer lugar voy a modificar el color del texto, lo vamos a dejar blanco.

Como puedes ver, puedes jugar con este selector de colores para definir el color que deseas, o también podríamos utilizar el código hexadecimal del color que deseas utilizar si lo conoces.

También le voy a cambiar el color del fondo, en este caso ya conozco el código hexadecimal del color, así que simplemente lo voy a pegar aquí.

Muy bien, ahora vamos a modificar el color del borde, ya que en este momento se encuentra blanco, pero quiero que el borde utilice este color.

Puedes ver que tenemos varias opciones más, podemos modificar prácticamente cualquier aspecto del botón.

El tamaño del texto, el tipo de fuente, y también podemos indicar si deseamos utilizar un ícono.

En este caso el ícono se encuentra activado, así que voy a seleccionar aquí el ícono que deseo utilizar.

Muy bien, desde esta opción podemos indicar si deseamos que el ícono se muestre únicamente cuando el visitante coloca el mouse sobre el botón.

A mí me gusta ese efecto así que lo dejaré activado.

Como veíamos al inicio de este tutorial, el sitio web que vamos a crear será la web de un nutricionista, en el que ofrece sus servicios.

Así que vamos a cambiar el texto del botón también, voy a regresar a las opciones generales y desde aquí cambiaré el texto.

Le voy a colocar “inicia tu transformación hoy”.

Y guardamos nuestro botón.

Como puedes ver ahora ya tenemos creado nuestro encabezado.

Así de simple y fácil es crear tu sitio web gracias a Divi y los planes de Hosting de lievanosan.com.

Muy bien, ahora quiero mostrarte otra parte de este editor, y está aquí.

Este botón tiene opciones ocultas muy importantes.

Si le damos clic las podremos ver todas, una de las mas importantes es la de guardar.

Así que vamos a guardar todos los cambios para que se apliquen en nuestro sitio web.

Muy bien, ahora nuestros cambios se encuentran guardados.

Ahora desde el otro lado podemos hacer una previsualización del sitio web en diferentes dispositivos.

Actualmente estamos en la vista de computadores de escritorio, pero podemos modificarlo para ver como luce en las tablets, o en los teléfonos.

Muy bien, vamos a cerrar este panel, veremos más de estas opciones después.

Ahora que ya sabemos cómo funciona y lo fácil que es crear tu sitio web, voy a comenzar a colocar más contenido para terminar esta página y pasar a las siguientes.

Lo que haremos ahora será crear una nueva sección, para eso damos clic aquí, en el símbolo de mas azul.

Muy bien, tenemos tres tipos de secciones, vamos a verlas todas, y vamos a iniciar por la regular.

Los tipos de secciones diferentes te permiten añadir diferentes tipos de filas, la que teníamos antes era una sección regular.

Y esta también lo es, así que vamos a poder seleccionar entre los mismos tipos de filas.

Para este caso voy a seleccionar esta fila.

Ahora tenemos 3 espacios para nuestros módulos.

Aquí voy a colocar 3 modulos muy similares, vamos a empezar por este, así que seleccionamos el modulo llamado anuncio.

Muy bien, en este modulo primero le voy a colocar un título.

Podríamos añadirle un link desde aquí pero no quiero hacerlo ya que solo lo utilizaremos para mostrar algunas características importantes del servicio de nutricionista.

Así que lo dejare vacío.

Desde aquí podemos añadirle un ícono, pero yo ya tengo algunas imágenes que deseo utilizar, así que lo desactivamos.

Y en imagen damos clic en subir.

Voy hacia subir archivos y buscamos las imágenes, voy a subir varias imágenes de una vez para tenerlas listas en la biblioteca de WordPress.

Muy bien, la primero imagen que deseo colocar es esta.

También le podemos añadir una animación de ingreso a la imagen.

Y si bajamos mas puedes añadir más texto.

En este caso vamos a simular que es la descripción de nuestro servicio.

Aquí tengo algo de texto en un bloc de notas, este texto se llama Lorem Ipsum, y no dice nada en realidad, pero sirve mucho para visualizar como se vería tu texto real.

Vamos a estar utilizando mucho este texto para simular los textos reales de la web.

Para generar tu propio texto de prueba puedes ir a lipsum.com

Como puedes ver ya tenemos creado nuestro nuevo elemento, pero le vamos a dar un mejor estilo.

Así que voy a entrar en las opciones de diseño.

Voy a modificar el tamaño del título, lo dejaremos en 28 px.

Y también le voy a modificar la altura de línea, para añadir una mejor separación entre el título y el texto de la descripción, lo vamos a dejar en 1.5 em.

Creo que también voy a colocar la cabecera en negrita.

Y al texto de la descripción le vamos a modificar el tamaño hacia 16 px.

Muy bien, con esto terminamos este módulo, así que damos clic aquí para guardarlo.

Ahora vamos a crear dos módulos muy similares, solo les vamos a cambiar la imagen y el texto del título.

Pero no quiero volver a crear el modulo desde cero, así que lo que haremos será duplicar este módulo dos veces desde este botón.

Y ahora voy a mover dos de estos módulos al lugar en la fila en la que deseo colocarlos.

Debes arrastrarlos utilizando este ícono en las opciones del módulo.

Ves que fácil es, esto es simplemente sencillo.

Solo debemos ahora modificar las imágenes y los títulos, así que entramos en las opciones del segundo modulo.

Modíficamos su título.

Luego damos clic en subir para seleccionar nuestra nueva imagen. Y guardamos los cambios.

Hacemos el mismo proceso para el tercer modulo.

Entramos en las opciones y editamos el título.

Luego damos clic en subir y podremos seleccionar la otra imagen.

Y finalmente guardamos los cambios.

Nuestra página de inicio está quedando muy bien, voy a dar clic aquí para guardar y aplicar los cambios en la página.

Ahora voy a crear una nueva sección.

Esta vez utilizaremos una sección de ancho completo.

En este tipo de secciones los módulos se añaden directamente, sin filas, ya que todos los módulos son de ancho completo también.

Voy a crear un slider aquí, así que debo seleccionar este módulo.

Muy bien, aquí tenemos todas las opciones de nuestro slider, y lo primero que haremos será añadirle diapositivas.

Así que damos clic aquí para crear la primera.

Voy a colocarle un título a esta diapositiva y también le vamos a colocar un texto al botón, si no deseas tener un botón entonces simplemente puedes dejarlo vacío.

Aquí podemos añadir la URL del botón, y voy a seleccionar una imagen de fondo.

Así que vamos a seleccionar esta imagen.

Bien, vamos a bajar en las opciones y voy a utilizar esta opción, para añadirle un color con transparencia a la imagen.

Como puedes ver, gracias a este efecto, ahora nuestro texto y el botón se ven mejor.

Para terminar de añadir nuestros textos voy hacia abajo y pegar un poco de texto prueba aquí.

Finalmente vamos a la pestaña de diseño y desde aquí voy a colocar el texto del encabezado en negrita.

Muy bien, ahora activaremos las opciones de diseño para el botón.

En primer lugar voy a modificar el color del fondo del botón, esta vez le dejaré un color verde.

Y en el color del borde también le colocaremos un verde, pero un poco oscuro.

El texto del botón lo vamos dejar como se encuentra, aunque quizá sería mejor si lo colocaremos en negritas.

Y desde aquí podemos modificar el ícono que utiliza el botón.

Con esto terminamos nuestro primer slider.

Así que damos clic aquí para regresar a las opciones generales.

Ahora, aquí tenemos nuestra actual diapositiva, pero las otras van a tener un diseño muy similar, y no quiero hacer todo eso nuevamente.

Así que simplemente vamos a duplicar esta misma diapositiva dos veces más.

Muy bien, ahora tenemos 3 diapositivas.

Y voy a entrar para cambiarles el título y la imagen.

Primero cambiamos el título, y luego damos clic en subir para seleccionar una imagen diferente.

Podríamos modificar todo en realidad, incluyendo el botón y el link, pero en este caso no lo voy a hacer.

Así que regresamos a las opciones generales y entramos en la última diapositiva.

Igual que en el caso anterior, cambiaremos primero el título.

Luego damos clic en subir y seleccionamos otra de las imágenes.

Muy bien, todas nuestras diapositivas se encuentran correctamente creadas.

Desde aquí tenemos varias opciones que podemos modificar.

Por ejemplo, podemos decidir si deseas mostrar o no las flechas en el slider.

También puedes activar la animación automática.

Aquí debemos añadir el tiempo que dura cada diapositiva en mili segundos, lo voy a cambiar y le colocaré 10 mil milisegundos.

Con esto terminamos la creación de nuestro slider, así que damos clic aquí para guardar los cambios.

Ahora sería una buena idea abrir el panel de abajo y guardar nuevamente nuestros cambios en la página.

Demos un vistazo a como nos está quedando nuestra página de inicio.

Ya hemos creado nuestro encabezado. Luego tenemos algunos elementos que muestran como trabajamos y finalmente contamos con un slider que nos dan más información.

Ahora vamos a crear la última sección de nuestra página de inicio.

Así que añadiremos una nueva sección, esta vez vamos a utilizar una sección regular.

Voy a seleccionar esta distribución de modulos.

Muy bien, ahora voy a cerrar la selección de los módulos y entrare en las opciones de la sección.

Lo que quiero es cambiar el color del fondo, lo vamos a dejar en un color verde.

Muy bien, ahora si regresemos a los modulos.

Y en el modulo que se encuentra en medio vamos a colocar nuestro primer elemento, vamos a utilizar el módulo de imagen.

Damos clic en subir para seleccionar nuestra imagen desde la biblioteca multimedia.

Ahora vamos a cambiar su animación, la colocaremos de arriba hacia abajo y finalmente dejaremos la imagen centrada desde aquí. Y guardamos los cambios.

Muy bien, ahora duplicare este módulo dos veces mas.

Y colocaremos una de estas imágenes en cada lado.

Voy a modificar la imagen en cada uno de estos de estos nuevos modulos, así que entramos en las opciones de la imagen izquierda, voy a seleccionar una imagen diferente para este modulo.

Y la animación la cambiare de izquierda a derecha.

Guardamos los cambios y vamos a modificar la otra imagen, igualmente remplazaremos esta imagen con una nueva, y esta vez la animación será de derecha a izquierda.

Ahora añadiré otro módulo debajo de estas dos imágenes que tenemos a los lados.

Así que comenzamos por la izquierda, voy a dar clic aquí para añadir otro modulo y utilizaremos el contador.

Le debemos colocar un título, así que diremos “Clientes ayudados”.

En número debemos dejar la cantidad que deseamos, en este caso diremos que hemos ayudado a 250 clientes.

Luego voy a eliminar el símbolo de porcentaje, ya que no me sirve para este caso.

También voy a modificar el color del contador, y dejar el color del texto en claro.

Ahora entrare en diseño y dejare el título con negrita y cambiare el tamaño del texto a 22px.

Muy bien, guardamos los cambios.

Duplicaré el contador y lo pasare debajo del nuestra otra imagen.

Voy a modificarle el título a este contador y también el número. Y guardamos los cambios.

Creo que me falta algo en esta sección, voy a colocarle un texto adicional. Lo voy a colocar en la parte de en medio así que damos clic aquí para añadir un nuevo modulo.

Vamos a utilizar el modulo de texto.

Voy a dejar el color en claro y centrado.

Luego en la parte de abajo le colocaré “Nuestros resultados”.

Pero se verá muy pequeño, así que vamos a las opciones de diseño y voy a modificar las opciones del texto fuente.

Vamos a cambiarle el tamaño a 36px, y lo dejaremos en negrita.

Guardamos, y voy a mover el texto hacia arriba de esta imagen.

Muy bien, ya tendríamos creada esta sección, pero veo que el texto no esta bien alineado ahí, creo que sería mejor si lo alineamos con todos los elementos, siento que se ve un poco extraño.

Así que voy a crear una nueva fila, voy a seleccionar este estilo de fila.

Y ahora la voy a mover a la parte superior de esta otra fila que ya tenemos.

Finalmente voy a mover mi texto hacia esta otra fila, y ahora si, el texto se ve mucho mejor.

Voy a abrir este panel y guardaremos los cambios.

Quiero ver la página principal sin todos estos marcadores, para ver que tal nos ha quedado sin cosas alrededor, así que para salir del editor simplemente damos clic aquí en la barra de herramientas.

Ahora si podemos apreciar mejor nuestra página de inicio.

Tenemos nuestro encabezado, con su botón.

Después podemos ver una explicación de nuestra forma de trabajar, y abajo contamos con el slider.

Le hemos colocado 3 diapositivas y cada una tiene su título un texto descriptivo y también un botón.

Finalmente tenemos los contadores en los que le mostramos a nuestros clientes lo bueno que son nuestros servicios.

Quiero que notes que no solo hemos creado una página de inicio, hemos creado una página de inicio que vende.

No importa si estas vendiendo productos o tus servicios profesionales.

Con esta página de inicio podremos atraer más clientes a nuestro negocio.

Muy bien, cómo pudiste ver el editor nos permite crear los sitios web de una forma extremadamente fácil.

Y esto que hemos hecho ha sido lo más complicado que veras en este tutorial, ya que las otras páginas las vamos a crear utilizando un gran atajo.

Me he tardado como 25 minutos en esta página porque deseaba explicarte cómo funcionaba el editor y que pudieras ver lo realmente fácil que es crear una página desde cero, sin nada en ella.

Pero para crear nuestras otras páginas vamos a hacer trampa, y utilizaremos una característica escondida del editor.

Así que vamos a verlo y entremos en la página de servicios.

7 Comments on “Creando la página de inicio”

  1. Mari Ruiz

    Me gustaría saber cómo puedo hacer para poner el texto que pones en la diapositiva en cualquier parte, por ejemplo en la parte inferior derecha etc. Para poder colocar también los botones donde quiera y también cómo puedo poner diapositivas con movimiento en lugar de imágenes.

    Gracias, un saludo.

    1. Lievanosan

      Buen día, posiblemente se encuentra viendo su sitio web con un usuario que no es el administrador. Debe verificar que su usuario es el administrador para poder ver el botón de “Habilitar contructor visual”.

      1. Zyanhdez

        Estoy en mi usuario administrador, de hecho puedo editar varias cosas pero la herramienta “Habilitar Constructor visual” no me aparece ni la opción de engranaje. Por ello no puedo ni cambiar la posición ni la tipografía del texto. ¿Qué sucede al respecto?

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