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

Crea Tu Web En 7 Pasos

Paso 5 de 7 - Crear Apartados de la Web

Como este paso es uno de los más largo, para que te sea mas fácil de consumir 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

TUTORIAL COMPLETO EN 1 SOLO VÍDEO

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

8 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. 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 🙂

  3. 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 !

Deja un comentario

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