• Ir a navegación principal
  • Ir al contenido principal

CASUALWEBS

ANA PASCUAL WEB ESTUDIO

  • Proyectos
  • Tiendas online
  • Hola
  • Blog
  • Contacto

Infinity pro

Adaptar Infinity Pro de Genesis para un restaurante

29 septiembre, 2017 by apascual001

Hoy os dejo un video de como configurar el tema Infinity Pro de Genesis, pero esta vez no va a ser comolademo!

Infinity Pro para restaurante
Infinity Pro para restaurante

Va a ser una adaptación para una web de un restaurante.

Para ello vamos a hacer tres cambios:

  1. Poner un video de fondo en la primera sección de la home.
  2. Incluir un poco de CSS para adaptar los colores de las cajas de la home
  3. Utilizar las propiedades de la sección de los miembros del equipo para mostrar los platos del dia del restaurante.

Espero que os guste!

Archivado en:Grandes cambios, Infinity pro

Video background en Infinity Pro

25 agosto, 2017 by apascual001

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»

Video Background Plugin
Video Background Plugin

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.

Ajustes / Lectura / Página del video
Ajustes / Lectura / Página del video


Ahora sólo nos queda comprobar los resultados.

Archivado en:Infinity pro, Pequeños cambios

Infinity Pro – 10. Widgets – Offscreen, Lead Capture y Footers

10 agosto, 2017 by apascual001

Hoy vamos a ver que es y como configurar las widget áreas «Offscreen Content», «Lead Capture» i «Footers».

Offscreen content Widget área

Esta widget área se muestra en la esquina superior derecha de la plantilla y se accede clicando sobre un icono de tres puntos …

offscreen content widget área
offscreen content widget área

Para cerrarla hay que hacer clic sobre la cruz de la esquina derecha

Contenido de offscreen content widget área
Contenido de offscreen content widget área

En esta widget área pondremos un widget de Enews y otro de texto.
El de eNews lo configuraremos así:

eNews widget en Offscreen Content Widget área
eNews widget en Offscreen Content Widget área

Y el de texto con este contenido:

<small><em>Showcase something really groovy with the Offscreen Content widget area.</em></small>

Lead Capture Widget Área

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>

Footer Widgets áreas

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:

Infinity Pro Footer Widgets
Infinity Pro Footer 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:

Infinity Footer 3 Widgets
Infinity Footer 3 Widgets

Finalmente os dejo el vídeo con toda la explicación:

Archivado en:Comolademo, Infinity pro

Infinity Pro – 9. Widgets – Primary Sidebar

3 agosto, 2017 by apascual001

En esta entrada vamos a configurar la widget área Primary Sidebar.

La widget área Primary Sidebar tiene cuatro widgets:

  1. Widget del buscador
  2. Genesis – eNews Extended Widget
  3. Genesis – Featured Posts Widget
  4. Simple Social Icons Widget
Infinity Primary Sidebar Widgets
Infinity Primary Sidebar Widgets

Veamos como configurar cada uno de estos widgets.
Para el buscador sólo nos hace falta añadir el widget y guardar:

Infinity Primary Sidebar - Buscador
Infinity Primary Sidebar – Buscador

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í:

Infinity-primary-sidebar-eNews
Infinity-primary-sidebar-eNews

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 #:

Infinity Primary Sidebar eNews
Infinity Primary Sidebar eNews

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:

Infinity Primary Sidebar eNews
Infinity Primary Sidebar eNews

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:

Infinity Primary Sidebar Featured Posts
Infinity Primary Sidebar Featured Posts

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:

  • Icon Font Color: #000000
  • Icon Font Hover Color: #ffffff
  • Background Color: #f5f5f5
  • Background Hover Color: #000000
  • Border Color: #ffffff
  • Border Hover Color: #ffffff
Infinity Primary Sidebar Simple Social Icons
Infinity Primary Sidebar Simple Social Icons

Archivado en:Comolademo, Infinity pro

Centrar el logo en Infinity Pro

28 julio, 2017 by apascual001

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.

Infinity Pro - ¿Cómo centrar el logo y el menú?
Infinity Pro – ¿Cómo centrar el logo y el menú?

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%;

}

Archivado en:Infinity pro, Modificar logo, Pequeños cambios

Infinity Pro – 8. Front Page Widgets – parte 2 – Miembros del equipo

21 julio, 2017 by apascual001

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.

Team members Infinity pro Genesis
Team members Infinity pro Genesis

Lo primero que haremos es crear una nueva página a la que asignaremos la plantilla «Team»:

PlantillaTeam Infinity pro Genesis
PlantillaTeam Infinity pro Genesis

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:

Miembro equipo Infinity pro Genesis
Miembro equipo Infinity pro Genesis

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:

Miembro equipo Infinity pro Genesis - Custom field y Imagen destacada
Miembro equipo Infinity pro Genesis – Custom field y Imagen destacada

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.

Front-page 6 widget área Infinity pro
Front-page 6 widget área Infinity pro
Front-page 6 widget área Infinity pro - Featured Page
Front-page 6 widget área Infinity pro – Featured Page

Veámoslo en detalle:

Archivado en:Comolademo, Infinity pro

  • Ir a la página 1
  • Ir a la página 2
  • Ir a la página 3
  • Ir a la página siguiente »

© 2022 · Aviso legal · Política de privacidad

Esta web solo instalará cookies analíticas y de publicidad si lo aceptas. Puedes informarte más sobre qué cookies estamos utilizando en los ajustes Ajustes Aceptar Rechazar Más información
Política de cookies

Resumen de privacidad

Esta web solo instalará cookies analíticas y de publicidad comportamiento si usted lo acepta. La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudar a nuestro equipo a comprender qué secciones de la web encuentras más interesantes y útiles. Puede encontrar más información en nuestra política de cookies
Cookies estrictamente necesarias
Siempre activado
Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies. Si desactivas esta cookie no podremos guardar tus preferencias. Esto significa que cada vez que visites esta web tendrás que activar o desactivar las cookies de nuevo.
Cookies analíticas
Esta web utiliza Google Analytics para recopilar información anónima tal como el número de visitantes del sitio, o las páginas más populares
GUARDAR Y ACEPTAR