ANA PASCUAL WEB ESTUDIO
Hoy os dejo un video de como configurar el tema Infinity Pro de Genesis, pero esta vez no va a ser comolademo!
Va a ser una adaptación para una web de un restaurante.
Para ello vamos a hacer tres cambios:
Espero que os guste!
En esta entrada vamos a ver como colocar un video de fondo en el área Front Page 1 en la home del tema Infinity Pro.
Lo primero que haremos es obtener las versiones mp4 y webm de nuestro video. El ratio recomentdado es de 1920 x 1080.
También crearemos una imagen del video para mostrarla en las pantallas de resoluciones más pequeñas.
Subiremos los dos videos y la imagen a la mediateca de nuestro WordPress y obtendremos los enlaces correspondientes.
Luego instalaremos y activaremos el plugin Video Background
Crearemos una página que podemos llamar «home». Veremos que en la parte inferior nos aparece una nueva caja de opciones llamada «Video Background»
En el campo «Container» colocar «.front-page-1».
En el campo Link to .mp4 colocar la url del video mp4.
En el campo Link to .webm colocar la url del video webm.
En el campo Link to fallback image colocar la imagen del video.
Una vez guardados lo cambios ir a Apariencia/Personalizar/Front Page Background Images/Featured Section 1 Image y eliminar la imagen.
Después ir a Ajustes / Lectura y establecer la página que acabamos de crear como página de inicio.
Ahora sólo nos queda comprobar los resultados.
Hoy vamos a ver que es y como configurar las widget áreas «Offscreen Content», «Lead Capture» i «Footers».
Esta widget área se muestra en la esquina superior derecha de la plantilla y se accede clicando sobre un icono de tres puntos …
Para cerrarla hay que hacer clic sobre la cruz de la esquina derecha
En esta widget área pondremos un widget de Enews y otro de texto.
El de eNews lo configuraremos así:
Y el de texto con este contenido:
<small><em>Showcase something really groovy with the Offscreen Content widget area.</em></small>
La siguiente widget área que configuraremos es la que se muestra en las páginas que tienen asignada la template o plantilla de página «Lead Capture». En estas páginas tendremos disponible una widget área que se mostrará en el pié de la página. En la demo han colocado un widget de eNews extended.
Lo configuraremos igual que en la widget área Offscreen Content que acabamos de ver. La única variación es el texto que añaden antes del formulario:
<strong>Sign up today and get FREE access!</strong>
Finalmente veremos las tres widget áreas del footer: Footer 1, Footer 2 y Footer 3
A tener en cuenta que las widget áreas Footer 2 y Footer 3 no se van a mostrar hasta que no pongamos algún widget en la widget área Footer 1.
En la demo han colocado estos widgets:
El contenido del widget de texto del Footer 1:
We help entrepreneurs build a digital business by focusing on 3 key elements of a successful online platform. We will handcraft an amazing experience for your visitors with the Infinity Pro theme. <a class="button" href="#">Learn more about us</a>
En el Footer 2 se ha colocado de nuevo un widget de eNews extended.
Y en el Footer 3 un widget de Posts Destacados «Genesis-Featured Posts» configurado de la siguiente manera:
Finalmente os dejo el vídeo con toda la explicación:
En esta entrada vamos a configurar la widget área Primary Sidebar.
La widget área Primary Sidebar tiene cuatro widgets:
Veamos como configurar cada uno de estos widgets.
Para el buscador sólo nos hace falta añadir el widget y guardar:
Luego añadiremos el widget de eNews Extended Plugin. En la primera parte del widget le podemos añadir un título, un texto antes del formulario y otro texto después del formulario. En la demo se ha rellenado así:
La parte intermedia del widget dependerá del servicio de Email que escojáis. En cada caso se deberán rellenar los campos según las instrucciones de configuración del proveedor de emails.
Para la demo sustituiremos los campos con #:
Y finalmente en la última parte del widget rellenaremos los campos del formulario que queremos que se muestren a nuestros visitantes y el texto del botón de envío:
El siguiente widget es el de posts destacados, Genesis Featured Posts. En este caso se han colocado 3 posts con una imagen destacada del tamaño mini-thumbnail (75×75) alineada a la izquierda y se muestra el título y el autor sin contenido:
Y finalmente colocaremos el widget de los iconos de redes sociales Simple Social Icons. Los ajustes de medidas y colores éstos que véis a continuación. Sólo os quedará añadir la url a cada una de las redes sociales a las que queráis enlazar. Los colores de los iconos:
En este post veremos como centrar el logo y el menú en el tema Infinity Pro de Genesis
Para ello sólo tendremos que hacer unos pequeños cambios de CSS. Si no estáis acostumbrados a hacer modificaciones de la hoja de estilos podéis hacer cambios de CSS mediante un plugin.
Los cambios van a ser dar un ancho del 100% al título y a la navegación a la vez que alineamos el texto en el centro.
Para centrar el logo:
.title-area {
text-align: center;
width: 100%;
}
Para centrar el menú:
.nav-primary {
text-align: center;
width: 100%;
}
Vamos a ver como configurar en el tema Infinity pro de Genesis el área de widgets Front Page 6 donde aparecen los miembros del equipo.
Lo primero que haremos es crear una nueva página a la que asignaremos la plantilla «Team»:
Luego crearemos las páginas de cada uno de los miembros del equipo. Importante asignar en los atributos de pagina, como página Superior, la Página de equipo:
También debemos asignar una imagen destacada (en al demo de 1280 x 1280 pixels) y crear un campo personalizado llamado «team_title» al que asignaremos el cargo que tiene cada uno de los miembros del equipo:
Una vez creados todos los miembros del equipo sólo nos quedará añadirlos a la widget área Front Page 6.
El primero de los widgets es uno de texto introductorio y que se muestra a todo lo ancho. El título del widget es «The Infinity Team» y el contenido del widget de la demo es éste:
<p class="thirty"><small>Headshots courtesy of <a target="_blank" href="http://madebysidecar.com">Made by Sidecar</a> and are not included with theme purchase.</small></p>
Los siguientes widgets son 8 widgets de Página destacada – Genesis Featured Page, cada uno de ellos mostrando uno de los miembros del equipo.
Veámoslo en detalle: