Tutorial plantilla News Pro, la plantilla de esta web ;)

Hola Chicos,

Hoy os traigo un tutorial que me hab茅is pedido varias veces, crear una p谩gina como la m铆a.

En este tutorial os explico como configurar paso a paso esta maravillosa plantilla: Newspro

News Pro, es una plantilla hija de Genesis. Si me sigues sabr谩s que soy un enamorado de la plantilla Genesis.

No es una plantilla tan sencilla como puede ser DIVI o cualquier otra que use un content builder pero para mi es oro puro 馃檪

Para seguir este tutorial necesitas el FrameWork de Genesis y el child theme NewsPro.

Lo puedes comprar aqu铆 o descargar gratis desde la Zona Premium.

Te puedes dar de alta en la Zona Premium por 10鈧/mes aqu铆 y te puedes dar de baja en cualquier momento

Aqu铆 tienes el tutorial en V铆deo:

Suscr铆bete a mi canal:  

El resultado final que vamos a conseguir es el siguiente:

news pro demo

Lo primero que necesitamos es tener instalado WordPress. Si no sabes como hacerlo en la Zona Premium tienes un curso de WordPress.

Una vez que tenemos instalado WordPress, instalamos la plantilla padre Genesis y acto seguido la plantilla hija News Pro.

Para ello vamos a Apariencia –> Temas –> A帽adir nuevo:

instalar tema news pro genesis

En este punto mucha gente se frustra ya que instala la plantilla y se da cuenta que la web todav铆a no se parece a la demo. No te preocupes, todav铆a tenemos mucho que configurar 馃槈

Lo siguiente que vamos a hacer es a帽adir contenido demo ya que de esta forma es mucho m谩s f谩cil ver como nos va quedando la web.

Para hacerlo vamos a Herramientas –> Importar –> WordPress y ejecutamos el importador.

驴De d贸nde sacamos el contenido demo? El contenido demo viene en la propia plantilla News Pro, para encontrarlo descomprimimos la plantilla y nos fijamos que hay una carpeta que se llama XML y dentro un fichero llamado 芦news-pro.xml禄.

archivo importar demo newspro

Al ejecutar el importador nos pedir谩 un fichero y a帽adimos ese:

pantalla importar demo newspro

Una vez importado, veremos que se han a帽adido un mont贸n de entradas, p谩ginas, men煤s.

Ahora lo que tenemos que hacer es colocar todo ese contenido.

Configuraci贸n de los men煤s

C贸mo hemos importado el contenido demo, se han importado varios men煤s que usaremos.

Tan s贸lo tenemos que ir a Apariencia –> Menus y seleccionar 芦Secondary Navigation禄 hacer click en Elegir y marcar la opci贸n 芦Before Header Menu禄

menu antes cabecera news pro

Ahora elegimos el men煤 芦Primary Navigation禄 y marcamos la opci贸n 芦After Header Menu禄

menu despues cabecera news pro

El resultado ser铆a el siguiente:

resultado menus news pro

Configuraci贸n del banner de la cabecera

widget header right newspro

En la zona Header Right a帽adimos un widget texto con el banner que queramos. Para que nos quede como en la demo la imagen tiene que ser del tama帽o 728×90 p铆xeles

Configuraci贸n pantalla principal de nuestra Web

La home est谩 configura con los widgets.

Si vamos a Apariencia –> Widgets, veremos que hay unas zonas que se llaman: 芦Home – Top禄, 芦Home – Middle Left禄, 芦Home – Middle Right禄, 芦Home – Bottom禄.

Si no a帽adimos ning煤n widget en estas zonas lo que aparecer谩 en la p谩gina principal ser谩n los 煤ltimos art铆culos.

En cuanto a帽adimos un widget a una de las zonas mencionadas se sustituir谩 por lo que a帽adamos.

Vamos a a帽adir los Widgets para conseguir el resultado de la demo:

Zona Home – Top:

widget home top newspro

C贸mo podemos ver en la imagen, en esta zona vamos a a帽adir el widget Fetured Tabs y vamos a elegir las categor铆as que queremos que aparezcan en las pesta帽as de la imagen principal de la web.

Tambi茅n vamos a marcar la opci贸n 芦Show Featured Image禄 y vamos a seleccionar el tama帽o: home-top (740×400). Adem谩s vamos a marcar 芦Show Post Title禄

El resultado ser铆a el siguiente:

resultado final home top newspro

Realmente, como en la importaci贸n sustituye las im谩genes por rect谩ngulos grises lo que obtendremos ser谩:

Tutorial plantilla News Pro, la plantilla de esta web ;) 1

Cuando a帽adamos nuestras propias im谩genes las sustituimos y listo 馃槈

Zona Home – Middle Left:

widget home middle left newspro

A帽adimos el Widget 芦Genesis – Featured Posts禄 y seleccionamos una categor铆a, marcamos 芦Show Post Title禄 y seleccionamos 芦Show Featured Image禄 con el tama帽o 芦home middle (348×180)禄

El resultado ser铆a:

resultado home middle left news pro

Zona Home – Middle Right:

widget home middle right news pro

A帽adimos el Widget 芦Genesis -Featured Posts禄, seleccionamos una categor铆a, en 芦Number of Posts to Show禄 seleccionamos 5, marcamos la opci贸n 芦Show Posts Title禄.

El resultado que conseguimos es:

resultado home middle right news pro

Zona Home – Middle Bottom:

widget home middle bottom newspro

En 芦Number of Posts to Show禄 ponemos 3, marcamos 芦Show Post Title禄 y marcamos 芦Show Featured Image禄 con el tama帽o de imagen: 芦thumbnail (150×150)禄

El resultado ser铆a:

resultado home bottom news pro

Primary Sidebar

El lateral principal ser谩 el mismo para la p谩gina principal y las p谩ginas interiores.

En esta zona a帽adiremos los siguientes Widgets:

Buscador:

widgets sidebar principal newspro

Simplemente a帽adimos el Widget Buscar

Genesis Featured Posts
sidebar featured post news pro

En este widget marcamos 芦Show Post Title禄, 芦Show Category Archive Lingk禄 y 芦Show Featured Image禄 con el tama帽o 芦home-middle (348×180)禄

Simple Social Icons

Aqu铆 a帽adimos la url de cada red social que queramos que aparezca.

Si no pones url no aparecer谩 el icono de esa red social.

Banners
Los banners que aparecen en la demo se han hecho con un Widget Texto y dentro se ha a帽adido el siguiente c贸digo:

<div style="text-align: center;"><a href="http://demo.studiopress.com/news/"><img class="ad" src="http://demo.studiopress.com/news/files/2013/07/ad-125x125.png" /></a><a href="http://demo.studiopress.com/news/"><img class="ad" src="http://demo.studiopress.com/news/files/2013/07/ad-125x125.png" /></a><a href="http://demo.studiopress.com/news/"><img class="ad"  src="http://demo.studiopress.com/news/files/2013/07/ad-125x125.png" /></a><a href="http://demo.studiopress.com/news/"><img class="ad" src="http://demo.studiopress.com/news/files/2013/07/ad-125x125.png" /></a>

Tendr铆as que sustituir esas im谩genes por las tuyas propias.

Para rematar la p谩gina nos falta configurar el pi茅 de p谩gina.

El resultado que buscamos es el siguiente:

resultado footer news pro

Disponemos de 6 zonas para el Footer.

En las 5 primeras a帽adimos un men煤 personalizado, con el men煤 que queramos, te muestro el ejemplo de dos pero lo tienes que hacer en Footer 1, Footer 2, Footer 3, Footer 4 y Footer 5

menus footer news pro

En el Footer 5 vamos a a帽adir el formulario de suscripci贸n, para ello vamos a usar el widget 芦Genesis – eNews Extended禄

Si quieres configurar eNews Extended con Mailchimp aqu铆 tienes un tutorial

Te puedes dar de alta en la Zona Premium por 10鈧/mes aqu铆 y te puedes dar de baja en cualquier momento

Espero que te haya gustado 馃槈

Deja un comentario