Saltar al contenido

Newspaper Theme. El mejor tema para web de noticias.

Newspaper Theme Tutorial

Bienvenid@ otra vez, en el análisis de hoy destriparemos TODO sobre Newspaper, dentro de los mejores temas wordpress para noticias, éste es el mejor de todos.

¿Quieres que tus webs hechas con Newspaper theme se vean tan bonitas como en la demo?

Prepara café, un refresco o una cerveza, y comencemos con este mega tutorial para Newspaper Theme

⚠Antes de comenzar⚠
Intenta seguir los pasos al pie de la letra, instalando los mismos plugins que aquí verás y todo debería salir bien. Si ya tienes un set up de tu web, lo recomendable es probar esto en local y luego lo replicas en tu web.

Instalación & Configuración

Lo primero que tienes que hacer una vez compres el theme y lo descargues, es instalarlo y activarlo, y a continuación, verás una ventana como la siguiente:

instalación y configuracion de newspaper

Le das a install/ Activate plugins y los instalas todos, para conseguir el mejor rendimiento de Newspaper, serán necesarios.

Aunque en este tutorial puedes prescindir de cloud library, es un plugin de mucha utilidad, y lo verás más adelante.

⚠Aviso⚠
El theme puede funcionar con Visual Composer, lo cuál NO recomendamos para nada, ya que las plantillas se pueden construír perfectamente prescindiendo de él.

Si quieres usar un constructor visual de todos modos, puedes hacerlo, pero afectará la velocidad de carga de tu web. Así que recomendamos que uses TagDiv Composser, que el constructor por defecto de este Theme.


Terminada la primera fase, ya contamos con las herramientas para trabajar con Newspaper.

Lo siguiente que vamos a hacer es replicar el diseño que tiene la DEMO «Default Newspaper PRO» pero añadiendo contenido propio.

Si quieres importar el contenido y ahorrarte todos esos pasos, le das a Newspaper > Install demos > e importas el contenido de la demo y lo modificas. Si no, sigue estos pasos…

Creando los artículos

Newspaper es un theme muy visual, por lo tanto, para lucir su verdadero potencial, es recomendable primero cear el contenido y después maquetar la home page.

Para esto, generaremos unas 20 entradas con con 4 categorías. Es decir, 5 entradas por categoría.

No es necesario que hagas todos tus artículos para ver como quedará tu theme finalmente, sólo los creas, agregas la imagen destacada y colocas texto lorem ipsum de relleno.

Cabecera

Una vez tengamos las entradas agregadas, con sus respectivas imágenes y bien categorizadas, crearemos la cabecera principal, y te mostraremos cómo darle el aspecto similar o igual a la demo.

home page newspaper

Creando el Mega Menú

mega menu newspaper

Aunque esto del mega menú NO funciona para dispositivos móviles, y, es desde donde mayor cantidad de tráfico se llevan las webs (la mayoría, no todas), es muy bonito el aspecto que da tenerlo, aunque sea en la versión desktop.

Para ello es muy simple, sólo debemos añadir una clase css al menú de navegación. ¡Nada más!

Paso 1

Habilitar las opciones css y descripción

En Apariencia > Menu, en las opciones de pantalla, ubicadas en la parte superior, habilitar las Clases CSS y la Descripción, que normalmente vienen desactivadas.

Paso 2

Crear el menu principal

Creamos el menú principal, añadiendo las categorías y un enlace personalizado. Lo ubicamos en Header Menu (main), y guardamos.

Paso 3

Agregar las opciones del mega menu

Agregamos la clase CSS mega-menu tal cuál se ve en la imagen.

Luego, en «make this a category mega menu», eliges la categoría de las entradas que quieras mostrar en el mega menú.

Puedes crear una categoría especial para eso, o simplemente, como hicimos en nuestro caso, mostrar una que ya teníamos creada: Barcelona.

Guardamos cambios, y listo. Ya tenemos creado nuestro mega menu, igual que en la demo de Newspaper. Puedes replicarlo cuantas veces quieras.

Mega menu terminado

Bien, sólo nos queda agregar el menu superior y el logo con el banner, para dejarlo idéntico al demo.

Para el logo y el banner, usaremos los mismos que la demo. Simplemente los cambias por tu logo y tu imagen de banner.

Menú superior

menu superior newspaper

Simplemente creamos un nuevo menú al que llamamos: menu superior -pero le puedes poner el nombre que quieras- y lo ubicamos en Top Header Menu y le agregamos un enlace personalizado que dice: Hola. Guardamos cambios.

Logo y banner

En la sección Newspaper > Theme panel, accederás al panel principal de Newspaper en donde podrás configurar el logo y el banner como en la demo.

logo y banner newspaper

Aquí es donde encontramos una de las enormes ventajas de Newspaper, que es la cantidad de personalización de la que dispone.

Puedes elegir el estilo de cabecera que más te guste para tu web.

Dentro de la sección Header, también deberás elegir el estilo del menú superior o top bar, y subir el logo de tu sitio.

Para el banner, deberás dirigirte a la sección ADS, y en la primera opción encontrarás la pestaña Header Ad, que te permite añadir el código html de tu banner.

Si no tienes un banner y tienes una imagen, recuerda respetar las medidas proporcionadas por el demo (728×90 px) para mantener la apariencia.

Todo listo. Cabecera terminada.

Cabecera newspaper terminada

Home page

Ahora es donde empezaremos a trabajar con el constructor visual de Newspaper: TagDiv Composser.

Para crear la home page, lo primero es:

  • Vas a páginas > añadir nueva > y le colocas el título home (o el que quieras).
  • Luego en Ajustes > Lectura, la colocas como página de inicio.

¿Listo? Comencemos:

Vamos a nuestra home page, y le damos a editar con TD Composer. Nos encontraremos con la página absolútamente vacía, asi que poco a poco, comenzaremos a añadir los elementos.

News ticker

En primer lugar, si queremos ese slider que muestra las últimas entradas que subimos, debemos simplemente añadir el elemento news ticker en la primera fila.

new sticker

Solo lo buscamos en la barra de elementos, lo arrastramos y soltamos. Aplicamos las modificaciones que queremos

Y aquí hacemos una breve pausa, y es para destacar la enorme personalización que tiene el constructor visual TD Composser.

personalización de los elementos de TD composser

Y es que todo lo puedes modificar.

Tanto los elementos que quieres que se muestren, la cantidad, los estilos, e incluso hasta puedes añadirle cosas básicas de CSS sin saber CSS, ya que allí te colocan los elementos para que les des los estilos que quieres.

¡No tienes que escribir nada de código!

Por eso, no te limites solo a copiar la demo como viene, aplica toda la personalización que quieras y verás como tu web tiene un aspecto único.

En nuestro caso, aplicamos una sombra, un color de fondo muy claro, y cambiamos el color destacado del título.

personalización de news ticker

Grids

Aquí es donde puede parecer más complicada la disposición de elementos. Y sí, si tuviésemos que maquetarlo manualmente y darle estilos, sería complejo, pero los bloques de TagDiv Composser nos permiten hacerlo en pocos clics.

El primer bloque es un elemento Big grid Flex 5.

Sólo tienes que arrastrar y soltar. Luego seleccionas las categorías que quieres que se muestren, y listo.

grid flex cinco newspaper

El segundo bloque tiene un poco más de diseño, y esta es una de las fabulosas cualidades de Newspaper, que puedes transformar tu home page en una grilla totalmente personalizable.

editar layout newspaper

Aquí deberás añadir un row, y seleccionar el layout que más te convenga para tu diseño, en el caso del ejemplo de la demo, se trata de dos columnas claramente diferentes entre si.

layout demo newspaper

En la columna uno, insertaremos el elemento Flex Block 3 al que debemos personalizar agregando el título y las entradas que se quieren mostrar.

En la columna dos agregaremos un «social counter» y un «ad box», que puede ser también una imagen, o lo que se te antoje.

El ad que quieras colocar, deberá estar previamente seteado en el theme panel de Newspaper. Allí solo puedes seleccionarlo.

Bloque dos de grids newspaper(1)

No continuaremos explicando los bloques, ya que en todos se repite la misma maquetación, tan solo cambian los elementos.

  • Agregas una fila (row)
  • Seleccionas el layout (la cantidad de columnas y la dispocisión)
  • Arrastras y sueltas los elementos que quieras mostrar.

Ya te mostramos un ejemplo de cómo empezar a maquetar la home page, ahora pasemos a la siguiente parte importante del sitio web:

Footer

El footer se construye, al igual que la cabecera, desde el theme panel. Y puedes optar por maquetarlo manualmente, o importar uno de Cloud library para luego modificarlo como te parezca.

En este caso, te recomendamos mucho que lo hagas importando contenido desde cloud library.

Son muchísimas las opciones, y lo puedes modificar de forma totalmente visual con TagDiv Composser, lo cual nos ahorra muchísimo tiempo.

Simplemente en el Theme panel > Footer, cilcas en Cloud Library y te abrira una nueva pestaña en donde debes añadir un nuevo template.

cloud library newspaper

Seleccionando la pestaña footers, podrás visualizar todas los templates que tienes disponibles. El template de la demo es «default pro footer».

Deberás tener la licencia activa para que te permita acceder a la librería de contenidos. Si no tienes la licencia aún, puedes comprarla en theme forest:

Una vez que tengas el footer importado a tu plantilla, simplemente tienes que editarlo con TagDiv Composser pulsando sobre cada elemento y sobreescribiendo tu contenido.

Tambien puedes añadir o quitar elementos si quieres, todo lo puedes modificar y personalizar.

Aquí lo hicimos igual que en la demo, y obtuvimos el siguiente footer:

footer newspaper terminado

Traducimos los titulares, pero también se puede cambiar el logo, la imágen, las entradas que quieres mostrar, puedes añadir un formulario de contacto… ya sabes…lo que quieras.

Theme Panel

El theme panel en Newspaper theme es como el personalizador de wordpress.

Desde allí se pueden hacer todas las modificaciones posibles en el tema. Te detallamos los puntos que tienes disponibles en el theme panel:

  • Header. Sirve para maquetar y elegir el estilo de la cabecera del tema.
  • Footer. Igual que el header, pero en el footer.
  • Ads. Newspaper es una plantilla pensada para monetizar con anuncios, por lo tanto, desde el propio theme tienes este apartado para colocar allí los códigos de tus anuncios. No necesitas ningún plugin.
  • Template settings. Desde allí puedes modificar las opciones globales de la apariencia de las páginas, entradas, archivos, etc. Desde el ancho del contenedor hasta las metas que quieres que se vean, los breadcrumbs y demás.
  • Categories. Allí definirás la apariencia de las categorías. Incluso, si ya las tienes creadas, puedes darle un estilo personalizado a cada una de ellas. Un detalle genial.
  • Post settings. Aquí podrás editar la apariencia de los artículos del blog. Desde mostrar el nombre de autor, los comentarios, etc.
  • Block settings. Aquí puedes definir el estilo de los bloques (los de Tag Div Composser), y darle apariencia personalizada a cada uno de ellos.
  • Background. En esta sección puedes añadir una imagen al fondo de tu plantilla, si lo deseas.
  • Excerpts. Puedes definir la cantidad de caracteres que se muestren en los extractos de cada bloque.
  • Translation. Como habrás notado, Newspaper viene en ingles, pues no necesitas un plugin para traducirlo, la plantilla lo incluye.
  • Theme colors. Como su nombre lo indica, sirve para definir el color de todas las partes del tema.
  • Theme fonts. Aquí puedes personalizar y dejar configurado las fuentes para cada parte de la web.
  • Custom code. En el caso de que quieras añadir código html al sitio, deberías hacerlo desde allí. Lo cuál resulta muy conveniente para evitar tocar el código fuente.
  • Analytics/js code. Es la sección para añadir algunos scripts como el de Google Analytics. Tambien puedes agregar los de Facebook pixel allí, o cualquier código javascript que quieras.
  • Social networks. Es la sección para configurar los enlaces de tus redes sociales. También tiene la opción de colocar la API de Youtube.
  • CPT & Taxonomy. Esta sección es un poco más avanzada, y en general para sitios más grandes. Tienes que instalar el plugin TD Custom Post Type que puedes descargar desde el soporte de la plantilla, y sirve para crear taxonomías y tipos de post personalizados, que el tema detectará en dicha sección posteriormente.
  • Import / Export. Sirve para exportar o importar la personalización del theme. NO el contenido, sino las modificaciones en el theme panel. Es muy útil cuando quieres crear otro sitio y ahorrarte, entre otras cosas, las traducciones.
  • Multi-Purpose. Es otra sección que permite modificar el estilo de los botones, las fuentes y algunas otras cosillas.

Pros y contras de Newspaper

  • Es una plantilla muy personalizable. Tiene infinidad de opciones de personalización.
  • Tiene su propio constructor visual integrado, que permite darle un diseño único a la web sin saber de diseño web.
  • El rendimiento es excelente. Su última actualización carga en menos de 3 segundos, bajaron las peticiones al servidor, y no consume muchos recursos, como la mayoría de temas multi propósito.
  • Cuenta con una librería gigantesca de demos que puedes instalar, o con las que puedes inspirarte.
  • Es un theme pensado para blog grandes. Si tienes pensado un blog de 5 a 10 páginas o secciones, puede que sea demasiado para ti.
  • Es un theme de pago, no hay versión gratuita.

Conclusión

Si acabas de comprar Newspaper y estabas un poco confundido con tantas opciones de personalización, muy posiblemente esta guía te haya sido de mucha ayuda, si tienes dudas al respecto, puedes dejárnosla en los comentarios.

Si estabas pensando en comprar el theme, es posible que tus dudas se hayan disipado con toda la información que te brindamos, y la guía te haya servido para tomar una decisión.

Esperamos que, sea cuál sea tu situación, hayas disfrutado el artículo. ¡Nos vemos en próximas reseñas de otras plantillas!

PD. Si tienes alguna theme que quieres que investiguemos, déjalo en los comentarios.

5/5 (1 Review)