1. Consideraciones previas
  2. Grace Church
  3. Bridge
  4. The7
  5. Layer Slider
  6. Revolution Slider
  7. Visual Composer

Consideraciones previas

Muchas plantillas de pago tienen warnings que aunque no impiden que la plantilla funcione correctamente, resultan molestos por aparecen en la pantalla. Podemos bloquear la visualización de errores introduciendo el siguiente código en el functions.php:

/** Sets up WordPress vars and included files. */
require_once(ABSPATH . 'wp-settings.php');
error_reporting(0);

Grace-church

Superponer el menú al contenido.

Theme Options -> Header -> Top panel position -> Over slider

Insertar componente de eventos con el visual composer

Visual composer -> Añadir -> Blogger ->

  • Pestaña Query: Events
  • Pestaña Configuración General: Blogger Layout: List

Bridge

Esta plantilla dio problemas para algunos alumnos, dependiendo de la plantilla hija instalada. Algunos no los pudimos solventar. En varios casos, bastaba con no mostrar los mensajes de error que arrojaba la plantilla, modificando el wp-config.php


/** Sets up WordPress vars and included files. */
require_once(ABSPATH . 'wp-settings.php');

error_reporting(0);

Ejemplos de templates con bridge.

Instalar plugins

Tras instalar el tema aparece un mensaje sugiriendonos instalar tres plugins: Envato Wordpress Toolkit, LayerSlider WP y WPBakery Visual Composer. Lo hacemos.

Importing a Demo via Qode Import

  1. Hay que tener instalado el theme Bridge y los plugins Envato Wordpress Toolkit, LayerSlider WP y WPBakery Visual Composer.
  2. Pulsamos en el menu Quode Import -> ... Si estamos usando CDMON, es recomendable subir los valores del servidor al máximo (En configurar PHP, cambiamos la versión de PHP a la 7.0, ampliación temporal de la memoria y del tiempo de ejecución, subida de ficheros y variables para POST y GET, upload_max_filesize, post_max_size, max_input_vars)

Añadir un sidebar al blog

Quode Options -> blog -> right sidebar

Colocar un slider al principio de una página

Lo podemos hacer usando el visual composer, pero también, haciendo scroll down en edición de la página, hay una opción para vincular un slider a la página

Habilitar un area de widgets justo encima de la cabecera donde habitualmente se pone el tlf, redes sociales, etc.

Quode Options -> Header -> Header Top -> Show Header Top Area

Ejercicio

Instalar la plantilla bridge, y utilizando el Quode Import, instalar la plantilla Company. Retocarla hasta conseguir, los contenidos propuestos en este enlace.

Descargar fotos.

The7

Custom CSS

Theme Options -> General -> Pestaña Custom CSS

Logos en el header y en el footer

Theme Options -> Branding

El teléfono y dirección de la top bar

Theme Options -> Top Bar & Header -> Microwidgets

Hacer un microsite (one page site)

  1. Añado una nueva página y le asigno el template microsite. Teniendo Visual Composer instalado voy a add Element -> row. Cada fila será una página del one page site. Pulsando en el lapiz correspondiente de cada row, puedo asignarle un anchor para que funcione el one page site. En el mismo panel que especifico el anchor, especificaré el minimum height de 100%. Marco la check "Primary menu area"
  2. Creo un custom menu donde cada item irá a un anchor diferente. Si quiero ir al anchor #contacto, usaré:
    	
    #!/contacto		
    	
    

Cambiar la estructura (tipo y posición del menú, posición del logo, etc)

  • Theme Options -> Top Bar & Header -> Layout
  • Theme Options -> Skins -> Selecciono uno. Cuando lo cambie, perderé los estilos (definidos en Theme Options -> General -> Customo CSS) del theme.

Color de fuente, de fondo, etc.

Theme Options -> General

Crear una página de portfolio

Es una página muy visual, donde cada foto enlaza a una página. Para ver ejemplos de los portfolios que ofrece la plantilla the7: http://the7.dream-demo.com/portfolio/

  1. Creo una nueva página e indico que es una página de portfolio.
  2. Si escojo el porfolio Masonri / Grid, podré especificar el número de columnas.

Ejercicio

Descargar recursos

Ver video tutorial del ejercicio resuelto

pantallazo página web, ejercicio wordpress

Layer Slider

Haciendo un video responsive y full screen

Para hacerlo grande, tuve que ponerle los atributos width="100%" height="100%" al video en su propia etiqueta. Además en el gestor visual donde podemos introducir el ancho y el alto, no deberíamos introducir dichos valores en porcentajes.

		
<video width="100%" height="100%" preload="metadata" controls>
		
	

Además, tuve que volver a ponerle el width en Slider Settings -> Layout -> Slider width

Haciendo un video responsive

Slider Settings -> Responsive mode -> marco la check responsive

Haciendo un video autoplay

El atributo autoplay de la etiqueta no funciona. Debo gestionarlo en Slider Settings -> Videos -> Automatically play videos

Revolution Slider

Configuración para que quede un slider responsive a full screen:

  • Slider Layout: Auto responsive
  • Unlimited height: on
  • Forec Full Width: on
  • Layers Grid Size: 1400x650

Quitar animaciones de las diapositivas

Dentro del slide, vamos a transitions, desmarcamos la que hay y marcamos no transitions.

Visual Composer

Este es un plugin de pago, si no tenemos su correspondiente licencia, puede ocurrir que al tratar de editar una página con visual composer, no se muestre la correspondiente información.

En las plantillas que lo traen integrado de serie (bridge, visual composer), es mejor no desactivarlo, porque está muy integrado en sus funcionalidades y la plantilla no irá bien.

Crear una galería de fotos

Lo más sencillo será usar el componente GRID

Error típico

Si no podemos editar las entradas del blog con el visual composer, puede deberse a dos razones:

  • Que necesite actualización (habrá que actualizar la plantilla o el plugin)
  • Que esté desactivado para el tipo de publicación que estamos editando. Se soluciona llendo a:visual composer -> role manager -> tipos de entradas -> debo marcar la check de blog

Añadir un widget al contenido

Usaremos el componente Barra adicional con widgets

icono de mandar un mail¡Contacta conmigo!
contacta conmigoPablo Monteserín

¡Hola! ¿En qué puedo ayudarte?