Crea tu página web GRATIS con Astra WordPress y el editor de bloques Gutenberg ¡Sin necesidad de saber programar ni gastar dinero en costosos diseñadores! Aprende paso a paso cómo diseñar un sitio web, blog, tienda online, e-commerce o portafolio profesional y funcional en cuestión de minutos.
WordPress es el sistema de gestión de contenidos (CMS) más popular del mundo, y Astra es una de las plantillas más versátiles y fáciles de usar. Con el editor de bloques (Gutenberg), podrás crear diseños increíbles sin necesidad de tocar una sola línea de código
Para este tutorial usaré el servidor de Hostinger, el cual bajo mi experiencia es uno de los mejores proveedores de alojamiento web, pero ustedes pueden aplicar este conocimiento desde cualquier hosting que les permita tener instalador WordPress.
WordPress es el sistema de gestión de contenidos (CMS) más popular del mundo, y Astra es una de las plantillas más versátiles y fáciles de usar. Con el editor de bloques (Gutenberg), podrás crear diseños increíbles sin necesidad de tocar una sola línea de código
Para este tutorial usaré el servidor de Hostinger, el cual bajo mi experiencia es uno de los mejores proveedores de alojamiento web, pero ustedes pueden aplicar este conocimiento desde cualquier hosting que les permita tener instalador WordPress.
Category
📚
AprendizajeTranscripción
00:00Y al final terminaremos con un sitio web muy profesional y con unos tiempos de carga perfectos.
00:07Hola muchachos, espero que tengan un excelente día, les habla Dustin Hortado.
00:10Muchachos, vamos a instalar desde cero un WordPress y vamos a crear una página web completa y eficiente.
00:16Todo esto gratis en cuanto a la plantilla.
00:19Recordemos que si queremos tener una página web en internet, requerimos invertir sí o sí de un hosting.
00:25No tiene que ser Hostinger, acabo de resaltar.
00:27Yo recomiendo Hostinger porque es el proveedor de servicios que yo uso.
00:31Mi página web desde hace muchísimos años está con ellos y es muy bueno.
00:34Si se dan cuenta y hacen una comparación entre precio y eficiencia,
00:38Hostinger siempre va a ser el número uno.
00:40Sólo tengan en cuenta, estos precios que aparecen aquí no son los precios finales.
00:44Cuando elijan un plan, en el carrito van a escribir Dustin Hortado como copón de descuento y le dan a aplicar.
00:50No se pongan a regalar su dinero.
00:52Miren que ahora sí los precios que aparecen son mucho más económicos.
00:55¿Qué plan elegir? Ya he creado bastantes vídeos sobre ello.
00:58Pero en resumen es Premium si quieren un sitio web, Business si quieren una tienda.
01:03Esto para principiantes es más que suficiente.
01:05¿Ok?
01:06Ahora, vamos a instalar entonces esto desde cero.
01:08Vamos a ingresar a nuestra cuenta.
01:10Recordemos que este tutorial lo pueden seguir desde cualquier hosting, ya que vamos a usar WordPress.
01:14Sólo que para este caso, aquellas personas que vengan desde cero absoluto y compren un servicio con Hostinger,
01:20pues crear un sitio web con WordPress.
01:22Sólo tienen que dar clic en añadir sitio web de WordPress.
01:26Van a elegir el plan que ustedes compraron, por ejemplo el Cloud y le damos a dar selección al plan.
01:31Llenen estos datos, voy a dejar esto tal cual.
01:34Le damos siguiente.
01:35En este caso voy a crear un sitio en blanco para que puedan aplicarlo a cualquier hosting.
01:39Y podemos elegir un dominio temporal si no quieren comprar un dominio nuevo.
01:43En este caso Hostinger me da uno gratis, pero sólo uno.
01:46Entonces voy a elegir este que me dio gratis y le voy a dar siguiente.
01:49Y en cuanto al servidor, voy a elegir el de Brasil y le voy a dar siguiente.
01:52Esperamos a que instale WordPress.
01:54Y listo muchachos, ya tenemos instalado WordPress.
01:56Si queremos ver nuestro sitio web, sólo le damos clic aquí y ya.
02:00Esta es una plantilla que viene por defecto en WordPress, no más.
02:04Ahora, este es el tablero de administración que tiene Hostinger.
02:08Si queremos entrar al panel de administración de WordPress, podemos simplemente dar clic aquí donde dice WordPress.
02:13Y aquí entramos directamente al panel de administración, la famosa dashboard.
02:17Que es exactamente lo mismo que usted ir a su sitio web y dar slash wp-admin.
02:23Vemos que llegamos al mismo lugar, ok.
02:25Bien, este sitio aquí donde está en este momento está desde cero absoluto.
02:29Y como se dan cuenta, pues no es un sitio muy bonito.
02:32Como les comenté, es una plantilla que viene por defecto en WordPress.
02:35Así que vamos a convertir ese sitio en algo mucho más profesional.
02:38Para ello vamos a ir a apariencia, temas.
02:41Y ese es el tema que tenemos por defecto.
02:43Vamos a añadir uno nuevo.
02:44Y uno de los más populares, por no decir que el más popular, es este medito de acá, Astra.
02:50Para mí es uno de los mejores en cuanto a gratuitos.
02:54Es el mejor para mí.
02:55Podemos darle clic, porque no lo veo necesario.
02:57Sí, es este de acá, pero esto no es lo que se va a instalar.
03:00Vamos a darle, cerremos esto.
03:02Vamos a darle instalar.
03:03Y ahora le vamos a dar activar.
03:05Y listo, ya lo activamos, Bea.
03:07Ahora, si miramos nuestro sitio y le damos actualizar.
03:10Digamos que ahora se ve peor, entre comillas, sí.
03:13O sea, ¿por qué?
03:13Porque lo que acabamos de hacer es instalar una estructura.
03:17No instalamos datos de ejemplo, no creamos fotos, no imágenes, nada.
03:21Es una estructura que es la de Astra.
03:23Así que lo que sigue ahora es esto que está acá.
03:25Que es construir el sitio web con datos de ejemplo y demás.
03:29Digamos que a usted no le aparece este mensaje.
03:31Usted no tiene nada de esto.
03:33Usted viene de serio y dice, Dustin, esto no me funcionó.
03:35No, muchachos, no se me preocupe.
03:37Solo tenemos que ir de nuevo donde dice Astra.
03:40Y aquí arribita dice las plantillas de inicio.
03:43Vamos a darle un clic.
03:45Y aquí vamos a instalar este plugin que es un requisito para instalar esas plantillas que están de fondo.
03:50Vamos a darle instalar y activar.
03:52Ya está activado, esperamos un momentico.
03:54Y el met lleva a este asistente.
03:56No vamos a usar inteligencia artificial.
03:58Vamos a usar las clásicas plantillas.
04:00Así que damos un clic.
04:01Y bien, ¿qué es lo primero que debemos revisar acá?
04:03Lo primero que debemos revisar es qué tipo de editor vamos a usar.
04:07Yo aconsejo usar el editor de bloques que viene por defecto en WordPress.
04:11Y no usar, por ejemplo, Elementor que es un plugin.
04:14Antes, excelente.
04:15Pero ahora el editor de bloques es muy bueno.
04:18Por lo cual, yo recomiendo este.
04:20Ahora, en cuanto a las plantillas.
04:22Hay unas que dicen premium.
04:23Vamos a ignorar estas.
04:24Del resto, todo lo que usted está viendo acá, la mayoría son gratis.
04:29Así que, ¿qué es lo importante en que usted elija acá?
04:32No es como tal elegir una que si yo voy a usar un gimnasio.
04:36Entonces, voy a buscar un business por acá, un local que sea de gimnasio.
04:40O sea, usted lo puede hacer.
04:41Pero yo le aconsejo es, por ejemplo, si miramos esta plantilla base.
04:45Eso que está viendo acá es la estructura.
04:47Miren, por ejemplo, no es de naturaleza.
04:49Es un banner que viene de lado a lado.
04:51Un menú dentro del banner.
04:52Tres servicios.
04:54Un, digamos que una opinión de un cliente.
04:56¿Cierto?
04:57Miren las secciones que vienen.
04:58Puede ser muy bonito y puede aplicarlo a su empresa.
05:01Por ejemplo, esta plantilla es esta misma.
05:05Miren, Water Construcciones, en vez de una foto, tenemos un video de fondo.
05:09Miren los servicios.
05:10Una imagen de por qué elegirnos.
05:12Un Instagram y un contacto.
05:14Es la misma plantilla, pero asignada a otro tipo de empresa.
05:18Entonces, lo que yo les aconsejo es, busquen una estructura que les guste.
05:23De ahí para allá, ustedes la modifican a su gusto.
05:25¿Ok?
05:26Ahora, en cuanto a estructuras, tenemos dos, digamos que tres.
05:29Una, las páginas normalitas como esa.
05:31Dos, las landing page.
05:33Una landing page, vamos a mirar esta por ejemplo, es una sola página.
05:38Por ejemplo, si miramos About Me, o sea, acerca de,
05:41ella me lleva acerca de, pero es la misma página.
05:44Contacto, me lleva a contacto, pero es la misma página.
05:48Solo tenemos una solita.
05:50Esa es una landing page.
05:51La que teníamos ahorita, era una página común y corriente.
05:54Quitemos esto.
05:55¿Qué es esta?
05:56Por ejemplo, si vamos a contacto.
05:58Por ejemplo, contacto, me lleva a la página de contacto,
06:01pero es otra página distinta.
06:03¿Cierto?
06:03Vamos a volver.
06:05Y por último, tenemos los famosos e-commerce, que es una tienda.
06:08No miremos las premios.
06:09Vuelvo, repito, miremos una gratuita.
06:11Por ejemplo, esta.
06:12Y Astra me dice, ¿qué tipo de tienda quiere?
06:14Con WooCommerce, que es la recomendada.
06:16O si quieres, Surecard.
06:17En este caso, si miramos acá abajito, tenemos una tienda.
06:21Que esto es muy distinto a lo que teníamos inicialmente.
06:23Sí, que es una página.
06:24No, eso ya es e-commerce, una tienda.
06:27Y requiere un servidor, digamos que un poquito más robusto.
06:30¿Vale?
06:31Bien.
06:31Adicional a eso, también podemos tener un blog, ¿no?
06:34Que un blog está más hecho para crear entradas.
06:36Usted crearle contenido periódico.
06:38Por ejemplo, este de acá, me parece uno muy bueno.
06:41Miren, incluso tiene un videíto de fondo.
06:43Miren la estructura que viene.
06:44Me parece algo muy bonito y es de cocina.
06:47Es más, podemos usarlo como ejemplo.
06:49Si quisiéramos este como ejemplo, pues de una vez empecemos con el estilo.
06:53Por ejemplo, los colores.
06:54Digamos, yo soy más afín al azul.
06:55Podemos cambiarlos de una vez.
06:57El tipo de fuente.
06:58Si quiere una fuente serifada, podemos elegirla.
07:00Yo las odio.
07:01Por ejemplo, me gusta la...
07:02Yo le digo Monserrate a esta fuente.
07:04Pero esa fuente me parece bien.
07:05Me parece muy, digamos, como genérica.
07:08Y si quiero, puedo incluso cambiar el logo que es este que aparece acá arribita.
07:11Hasta ahí, perfecto.
07:12Vamos a darle continuar.
07:14Ahora, esto que queremos acá es opcional.
07:16Podemos saltarlo.
07:17Y esto, por último, y no menos importante, debemos elegir básicamente todos.
07:22Menos el último.
07:23Si no quieren, no es necesario.
07:25Pero acá hay una gran advertencia, muchachos.
07:27Aquí estamos creando un sitio web desde cero.
07:30Ojo con esto.
07:31Desde cero.
07:32Muy distinto.
07:33Si ya tenemos un sitio con contenido.
07:36Y si yo llego a crear este sitio con los datos de ejemplo.
07:39Por ejemplo, importar el contenido.
07:41Pues lo que va a hacer muy seguramente es borrarme todo el contenido ya creado.
07:46Por reemplazar al contenido de este sitio.
07:49¿Ok?
07:49Entonces, este ejemplo que yo estoy haciendo es para crear sitios nuevos.
07:54¿Vale?
07:54Si no es nuevo, pues obviamente no importa los ajustes personalizador.
07:58No importa los datos de ejemplo.
08:00Los widgets y plugins, pues bueno, esos sí son necesarios.
08:03Del resto, en este caso, como es un sitio nuevo.
08:05Voy a elegirlos y voy a darle crear mi sitio web.
08:08Y felicidades, muchachos.
08:09Tenemos un sitio web creado en tan solo 28 segundos.
08:13Entonces, vamos a ver nuestro sitio.
08:16Y miremos que haya instalado correctamente.
08:18Ahí está el videíto.
08:19Viene todo perfecto.
08:21Qué hermoso sitio.
08:22Ya está hecho como tal.
08:24Entonces, obviamente, todas las páginas deben estar hechas.
08:27Como acerca de el blog y el contacto.
08:31Perfecto.
08:32Entonces, ya teniendo nuestro sitio hecho.
08:34¿Cuál es el paso a seguir?
08:35Entonces, el paso sería pues la modificación del sitio.
08:38Vamos a darle ver nuestra dashboard.
08:40Que es el mismo panel de administración de WordPress.
08:42Y aquí nos dirigimos entonces a páginas.
08:45Y dentro de páginas, pues están las mismas del menú para modificar.
08:48Entre ellas, home o inicio.
08:50Le damos a editar.
08:52Y aquí en edición, pues ya podemos modificarlo todo.
08:54Tanto el texto.
08:55Por ejemplo, si quiero cambiar esto.
08:57Cómo cocinar.
08:59Sí, es algo como simplemente cambiarlo.
09:01Si quiero cambiar el video, doy un clic.
09:03Y aquí en estilo, podemos modificar el video.
09:05Como cambiar video.
09:07Eso lo expliqué en otro tutorial.
09:08Cómo hacer un video eficiente para páginas web.
09:11Ya que no podemos colocar uno muy pesado.
09:13Porque pues digamos que cambiar los tiempos de carga.
09:16Ahora, en cuanto a modificación del sitio.
09:18Aquí realmente solo es cambiar información.
09:20Pero hay algo fundamental que debemos aprender.
09:23Y es que añadimos.
09:25Y algo aquí llamado container.
09:27Con este container usted puede hacer maravillas.
09:29Por ejemplo, si usted quiere los tres servicios.
09:31Que teníamos en otra plantilla.
09:33Yo puedo añadir este container aquí.
09:35Lo suelto.
09:37Y ahora le decimos, por ejemplo, que queremos tres columnas.
09:40Y aquí pues básicamente yo añado tres fotitos y tres textos.
09:43Lo que yo quiero hacer.
09:44O sea, añadimos.
09:45Y aquí miramos, por ejemplo, la caja de información.
09:47Si es lo que a usted le interesa.
09:49O una imagen.
09:50O un llamado a la acción que sea un botoncito.
09:52Lo que usted quiera.
09:53Solo arrastramos.
09:54Y empezamos a modificar.
09:56¿Cierto?
09:56Así de sencillo.
09:58Si no le gustó nada de esto.
09:59Pues elegimos de nuevo el container.
10:00Y lo eliminamos.
10:02Y aquí no ha pasado nada.
10:04Esto en cuanto a páginas.
10:06Ahora, volvamos a la dashboard.
10:08Salgamos sin guardar.
10:10En cuanto a las entradas que es para el blog.
10:12Vamos a dar un click.
10:14Aquí vemos que tenemos varias.
10:15Si miramos nuestro sitio y le damos en blog.
10:18Vemos que son varias entradas que tenemos.
10:20¿Cierto?
10:20Cada una de ellas está aquí.
10:22Podemos crear una desde cero.
10:24Añadir nueva entrada.
10:25O podemos usar el creador con inteligencia artificial.
10:28Que viene con Hostinger.
10:29Pero si hacemos una desde cero.
10:31Añadir una nueva entrada.
10:32También podríamos usar.
10:34Añadiendo un nuevo bloque.
10:35Bajamos un poquitico.
10:37Y acá hay algo llamado.
10:38Un bloque con inteligencia artificial.
10:40Lo soltamos.
10:41Y aquí le podemos indicar, por ejemplo.
10:43Crea una receta.
10:45Para hacer una torta de manzana.
10:48Por ejemplo.
10:49Queremos que hable formal.
10:50Puede ser.
10:51O que puede ser friendly.
10:52O sea, más amistoso.
10:53Y que sea largo.
10:55E incluso que incluya imágenes.
10:57Generar contenido.
10:59Y listo.
11:00Ya tenemos toda una publicación.
11:01De cómo crear una torta de manzana.
11:04Hecha con inteligencia artificial.
11:05En un par de segundos.
11:07Así de fácil es crear contenido.
11:08Le metemos hasta publicidad.
11:09Y ya tenemos un sitio monetarizando.
11:11Entonces.
11:12Así se crean todas las entradas.
11:13Y las páginas.
11:15Ahora.
11:15Esto es en cuanto a crear contenido.
11:18Solo nos quedan dos temitas muy importantes.
11:20Y uno es la personalización.
11:22Y otro la eficiencia.
11:24En cuanto a personalización.
11:26Si estamos por ejemplo.
11:27En la página de inicio.
11:28Bueno aquí me debería aparecer una barrita.
11:30Para personalizar.
11:31Qué raro.
11:32Si no me aparece.
11:33Solo tenemos que ir a apariencia.
11:34Personalizar.
11:36Qué raro que no me apareció esa barrita.
11:38Y desde aquí.
11:39Podemos modificar los estilos.
11:41Por ejemplo.
11:42En global.
11:43Podemos modificar de nuevo la tipografía.
11:45O podemos modificar los colores.
11:47O si retrocedemos un poquitico.
11:49Vamos a la identidad del sitio.
11:50Y podemos volver a cambiar.
11:52Bueno este es el icono.
11:53Que es el favicon.
11:53Que está acá arribita.
11:55Ajustes del título.
11:56Y aquí está lo que es el logo.
11:58¿Se acuerdan lo que al principio podemos modificar?
12:00Bueno acá se encuentra.
12:01Por si no lo cambiaron como yo.
12:03Aquí lo podrían cambiar.
12:04Ok.
12:05Bien.
12:05Eso es personalización.
12:06Aquí básicamente es que usted explore.
12:09Una por una.
12:10Todas las opciones que aparecen aquí.
12:12Vale.
12:13Una vez hecho eso.
12:14Entonces vamos con la eficiencia.
12:15Aunque podemos hacerla desde un principio.
12:17Si ustedes se dan cuenta.
12:18Tenemos un plugin.
12:19Que viene por defecto en Hostinger.
12:21Si no.
12:21Les recomiendo que lo instalen.
12:23Llamado.
12:23Light Speed Cache.
12:25Esto es para la caché del sitio.
12:27Para que sea mucho más rápido.
12:29A este Light Speed.
12:30Aunque ya tengo un tutorial hecho.
12:32Para que ustedes lo modifiquen.
12:33Paso por paso.
12:34Podemos ir directamente a presence.
12:36Y podemos activar una configuración por defecto.
12:39Digamos.
12:39Advance.
12:40Aplicamos.
12:41Aceptar.
12:42Y aquí lo que hemos hecho básicamente.
12:43Es optimizar la mayoría de las propiedades de WordPress.
12:46Algo digamos que no tiene mayor relevancia.
12:48En cuanto al sitio.
12:49O sea no lo va a dañar.
12:51De ahora en adelante.
12:52Cada modificación que haga en páginas o entradas.
12:54Yo le recomiendo que vaya a este ícono.
12:56Y le de purgar todo.
12:58De esta forma usted puede ver los cambios de su sitio.
13:00En vivo y en directo.
13:01Aquí se vaciaron todas las cachés.
13:03En cuanto a Hostinger.
13:04Podemos ir aquí.
13:05En el tablero de nuestro sitio.
13:07208.com.co
13:09Aquí donde dice.
13:09Rendimiento.
13:10CDN.
13:12Y si bien en este caso ya está activo.
13:14Podemos personalizarlo.
13:16Y luego vamos aquí donde dice.
13:17Optimización del sitio web.
13:18Y activamos esas opciones.
13:20Vale.
13:21Ya por defecto tenemos la compresión de imágenes.
13:23Para que no haya ningún problema con las imágenes.
13:25Guardamos cambios.
13:26Y aquí me dice que la configuración ya se hizo.
13:28Esta es la mayor optimización que podemos hacer.
13:30Créame que vale la pena.
13:32Y ahora si hacemos un PageSpeed.
13:34Que es para verificar la velocidad de nuestro sitio.
13:37Elegimos nuestro sitio.
13:38Y le damos a analizar.
13:40Vemos que está al 97 en teléfonos móviles.
13:43Y al 99 en ordenadores.
13:45Y eso que tenemos un video como carga inicial.
13:49Es bueno resaltar aquí en este caso.
13:51Que ni siquiera ha hecho modificaciones como tal.
13:53Para optimizar aún más la página.
13:55Y aún así mira el rendimiento que tiene este sitio web.
13:58O sea como les dije.
13:59Las plantillas Astra son las mejores.
14:02Y al tener un servidor.
14:03En este caso en Hostinger.
14:05Tenemos un servidor LightSpeed.
14:07Que es el que tiene la mejor velocidad para WordPress.
14:10En la internet.
14:11Muchachos ya con esto.
14:12Usted debería tener su sitio web terminado.
14:14Y pues ya básicamente solo es modificar algunas cositas.
14:17Que pues tiene que ver con su empresa.
14:19Muchachos hasta aquí llego yo.
14:21Recordemos que el conocimiento es para todos.
14:24Si tiene alguna dudita o alguna pregunta.
14:25Para eso están los comentarios.
14:27Háganla con todo gusto.
14:29Recuerda suscribirte.
14:30Nos vemos en un próximo tutorial.
14:31Hasta luego.