Proceso creativo de un landing page (Parte 3: lo técnico)

Este es el tercer y último artículo de una serie en la cual estamos conociendo el tras bambalinas del proceso creativo de un landing page, donde ya cubrimos el proceso de redacción del texto y el diseño de la página.

En este artículo, pretendía hablar inicialmente de la maquetación HTML y los estilos CSS que apliqué, sin embargo, eso lo puedes ver simplemente al hacer click derecho y ver el código fuente de la página, por eso es que preferí enfocarme en los aspectos técnicos más relevantes.

Implementar en WordPress

Implementar una plantilla de página especial para un curso dentro de WordPress plantea desafíos bien interesantes dado que se trata de un custom post type, sin embargo, en un tutorial publicado con anterioridad ya he compartido contigo una solución que me ha resultado útil.

Una vez resuelto eso la pregunta sería ¿Cómo implementar una plantilla con el diseño específico? Pues bien, para conocer en detalle este procedimiento, ya he publicado anteriormente un tutorial de 2 partes que lo cubre en detalle (ver parte 1, ver parte 2).

Video

Una de las partes esenciales de la página de promoción del curso Diseño web: HTML y CSS desde cero es el video,  en el cual puedes verme explicando brevemente de qué se trata el curso, cuales son los contenidos y lo que puedes esperar de él.

Producir este video era muy importante para mí, sin embargo no contaba con el tiempo para hacerlo en su máxima expresión, ni tampoco con el dinero para contratar a alguien más que lo hiciera, así que usé lo que tenía a mano: La webcam de mi computadora, mi micrófono y las capturas de pantalla realizadas para las clases.

Así que preparé un punteo de ideas, esperé a que hubiera una buena luz de día entrando por mi ventana y grabé el video. Creo haber hecho solamente tres tomas lo cual es un gran logro para mí. Luego, en Adobe Premiere mejoré el video ajustando el enfoque y las curvas para que no se viera tan «de webcam» y lo intercalé con algunos videos provenientes de las clases.

El resultado, si bien no es lo mejor del mundo y considerando que no tomó más de 3 horas de trabajo, creo que cumple muy bien su objetivo, se ve profesional, pone un rostro humano al autor y ayuda a los potenciales compradores a definir si el curso es para ellos o no:

Lo más difícil de grabar este video fue ocultar mi cara de preocupación, ya que en esos momentos, entre mis pies estaba mi gato Bigotes, lidiando con una grave enfermedad que terminó por llevárselo al día siguiente 🙁

Para que el video se mostrara correctamente en la página y se adaptara proporcionalmente al ser visualizado desde diferentes dispositivos recurrí a fitVids. Para usar este plugin de jQuery, se debe incluir el archivo y activarlo de esta forma:

$(".contenedor-del-video").fitVids();

Si quieres saber más de cómo usar fitVids, hay una clase del curso que cubre ese tema.

Para alojar el video (y los videos de mis cursos de pago) uso Vimeo Pro, al tener esta cuenta puedo personalizar los reproductores, definir la privacidad y, en este caso, poner un enlace una vez que el video ha finalizado.

Botón con efecto de desplazamiento suave

Otro elemento interesante de la página es el botón «Ver planes y precios», el cual, al ser clickeado, desata un desplazamiento vertical suave hasta llegar a la tabla de precios.

Este es un efecto bien atractivo y fácil de implementar. Todo lo que se necesita es tener una forma de identificar los enlaces a los cuales queremos aplicar el efecto, en mi caso lo apliqué a todos los enlaces cuyo atributo href comenzara con #, es decir a todos los enlaces dentro de la misma página, con excepción de aquellos que lleven la clase «temario» ya que con ellos apliqué otro efecto.

El código JavaScript que puse en el pie de página luce así:

jQuery('document').ready(function($){

	//Función para animar el scroll en base al enlace
	animarScroll = function(link) {
		$('html,body').animate({
	        scrollTop: $(link).offset().top
	    }, 500);
	}
	
	//Activa la funcion al hacer click en el botón	
	$('a[href*=#]').not('.temario').click(function(e){
		e.preventDefault();
		
		var link = $(this).attr('href');
		animarScroll(link);
	});	
});

Visualizar temario en pop-up

Otra parte interesante de la página yace en la zona de contenidos del curso, en donde hay un botón destinado a mostrar el temario completo, el cual, una vez que lo clickeas, abre un popup con un listado completo de todas las clases del curso.

Para poder implementar esto, usé otro plugin de jQuery muy interesante llamado Magnific popup. Este plugin es responsive y muy versátil.

Para activarlo usé este código:

jQuery('document').ready(function($){
		
	$('a.temario').magnificPopup({
		type: 'inline',
		preloader: false,
		focus: '#name',
		callbacks: {
			beforeOpen: function() {
				if($(window).width() < 700) {
					this.st.focus = false;
				} else {
					this.st.focus = '#name';
				}
			}
		}
	});			
});

Si te interesa saber más de el efecto de desplazamiento suave o el uso de Magnific popup házmelo saber en los comentarios y tal vez prepare un tutorial sobre eso para unas cuantas semanas más 😉

Testimonios

El landing page está lleno de testimonios de estudiantes previos que han disfrutado del curso, como por ejemplo este:

Cuando llegué al curso, Francisco hizo que me sintiera segura de mis conocimientos previos. Era tan minucioso y detallado para explicar que casi nunca quedé con dudas y si no, él me las respondía a la brevedad. Realmente un excelente curso para quienes están partiendo y lo mejor: no se necesita saber nada de HTML y CSS para partir.

Bárbara Urrutia

Para poder insertar estos testimonios en la página estoy usando un plugin de mi propia autoría, el cual puedes descargar como parte del kit de ayuda al diseñador web una vez que te suscribes al newsletter. Además hace un tiempo documenté el proceso de su creación en un completo tutorial.

Lo interesante de esto, es que en el landing page no estoy cargando contenido desde WordPress, sino que los textos e imágenes están puestos allí como maquetación dura, entonces ¿Cómo inserté los testimonios mediante un shortcode?… simplemente usando la función do_shortcode de WordPress, de esta forma:

<?php echo do_shortcode('


		
		
		

		
		 Diseño Landing Page 
		
	
');?>

Esto hace que el shortcode del testimonio se ejecute tal como si estuviera dentro del contenido de una página.

¿Hay algo más que quisieras saber?

Si hay algo más que haya captado tu atención del landing page y te gustaría conocer cómo lo hice, solo déjame un comentario más abajo.

Por último, quisiera contarte que este artículo debió ser publicado la semana pasada, pero con el ajetreo del lanzamiento y, sobre todo, con la preocupación de cuidar a mi gatito enfermo, no alcancé a cumplir.

En compensación por ello, quiero regalarte un cupón de descuento que estará disponible hasta el viernes 18 de septiembre. Sólo tienes que añadir el cupón «bigotes» al finalizar el pedido de cualquiera de los planes del curso Diseño web: HTML y CSS desde cero.

Un abrazo,
@FranciscoAMK