Cuando creamos un proyecto online para vender nuestros productos digitales necesitamos una buena plantilla para crear nuestra web. Seguramente uno de los procesos más duros que existen es buscar la plantilla adecuada.
Los que ya me conocéis no os sorprenderá que os recomiende una plantilla basada en el framework Genesis.
Acaban de lanzar una nueva plantilla llamada Digital Pro que está pensada para crear una web de venta de un producto digital.
Puedes ver una demo aquí o en la imagen siguiente puedes ver un vistazo (si haces click en la imagen la puedes ver en más detalle):
Entre las características de esta plantilla están:
- Diseño Responsive para que se vea perfecta en cualquier dispositivo
- Bien programada para que sea super rápida
- Optimizada para el posicionamiento en buscadores
- Segura como todas las plantillas de Genesis
Tutorial paso a paso para configurar la plantilla Digital Pro
Aquí tienes el Vídeo tutorial, y debajo del vídeo todo paso a paso en texto:
Suscríbete a mi canal:
Antes de empezar
Para crear una web en wordpress necesitas tener un Alojamiento web. Si no lo tienes todavía te recomiendo hostgator, aquí tienes un cupón descuento del 25% –> oscarteayuda
Tener instalado WordPress: En cualquier de los vídeos de esta página empiezo instalando wordpress, si no sabes como hacerlo puedes ver el principio de este vídeo
Ahora que ya tenemos un wordpress instalado vamos a empezar a configurar la web con la plantilla digital pro
Plugins Necesarios:
Antes de instalar la plantilla vamos a añadir los plugins siguientes:
Para instarlos entramos como administradores en nuestro wordpress, vamos a plugins, añadir nuevo y en la caja de búsqueda de la derecha buscamos cada uno de los plugins y los instalamos:
Recordar, que ademas de instalar los plugins los tenemos que activar. Para asegurarnos que los tenemos activados vamos a Plugins instalados y allí los tenemos que ver activados:
Instalar la plantilla Digital Pro
Si ya has instalado una plantilla de genesis sabrás que antes instalar la plantilla Digital Pro tenemos que instalar la plantilla base o plantilla padre Genesis.
Para instalar las plantillas vamos al menú Apariencia –> Temas –> Añadir Nuevo –> Subir tema y subimos primero la plantilla base Genesis, la instalamos y sin activarla hacemos el mismo proceso para la plantilla Digital pro:
Si ahora vamos a Apariencia –> Temas podemos ver la plantilla Digital pro y la Activamos:
Ahora ya tenemos la plantilla instalada pero si vas a ver la web no la verás como viene en la demo. Esto pasa porque no tenemos contenido ni los widgets colocados, vamos a solucionarlo:
Importar Contenido Demo
Para conseguir el mismo resultado que la demo la plantilla viene con la posibilidad de importar el contenido demo, este paso no es obligatorio, pero si estás montando una web desde cero es mucho más fácil importar contenido demo y luego ir modificándolo. Si estás montando la plantilla en una web que ya tiene contenido este paso te lo puedes saltar.
Para importar el contenido vamos al menú Herramientas –> Importar
Nos pedirá que instalemos el plugins de importación y una vez instalado empezamos con la importación de contenidos.
Para importar el contenido primero tenemos que descomprimir el fichero comprimido de la plantilla, ya que necesitaremos un fichero que está dentro de la carpeta xml, el fichero digital-pro.xml:
Una vez que tenemos localizado el fichero de contenido demo seguimos en nuestra pantalla de importación y donde nos pide que subamos el fichero seleccionamos el fichero digital-pro.xml:
Hacemos click en subir archivo e importar y nos preguntará a que usuario le asociamos el contenido, seleccionamos nuestro usuario de wordpress y marcamos la opción «Descarga e importa archivos adjuntos»:
Si todo ha ido bien tendremos un montón de contenido demo, si lo quieres comprobar puedes ir a ver las entradas que tienes :
Configuración opciones Genesis Theme Settings
En el menú de la zona de administración Genesis –> Theme Settings tenemos muchas opciones para configurar nuestra web, nosotros para este tutorial nos vamos a fijar en las siguientes:
Default Layout: Seleccionaremos la opción sin laterales, es decir, full witdh:
Content Archives:
En display content marcamos «Entry content»
En Limit content to: lo dejamos en blanco
En Featured image marcamos «Include the featured image?» y en Image Size ponemos el tamaño «front-page-featured (1000×700» y en Image Alignment «Right»
En entry Pagination usamos la opción «Previous / Next»
En esta imagen puedes ver todas las opciones correctas:
Menú de navegación
Cuando importamos el contenido demo, además de importarse páginas, entradas etc.., se nos importa menús de prueba también.
Para colocar los menús vamos a Apariencia –> Menús –> Gestionar Lugares y en la zona Header Menu seleccionamos Header Menú y en Footer Menu seleccionamos Footer Menu tal como puedes ver en la siguiente imagen:
Si todo ha ido bien cuando vamos a nuestra web ya podremos ver el menú:
Página Principal
Para crear la página principal vamos a usar las zonas de widgets que trae la plantilla. Para ello vamos a Apariencia Widgets y veremos que entre las zonas que tenemos hay algunas para configurar la página principal; estas zonas son «Front Page 1», «Front Page 2», «Front Page 3».
Aquí un esquema de que contenido va a cada parte:
Front Page 1
En esta zona colocaremos las siguiente parte:
Se hace de una forma peculiar ya que no todo el contenido va a ir dentro del widget, sino que el fondo va a parte.
El fondo lo colocaremos en Apariencia –> Personalizar –> Frontpage image:
Si has instalado el contenido demo ya lo tienes hecho
Y el texto lo vamos a colocar con un widget texto en la zona de widget Frontpage 1:
Título: Great Experiences
Contenido:
Build the business of your dreams without making unnecessary mistakes. <a class="button" href="#front-page-2">CLICK FOR FREE ACCESS</a>
No te olvides de marcar «Añadir párrafos automáticamente»
Una vez rellenado el widget deberías de ver algo así:
Front Page 2
En esta zona colocaremos un texto a la izquierda y un formulario a la derecha, siendo el resultado final:
Para el resultado de la imagen vamos a usar dos widgets, el de la izquierda es un widget texto y el de la derecha el widget de enews extended, ambos widgets dentro de la zona Front Page 2:
Widget de la izquierda: Widget texto con el siguiente contenido:
Título: GET FREE ACCESS
Contenido:
This is where you can ask site visitors to sign up for your weekly newsletter. Be sure to craft copy that converts. <ul class="checkmark"> <li>Build Your Business the Smart Way</li> <li>Create Marketing Funnels That Work</li> <li>Craft Killer Copy for Digital Products</li> <li>Leverage Social Advertising Platforms</li> <li>Enter the WordPress Premium Market</li> </ul> Ask them to <a href="#">subscribe</a> to discover smarter ways to create and sell profitable digital products and services. <a href="#">Spam-free policy</a>.
No te olvides de marcar «Añadir párrafos automáticamente»
El widget se debería de ver así:
Widget de la derecha: En esta misma zona Front Page 2 añadimos debajo del anterior widget un widget «Genesis – eNews Extended».
Este plugin nos va a ayudar a conseguir que los visitantes se conviertan en suscriptores nuestros y nos den su email. Este plugin se puede conectar con tu programa de email marketing, yo lo he probado con MailChimp y Aweber.
En este tutorial lo vamos a configurar sólo de forma visual pero si quieres aprender a conectarlo con tu cuenta de Mailchimp o Aweber lo puedes ver en este tutorial que lo explico en profundidad.
y lo vamos a rellenar de la siguiente forma:
Título: EMAIL NEWSLETTER
Text to Show Before Form: Fill out the form below for immediate access.
Text To Show After Form: y joining the Digital Pro newsletter, you agree to our Privacy Policy and Community Guidelines. Got questions? Check the FAQ.
Acción de Formulario (Form Action): #
Campo Email: #
Campo de Nombre: #
Campo de Apellido: #
Nombre de entrada de Texto: First Name
Apellido de entrada de texto: Last Name:
Email de entrada su texto: E-Mail Address
Texto de botón: Ir
Front Page 3:
En esta zona vamos a añadir 3 llamadas a la acción. El resultado final será este:
Para conseguirlo vamos a usar 4 widgets texto ya que el título «OUR SERVICES» va en un widget separado.
Widget Texto 1:
Título: Our Services
El resultado es el siguiente:
Widget Texto 2:
Título: Vacío
Contenido:
<i class="icon ion-ios-compose-outline" aria-hidden="true"></i> <h4>Content Marketing</h4> Understand the basics of building the type of audience that will build your business. <a class="button small" href="#">Learn More</a>
Y el resultado es:
Widget Texto 3
Título: Vacío
Contenido:
<i class="icon ion-ios-locked-outline" aria-hidden="true"></i> <h4>Digital Commerce</h4> Our academy shows you how to create and sell profitable digital products & services. <a class="button small" href="#">Learn More</a>
Y el resultado es:
Widget Texto 4:
Título: Vacío
Contenido:
<i class="icon ion-ios-mic-outline" aria-hidden="true"></i> <h4>Podcast Training</h4> We'll teach you how to deliver a remarkable podcasting audience experience. <a class="button small" href="#">Learn More</a>
En estos momentos ya deberíamos de tener la página principal totalmente acabada y con el mismo formato que en la página demo de la plantilla.
Ahora sólo nos faltaría por rematar el pié de página de toda nuestra web. Para ello vamos a usar las zonas de widget Footer 1, Footer 2 y Footer 3
El resultado de la zona completa una vez que terminemos será:
Footer 1:
En esta zona añadiremos un widget texto con la información de contacto:
Título: Contact Us
Contenido:
7860 North Park Place San Francisco, CA 94120 <a href="tel:+345-877-9930">415-877-9930</a>
Y marcamos «Añadir párrafos automáticamente»
El resultado tiene que ser el siguiente:
Footer 2:
En esta zona añadiremos un widget texto con la información Sobre nosotros:
Título: ABOUT US
Contenido:
Digital Pro is an agency that will help you discover smarter ways to sell profitable digital products. <a href="#">LEARN MORE</a>
Y marcamos «Añadir párrafos automáticamente»
El resultado es el siguiente:
Footer 3:
Aquí añadimos los iconos de las redes sociales con el widget «Simple Social Icons» y lo configuramos de la siguiente forma:
Tittle: FOLLOW US
Luego tenemos la configuración de colores, para ejemplo lo dejo como está de serie pero lo puedes cambiar a tu gusto.
Y debajo tenemos la casilla para poner nuestra dirección de la red social que queramos, si lo dejamos vacío no aparecerá el icono.
Tienes que hacer algo parecido a la siguiente imagen:
En estos momentos ya tienes la web configurada como en la demo.
Ahora falta lo más difícil y más apasionante, añadir contenido de valor ;)
Un saludo
Óscar
