Cómo Hacer Una Página

Hacer una Web Profesional con Wordpress

  • Suscribirse (10€/mes)
  • Mi Cuenta
  • Contacto
Estás aquí: Inicio / Genesis / Añadir más zonas de Widgets en la plantilla Altitude Pro en la Home

Añadir más zonas de Widgets en la plantilla Altitude Pro en la Home

septiembre 29, 2017 Por Oscar martin Dejar un comentario

En este tutorial veremos como podemos añadir más zonas de widgets en la plantilla Altitude Pro en la home.

Por defecto vienen 7 zonas pero vamos a ver poder añadir tantas como queramos.

El proceso no es difícil pero hay que hacerlo editando algunos ficheros de la plantilla por lo que hacer copia de seguridad antes de empezar ya que cualquier error al modificar la plantilla podemos dejar la web rota.

Antes de ponernos a editar la plantilla fijémonos que, de forma alterna, un widget va con imagen de foto y el siguiente widget no. Y así sucesivamente.

Lo podemos ver de forma sencilla yendo a personalizar de la plantilla –> Front Page Backgroun images:

images widget altitude

Cómo vemos sólo los widgets impares tienen imagen de fondo, más adelante veremos como añadir fondo a los nuevos widgets que creemos.

Vamos al lío 🙂

Tutorial en vídeo

Suscríbete a mi canal:  

Dentro de nuestra plantilla tenemos que modificar los siguientes ficheros:

  • front-page.php
  • functions.php
  • customize.php
  • output.php
  • style.css

Es decir, los siguientes:

ficheros modificar altitude

front-page.php

Si nos fijamos en la función de la fila 19 nos encontramos enumerados las zonas de widgets existentes, pues aquí simplemente añadimos las que queramos, en mi caso dos más, es decir la 8 y la 9.

altitude front page

En este mismo fichero más abajo tenemos que añadir más código, concretamente en la función altitude_front_page_widgets que está en la fila 77.

En mi caso como añado dos nuevos widgets añadiré copiaré los dos últimos widgets que aparecen en esta función y los pegaré a continuación. Cambiando el número del widtget:

altitude front page widgets

Fijémonos que el código de los widgets impares es distinto de los widgets pares y eso es porque los impares tienen una imagen de fondo y los pares no.

funtions.php

Al igual que en el fichero anterior, buscamos en que lugares se hace referencia a los widgets.

En este caso nos encontramos a partir de la línea 273 el registro de las zonas de los widgets.
Aquí añadimos otras dos zonas copiando el código de las existentes y cambiando el número de zona.

functions altitude widgets

customize.php

En este fichero es donde decimos que widgets tienen de background imágenes y se lo decimos en la función altitude_customizer_register de la fila 21

Por lo que tendremos que añadir el widget 9 para que también tenga imagen de fondo:

customize altitude widget

output.php

Al igual que en el anterior tenemos que añadir el número del widget del que queremos que tenga fondo.

Vamos a la función altitude_css de la línea 20 y lo añadimos:

output altitude widgets

style.css

La funcionalidad ya está bien, ahora tendríamos que asegurarnos que el diseño está correcto.

En este archivo buscaremos en que lugares se hace referencia a los otros widgets y añadiríamos los nuestros en el mismo lugar para que tenga el mismo diseño.

Concretamente vamos a modificar las siguientes partes:

Línea 1434

style css widgets 1

Línea 1451

style css widgets 2

Línea 1961

style css widgets 3

Línea 2278

style css widgets 4

Si ha ido todo bien ahora cuando vayáis a los widgets veréis que tenéis 9 en vez de 7:

altitude numero widgets

Además si vamos a personalizar de la plantilla –> Front Page Backgroun images, veremos que podemos añadir un fondo al widget 9

background widget 9

Y por supuesto en la página principal aparecen:

home nuevos widgets

Espero que el tutorial os haya gustado 😉

Archivado en:Genesis Etiquetado con:Altitude pro

Acerca de Oscar martin

Me llamo Óscar y me dedico al Marketing Online. Me gano la vida gracias a internet y a herramientas como Wordpress. ¿Te puedo ayudar? Contáctame

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Carrito

Categorías

Contenido Premium

¿Quieres Aprender WordPress y Ganar dinero? Cópiame

¿Necesitas Ayuda?

  • Contacto
  • Blog

Más Información

  • Condiciones de Uso
  • Condiciones generales de venta
  • Aviso Legal
  • Pólitica de Privacidad
  • Política de cookies

Buscador

Funciono con el Theme Genesis · Iniciar sesión

Este sitio web instalará en tu navegador cookies analíticas y publicitarias propias y de terceros si continúas navegando.
Encontrará más información en nuestra Política de Cookies...Configuración de CookiesAceptar
Privacy & Cookies Policy

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary
Siempre activado

Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies.
Básicamente el blog no funcionará bien si no están activas.
Estas cookies son:
- Comprobación de inicio de sesión.
- Cookies de seguridad imprescindibles.
- Saber si ya has aprobado/rechazado las cookies.

Non-necessary

Esta web utiliza las siguientes cookies adicionales:
- Mautic: Recordar si ya estás suscrito al boletín de noticias.
- Google Analytics: un servicio de analítica web desarrollada por Google, que permite la medición y análisis de la navegación en las páginas web.

GUARDAR Y ACEPTAR