Cómo hacer una página web para mi negocio – Tutorial paso a paso y desde 0

Ver el Tutorial Completo en 7 Pasos

Paso 5 de 7 - Crear Apartados de la Web

Como este paso es uno de los más largos, para que te sea mas fácil de seguir, lo he dividido en varios subpasos:

Paso 5.1 de 7 - Diseñar Página de Inicio

Paso 5.2 de 7 - Diseñar Página de Quienes Somos

Paso 5.3 de 7 - Diseñar Página de Servicios

Paso 5.4 de 7 - Diseñar Página de Blog

Paso 5.5 de 7 - Diseñar Página de Contacto

Descripción del tutorial

En este tutorial aprenderás como crear una impresionante página web para tu negocio paso a paso y desde cero, que podrás poner completamente a tu gusto y sin tener que programar ni una línea de código. Tendrás tu página web lista y funcionando hoy mismo.

Lo mejor de este tutorial es que no tienes que tener ningún tipo de experiencia previa, ni saber programar, ya que todo lo harás visualmente, pinchando y arrastrando con el ratón y viendo en todo momento como van quedando los cambios que vas haciendo, así de simple.

Asegúrate de ver el vídeo hasta el final donde además te explico cómo añadirle una tienda online a tu nueva web para que puedas vender tus productos o servicios por todo el mundo.

PASOS A SEGUIR

El tutorial lo he dividido en 7 simples pasos, pensados especialmente para que puedas crear tu web de la forma más intuitiva, lógica y directa posible así podrás comprender mejor los conceptos que aprenderás hoy.

7 simples pasos que al finalizarlos te permitirán tener tu web completamente funcionando hoy mismo.

Para facilitarte la labor al máximo, he creado una lista de comprobación en pdf con todos los pasos que vamos a seguir ordenados según se avanza en el video de forma que los puedas ir marcando a medida que los vayas completando.

La lista la he creado de forma que si pinchas en el título de cada paso, te llevará a youtube al punto exacto del vídeo donde se explica ese paso, para que así no pierdas tiempo buscando en el vídeo. A que es genial ? 😉

Podrás encontrar y descargar el documento en la descripción del vídeo, o bien pinchando en el sigueinte botón:

Para guardarlo tan solo tienes que pulsar el botón de descargar que podrás encontrar en la parte superior derecha del navegador.

Te recomiendo que descargues el documento al escritorio de tu ordenador y cada vez que completes un paso de la lista, le des a archivo -> guardar , así la próxima vez que retomes el vídeo sabrás en qué punto habías quedado.

Ahora que ya has descargado la lista de comprobación, puedes entrar a ella y marcar ese paso como completado.

Una vez hecho esto, dale a Archivo -> Guardar, para guardar tus progresos, así cuando pares y la vuelvas a abrir ya sea dentro de un rato, mañana o pasado. Bueno, espero que no vayas a parar ahora !!!.

Cuando la vuelvas a abrir podras comprobar exactamente donde lo habías dejado y continuar desde ahí.

Recuerda que si pinchas en el título de cada paso, te llevará al punto exacto del vídeo donde se explica ese paso en concreto, esto es muy práctico, ya que si por ejemplo el ultimo paso que habías completado era el de dominio y alojamiento, pues cuando vuelvas a abrir el archivo lo único que tienes que hacer es pinchar en el siguiente paso de instalar wordpress y continuar con el vídeo.

Muy bien, sabiendo todo esto, empezaremos ya en unos segundos pero antes quiero explicarte brevemente en qué consisten las secciones en las que he dividido el vídeo y que puedes esperar aprender en ellas.

Paso Nº 1 - Dominio y Alojamiento

Para que una página web exista en internet, tiene que tener un dominio y un alojamiento.

El dominio es el nombre de tu página web, es lo que la gente escribe en el navegador para poder encontrar tu web en internet, por ejemplo, el dominio de google es google.com, el dominio de facebook es facebook.com el domino e mi página web es voxelartsatudio.com y el dominio de tu página web será tunombre.com o elnombredetuempresa.com.

El alojamiento digamos que es un ordenador especial en el que se almacena todo el contenido de tu página web ( textos, fotos, videos, audios, etc) este ordenador especial está todo el día encendido y tiene una conección a internet súper rápida para que cuando un visitante solicite entrar a tu web, la pueda ver al instante.

Si solo tienes el dominio y no tienes alojamiento, cuando la gente intente entrar a tu web, esta aparecería en blanco, ya que no habría ningún sitio en el que guardar todo su contenido e información.

Para que puedas entenderlo mejor, el dominio sería como la dirección de tu casa y el alojamiento sería el lugar donde están guardadas las cosas de tu casa.

El dominio y alojamiento es lo único que tiene coste en todo el proceso de creación de una web, ya que hay que hacerlo con empresas especiales que ofrezcan esos servicios.

Lamentablemente no hay forma de saltarte este paso, ya que para que tengas tu propio dominio, es decir, el nombre de tu página web, el dominio debe ser comprado y necesitas un alojamiento para guardar el contenido de tu web al igual que si alquilas una casa, que debes pagar su alquiler.

Pero no te preocupes, que el coste de ambas cosas es ridículamente bajo para todos los beneficios que te proporcionará tu nueva web ya que estamos hablando de un coste de entorno a unos 10 dolares al mes por todo, lo que es un precio realmente bajo a cambio de poder tener una audiencia mundial.

La empresa de registro de dominios y alojamientos que usamos en este tutorial es TMDHOSTING, Puedes usar el código de cupon VOXELART5 , para que te hagan un descuento en el plan que elijas. Puedes acceder a su web pulsando en el siguiente botón:

Paso Nº 2 - Instalar WordPress

Instalar wordpress es super facil, es como instalar un programa en tu ordenador o una aplicación en tu teléfono móvil, lo podrás hacer en unos pocos cliks es rápido y sencillo.

Paso Nº 3 - Instalar Nuevo Tema

Este paso te va a encantar, ya que vamos a instalar un nuevo tema en tu web que va a transformar completamente la apariencia de tu web.
Quizás te estés preguntando que es un tema, te lo explicaré en detalle más adelante,pero si tienes curiosidad, que sepas que un tema básicamente es lo que define la apariencia de tu web. Es por así decirlo la ropa que le pones a la web para que se vea de una forma u otra.
Y no te preocupes, que este paso tambien es super rápido y fácil, lo podrás completar en menos de 3 o 4 clicks.

El tema que usaremos en este tutorial se llama SYDNEY, y puedes encontrarlo en los repositorios de wordpres, o en la web de aThemes, el creador de este tema.

Paso Nº 4 - Personalizar Tema

Este apartado te va a encantar, ya que aquí es donde empezarás a definir la apariencia de tu página web.

Definirás aspectos esenciales de la web como son sus colores , tamaño y tipo de letras, etc.

Amarás este apartado, ya que verás que tu web comienza a coger forma en unos pocos clics todo de forma muy visual y siempre viendo lo que estas cambiando en cada momento.

Paso Nº 5 - Instalar Plugins

Los plugins son como pequeños programas o aplicaciones que le añaden a tu web más funcionalidades de las que traia por defecto.

Cuando compraste tu teléfono móvil, este no te traia el whatsapp ni el facebook instalado, para poder tener esa funcionalidad tuviste que instalarle las aplicaciones.

Pues con wordpress sucede lo mismo, solo que en lugar de llamarse aplicaciones, se les llama plugins.
Por ejemplo, wordpress no te trae por defecto un formulario de contacto para que la gente te envie mensajes desde la web, pues lo que puedes hacer es instalar un plugin que te de esa funcionalidad.
No te preocupes, que son muy fáciles de instalar y tambien se hace en menos de 3 o 4 clicks, tal cual lo harías en el teléfono móvil.

Paso Nº 6 - Crear Apartados de la Web

Este paso tambien te va a encantar ya que es en el que crearás las diferentes secciones de la web tales como son, la página de inicio, los servicios que ofreces, el área de contacto, el apartado de quienes somos, el blog, etc

La sección de quienes somos te da una buena oportunidad de hacer crecer tu audiencia o comunidad, ya que aumenta la confianza en tu marca y demuestra a la gente que amas lo que haces.
Añadir a tu web secciones como la de contacto o el blog hará que tus visitantes puedan contactar contigo o iniciar una conversación con tu empresa.

Tener un blog te dará la posibilidad de conectar y hablar con tu audiencia de las cosas que más te importan y lo podrás hacer dando a tu audiencia contenido fresco y nuevo periódicamente que hable de cosas que le puedan interesar a ti y a el, si lo haces de esta forma podrás construir un negocio online realmente exitoso

Este paso te va a encantar ya que harás todo visualmente pinchando y arrastrando con el ratón y colocando el contenido que quieras justo en la parte que deseas de la web y viendo en todo momento como va quedando el resultado final

Paso Nº 7 - Bonus: Tienda Online

Este último paso no lo tenía planificado para este vídeo y es un regalo que te quiero hacer. Te voy a ayudar a añadirle una tienda online a tu web para que puedas vender tus productos y servicios por todo el mundo.

¡¡¡ FELICIDADES !!!

Quiero darte mi más sincera enhorabuena, ya que has conseguido algo que muy poca gente es capaz, has hecho tu propia página web tu mismo. Está probado que solo 1 de cada 20 personas que empiecen el curso llegarán hasta aquí por el esfuerzo y dedicación que ello requiere. Tu lo has hecho estupendamente, has demostrado ser una persona trabajadora y excepcional, puedes estar orgulloso de ti, yo estoy muy orgulloso de ti y me encantaría poder ver como ha quedado tu nueva web, déjame un enlace a ella en los comentarios para poder verla.

Si esta es tu primera vez por aquí y quieres aprender a crear espectaculares páginas webs como la de este tutorial, así como un montón de trucos y técnicas de diseño web, asegúrate de Suscribirte ahora a mi canal de youtube y de pulsar en la campanita de notificaciones, para que no te pierdas nada.

Si el tutorial te ha sido útil o te ha gustado, asegúrate de darle al Like.

Si tenéis cualquier duda, consulta o dificultad a la hora de seguir el tutorial, ya sabes, me lo puedes dejar aquí abajo en los comentarios.

Comparte este tutorial con esa persona que sabes que también le puede ser muy útil.

Mi nombre es Juan Bonilla, Informático, diseñador e instructor web.
Nos vemos en el próximo tutorial, hasta pronto !!!

RECURSOS

LISTA DE COMPROBACIÓN

Usa el código de cupón VOXELART5 para que te hagan descuento.

VER PROPAGACIÓN DNS

DESCARGAR IMÁGENES DE CALIDAD

EDITOR DE IMÁGENES ONLINE

Recuerda seleccionar la opción que pone PIXLR EXPRESS.

Te recomiendo que redimensiones las imágenes a un tamaño máximo de 1920 px de ancho o 1080 px de alto, esto lo puedes hacer entrando en la opción que pone Adjustment -> Resize.

Cuando guardes las imagen ( pulsando en SAVE ), recuerda ajustar la calidad ( Quality ) hasta que te ponga que el peso de la imagen sea como mucho entre 250 y 300 KB.

IMÁGENES USADAS EN ESTE TUTORIAL

CAMBIAR TIPO DE LETRA DEL TEMA

GENERAR TEXTOS AUTOMÁTICAMENTE

LISTA DE PLUGINS USADOS EN EL TUTORIAL

PLUGINS ADICIONALES RECOMENDADOS

CÓDIGOS CSS PARA REMATAR LA WEB

/*Aumenta el tamaño de las letras del slider de la pagina de inicio */
.text-slider .maintitle {
font-size: 70px;
}
/* Reduce el tamaño del texto del slider para que se vea bien en el movil  */
@media only screen and (max-width:360px){
.text-slider .maintitle {font-size: 20px;}
}
/* Centra el botón de enviar en pirateforms */
.pirate_forms .pirate-forms-submit-button {
float: none;
margin-left: 0;
}
.pirate-forms-g-recaptcha > div {
float: none;
display: inline-block;
}
.pirate_forms_wrap .form_field_wrap.form_captcha_wrap, .pirate_forms_wrap .form_field_wrap.contact_submit_wrap {
width: 100%;
}
.pirate_forms_wrap .form_field_wrap.contact_submit_wrap {
text-align: center;
}
/* Hace que los recuadros del formulario contacto esten bien colocados */
textarea, input[type="text"], input[type="submit"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input, .dropdown-menu, .navbar .nav > .active > a, .navbar .nav > .active > a:hover, .navbar .nav > .active > a:focus {
width: 100%;
}
/* OCULTA LA BARRA LATERAL EN LAS PAGINAS DE WOOCOMMERCE Y PERMITE QUE SE MUESTREN EN EL BLOG */
.woocommerce #primary, .woocommerce-cart #primary, .woocommerce-checkout #primary, .woocommerce-account #primary {width: 100%;}
.woocommerce #secondary, .woocommerce-cart #secondary, .woocommerce-checkout #secondary, .woocommerce-account #secondary {display: none;}
/* Cambia el color del fondo de OFERTA a negro */
.woocommerce span.onsale {
background-color: #000;
}
/* Cambia el color de fondo de los botones de woocommerce a negro al situarse encima */
.woocommerce #respond input#submit:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover {
background-color: black;
}

CONFIGURAR PLUGIN WP MAIL SMTP

Correo electronico remitente → info@nombredetupaginaweb.com

Nombre remitente → Nombre de tu empresa

Servicio de correo electronico → Enviar todos los correos electronicos de WordPress a traves de SMTP

Servidor SMTP → mail.nombredetupaginaweb.com

Puerto SMTP → 465

Encriptacion → Usar encriptación SSL

Identificacion → Si, usar identificacion SMTP

Nombre de usuario → info@nombredetupaginaweb.com

Contraseña → La contraseña que sea

VÍDEOS USADOS EN ESTE TUTORIAL

Vídeo de fondo cabecera página inicio

Vídeo de fondo sección página inicio

Vídeo usado en el blog

Vídeo de fondo página de contacto

ENLACE A WEB CREADA Y FINALIZADA EN ESTE TUTORIAL

33 comentarios en “Cómo hacer una página web para mi negocio – Tutorial paso a paso y desde 0

  1. La parte final del footer me encanto, esa forma en la que unes el vídeo con esas curvas le da un toque muy creativo y profesional. Sin embargo, yo usaria, W3 Total Cache y WP Smush para mejorar el tiempo de carga de la web y de las imagenes. Aun así, me gusto bastante, felicidades.

    1. Hola Quimica para Ingenieros 🙂
      Me alegro que te haya gustado el tutorial.
      Respecto a lo del footer, la verdad es que es una pasada el Elementor, te permite crear cosas muy chulas como ese efecto que comentas.
      Prefieres W3 Total Cache respecto a WP Fastest Cache por algún motivo en concreto ?
      Nunca usé W3 Total Cache.
      Y el plugin que me comentas de WP Smush creo que lo instalé una vez para probarlo, pero nada más.
      He recomendado en el tutorial los plugins que suelo usar habitualmente en mis web y la de mis clientes.
      Pero le echaré un vistazo más a fondo a esos que me dices.
      Un saludo, hasta pronto !!! 😉

    1. Hola José, me alegro que te guste el vídeo, espero que te pueda ser útil toda la información que comparto en el.
      Muchas gracias por pasarte por la web y dejar tu opinión.
      Cualquier duda que tengas, ya sabes, pregunta por aquí o por Youtube cuando quieras.
      Un saludo, hasta pronto 🙂

    2. Hola José, me alegra mucho que te esté gustando el vídeo.
      espero que puedas aprender muchas cosas nuevas y que te sean útiles a la hora de crear tu web.
      Cualquier duda que tengas, ya sabes, pregunta por aquí o por el canal de Youtube.
      Un saludo para ti, hasta pronto !!! 🙂

  2. Como es costumbre un excelente tutorial y sobre todo se nota tu empeño y disfrute al compartir tu conocimiento con nosotros, te agradezco como siempre lo he hecho tu ayuda.

    1. Hola Rony, que bien tenerte por aquí otra vez 🙂
      Me alegro mucho que te haya gustado este último vídeo, la verdad es que está cargadito de un montón de información fresca e interesante para los que empiezan o que estamos ya metidos en el mundo del diseño web, espero que te pueda ser útil.
      Un abrazo, hasta pronto 🙂

    1. Hola Garbiel, un Banner publicitario no es mas que una imagen o video con un enlace al sitio que deseas enviar a la gente, es tan facil como subir la imagen y en las propiedades de la imagen decirle que es un enlace y ponerle a donde quieres que te enlace.
      De todas formas, si miras el tutorial podrás aprender como hacerlo.
      Espero haber resuelto tu duda. 🙂
      Un saludo, hasta pronto !!

  3. Hola tengo una duda al respecto al utilizar el editor elementor realize todas las modificaciones que necesitaba al seleccionar visualizar me aparece todo tal cual lo organice y modifique pero la abrir la pagina en un plorador distinto me parecen los contenidos y demas pero las modificaciones de formato que se realizaron otro detalle que no se si tenga que ver con ello el problema es que en lugar de aparecer el boton guardar en elementor en la parte inferior izquierda me aparece como actualizar me podrias apoyr para decectar en que esta el error del por que no me aparece tal cual como se edito y como lo visualiza el editor elementor?

    1. Hola Alejandro, el problema que estas teniendo tiene pinta de ser un problema con la “Caché” o bien del navegador o del plugin WP-Fastest-Cache.
      Prueba a hacer lo siguiente:
      Vete al escritorio de WordPress -> En la barra superior, verás un icono como con un Guepardo de color amarillo que pone WPFC, pues colocate encima de el y pincha en “Delete Cache” y en “Delete Cache and Miniffied CSS/JS” , una vez hecho esto, prueba a recargar la página y si sigue sin verse bien, pues prueba a abrir la web con otro navegador distinto.
      De todas formas esto debería resolver el probelema.

      Respecto a que a ti te aparece “Actualizar” en lugar de “Guardar”, eso es porque Elemento le cambió el nombre al boton de guardar, asi que no te preocupes que es lo mismo darle a Guardar que a actualizar, solo es la forma en la que Elementor te muestra el botón.

      Avisame si pudiste resolver el problema de la caché.
      Un saludo. Hasta Pronto !!! 😉

  4. Hola y buenos dias!! Hoy inicio esta aventura con su magistral guía. Me parece que estas localizado en España, sin embargo tu acento me suena como oriundo de los que les gusta el mangu y el concon con habichuelas. Buen trabajo, felicidades!!

    1. Muy buenos días Teuddis 🙂
      Bienvenido a la web y gracias por dejar tu comentario.
      Te doy la enhorabuena por este nuevo proyecto en el que te vas a embarcar, si te surge cualquier duda según avanzas con tu web, no dudes en preguntarme. Ya sabes por donde me puedes encontrar.
      Respecto a lo de mi localización… jeje. Veo que tienes nueva puntería. No sólo me encanta el concón con habichuelas, sino también un buen mangú con salami Induveca. De vez en cuando un buen PicaPollo y cuando se pueda un buen Morirsoñando. Jeje.
      Te deseo mucho éxito con tu nueva web. Y ya sabes, cualquier duda. Por aquí me tienes. Un abrazo desde España para ti y mi tierra Quisquella la bella 😉
      Un saludo, hasta pronto !

  5. Excelente tutorial, te agradezco por tu ayuda y por compartir tus conocimientos. Fui realizando paso a paso todo el tutorial hasta que llegue al uso del ELEMENTOR pero me apareció un error (Elementor requiere PHP 5.4+, el plugin NO está activo en este momento.) y hasta ahí llegue ya que no se que debo hacer o como solucionar esto, existirá una manera de solucionar esto que me puedas ayudar y a toda la comunidad que te seguimos

    1. Hola Pablo, es raro ese error que me comentas, parece que estas usando una versión de PHP antigua en tu proveedor de alojamiento.
      Estás usando el proveedor que te recomiendo en el vídeo ( http://bit.ly/dominio-y-alojamiento ) o uno distinto ?
      Si es uno distinto, tendrás que contactar con tu proveedor y decirles que te actualicen la versión de PHP a almenos la 5.4, aunque lo ideal seria que te ponga la ultima version, que está ya por la versión 7 de PHP o que te expliquen como hacerlo.

      Si nada de esto te resuelve el problema, prueba a ir al escritorio de WordPress -> Elementor -> Ajustes -> Avanzado -> Cambio de método de carga del editor -> Activar
      Y prueba a ver si así ya te funciona.
      Avisa si lo pudiste resolver.
      Un saludo, hasta pronto!!! 😉

  6. Me encanto el tutorial, pero tengo una duda como le puedo hacer para crear una pagina web de afiliados en Amazon, hojala hagas un video al respecto. -Gran Trabajo Felicidades-

    1. Hola Marco, para hacer una página web donde promociones productos de afiliado de Ámazon te vale este mismo tutorial, lo único que debes hacer es poner el enlace a los productos que promocionas, por ejemplo, puedes poner una foto de una cámara de de foto que promociones, con su título y su descripción, y haces que la imagen o/u el título sean enlaces, que cuando la gente pinche en esos enlaces te lleven a la web de afiliado, en este caso a la web de Amazon.
      Cuando vayas a poner el enlace al producto, claro, pones el enlace de afiliado que te identifica a ti.
      Por tanto, no es que haya una forma “especial” o distinta de hacer una página de afiliado, es como te acabo de explicar.
      Espero que lo hayas entendido, si te queda cualquier duda, ya sabes, pregunta por aquí o por Youtube cuando quieras.
      Un saludo, hasta pronto 🙂 !

    1. Hola Jonathan, que clase de error te da cuando intentas poner el SSL ?
      Si quieres envíame por correo electrónico ( info@voxelartstudio.com ) una captura de pantalla del error para poder ayudarte mejor.
      Y dime cual es el nombre de tu página web para poder ayudarte mejor.
      Un saludo, hasta pronto !

    1. Hola Agustín.
      ¿Lo que no te funciona es la opción de poner comentarios en el blog o el apartado de contacto de la web?
      Cuando intento entrar a tu web http://calderasantillana.com/ me pone que la tienes puesta en modo mantenimiento y no puedeo ver donde está el error.
      ¿Puedes Habilitarla para poder comprobar lo que sucede?
      Un saludo 🙂

    1. Hola Agustín, ¿ qué es lo que sucede exactamente? ¿ no te sale el formulario, te da algún error, no te llega el mensaje cuando lo envías ?
      Intento entrar a la web que pusiste en tu perfil y me pone que la tienes puesta en modo mantenimiento y no puedo reproducir el error que me indicas
      ¿ Puedes describir un poco más que es lo que está sucediendo o habilitar la web para verlo mejor ?
      Un saludo 🙂

  7. Excelente tutorial y explicado muy bien, estuve buscando un software para mi pagina y muy pronto lo terminare gracias y sigue así. saludos desde Perú.

    1. Hola Edwin, excelente, me alegra mucho saber que el tutorial te está ayudando.
      Cuando tengas tu web acabada dime cual es el enlace a ella para echarle un vistazo, me encantaría verla!!! 🙂

      Si te surge cualquier duda, recuerda que puedes preguntarme por aquí o por Youtube cuando quieras.
      Un saludo, hasta pronto !

    1. Hola Marco Antonio, me alegra mucho saber que te haya gustado el tutorial y te haya sido fácil y ameno de seguir.
      Es un orgullo saber que la gente va aprendiendo cosas nuevas y que les son útiles con tus vídeos. 😉
      Si te surge cualquier duda, recuerda que me puedes preguntar por aquí o por Youtube cuando quieras.
      Te deseo mucho éxito con tus proyectos.
      Un saludo, hasta pronto ! 🙂

  8. Hola buen día ! ya estuve comentando en el vídeo en youtube la verdad que me parece fantástica tu forma de enseñar. me gustaría quizá que si hay próxima vez o si hacen un vídeo para agregarle características a la pagina, que enseñen como hacer el cartel para suscribirse apenas entren a la pagina principal, así cada vez que hay una entrada nueva en el blog les llegue un mail a la gente suscripta con el link para que entren a verlo. Muchas gracias !

    1. Hola Rocío, me alegra saber que te está gustando el tutorial y te está enseñando cosas nuevas. 🙂
      Respecto a tu consulta, no te preocupes, en breve tengo pensado realizar un tutorial donde explique como hacer justo lo que preguntas, para que tu web notifique a la gente cuando publiques un nuevo artículo. Estate atenta!
      Un saludo, hasta pronto!!!

Deja un comentario

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