Tabla de Contenidos

  1. Instrucciones previas
    1. Instalación y activación del tema
    2. Blog y página principal
  2. Páginas y Posts
  3. Menús Personalizados
  4. Opciones del Tema
  5. Sliders
  6. Portfolios
  7. Widgets
    1. Video Widget
    2. Twitter Widget
    3. Tabs Widget
    4. Screenshot Widget
    5. Recent Widget
    6. Flickr Widget
    7. 125x125 Ads Widget
    8. 300x250 Ad Widget
    9. Contact Form Widget
    10. Login Widget
    11. Featured Post Widget
    12. Slider Widget
  8. Shortcodes
  9. Plugins Recomendados
  10. Ficheros del Tema

A) Instrucciones previas - top

Para instalar el tema en primer lugar debe tener una versión de WordPress instalada en su servidor. Para más información acerca de la instalación de Wordpress puede consultar la documentación disponible en la siguiente dirección: WordPress Codex.

A.1) Instalación y activación del tema - top

Antes de instalar y configurar el tema le recomendamos que escoja un hosting especializado en WordPress. Existen diferentes proveedores de hosting pero nuestra recomendación es que use un proveedor que le garantice una Página Web rápida y segura. Nuestra recomendación es WPEngine.

Existen 2 formas diferentes de instalar el tema que se detallan a continuación:

  1. Via Cliente FTP:

    Debe subir el tema de Wordpress descomprimido a la carpeta /wp-content/themes/ de su servidor. Para ello, en primer lugar debe descomprimir el fichero theme_name.zip.

  2. Subiéndolo a través del panel de WordPress:

    A diferencia del caso anterior, siguiendo esta opción no resulta necesario que descomprima el fichero theme_name.zip. Navegue a la opción Apariencia » Temas » Instalar Temas » Subir y utilice la opción examinar para seleccionar el tema comprimido pulsando después en la opción instalar ahora.

    Install Theme

Una vez instalado el tema debe activarlo. Para ello, diríjase a la opción Apariencia » Temas y active el tema en cuestión.

Importante: un error que cometen muchos usuarios es subir el fichero .zip equivocado. En caso de error, por favor eche un vistazo a este vídeo.

A.2) Blog y página principal - top

Una vez instalado y activado el tema ya puede probar su nuevo tema de WordPress. Si acaba de instalar una nueva copia de WordPress en sus servidor, al probar el tema sin realizar ninguna configuración, éste mostrará los últimos posts en la página principal. Sin embargo, usted puede mostrar en la página principal los últimos posts o bien una página estática.

Para comprobar la configuración actual diríjase a la opción Ajustes » Lectura. Por defecto la opción activa corresponde a "Tus últimas entradas", no obstante, usted puede querer utilizar alguna de las plantillas del tema para la página principal, como por ejemplo la plantilla Home. A continuación se describen los pasos a llevar a cabo para crear una nueva página y asignarla como página principal de su sitio Web.

Front Page displays

En primer lugar, diríjase a la opción Páginas » Añadir nueva y asigne un nombre a la nueva página creada. Una vez asignado el nombre seleccione la plantilla que desea asignar a la página creada, por ejemplo la plantilla Home.

Add New Page

Una vez creada la página que usará como página principal, cree una nueva página para mostrar las entradas de su blog. En este caso, bastaría con asignar un nombre a dicha página, por ejemplo Blog, no resultando necesario asignar a dicha página ninguna plantilla.

Una vez creadas las página Home y Blog diríjase nuevamente a la opción Ajustes » Lectura y asigne las páginas creadas con anterioridad. En la imagen se muestra un ejemplo para una página de nombre Home que se mostrará en la página principal, siendo la página Blog la encargada de presentar las últimas entradas de su blog.

Static Page

B) Páginas y Posts - top

Si ha seguido los pasos anteriores habrá tenido ocasión de familiarizarse con la opción Pages de su menú de Wordpress. Como también habrá podido comprobar existen diferentes plantillas, de tal forma que pueda dar un aspecto diferente a cada página de su sitio web. A continuación se describen las plantillas que usted puede utilizar para personalizar cada una de las páginas. Recuerde que para asignar una plantilla a una página debe seleccionar la plantilla en cuestión en la opción Atributos de página » Plantilla.

Available Templates

Plantillas disponibles

En caso de querer mostrar una imagen como destacada puede hacerlo a través de la opción "establecer imagen destacada", tal y como se muestra en la imagen inferior. Además, se pueden definir las opciones explicadas a continuación:

Page Options

Impostante: Consideraciones a tener en cuenta para las opciones sidebar y layout

Se puede asignar una sidebar a cualquier página o post teniendo en cuenta las siguientes consideraciones:

  1. Tenga en cuenta que los resultados de búsqueda, así como el archivo de búsqueda por categoría, autor, tags, etc utilizan la sidebar y el layout por defecto. El layout por defecto se define en Apariencia » Theme Options » Opciones generales y los widgets a mostrar en estas páginas deben insertarse en la "Default sidebar".

  2. Existen ciertas diferencias a la hora de definir el layout y la sidebar, tanto del blog como de la página principal, en función de la configuración definida en Ajustes » Lectura.

    1. En caso de seleccionar "Tus últimas entradas":

      En este caso el layout y la sidebar del blog se definen en las Opciones del tema - Blog tal y como se muestra en la siguiente imagen.

    2. En caso de seleccionar "páginas estáticas":

      En este caso el layout del blog se define al igual que en el caso anterior a través de las opciones del tema, pero la sidebar a través de las opciones de la página creada para mostrar el blog. En el caso de la página principal el layout se define a través de Apariencia » Theme Options » Página principal y el sidebar a través de las opciones de la página a la que se le asigna la plantilla Home.

Una vez creadas las sidebars y asignadas a las páginas y posts sólo queda añadir los widgets a mostrar en cada una de ellas a través de Apariencia » Widgets.

Nota: Cómo habilitar/deshabilitar comentarios:

Page comments

En caso de que haya creado ya alguna página siguiendo los pasos descritos hasta el momento, habrá podido comprobar que los nombres de éstas se listan en la barra superior de navegación. A continuación se describe la forma en que puede configurar dicho menú de navegación para que se muestren los enlaces que usted desea y en el orden que quiera.

Para configurar los menús de navegación diríjase a la opción Apariencia » Menus. Además del menú principal de navegación, también puede crear y configurar un segundo menú de navegación. Este segundo menú de navegación debe activarse en las opciones del tema tal y como se describe más adelante.

Create Menu

Para crear un menú de navegación introduzca el nombre que desea asignarle y haga click en la opción Crear menu. Una vez creado el menú asigne los enlaces que desea incluir en dicho menú, utilizando para ello las opciones que se muestran a su izquierda (enlaces personalizados, páginas y categorías). Para crear diferentes niveles de navegación sólo tiene que mover a la derecha la opción a mostrar en un segundo nivel de navegación, así de simple.

Menu Levels

Una vez creados los dos menús, o el menú principal en caso de no querer activar el segundo menú disponible en el tema, fíjese en la opción "Ubicación del tema". Esta opción le permite asignar los menús creados a las zonas en que se mostrarán en el tema. Asigne como Primary Menu el menú que desee mostrar en la parte superior de las páginas y como Secondary Menu el que se mostrará en las páginas del blog. Recuerde que para que se muestra el menú secundario de navegación debe activar dicho menú en las opciones del tema que se explican en el siguiente apartado.

Theme Location

D) Opciones del Tema - top

A continuación se describen las diferentes opciones de configuración del tema disponibles a través de la opción Apariencia » Theme Options. Puesto que cada opción incluye una descripción de su utilidad, la mejor forma de sacar el máximo partido a las opciones consiste en probar y experimentar con los diferentes resultados.

  1. Opciones generales:

    Permite la definición de un logotipo, un favicon y el email en el que se recibirán los mensajes enviados por los usuarios de su Web a través de la "Plantilla Contacto". Además, se puede definir la estructura por defecto de las páginas, añadir código css, códigos de analítica Web, etc.

  2. Estilos:

    A través de estas opciones puede cambiar el aspecto del tema en pocos minutos. Elija color, tipo y tamaño de letra, sombras, fondos, etc.

  3. Página principal:

    Estas opciones corresponden a la Plantilla Home y permiten la activación de un Slider de diapositivas, así como la activación de una llamada a la acción por parte del usuario, etc.

  4. Opciones del Blog:

    A través de estas opciones puede definir el estilo y la estructura del blog, habilitar el menú secundario de navegación descrito en el apartado C, habilitar el slider de posts destacadas, así como otra serie de aspectos cuya descripción puede consultar en el propio panel de opciones.

  5. Opciones del Portfolio:

    Opciones que permiten la definición de las plantillas Portolfio Three Columns, Portfolio Two Columns..., así como la página encargada de presentar los proyectos de su portfolio de forma individual.

  6. Sliders:

    Esta opción le permite crear sliders para usarlos en la página principal y en el resto de páginas y posts haciendo uso de los shortcodes. Puesto que es un aspecto interesante se explica con mayor detalle en el apartado E.

  7. Sidebars

    El sidebar manager le permite crear tantas sidebars como desee para asignarlas de forma individual a las páginas y posts de sus sitio. Una vez creada la sidebar sólo tiene que añadirla a la página que desee.

  8. Social:

    Permite definir los iconos que serán usados en el pie de página. Para cada icono puede asignar la URL del perfil social al que quiere enlazar, así como un texto de captación. Dicho texto sólo aparecerá en los iconos del pie de página habiendo seleccionado la opción: Icons and call to action.

    Como mostrar los perfiles sociales en el pie de página:

    1. En las opciones del tema: Vaya a Pie de página » active la opción Activar área social.
    2. En las opciones del tema: Vaya a Social » Rellene los perfiles de las redes sociales que desea mostrar.

  9. Traducción:

    Las dos opciones a elegir a la hora de traducir el tema son las siguientes:

    Usar ficheros .mo: En caso de elegir esta opción se hará uso del fichero .mo correspondiente a su instalación de WordPress. En caso de que usted por ejemplo esté usando la versiones en español de WordPress se hará uso del fichero es_ES.mo. Tenga en cuenta que el tema sólo incluye los fichero default.mo (versión en Inglés) y es_ES.mo (versión en Español). No obstante, puede usar la opción que se describe a continuación, que le permite traducir o modificar los textos del tema a cualquier otro idioma.

    Traducirlo usted mismo: En caso de seleccionar esta opción podrá traducir los textos haciendo uso de los campos de texto que se muestra justo debajo de estas opciones.

  10. Tamaño de imágenes:

    Defina el tamaño de las imágenes utilizadas tanto en el blog como en los diferentes portfolios disponibles.

  11. Pie de página:

    Este grupo de opciones le permite definir la estructura, los textos de copyright, así como habilitar los iconos de las diferentes redes sociales.


E) Sliders - top

Para crear sliders vaya a Apariencia » Theme Options » Sliders y siga los siguientes pasos:

  1. Haga Click en el botón "Create a Slider".

  2. Asigne un nombre al slider que desea crear.

  3. Seleccione el tipo de slider que desea crear y configure las características disponibles. A continuación se describen los tipos de slider existentes y las opciones de configuración de cada uno de ellos.

    Nivo Slider: Permite añadir slides de imágenes asignándole un título y una dirección URL para redirigir al usuario cuando haga click. Las opciones de configuración disponibles son las siguientes: altura del slider, efecto de transición y tiempo de pausa entre diapositivas.

    Cycle Slider: Haciendo uso de este slider se pueden crear slides con imáges y vídeos así como combinar las imágenes y los vídeos con texto. Las opciones de configuración del slider son las siguientes: altura del slider, efecto de transición y tiempo de pausa entre diapositivas.

    3D Slider: Permite añadir slides con imágenes o archivos flash haciendo efectos de transición en 3D. Las opciones de configuración disponibles son las siguientes: altura, anchura, número de piezas en que se divide la slide y tiempo de pausa entre diapositivas.

  4. Haga Click en el botón "Add Slide" y rellene los campos disponibles. Repita este paso por cada diapositiva que quiera añadir al slider. A continuación una imagen de como ocultar/mostrar, borrar y ordenar slides.

Sliders

Una vez creado el slider, éste puede mostrarse en el encabezado de la Home o en cualquier otra página o post haciendo uso de shortcodes.

¿Como mostrar un slider en la Home?

  1. Vaya a Apariencia » Theme Options » Página principal.
  2. Active el slider de la página principal.
  3. Seleccione uno de los sliders creados anteriormente.
Home Sliders

¿Cómo mostrar un slider en cualquier página o post? Muy fácil, haciendo uso de shortcodes y siguiendo estos pasos:

  1. Click en el botón de shortcodes.
  2. Click en la pestaña sliders.
  3. Seleccione el slider a mostrar.
  4. El editor devuelve el shortcode necesario con una argumento adicional, la anchura. Defina la anchura en px que desea dar a su slider por ejemplo 300. Importante: Introduzca sólo el número. Puesto que la anchura de los Sliders de tipo 3D se puede definir a través del propio panel generador de sliders, el argumento de anchura sólo se toma en cuenta para sliders de tipo Nivo o Cycle.
Home Sliders

F) Portfolios - top

A continuación se describen los pasos necesarios para crear un portfolio:

  1. Cree una página nueva. Vaya a Páginas » Añadir nueva y asígnele un nombre, por ejemplo "Mi Portfolio".

  2. Asigne a la página una de las plantillas disponibles para crear un portfolio:

    • Portfolio One Column
    • Portfolio Two Columns
    • Portfolio Three Columns
    • Portfolio Four Columns

  3. Complete las opciones disponibles:

    • Layout: Seleccione la estructura que desea usar para el portfolio que está creando. Para ello puede elegir entre ancho completo, navegación derecha o izquierda.

    • Sidebar: Si ha elegido una de las dos opciones de navegación lateral seleccione la sidebar que desea utilizar. Recuerde que puede crear tantas sidebars como desee a través de Apariencia » Theme Options » Sidebars.

    • Heading: Defina un título alternativo al nombre del portfolio para mostrarlo en la parte superior del mismo.

    Portfolio Page
  4. Añada proyectos a su portfolio siguiendo los pasos que se describen a continuación:
    1. Para añadir un nuevo proyecto vaya a Portfolio » Add New

    2. Seleccione el portfolio al que desea añadir el proyecto que acaba de crear. En este caso lo añadiríamos a "Mi Portfolio". Usted puede crear tantos portfolios como quiera de igual forma que ha creado "Mi Portfolio", y una vez creados añadir cada proyecto al portfolio que desee. Si nose muestra ningún portfolio debe crear previamente una página asignándole una de las plantillas de tipo portfolio.

      Home Sliders
    3. Añada contenido a este nuevo proyecto: Puede añadir texto al igual que lo haría con cualquier otro post o página, así como una imagen destacada. Además de texto y la imagen destacada puede añadir un video o bien un slider de diapositivas.

    4. Por último, para agrupar los diferentes proyectos en categorías, cree las categorías tal y como lo haría para un post. Para ello, vaya a Portfolio » Portfolio Categories » Añadir nueva categoría. Una vez creada podrá asignarla a cualquiera de los proyectos existentes.

G) Widgets - top

Por defecto el tema cuenta con 5 áreas para introducir widgets. Cuatro de ellas son las que se describen a continuación y permiten widgetizar el pie de página.

El uso de estos cuatro widgets depende del tipo de layout escogido para el pie de página. Si se escoge un layout de 1 columna para el pie de página los widgets a mostrar en él tendrán que insertarse en el "Footer Widget Area: First". En caso de usar un layout de dos columnas los widgets deben insertarse en el "Footer Widget Area: First" y "Footer Widget Area: Second" y así sucesivamente para los layouts de tres y cuatro columnas.

La quinta área widgetized es la "Default Sidebar". Ésta se usa para mostrar widgets al asignar un layout de navegación izquierda o derecha a cualquier página o post. Tal y como se explicó anteriormente cada página puede tener su propio layout y sidebar. Pues bien, la sidebar por defecto puede ser usada para cualquera de estas páginas o posts. En caso de querer usar un sidebar diferente en alguna de sus páginas o posts siga los siguientes pasos.

  1. Vaya a Apariencia » Theme Options » Sidebars
  2. Añada una nueva sidebar introduciendo el nombre de la sidebar en el campo y a continuación presione el botón Add New Sidebar.
  3. Creo o edite una página o post existente y seleccione la sidebar creada anteriormente.
  4. Finalmente incluya el contenido deseado a mostrar en la barra lateral: Por ejemplo un buscado, un formulario de contacto, etc.
Portfolio Page

A continuación se muestra el listado de widgets personalizados incluidos en el tema:

G.1) Video Widget - top

Widget para mostrar un Video de YouTube o Vimeo junto con información descriptiva. A continuación se describen los campos disponibles:

G.2) Twitter Widget - top

Widget to configure and show the latest tweets from a Twitter user. We describe below the available fields for its configuration.

G.3) Tabs Widget - top

Tabs widget to show the most popular posts, recent posts, comments and tags.

G.4)Screenshot Widget - top

Widget para mostrar pequeñas imágenes (thumbnails) con el ligthbox. A continuación se describen los campos disponibles para su configuración.

G.5) Recent Widget - top

Widget que permite mostrar los Post publicados recientemente.

G.6) Flickr Widget - top

Widget para mostrar fotos de un usuario o grupo de Flickr.

G.7) 125x125 Ads Widget - top

Widget para configurar y mostrar 4 bloques de 125*125px. Para ello, se debe introducir la URL de la imagen y el link de destino de cada uno de los bloques.

G.8) 300x250 Ads Widget - top

Widget para configurar y mostrar un banner de 300*250px. A continuación se describen las dos opciones posibles para la configuración del anuncio.

  1. Pegando el código

    Pegue el código del anunció en el campo habilitado para ello.

  2. Rellenando los campos

    Rellene los campos necesarios para configurar el anuncio de forma manual. Para ello, debe introducir la URL de la imagen del banner, la URL destino y el texto alternativo.

G.9) Contact Widget - top

Widget para mostrar un formulario de contacto. El contenido del mensaje será enviado a la dirección de email configurada en Apariencia » Theme Options » Opciones Generales » Email de contacto. Además del email se puede añadir un título opcional al formulario de contacto.

G.10) Login Widget - top

Permite a los usuarios registrados en su sitio web iniciar sesión, siendo el único campo disponible para este widget el título (opcional).

G.11) Featured Post Widget - top

Widget que muestra un post destacado junto con un título opcional. A continuación se describen los campos disponibles:

G.12) Slider Widget - top

Este Widget permite mostrar un slider con los posts o proyectos más recientes de su portfolio. A continuación se describen los campos disponibles:


H) Shortcodes - top

El tema incluye multitud de sliders que te permiten crear diferentes tipos de páginas y darle a tu sitio web un estilo propio. EL contenido de ejemplo "demo-content.xml" incluye varias páginas de ejemplo en las que se hace uso de shortcodes. La forma de cargas el contenido de ejemplo se explica en el apartado A.2

La forma de usar los shortcodes es muy sencilla. Sólo tienes que hacer click en el botón de shortcodes y seleccionar de la lista el que deseas usar en cada momento.

Shortcodes

I) Plugins Recomendados - top

Lo único que tiene que hacer es descargar las últimas versiones de los plugins, descomprimirlos en la carpeta /wp-content/ y activarlos a través de la pestaña Plugins.

Para tener una Página Web rápida y segura le recomendamos usar un proveedor de hosting especializado en WordPress. WPEngine es sin duda una buena alternativa.

Nota importante: Desactive los estilos .css por defecto del plugin WP-PageNavi.

Pagenavi

J) Ficheros del tema - top

A continuación se listas los ficheros incluidos el tema.

Ficheros CSS

Ficheros JavaScript

Iconos y Patterns

*No se incluyen los 107 iconos del pack.

Archivos de Photoshop

Los ficheros PSD incluyen todas las capas necesarias para realizar modificaciones a su gusto.

Nuevamente, gracias por comprar este tema.
Marcos Fdez Villauriz

Regresar a la tabla de contenidos