Milán Tutorial

¿Tienes alguna duda?

Dirígete a nuestra sección de Preguntas Frecuentes o visita la página de soporte de squarespace para aclararla.

01. Para Empezar

¡Bienvenido/a!

Esta página tiene todos los recursos y tutoriales que necesitarás para crear el diseño de Milan en tu cuenta de Squarespace. Recomendamos seguir este tutorial paso a paso. algo que puede lograr que el proceso de diseño web sea confuso es tratar de trabajar en todos los  aspectos del sitio web al mismo tiempo. Escribir contenido, encontrar fotos, aprender el software, crear elementos de diseño, detallar el contenido y configurar las herramientas técnicas, puede resulta un poco complejo si no existe un plan de ejecución claro. Por esta razón, hemos simplificado este proceso y lo hemos detallado en 10 simples pasos.

En los pasos #2 a #4 te ayudaremos a configurar una cuenta de Squarespace, aprender los conceptos básicos del software y luego crear una copia exacta del diseño presentación en tu cuenta. Una vez que el diseño esté totalmente construido, en los pasos #5 a #7, te mostraremos cómo organizar tu contenido escrito y cómo editar los archivos .psd que vienen con tu diseño para darle tu toque personal. Creemos que es más fácil centrarse en conseguir que el sitio se construya primero con todo el contenido de demostración y las imágenes, y luego preocuparte por personalizar y añadir tu propio contenido paso a paso. Finalmente, los pasos #8 - #10  Te prepararan para tu lanzamiento.

Cualquier duda, puedes escribirnos a traves de nuestra plataforma de soporte o te puedes dirigir acá para enviarnos un correo.

02. Crear una cuenta + elegir plantilla

SI YA TIENES UNA CUENTA DE SQUARESPACE:

Todo lo que tienes que hacer es activar la plantilla de Brine (que se encuentra aquí: https://www.squarespace.com/templates/brine).

*NOTA: Si tienes un sitio web de Squarespace que está EN VIVO, tendrás que arrastrar todas las páginas existentes de tu sitio web actual a la sección de "paginas no enlazadas" para quedarte con ellas. También te sugerimos que coloques una página de mantenimiento que le informe a los posibles visitantes que estas trabajando en tu página. Debido al nivel de personalización que llevaremos a cabo, algunas de las funcionalidades del sitio pueden verse interrumpidas al crear tu nuevo diseño.

SI YA NO TIENES UNA CUENTA DE SQUARESPACE, sigue estos pasos para crear una:

-Visita https://www.squarespace.com/templates/brine y haz clic en el botón que dice "Start with this Design".
-En la página siguiente, introduce tu nombre, una dirección de correo electrónico válida y una contraseña que utilizarás para iniciar sesión en Squarespace.
Ahora que estás inscrito/a a una cuenta de squarespace gratuita, puedes dejar tu sitio en prueba mientras avances hasta llegar a los pasos #5- #7 que están debajo. Te ayudaremos a configurar una cuenta premium y a configurarla en el Paso #8: preparación para el lanzamiento de tu página.

03. Tour de Squarespace

En este video podrás aprender todos los conceptos básicos de Squarespace, los cuales te serán útiles a medida que vayas leyendo los pasos debajo.

Contraseña del video: tourdesquarespace

04. Construir el Diseño

En el paso #4, te enseñare cómo construir el diseño de Milan en tu cuenta de Squarespace. Para poder seguir con este tutorial, tendrás que volver a la descarga inicial de tu Kit de diseño y dirigirte a Archivos Requeridos  > Archivos Requeridos Paso #4. En esa carpeta encontrarás una hoja con los datos de configuración del editor de estilo que te ayudarán a crear tu diseño, archivos jpgs que necesitarás subir y texto de prueba que necesitarás colocar en cada página. Crearás el diseño completo en tu cuenta de Squarespace con texto de prueba (Texto parecido al de nuestras páginas de demostración) y jpgs de muestra de nuestras demostraciones ANTES de empezar a personalizar el diseño con tu propio contenido e imágenes en los pasos #5 - paso #7.

Tip: Es recomendable tener un dispositivo con el video aparte para que puedas ir trabajando a medida que sigues el tutorial.

SUGERENCIA: Te enseñamos como eliminar algunas páginas en este próximo vídeo. Si actualmente tienes un sitio web de Squarespace que está actualmente EN VIVO y no deseas eliminar esas páginas, te sugerimos que arrastres las páginas hacia abajo a la sección de "páginas no enlazadas" para no perderlas.  Asegúrate de solo borrar las páginas que de verdad necesites borrar y de mover el resto a la sección de "páginas no enlazadas".

Contraseña del video: milanpass3457

05. Colocar Contenido

Luego de tener todo el diseño y la estructura de la página web realizados, es tiempo de llevar a cabo la confección de las informaciones a colocar. Solo tienes que buscar la hoja de calculo que se encuentra en la carpeta del kit de diseño en la siguiente  ubicacion: Archivos Requeridos > Archivos Requeridos Paso #5. Tras abrirla, solo debes de rellenarla con el contenido escrito en tu sitio web. Es posible que las páginas que desea en tu sitio no coincidan exactamente con el diseño que creaste en el Paso #4, si esto sucede, es tan sencillo como editar las páginas creadas, por ejemplo, puedes cambiar una 'página de servicios' por una página de 'contacto' o agregar una página adicional, de la misma forma en que lo hiciste en pasos anteriores.. Una vez que hayas añadido todo el texto a tus páginas, puede pasar al paso #6.

06. Colocar Imágenes

Luego de escribir todo el contenido de tu sitio web, es imperativo elegir las fotos que quieres que aparezcan en cada una de las págiunas del mismo. Puedes tomar algunas fotos con tu camara o extraerlas de algunas páginas web que ofrezcan fotos de stock. A continuación puedes encontrar algunas:

  • elements.envato.com - Puedes encontrar un gran número de fotos de stock que requieren una suscripción para descargar.
  • unsplash.com - Tiene algunas fotos utilizables y agregan nuevas cada día.
  • deathtothestockphoto.com - regístrate para recibir un paquete de fotos de stock gratis cada mes.
  • kaboompics.com - cientos de imágenes gratuitas de alta resolución con buena variedad.
  • mysocialcurator.com - Suscríbete a una suscripción mensual para obtener nuevas imágenes curadas en esta página.
  • startupstockphotos.com - grandes fotos gratis 'techy' - sería lo mejor para un sitio web corporativo.

Debajo puedes encontrar una lista de comprobación que puedes utilizar al preparar tus fotos para Squarespace. Las fotos deberían ser:

  • Sólo en formato.jpg,.gif. o.png. Recomendamos guardar fotos en formato.jpg y logotipos, iconos u otros gráficos que puedan necesitar un fondo transparente como un.png
  • Tamaño a 1500px de ancho. La única excepción es si estás usando una foto para una imagen de héroe o una imagen de fondo con capacidad de respuesta: estas fotos deben guardarse con un ancho de 2500 píxeles.
  • En modo de color RGB (no CMYK). RGB es el modo de color utilizado para las imágenes en la web. CMYK es para materiales impresos.
  • En un perfil de color sRGB. La mayoría de las imágenes ya tienen esto, así que no hay que preocuparse por ello. Sin embargo, si después de subir tus imágenes a Squarespace, los colores se ven mal, vale la pena abrir las imágenes en Photoshop para asegurarse de que tienen el perfil de color sRGB correcto.
  • Menos de 500 KB de tamaño de archivo. Squarespace puede acomodar cargas de hasta 20 MB, pero 500 KB te darán los mejores resultados y tiempos de carga.

CONSEJO: Si después de añadir fotos a tu sitio, tus imágenes o gráficos se ven "borrosos" o "pixelados", intenta cargar tu sitio en diferentes ordenadores y navegadores. Hemos notado que algunas veces las imágenes pueden verse borrosas en navegadores desactualizados o en ciertos tamaños de navegador, pero es un problema con el navegador, no con sus imágenes. Antes de redimensionar o recargar tus imágenes para solucionar el problema, asegúrate de que no se trata sólo de un problema del navegador.

07. Editar Gráficos

Tu diseño viene con algunos archivos PSD que se crearon para utilizarse en la creación de tu diseño de Squarespace. Ahora que has creado el diseño, organizado tu contenido y encontrado y guardado tus fotos para la Web, puedes personalizar los PSD y añadirlos a tu sitio para que incluyan tus propias imágenes y contenido. Puede encontrar los PSDs consultando la descarga inicial de tu Kit de Diseño y accediendo a Archivos Requeridos > Archivos Requeridos Paso #7. Una vez que hayas localizado los PSD, cheqeua el siguiente video para saber cómo editarlos.

Contraseña del video: paragramtutorialpsd

08. Preparar el Lanzamiento

¡Estamos orgullosos de ti! Ya casi has concluido con la elaboración de tu sitio web. Antes de publicarlo, hay algunos pasos finales que son importantes para el lanzamiento. Debajo te colocamos una breve lista de algunos consejos finales que te recomendamos seguir antes de concluir:

  • Añade un Favicon: Este es el pequeño icono que aparece en la pestaña o barra de direcciones en la parte superior de tu navegador web. Para agregar el tuyo, ingresa a Squarespace y ve a Diseño > Logo y Título > Icono del Navegador (Favicon). Sube la imagen que quieras usar (esta debe tener dimensiones de 32px x 32px) y pulsa 'guardar'. Limpia el caché de tu navegador para ver el favicon.
  • Realiza pruebas: Pídele a un amigo que corrija toda tu página web en cuanto a gramática, puntuación y errores tipográficos.
  • Revisa el responsive: Dado que los sitios de Squarespace son sensibles, se verán ligeramente diferentes dependiendo del tamaño del monitor. Abre tu sitio en un dispositivo móvil (y en una tableta si tienes una a mano) y en varios tamaños de monitor de escritorio para asegurarte de que se está cargando correctamente y de que todo el texto es fácil de leer.
  • Verifica los enlaces: Navega a través de tu sitio y haz clic en cada enlace en cada página para asegurarte de que están funcionando, prestando especial atención a la comprobación de cada enlace de medios sociales.
  • Prueba tus formularios: Envía una prueba para asegurarte de que tus formularios de contacto o de boletin de correos están funcionando.
  • Eliminar branding de squarespace: Considera la posibilidad de eliminar la línea "Powered by Squarespace" en el pie de página y reemplazarla con tu propia información de derechos de autor (si deseas).

09. Actualizar tu Plan + Conectar Dominio

Ya que tienes tu sitio web todo confeccionado y revisado, estarás listo/a para mejorar tu cuenta de squarespace a una cuenta pagada premium y tendrás la habilidad de conectar tu domninio. Una vez que completes los pasos a continuación, tu sitio estará en línea en con tu dominio y será visible para los motores de búsqueda.

  • Haz clic en el botón "TRIAL ACCOUNT - UPGRADE NOW" pegado en la parte inferior de tu sitio de Squarespace.
  • Elige un plan personal, de negocios o de comercio. CONSEJO: La principal diferencia entre un plan personal y un plan de negocios es que un plan de negocios te permite tener más de 20 páginas y hasta 20 productos (una cuenta personal te limita a 20 páginas y 1 producto). Si vendes más de 20 productos, necesitarás un plan de comercio.
  • Selecciona un plazo de facturación mensual o anual. CONSEJO: Si te inscribes para un período de facturación anual, obtendrás un nombre de dominio gratuito con la compra, así que ten eso en cuenta si aún no tienes un nombre de dominio.
  • Introduce la información de pago y haz clic en el botón `suscribirse'.
  • Ahora que ya tienes un plan de pago, puedes configurar tu nombre de dominio. Desde el menú de inicio en Squarespace, ve a Configuración > Dominios.
  • Si ya has adquirido un dominio de parte de un servicio de terceros como GoDaddy o Bluehost, haz clic en "Conectar un dominio de terceros" y sigue las instrucciones. Si aún no tienes un dominio, haz clic en "Obtener un dominio" y sigue las instrucciones para comprar un nuevo dominio o registrar uno gratuito si te registraste para un ciclo de facturación anual.
  • Una vez que tu dominio este configurado, puede tardar hasta 72 horas para que tu sitio web aparezca en línea para el publico en general.

10. Compártenos el Resultado

Estamos felices de que hayas logrado realizar tu sitio web en base a tus gustos y nos encantaría ver el resultado. Ingresa tu información y la dirección de tu sitio web a continuación, y revisaremos tu sitio. ¡Puede que incluso lo mostremos en nuestro blog y en nuestras cuentas de medios sociales para que más personas lo aprecien!