En muchas ocasiones, sobre todo al arrancar nuevos proyectos, empleamos mucho tiempo en desarrollar la idea y en estudiar la mejor manera de cumplir nuestros objetivos.
Nada desdeñable la tarea, aunque no por ello tenemos que perder la oportunidad de que la gente empiece a conocernos, o incluso tenga la posibilidad de contactarnos, ya desde el principio.
En UyM lanzamos esta elegante y sencilla web presencial, con la que puedes realizar dos sencillas acciones; presentarte al mundo y disponer de un formulario de contacto.
Nada de SPAM, prometido.
¿Qué contiene la descarga?
Al suscribirte, recibirás un enlace para descargar un archivo comprimido (244kB) con nombre DescargaTuWeb.zip dentro del cual encontrarás los siguientes ficheros:
- estilo.css: donde se describe el estilo propio de la web. En principio no hace falta que modifiques nada.
- favicon.png: el iconito que aparece en las pestañas de los navegadores.
- fondo.jpg: la imagen de fondo, puedes poner la que prefieras.
- index.html: la página en sí, donde podrás personalizar tus textos.
- lib.js: incluye algunas funciones programadas para el formulario. Salvo que sepas bien lo que haces, no deberías modificar nada.
- logo.jpg: el logotipo que aparece.
¿Cómo personalizo mi web presencial?
Para usarla, lo más cómodo es que dispongas de un dominio y un alojamiento y que subas a este último los ficheros incluidos en la descarga.
Para personalizar la web sigue estas indicaciones:
logo.jpg
Simplemente utiliza tu logo o tu imagen, en formato jpg, nómbra el archivo como logo.jpg y sobreescribe el que ya existe.
Hemos pensado en un tamaño máximo aconsejado de 420X200 píxeles. Puedes poner imágenes más grandes, pero se deformarán.
fondo.jpg
Esta es la imagen que aparece como fondo de la página, como bien indica su nombre. 🙂
La que hemos elegido es esta y la hemos conseguido en Unsplash, donde hay multitud de fotos de muy buena calidad y de dominio público.
Puedes elegir la que prefieras y, como con el logo, sólo tienes que nombrarla como fondo.jpg y sustituir la que ya existe.
En este caso un tamaño óptimo sería de 1400X933 píxeles. La web se adapta a cualquier dispositivo así que intenta que no pese demasiado para que no ralentice en exceso la carga en móviles y tablets.
index.html
Aquí es donde puedes personalizar la web presencial para mostrar los textos que te presenten, a ti o a tu proyecto, y también donde configurar el formulario de contacto para que recibas mensajes a la cuenta de correo electrónico que prefieras.
Para editarla sólo necesitas un editor de textos sencillo, seguro que tu ordenador tiene instalado uno.
Por orden de aparición, en el fichero vas a encontrar las siguientes líneas:
<link rel="icon" href="favicon.png">
Esta línea es la que indica qué favicon mostrar, si te interesa personalizarlo crea una imagen png de 16X16 píxeles, nómbrala como favicon.png y sustituye la que viene incluida. También puedes borrar esta línea sin problemas, si prefieres que no aparezca nada.
<title>Sunset | Web Presencial</title>
Aquí sustituye Sunset | Web Presencial por la palabra o frase que prefieras, no demasiado larga, es lo que aparece en la cabecera o las pestañas del navegador.
.btn-default { background-color: #feac6e; }
hr { border-color: #ff7a15; }
En estas dos líneas puedes modificar el color del botón del formulario y de la línea punteada de separación, respectivamente.
Desde esta página puedes seleccionar colores que vayan más acordes a tu presentación. Cuando hayas dado con el color que prefieras sólo copia el valor hexadecimal, el que empieza por #, y sustituirlo en estas líneas.
<h3>SUNSET | Web Presencial</h3>
En esta línea es donde deberías poner tu nombre o el de tu empresa o proyecto.
<p class="lead">
Aquí tienes un espacio para presentarte y mostrar lo que puedes hacer por tus clientes, en pocas palabras.
</p>
<p class="lead">
Si quieres, incluye algunos datos más y anima a la gente a contactar contigo desde este formulario.
</p>
Utiliza estas dos secciones para incluir, por ejemplo, un texto que defina tu idea en el primer párrafo y una indicación sobre el formulario de contacto en el segundo.
Ten en cuenta que esta página está pensada para que sea sencilla y cubra una necesidad básica de presencia en Internet, así que es mejor evitar extenderse demasiado en los textos. Dos o tres líneas por cada párrafo serían lo ideal.
<form id="form" method="POST" action="//formspree.io/CUENTA@CORREO.ES">
En esta última línea sustituye el texto CUENTA@CORREO.ES por la dirección a la que prefieras que te lleguen los mensajes.
¡Y fin!
Ya no necesitas editar nada más, tan solo queda subirla al alojamiento usando para ello alguna herramienta que te faciliten desde el panel de control o por FTP. En el segundo caso te recomendamos que utilices Filezilla.
¿Y el formulario también está listo?
Pues sólo queda un paso más para que tu nueva página esté totalmente lista.
Para tener una web presencial sencilla pero totalmente funcional hemos decidido utilizar un servicio ofrecido por formspree.io, el cual permite utilizar formularios de contacto sin ninguna dificultad. Una vez más, ten en mente que es una página básica y que una vez que se asiente un poco tu proyecto, es aconsejable que optimices tus formularios para usar servicios de correo o email marketing.
Si ya tienes un servicio de este tipo, tan solo tienes que sustituir el formulario que incluimos en la web por el que te facilite la plataforma que hayas elegido.
Si quieres usar el que proponemos, tan solo sigue estos dos pasos:
#1 – Confirma tu correo electrónico.
Para validar el uso del formulario, simplemente asegúrate de que has subido la web al alojamiento, visita tu dominio desde un navegador, introduce datos en la caja de texto y envíalos.
A continuación recibirás un correo en la dirección que hayas indicado en el index.html con el asunto Confirm email for Formspree, enviado por Formspree Team, con un botón para que realices la confirmación.
Se parecerá a esta imagen:
Pulsa el botón que dice Confirm Form y se abrirá una página indicando que el proceso se ha realizado con éxito.
#2 – Comprueba que te llegan correos.
Vuelve a rellenar y enviar el formulario para ver que efectivamente te llegan correos. En este caso el asunto del mismo debería ser Nuevo contacto desde <tu dominio>
Los correos que recibas se parecerán a la siguiente imagen
¡Y ahora sí! Listo para seguir dándole forma a tu idea
Ya tienes la web lista y el formulario en marcha. ¡Que lo disfrutes y te aproveche! 😉
Me encanta el contenido que producís ¿Puedo compartirlo directamente en redes sociales o he de pegar el enlace en la red social en la que quiero compartir?
Hola! Me alegro mucho de que te guste. Viniendo de ti es todo un halago. Puedes compartir el contenido de las dos formas 🙂