Performag Theme Premium Parte 2: tutorial en español de la mejor plantilla para WordPress

Escrito por: MCD

Tiempo de lectura minutos

0

Performag Theme parte 2 la plantilla premium de Thrive Themes para WordPress que hace furor en la web.

More...

Performag Theme Parte 2: seguimos con la segunda parte de esta Mega Guía que se las trae por que ahora voy a entrar de lleno al panel de configuración principal de Performag donde se cocina todo.

Luego seguiré con los Widget espectaculares que trae de serie Performag y los voy a desmenuzar uno por uno con capturas para una mejor comprensión.

También llegare a mostrarte el funcionamiento de Thrive Opt-in una herramienta que también viene de serie y es una maravilla para el manejo de formularios de suscripción en tu web y además que tipo de plataforma deberías usar para el envió de newsletter o boletines.

Y para no ser menos te voy a presentar otra herramienta de Performag que se llama Focus Areas (Áreas de atención) que te permitirá colocar formularios y llamadas a la acción en diferentes sitios de la web.

Además otra herramienta muy interesante que se llama Thrive Ad Group que sirve para administrar y colocar anuncios de Google Adsense en tu web.

Terminamos con Thrive Slideshow otra herramienta muy llamativa que viene de serie con Performag y que le dará un toque distintivo a tu web. Esto va tomando color verdad ¡Ahora si que tienes para entretenerte! 🙂

Si a todo esto lo combinas con el editor Thrive Content Builder es realmente una formula explosiva por que el cielo es el límite. ¿Que no conoces Thrive Content Builder? te estás perdiendo lo mejor de la vida en el siguiente enlace te lo presento: Thrive Content Builder Parte 1: La Súper Mega Guía más completa que hayas visto

Si no has visto la primera parte de esta Mega Guía te recomiendo que empieces por el principio aquí te dejo el enlace:

IMPORTANTE: Thrive Themes creo un constructor de plantillas Thrive Theme Builder, que reemplaza todas las plantillas antiguas inclusive a Performag, puedes ver más información aquí. Es por eso que no estarán más a la venta los temas viejos porque fueron reemplazados por el nuevo plugin Thrive Theme Builder (Constructor Visual de Temas) que es impresionante y es parte de Thrive Suite.

Pero si ya tenías de antes todas las plantillas antiguas, un total de 10, o solo una de ellas, podrás seguir utilizando, pero ya no tendrán más soporte por parte de Thrive Themes.

Hazte miembro ahora y podrás disfrutar de todos los plugin por un precio único, en el siguiente enlace te cuento en detalle todo lo que necesitas saber: Membresías Thrive Suite ¡Un todo en uno!

Panel principal de configuración

Ahora te voy a meter de lleno en el panel de configuración de Performag abordaré cada apartado en detalle acompañado de capturas para una mejor comprensión, pues manos a la obra porque hay tela para cortar.

General Settings - Configuración general

performag theme parte 2
  • Paso 1: Para ingresar al panel configuración de Performag debes hacer clic en el menú que se llama Thrive Dashboard y luego en el sub-menú Theme Options (opciones de la plantilla) como muestra la captura superior.
performag theme parte 2
  • Paso 1: Aquí tienes la posibilidad de elegir si quieres mostrar un logo, o en su defecto un texto en el lado izquierdo del encabezado.
  • Paso 2: Si en el paso anterior eliges mostrar una imagen puedes subirla a tu servidor desde este botón Upload (Subir) y podrás seleccionarla luego desde la biblioteca de medios por el contrario si quieres usar texto puedes eliminar la imagen de la configuración haciendo clic en el botón Remove (Remover).
  • Paso 3: También puedes elegir la ubicación del logo, pudiendo colocarlo al lado del menú (en la misma línea) o arriba del menú.
  • Paso 4: En esta área de texto puedes poner un Footer (pie de página) personalizado que se verá en todos los post y páginas de tu web.
  • Paso 5: Aquí puedes activar o desactivar el Footer por defecto, si está en ON se mostrará el Footer de Thrive Themes y también se mostrará el Footer personalizado del paso anterior. Para que se muestre solo el Footer personalizado tienes que poner el botón en OFF.
  • Paso 6: Puedes activar o desactivar el Breadcrumbs (Migas de pan) que se muestra encima de los títulos como ruta de navegación, para saber en qué parte de la web se encuentra el visitante en todo momento.
  • Paso 7: Te permite activar el tiempo relativo por ejemplo en vez de mostrar la fecha en este formato 03/05/2015 se mostraría de esta manera: hace 4 días.
  • Paso 8: Para aplicar todos los cambios y guardarlos debes hacer clic en el botón Save All Changes (Guardar todos los cambios).

Style & Layout Settings - Configuración de estilo y diseño

performag theme parte 2
  • Paso 1: El menú desplegable Color scheme (Combinación de colores) te permite elegir entre 6 variaciones posibles entre los cuales puedes seleccionar Blue (Azul), Green (Verde), Red (Rojo), Purple (Púrpura), Teal (Verde azulado), Orange (Naranja) como verás tienes un abanico amplio de posibilidades.
  • Paso 2: Claro (Light) y Oscuro (Dark) estas combinaciones afectan al contenido, el color de fondo, footer y otros elementos combinado con Color scheme se obtiene otras variantes de color.
  • Paso 3: Estas 5 configuraciones determinan como se mostraran los post. Blog Layout (Diseño de la vista blog).
  • Paso 4: Default Blog Post Layout (Diseño por defecto de los post en la vista blog) puedes definir a nivel global estos ajustes: Default (por defecto), Full Width (Ancho completo) Narrow (Angosto).
  • Paso 5: Esta opción es interesante Sidebar alignment (alineación de la barra lateral) esta barra es la que permite colocar los widget y puedes elegir ponerla a la izquierda o hacia la derecha.
  • Paso 6: Esta es mi favorita Custom css (css personalizado) si te gusta meter mano como a mí 🙂 para hacer retoques más precisos sobre el diseño esto es para ti, en el área de texto puedes poner todo el CSS (Cascading Style Sheets - Hojas de Estilo en Cascada) que quieras sin perder ninguna modificación cuando se actualice la plantilla.
  • Paso 7: En Navigation (Navegación) puedes decidir si quieres que el menú principal quede flotante o fijo, puedes ver un ejemplo en esta misma página, cuando llegas al final del post automáticamente aparecerá el menú principal reemplazando a los botones sociales.
  • Paso 8: Si con estos ajustes no te alcanzan puedes hilar más fino con el Theme Customiser (personalizador de la plantilla) donde puedes elegir entre otros el tipo de fuente, color de fondo, tamaño del logo, etc.
  • Paso 9: Para aplicar todos los cambios y guardarlos debes hacer clic en el botón Save All Changes (Guardar todos los cambios).

Blog Settings - Configuración del blog

performag theme parte 2
  • Paso 1: Aquí puedes definir Featured Image Style (Estilo de la imagen destacada) tienes 3 opciones Wide (Grande) en Thumbnail (Miniatura) o No Image (No mostrar imagen).
  • Paso 2: Puedes decidir si mostraras la imagen destacada dentro del artículo en la parte superior del mismo. Show featured image in single post? (Mostrar imagen destacada en los artículos).
  • Paso 3: Esta opción Author name (Nombre del autor) te permite activar o desactivar el nombre del autor en tus artículos.
  • Paso 4: Aquí en Post Date (Fecha del artículo) puedes decidir en ocultarla o mostrarla.
  • Paso 5: Como en el paso anterior Post Category (Categoría de artículos) puedes ocultarla o mostrarla.
  • Paso 6: En Display about the author box? (Mostrar la caja de Acerca del Autor) si la activas se mostrará una caja con información del autor al final del post.
  • Paso 7: La opción Display links to previous and next post? (Mostrar los enlaces de anterior y siguiente en los artículos) si la activas se mostrará al final de cada post.
  • Paso 8: En el área de Other setting (Otras configuraciones) se encuentra Read more button/link text (Botón de Leer más... con enlace de texto) puedes personalizar el texto, cambiando el de ejemplo por Continuar leyendo este botón de texto se muestra al final del los post en la vista blog.
  • Paso 9: Aquí puedes decidir In blog list display (Mostrar en la lista de post de la vista blog) si quieres mostrar en la lista de post un extracto o resumen debajo del título o mostrar todo el contenido. Puedes ver un ejemplo en la vista blog de esta web.
  • Paso 10: Este campo Hide categories from blog page (Ocultar categorías de la vista blog) puedes hacer que determinadas categorías no se muestren en la página del blog.
  • Paso 11: Para aplicar todos los cambios y guardarlos debes hacer clic en el botón Save All Changes (Guardar todos los cambios).

Analytics / Script - Secuencia de Google Analytics

performag theme parte 2
  • Paso 1: Desde esta sección Header Script (Secuencia de comandos o instrucciones que se ejecutan en el encabezado de la web) y es muy útil para cargar el código de Google Analytics por ejemplo.
  • Paso 2: Aquí en Opening Body Script (Carga los scripts después de abrir la etiqueta body en la página) usado generalmente por Google Tag Manager (Administrador de etiquetas de Google).
  • Paso 3: Aquí en Body Script la secuencia o código se carga antes de cerrar la etiqueta en los post y páginas de tu sitio.
  • Paso 4: Para aplicar todos los cambios y guardarlos debes hacer clic en el botón Save All Changes (Guardar todos los cambios).

Performance - Rendimiento

performag theme parte 2
  • Paso 1: En esta sección Image optimization (Optimización de imagen) como la palabra lo indica te permite optimizar las imágenes de tu biblioteca de medios para hacerlas más ligeras, tiene 3 opciones No Compression (Sin compresión) se deja la imagen tal cual la subiste sin compresión alguna (no recomendado) luego seguimos con Lossy Compression (Compresión muy alta con alguna pérdida de calidad) y por último Lossless Image (Compresión menor sin pérdida de calidad). IMPORTANTE: Si quieres que tus imágenes se compriman automáticamente cuando las subas, debes seleccionar Lossy o Lossless compression y luego clic en Save All Changes (Guardar todos los Cambios).
  • Paso 2: Aquí puedes activar Lazy load comments (Carga de comentarios a medida que se hace scroll) esto quiere decir que a medida que te desplazas hacia abajo se van mostrando los comentarios es aconsejable en post con muchos comentarios porque acelera el proceso de carga de la página.
  • Paso 3: Para aplicar todos los cambios y guardarlos debes hacer clic en el botón Save All Changes (Guardar todos los cambios).
performag theme parte 2
  • Paso 1: Con Image Resize puedes re-dimensionar las imágenes al tamaño adecuado que utiliza la plantilla esta función es útil si ya tenías de antes muchas imágenes en la biblioteca de medios sin optimizar ya que las nuevas imágenes que subas Performag las auto-re-dimensiona y las comprime de forma automática.
  • Paso 2: Tienes dos opciones Scale (Escalar o reducir de tamaño) y Crop (Recortar) en este caso te recomendaría Scale and Crop.
  • Paso 3: También puedes usar los tamaños por defecto de WordPress.
  • Paso 4: Una vez que hayas configurado los pasos anteriores, si haces clic en el icono de reproducción como muestra la captura comenzará el proceso de compresión y redimensionado de todas las imágenes que se encuentren en la biblioteca de medios de WordPress.
  • Paso 5: Para aplicar todos los cambios y guardarlos debes hacer clic en el botón Save All Changes (Guardar todos los cambios).

Comments - Comentarios

performag theme parte 2
  • Paso 1: Aquí en la opción Show comments on pages (Mostrar comentarios en las páginas) puedes decidir activarlos o no.
  • Paso 2: En Highlight author comments (resaltar comentarios del autor) si lo activas se van a diferenciar los comentarios del autor con otro color de fondo de los comentarios de los visitantes (recomendado).
  • Paso 3: La opción Comment Count (Contador de comentarios) si está en ON y hay por lo menos 1 comentario se mostrará en la parte superior del formulario.
  • Paso 4: En Show comments date (Mostrar la fecha en los comentarios) se mostrará a la derecha del nombre del autor.
  • Paso 5: En Facebook Comments (Comentarios de Facebook) puedes mostrar los comentarios de Facebook en tu web.
  • Paso 6: La opción Enable facebook comments (Activar comentarios de Facebook) tiene 4 opciones en su menú desplegable: Off (no mostrar comentarios de Facebook), Only Facebook comments (Solamente comentarios de Facebook), Both Facebook and regular comments (Ambos, comentarios de Facebook y comentarios regulares), Facebook comments when regular are disable (Comentarios de Facebook con regulares desactivados).
  • Paso 7: Para que los comentarios de Facebook funcionen en tu web, necesitas el app id (Identificador de aplicación) en la siguiente guía te muestro como obtenerlo: Configuración del botón de Facebook una vez obtenido debes pegarlo aquí.
  • Paso 8: En Facebook number of comments (Número de comentarios de Facebook) puedes definir la cantidad que quieres mostrar.
  • Paso 9: También puedes en Color scheme (Combinación de colores) elegir entre Light (claro) o Dark (oscuro).
  • Paso 10: La opción Moderators (Moderadores) puedes definir una persona para que administre tus comentarios, pero primero debes darlo de alta en tu cuenta de Facebook asignándole el rol de editor o administrador según el caso.
  • Paso 11: Para aplicar todos los cambios y guardarlos debes hacer clic en el botón Save All Changes (Guardar todos los cambios).

Social Media - Redes Sociales

performag theme parte 2
performag theme parte 2
  • Paso 1: Use Thrive Social Buttons (usar botones sociales de thrive). Activa o desactiva el uso de los botones sociales en todo el sitio a nivel global, si no vas a utilizar redes sociales debes ponerlo en OFF.
  • Paso 2: Twitter button (botón de Twitter) activa o desactiva el botón.
  • Paso 3: Twitter username (nombre de usuario de Twitter) debes ingresarlo en este formato por ejemplo: @mcddisenoweb
  • Paso 4: Facebook button (botón de Facebook) activa o desactiva el botón.
  • Paso 5: Google+1 button (botón de Google+) activa o desactiva el botón.
  • Paso 6: Linkedin button (botón de linkedin) activa o desactiva el botón.
  • Paso 7: Pinterest button (Botón de Pinterest) activa o desactiva el botón.
  • Paso 8: Where to display (donde mostrar los botones) en esta sección podrás definir dónde quieres que aparezcan los botones.
  • Paso 9: Display location (Ubicación en pantalla), aquí puede elegir donde se mostrarán los botones sociales y cinco opciones: Post (Artículos), Page (Páginas), Top of Posts (arriba de los post), Top of pages (Arriba de las páginas) y por último en Post List (Listas de post) solamente debes marcar las casillas para que se muestren.
  • Paso 10: Attention grabber (Llamada de atención) en realidad lo que hace esta opción es mostrar un contador en los botones de redes sociales pero para esto se tiene que acceder demasiadas veces a la base de datos y podrías consumir muchos recursos de tu servidor, si lo quieres utilizar hazlo con precaución.
  • Paso 11: Social header links (Enlaces sociales en la cabecera de la web) se verán con un pequeño icono en el lado derecho de la cabecera de la web, a la derecha del buscador puedes verlo en la cabecera de mi web.
  • Paso 12: Aquí tienes los campos necesarios para poner las URL de las redes sociales más utilizadas.
  • Paso 13: Social Sharing Data (Compartir datos sociales), en esta sección puede configurar por defecto, opciones globales para todo el sitio.
  • Paso 14: Use Thrive Social Meta Data (Usar metadatos sociales de Thrive) ten en cuenta que si activas esta opción  sobre-escribirá la de otros plugins que tengas instalados como por ejemplo YOAST SEO y si quieres utilizar la parte social de este último deberás ponerlo en OFF.
  • Paso 15: Site Name (Nombre del sitio web) ej. MCD Diseño Web.
  • Paso 16: Site Title (Título del sitio) ej. MCD Diseño Web.
  • Paso 17: Site Description (Descripción del sitio) por ejemplo: Te ofrezco mi experiencia para desarrollar tu proyecto; Tu blog/web optimizado con un estilo único; Consultorías, mantenimientos y mucho más.
  • Paso 18: Site Image (Imagen del sitio por defecto) en esta sección puede configurar por defecto de forma global la imagen predeterminada que se comparte en Facebook, Google+, Twitter y Pinterest siempre podrás modificar de forma individual cada post y página. Recomendado el uso de imágenes superiores a 1200 x 600 pixel para que se vean bien en pantallas grandes y dispositivos de alta resolución.
  • Paso 19: Con el botón Upload (Subir) podrás cargar una nueva imagen desde tu PC o seleccionar una desde la biblioteca de medios de WordPress.
  • Paso 20: Twitter Username (Nombre de usuario de Twitter) al ponerlo aquí quedará configurado a nivel global.
  • Paso 21: Para aplicar todos los cambios y guardarlos debes hacer clic en el botón Save All Changes (Guardar todos los cambios).

404 Page - Personalización página de error 404

performag theme parte 2
performag theme parte 2
  • Paso 1: Esta sección esta muy bien por que te permite personalizar la página clásica de error 404 por una más llamativa y funcional. Las páginas de error 404 se producen generalmente cuando una página o post no existe más o cuando cambias la URL permanente de algún artículo.
  • Paso 2: Dispones de 35 Shortcodes (al principio de esta guía te los detallo uno a uno) que puedes aplicar a tu página de error 404, en el ejemplo hay un botón con un enlace que te lleva a recoger un regalo de bienvenida.
  • Paso 3: También en el ejemplo puedes observar otro Shortcode que muestra una galería de los artículos recientes esto es muy útil si un visitante se topa con un error 404 en tu web, podrá ver tus últimos artículos publicados.
  • Paso 4: Display sitemap (Mostrar un mapa del sitio) esta opción si la activas mostrará una lista de todos los enlaces que componen tu sitio.
  • Paso 5: Para aplicar todos los cambios y guardarlos debes hacer clic en el botón Save All Changes (Guardar todos los cambios).

Related Post - Artículos relacionados

performag theme parte 2
performag theme parte 2

Activate Advanced Related Post: De manera predeterminada, una lista de los artículos relacionados se genera haciendo una lista de los últimos artículos en la misma categoría que estás viendo en ese momento. Cuando se activa la función avanzada, nuestro algoritmo de búsqueda mapea todos los artículos. Este mapa de artículos relacionados se actualiza cada vez que se guarda una nueva entrada o post. La ventaja de esta característica avanzada es que se obtienen mejores resultados de los artículos relacionados. El inconveniente es que cada vez que guarde un nuevo artículo, habrá un pequeño retraso, dependiendo de la cantidad de post que tu sitio tenga. Sin embargo los visitantes de tu web no notarán ningún impacto de velocidad.

  • Paso 1: Enable this Feature (Activar esta característica) si haces clic en este botón se habilitarán los artículos relacionados y se abrirá un nuevo apartado de configuración como se muestra en la siguiente captura.
  • Paso 2: Aquí puedes activar o desactivar un caja al final de los post que muestra los artículos relacionados como ejemplo puedes verlo en esta misma página al final de la misma ARTÍCULOS RELACIONADOS.
  • Paso 3: Para aplicar todos los cambios y guardarlos debes hacer clic en el botón Save All Changes (Guardar todos los cambios).
performag theme parte 2
performag theme parte 2
  • Paso 1: Related Post (Artículos relacionados).
  • Paso 2: Text when no related post are found (Texto cuando no se encuentra ninguna entrada relacionada) aquí puedes poner tu texto personalizado. Ejemplo: No hay artículos relacionados para este contenido.
  • Paso 3: Ignore categories (Ignorar categorías) aquí puedes puedes ocultar categorías para que no se relacionen.
  • Paso 4: Ignore tags (Ignorar etiquetas) aquí puedes puedes ocultar etiquetas para que no se relacionen.
  • Paso 5: Number of related post to store (Cantidad de artículos relacionados para almacenar) por defecto es 10 pero puede elevarlo a 20.
  • Map relations for all existing post (Mapear relacionados para todos los artículos existentes) una vez que tengas todo configurado debes hacer clic en este botón para que se cree un mapa de post relacionados.
  • Paso 6: Disable this feature (Desactivar esta característica) si no quieres usar más loa artículos relacionados puedes desactivarlos haciendo clic en este botón.
  • Paso 7: Display Related Post Box? (Mostrar caja de artículos relacionados) puedes activar o desactivar la caja de artículos relacionados que se muestra al final de cada post.
  • Paso 8: Display Featured images? (Mostrar imagen destacada) puedes activar o desactivar las imágenes destacadas de los artículos relacionados.
  • Paso 9: Related Post Title (Título para los artículos relacionados) puedes poner un texto personalizado para que se muestre en el encabezado de los relacionados por ejemplo: Estos son mis artículos relacionados.
  • Paso 10: Cantidad de artículos relacionados que quieres  mostrar.
  • Paso 11: Para aplicar todos los cambios y guardarlos debes hacer clic en el botón Save All Changes (Guardar todos los cambios).

Magazine Features - Características para formato de revista

performag theme parte 2
  • Paso 1: Magazine Features (Características para formato de revista) aquí podrás hacer ajustes específicos para este formato.
  • Paso 2: Enable Infinite Scrolling for Blog Pages (Activar o desactivar el scroll infinito en las páginas del blog) el scroll infinito es cuando nos desplazamos al final de la página y en ese momento se van cargando más artículos de forma progresiva, entonces a medida que vamos bajando se van mostrando más entradas al estilo Facebook.
  • Paso 3: Enable Infinite Scrolling for Post (Activar o desactivar el scroll infinito en los artículos) este punto es igual al anterior con la diferencia que este ajuste solo se aplica a los artículos.
  • Paso 4: Enable Sharing Buttons Blog Pages (Activar o desactivar botones sociales en la vista blog) puedes elegir si quieres mostrar los botones sociales en la vista blog este ajuste se aplica solo a esta vista.
  • Paso 5: Para aplicar todos los cambios y guardarlos debes hacer Clic en el botón Save All Changes (Guardar todos los cambios).

Homepage Layout - Diseño de la página de inicio

performag theme parte 2
  • Paso 1: Homepage Layout (Diseño de la página de inicio o portada) Esta sección es muy importante porque podrás mostrar la portada como la demo de Performag.
  • Paso 2: Enable Homepage Custom Layout (Activar o desactivar el diseño personalizado de la página de inicio).
  • Paso 3: Select Page (Seleccionar página) en la siguiente captura te lo muestro mejor.
  • Paso 4: Add new block (Añadir un nuevo bloque) ver siguiente captura.
  • Paso 5: Sección de bloques, ver siguiente captura.
  • Paso 6: Para aplicar todos los cambios y guardarlos debes hacer clic en el botón Save All Changes (Guardar todos los cambios).
performag theme parte 2
  • Paso 1: Poner en ON para activar el diseño de página personalizado.
  • Paso 2: Seleccionar la página Portada que habías creado anteriormente desde el menú desplegable, que por ahora está vacía luego irás añadiendo los bloques.
  • Paso 3: Debes hacer clic en el botón Add new block (añadir nuevo bloque) y elegir Category (Bloque de categoría), luego repites el proceso y eliges Image (Bloque de imagen) y por último Media (Bloque de vídeo), los bloques se irán poniendo uno debajo del otro como muestra la captura. Puedes arrastrar los bloques hacia arriba o abajo para cambiar su posición.
  • Paso 4: Para aplicar todos los cambios y guardarlos debes hacer clic en el botón Save All Changes (Guardar todos los cambios).
performag theme parte 2
  • Paso 1: Featured block (Bloque de artículos destacados) si haces clic encima del texto Featured block se desplegará el panel de configuración para ese bloque en particular.
  • Paso 2: Display Featured Block (Mostrar bloque de artículos destacados) aquí debes ponerlo en ON para que se muestre en la portada.
  • Paso 3: una vez activado el paso4 se desplegará un área en blanco donde podrás elegir los artículos fijos que se verán en la portada (si escribes las primeras letras del post se irá mostrando una lista de artículos disponibles), puedes elegir 4 para empezar y ver como van quedando.
  • Paso 4: Enable Custom Post (Activar artículos personalizados) primero que nada debes poner en ON antes de pasar al paso 3.
  • Paso 5: Cliquea sobre Category block (Bloque de categoría) para que se despliegue el panel de configuración.
  • Paso 6: En la opción Category (debes elegir una categoria que quieras mostrar).
  • Paso 7: La imagen que se ve, es un ejemplo de como se vería el bloque categoría en la portada. Importante: ten en cuenta que la categoría elegida debe tener al menos 3 o 4 artículos para que se vea como en la imagen de ejemplo.
  • Paso 8: Cliquea sobre Image block (Bloque de imágenes) para que se despliegue el panel de configuración.
  • Paso 9: En la opción Category (debes elegir una categoría que quieras mostrar).
  • Paso 10: Title (optional) aquí puedes poner un título que se mostrará como encabezado esto es opcional.
  • Paso 11: La imagen que se ve, es un ejemplo de como se vería el bloque Imagen en la portada. Importante: ten en cuenta que debes crear un artículo con el formato imagen para que esto sea posible.
  • Paso 12: Cliquea sobre Media block (Bloque de vídeo) para que se despliegue el panel de configuración.
  • Paso 13: En la opción Category (debes elegir una categoría que quieras mostrar).
  • Paso 14: Title (optional) aquí puedes poner un título que se mostrará como encabezado esto es opcional.
  • Paso 15: La imagen que se ve, es un ejemplo de cómo se vería el bloque Media en la portada. Importante: ten en cuenta que debes crear un artículo con el formato vídeo para que esto sea posible.
  • Paso 16: More posts (Más artículos) puedes activar esta opción y se mostrarán los nuevos post al final de la página.
  • Paso 17: Loading Method (Método de carga) tienes 2 opciones Automatically load New Posts on Scroll (Cargan automáticamente a medida que se hace scroll) o Load More Posts on Click (Carga más artículos haciendo clic).
  • Paso 18: Para aplicar todos los cambios y guardarlos debes hacer clic en el botón Save All Changes (Guardar todos los cambios).

Performag ya lo trae todo integrado de serie, con un código limpio y ligero. ¡No te pierdas este mega tutorial donde te cuento todas las funciones!

Tweetealo a tus amigos

Resultado final de la personalización de la página de inicio

performag theme parte 2
  • Después de haber aplicado todos los pasos de configuración de la sección Homepage Layout (Diseño de la página inicial o portada) quedaría como la imagen superior.
  • Puedes ver la portada al completo en el siguiente enlace: ver portada completa.

Widget disponibles en Performag

performag theme parte 2

Cuando instalas el Theme Performag se añadirán nuevos módulos llamados Widget con diferentes funciones, para luego colocarlos generalmente en el Sidebar (Barra lateral) y en el Footer (pie de página) de los post y páginas si así lo quisieras.

En total son 9 Widget adicionales que tendrás a tu disposición para hacer más dinámico tu sitio web, ahora te voy a mostrar el funcionamiento de cada uno paso a paso. ¡A no decaer que todavía hay más!

Como colocar un Widget en una ubicación determinada

performag theme parte 2
  • Paso 1: Primero debes acceder al menú Apariencia>> Widgets  eliges uno y cliqueas sobre el nombre para que muestre el menú de con las posiciones disponibles, en este caso dispones de 5 ubicaciones Main Sidebar (Barra lateral principal), Page Sidebar (Barra lateral en las páginas), Footer Column 1 (pie de página 1), Footer Column 2 (pie de página 2), Footer Column 3 (pie de página3).
  • Paso 2: Una vez que selecciones la ubicación debes hacer clic en el botón Añadir widget y verás la siguiente captura.
performag theme parte 2
  • Paso 1: Al hacer clic en el botón Añadir Widget automáticamente se mostrará desplegado para que puedas configurarlo.
  • Paso 2: Una vez finalizada la configuración debes hacer clic en el botón Guardar y puedes verlo funcionando en el frente de tu web refrescando la página de tu navegador con F5.

Thrive Author Widget - Widget biografía del autor

performag theme parte 2
  • Este Widget puedes verlo funcionando en mi web dentro de los post que tienen Sidebar (Barra lateral) y permite mostrar información del autor de la web junto a una imagen.
  • Puedes colocar una imagen personalizada subiéndola con el botón Upload o puedes utilizar la imagen que tengas en tu perfil de WordPress, para eso debes escribir tu nombre de usuario para que aparezca en el campo y quedé seleccionado como en la captura. Pero yo te recomendaría que subas una imagen personalizada que se verá más grande.
  • En Custom text (Texto personalizado) puedes poner lo que quieras hasta código html para mostrar botones como tengo en mi  web.

Thrive Button Ads - Widget de Google Adsense en forma de botón

performag theme parte 2
  • Aquí no hay mucho que explicar por que es realmente sencillo configurar este Widget. La diferencia que hay con el otro Widget que se llama Thrive Default Ads es que en este podrás colocar varios anuncios en un módulo como si de botones se tratara.
  • Para utilizar esta función debes tener una cuenta de Google Adsense la puedes conseguir en este enlace: Registrarse en Google Adsense.
  • Una vez registrado en Google Adsense debes colocar el código en la herramienta Thrive Ad Group que más adelante te explicare en esta guía.
  • En la columna de la derecha a modo de ejemplo podrás ver como quedaría un anuncio en el Sidebar (Barra lateral) pero se puede colocar en otras ubicaciones también.

Thrive Call-To-Actions Widget - Widget de llamada a la acción

performag theme parte 2
  • Unos de mis Widget favoritos por que puedes poner una llamada a la acción para que el visitante se suscriba a tu web, cuando el usuario hace clic en el botón SÍ, QUIERO automáticamente será redirigido a una landing page, Post  o Página que definas en el campo Button Link (Enlace del botón).
  • En la columna de la derecha puedes ver como quedaría el resultado final.

Thrive Custom Text Widget - Widget de texto personalizado

performag theme parte 2
  • Este Widget es muy simple pero a le vez muy útil en el caso del ejemplo he colocado un menú en html con enlaces de mi web y lo coloqué en el Footer Column 1 (Pie de página 1).
  • También puedes poner texto simple o lo que se te ocurra en base a tus necesidades deja ¡Volar tu imaginación!

Thrive Default Ads Widget - Widget de anuncios de Google Adsense

performag theme parte 2
  • Aquí tampoco hay mucho que explicar por que es muy sencillo configurar este Widget.
  • Para utilizar esta función debes tener una cuenta de Google Adsense la puedes conseguir en este enlace: Registrarse en Google Adsense.
  • Una vez registrado en Google Adsense debes colocar el código en la herramienta Thrive Ad Group que más adelante te explicare en esta guía.
  • En la columna de la derecha a modo de ejemplo podrás ver como quedaría un anuncio en el Sidebar (Barra lateral) pero se puede colocar en otras ubicaciones también.

Performag está pensada para cualquier tipo de usuario (principiante o avanzado) sin necesidad de tocar código. ¡Mega tutorial en español para crear la web de tus sueños!

Tweetealo a tus amigos

Thrive Follow Me Widget - Widget de sígueme en las redes sociales

performag theme parte 2
  • Paso 1: Title (Título) aquí puedes poner un texto que verás por encima de los iconos.
  • Paso 2: Todas las redes dispones de dos botones para Activar o Desactivar la red social elegida.
  • Paso 3: Twitter cliquea en el siguiente enlace para ver la URL completa de: MCD Diseño Web solo debes agregar tu nombre de usuario Ejemplo: mcddisenoweb como puedes apreciar en la captura.
  • Paso 4: Facebook cliquea en el siguiente enlace para ver la URL de: MCD Diseño Web debes copiar la ruta completa como se muestra en la captura superior.
  • Paso 5: Google+ profile cliquea en el siguiente enlace para ver la URL completa de: MCD Diseño Web solo debes poner esta parte: 11484 66614 38686 363636 como se muestra en la captura superior.
  • Paso 6: Pinterest cliquea en el siguiente enlace para ver la URL de: MCD Diseño web solo debes agregar tu nombre de usuario Ejemplo: mcddisenoweb como se ve en la captura.
  • Paso 7: RSS feed cliquea en el siguiente enlace para ver la URL completa del Feed de: MCD Diseño web como verás en el ejemplo solo tienes que agregar la palabra feed al final de tu nombre de dominio, como se ve en la imagen.
  • Paso 8: Youtube cliquea en el siguiente enlace para ver la URL completa del: Canal de Youtube MCD Diseño web solo debes poner la última parte como se ve en la captura superior.
  • Paso 10: En la columna de la derecha podrás ver cómo quedaría aplicado este Widget en el Footer Column 1 (Pie de página 1) también podrías aplicarlo en el Main Sidebar (Barra lateral principal).

Thrive Opt-In Widget - Widget con formulario Opt-In

performag theme parte 2
  • Como puedes ver en la captura superior es muy fácil de configurar este Widget pero para poder utilizarlo debes tener creado previamente un formulario para que se muestre en la sección Opt-in integration y puedas seleccionarlo, en el ejemplo tengo creado uno que se llama Formulario suscripción. 
  • Los formularios los puedes crear en el menú Thrive Opt-In >> Añadir nuevo más adelante en esta guía te explico como hacerlo.
  • Por último clic en el botón Guardar para aplicar los cambios.

Thrive Post Widget - Widget para mostrar artículos

performag theme parte 2
  • Thrive Post Widget te permite mostrar en el Sidebar (Barra lateral) por ejemplo los Recent posts (Artículos recientes), Popular post (Artículos populares) y también Artículos relacionados. Solo debes cambiar donde dice List type (Tipo de lista) y seleccionar la adecuada.
  • Puedes configurar la cantidad de artículos que quieres mostrar en Number of posts (Cantidad de artículos).
  • Show thumbnails (Mostrar miniaturas) si no quieres mostrar imágenes solo debes de-seleccionarla.
  • Por último clic en el botón Guardar para aplicar los cambios.

Thrive Tabs Widget - Widget con pestañas

performag theme parte 2
  • Thrive Tabs Widget es muy útil cuando quieres mostrar mucha información en poco espacio, puedes mostrar hasta 5 pestañas, normalmente se utiliza para mostrar los artículos recientes, populares y lo más visto pero también podrías mostrar artículos de una determinada categoría con la opción Custom Category (Categoría personalizada) y por último puedes mostrar un menú personalizado con la opción Custom menú.
  • Number of items to show (Cantidad de artículos que quieras mostrar).
  • Trending Time-Frame (in days) (A partir de qué marco de tiempo se considerara los artículos populares) puedes poner 100 días, dentro de ese periodo de tiempo se mostraran los artículos más populares de los últimos 100 días.
  • Por último clic en el botón Guardar para aplicar los cambios.

Final de la segunda parte

Hasta aquí llegamos por ahora, te espero en la parte 3 y última de esta Mega Guía, aquí tienes el enlace:

¿Te ha sido útil este artículo?

¿Te gustaría ayudar a otras personas? Entonces lo tienes fácil, compártelo en la redes sociales.

¿Necesitas más ayuda? Visita el foro hay una comunidad siempre lista para ayudar.

He dedicado toda mi vida a la informática y soy un apasionado de las nuevas tecnologías además quiero compartir contigo todo lo que aprendí con WordPress.org - Thrive Architect y Thrive Suite

¡Esto también te puede interesar!

Échales un vistazo...

Elije una categoría
  • Todos
  • Hosting
  • Plugins WordPress
  • SEO Optimización
  • Themes WordPress
  • Thrive Apprentice
  • Thrive Architect
  • Thrive Automator
  • Thrive Comments
  • Thrive Content Builder
  • Thrive Leads
  • Thrive Quiz Builder
  • Thrive Theme Builder
¡Deja un comentario, tu aportación será muy apreciada!
{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
>
Success message!
Warning message!
Error message!