Forty - Tema hijo de Divi

Documentación

Forty v. 1.0.3

Este tema hijo de Divi está construido sobre la base visual de la plantilla Forty, por HTML5 UP. Recrea algunos de sus efectos originales en CSS, pero usa el código de Divi, y los cuatro diseños predefinidos fueron armados con el Constructor de páginas.

Se recomienda usar este tema hijo en una instalación nueva de WordPress.

Registro de Cambios

1.0.3 – 18/01/2017
– Textos “placeholder” del formulario ahora ocultos

Archivos editados:
functions.php
style.css

1.0.2 – 21/12/2016
– Corrección del pie de página global cuando hay menos de tres módulos Anuncio breve en la segunda columna

Archivos editados:
Forty_Biblioteca.json
style.css

1.0.1 – 06/12/2016
– Corrección de ubicación del menú en IE
– Eliminación de barra de desplazamiento en área de texto del formulario en IE

Archivo editado: style.css

1.0
– Versión inicial

Archivos

El archivo descargado, Forty-Divi-Child.[caribdis.net].zip, incluye:

  • 1 carpeta Archivos de importación
  • 1 carpeta Tema
  • 1 archivo LICENSE.txt
  • 1 acceso directo a esta documentación

La carpeta Archivos de importación incluye:

  • 1 archivo JSON de las Opciones del tema
  • 1 archivo JSON de los ajustes del Personalizador de tema
  • 1 archivo JSON de los 4 diseños de la Biblioteca
  • 1 archivo XML de las páginas estáticas (uso opcional)

La carpeta Tema incluye:

  • Archivo divi-forty.zip para cargar en el administrador de WordPress
  • Archivo CHANGELOG.txt con el registro de cambios

Previamente se debe descomprimir el archivo Forty-Divi-Child.[caribdis.net].zip en una carpeta del equipo.

Usar el tema Forty

Paso 1: Instalar

Ir a Apariencia > Temas > Añadir nuevo > Subir tema y cargar el archivo divi-forty.zip. Activar.

Paso 2: Importar opciones del tema

Ir a Divi > Opciones del tema > Importar y exportar (icono de las dos flechas en la parte superior derecha).

Forty - Importar opciones del tema

Cargar el archivo Forty_Opciones_del_tema.json.

Forty - Cargar archivo de opciones del tema

Clic en Importar Opciones del tema Divi.

Paso 3: Importar ajustes del personalizador de tema

Ir a Divi > Personalizador de tema y abrir el personalizador. Luego hacer clic en el icono de portabilidad.

Forty - Cargar archivo de ajustes del personalizador

Cargar el archivo Forty_Ajustes_del_personalizador.json.

Forty - Cargar archivo de ajustes del personalizador 2

Clic en Importar Ajustes del personalizador de Divi.

En caso de que el menú no tome el ancho completo, volver a seleccionar la casilla desde el panel Cabecera y navegación > Barra de menú primario > Ancho completo.

Forty - Menú ancho completo

Paso 4: Importar diseños de la Biblioteca de Divi

Ir a Divi > Biblioteca de Divi. Luego hacer clic en el botón Importar y exportar y cargar el archivo Forty_Biblioteca.json.

Forty - Cargar archivo de diseños

Clic en Importar Diseños del constructor de Divi.

Los diseños incluidos son:

  • Página de inicio
  • Página de aterrizaje
  • Página genérica
  • Página del blog

Se incluye también un elemento global para el pie de página.

Paso 5 (opcional): Importar páginas

Con los pasos anteriores ya estaremos en condiciones de usar los diseños de la Biblioteca en cualquier página. Como opcional, se pueden importar las cuatro páginas de cada diseño ya creadas (Home, Landing, Genérica y Blog), subiendo el archivo forty.xml desde Herramientas > Importar > WordPress (deberá estar instalado el plugin Importador de WordPress).

Cargar un diseño desde la Biblioteca

Si no importamos las páginas ya creadas, tendremos que crearlas desde el menú Páginas > Añadir nueva. Luego de darle un nombre y de activar el constructor de Divi, haremos clic en Cargar de la biblioteca.

Forty - Cargar diseño de la biblioteca

En la ventana Cargar diseño haremos clic en la pestaña Añadir de la biblioteca y clic en el botón Cargar del diseño que queremos usar.

Forty - Cargar diseño de la biblioteca 2

Repetiremos el mismo procedimiento para cargar los restantes diseños.

Configurar el menú

Una vez que tenemos la estructura de páginas, estaremos en condiciones de crear un menú personalizado. El procedimiento es el mismo que para cualquier tema de WordPress. Ir a Apariencia > Menús > Elegir un menú ya creado o crear uno nuevo.

Forty incluye dos botones personalizados para el menú, los cuales se configuran añadiendo una clase CSS en el elemento del menú. Para activar la opción Clases CSS en los elementos del menú, le damos clic a la pestaña Opciones de pantalla de la parte superior derecha de la página y seleccionamos la casilla correspondiente.

Forty - Menú

Para el Botón 1 (fondo sólido) la clase CSS es special.

Forty - Menú Botón 1

Para el Botón 2 (fondo transparente y borde) la clase CSS es fit.

Forty - Menú Botón 2

Opciones de Forty

Este tema hijo incluye un panel en el Personalizador de tema para configurar el color de fondo del contenido principal (por ejemplo, de las páginas del blog estándar y páginas de archivo, que de manera predeterminada es blanco) y el color de los enlaces al posar el puntero del ratón.

Forty - Opciones

Los colores predeterminados son los de la plantilla original.

Todos los colores de las páginas son personalizables desde los ajustes del módulo correspondiente.

Consejos para editar los módulos

Básicamente, todo el contenido de texto es editable, así como los colores, fuentes, tamaños y todas las demás opciones incluidas en cada módulo. Para tener en cuenta a la hora de editar los bloques de la página de inicio, que son módulos de Llamado a la acción, usar siempre el mismo texto para el Texto del botón y el Contenido, en caso de querer que todo el bloque sea un enlace.

Los módulos de Llamado a la acción tienen una altura fija, ya que están diseñados para contener un título y un subtítulo cortos. En caso de que sea necesario un contenido de texto más largo, los valores de altura se pueden editar desde la pestaña CSS personalizado > Elemento principal. Recordar editar los dos módulos de la fila con los mismos valores.

Forty - Ajustes del módulo CTA

Las imágenes de los bloques son imágenes de fondo de cada columna.

Para editarlas, ir a los ajustes de la fila > Ajustes de diseño avanzado > Columna 1 Imagen de fondo y Columna 2 Imagen de fondo.

Forty - Ajustes de fila

Dudas y consultas sobre el uso de Forty se responderán en la siguiente sección de comentarios:

9 Comentarios

  1. Serjunco

    Hola Ana.
    Un par de preguntas.
    El menu quiero tenerlo como suele ser por defecto en Divi: Se ven todos los campos. En lugar de la opcion que usas en este Child theme de “pulsar menu y se desplega las opciones”

    EL caso es que desde “Formato de cabecera” ya lo he conseguido poner en “defecto” pero me sigue quedando un “MENU” ahi mal puesto. ¿Como lo quito?

    Lo segundo es como edito el PIE para que se quite lo que tienes puesto de diseño, iconos sociales y links varios ademas del Copyraight y sustituirlo por el tipico menu de “acerca de” “politica de privacidad “etc

    Muchas gracias

    Responder
    • Caribdis Diseño Web

      Hola, Serjunco.

      El texto “MENÚ” es un seudoelemento. Del archivo style.css, eliminá todo el siguiente bloque:

      #et-top-navigation:before {
      	content: "Men\00fa";
      	color: #fff;
      	text-transform: uppercase;
      	position: absolute;
      	right: 64px;
      	font-size: 18px;
      	letter-spacing: .25em;
      	top: 23px;
      }
      

      Recordá que podés editar como quieras la hoja de estilos, sin temor a perder los cambios en las actualizaciones de Divi.

      El bloque con el formulario, enlaces de contacto e iconos de redes es un módulo global que podés suprimir (o modificar a gusto). Y el pie de página (créditos) es editable desde el Personalizador > Pie de página > Barra inferior (podés ocultarlo o reemplazarlo por tu propio texto).

      En cuanto a los enlaces de “Acerca de” y “Política de Privacidad”, quizá te convenga crear un menú y asignarlo a la ubicación del pie de página.

      Saludos.

      Responder
    • Serjunco

      Gracias Ana por la respuesta (una cosa, en tu blog a tus mensajes no les sale el “”responder” y lo tenemos que hacer a otros comentarios, liandose un poco 😀 😀 )

      Otra duda.
      Estoy creando paginas en el blog.
      Tengo un problema en los textos y es que si el fondo es blanco, las letras se ponen en blanco tambien y no se ven.
      O bien tengo que cambiar el fondo o si quiero cambiar las letras a negro (u otro color) donde se hace¿?

      Es que llevo un rato y no lo encuentro de entre los mil parametros.

      Muchas gracias de nuevo

      Responder
      • Caribdis Diseño Web

        Hola, Serjunco.

        Ahí volví a activar los comentarios anidados (hasta 5 niveles). No me gustaba mucho que quedaran tan angostas las últimas respuestas, por eso los había desactivado. Igual, solo le quedan dos días a este diseño: el 2017 va a arrancar con la web renovada. 😀

        El color de los textos en las páginas estándar del blog lo manejás desde el Personalizador > Ajustes generales > Tipografía > Color de textos y Color de texto del encabezado. Esto no afecta a los colores de los diseños de la biblioteca, ya que están asignados en los ajustes de cada módulo (Color de texto: Claro).

        Saludos.

        Responder
  2. Fermín

    Hola, gracias, despues de pelearme un buen rato he localizado que el problema no era del child theme, que es lo que creía al principio, si no un conflicto con el plugin Surbma – Divi Extras. Hasta ahora no me había dado problemas, pero tiene problemas con las últimas versiones de DIVI. Tras desinstalarlo todo ok.

    Lo dicho, muy buen child theme, complemente recomendable.

    Un abrazo.

    Responder
  3. Fermín

    Hola, gracias por la respuesta, pero el problema es que haga lo que haga mantiene el tipo de menú para móviles. He instalado de nuevo DIVI y he probado con otro child theme e idem, mantiene el menú para móviles y no he visto forma de cambiarlo desde las opciones. Voy a mirar en la BD para ver donde quedan guardadas esas personalizaciones por defecto.

    Gracias de todas formas.

    Responder
    • Caribdis Diseño Web

      Hola, Fermín.

      Asegurate de cambiar el formato de la cabecera: Divi > Personalizador de tema > Cabecera y navegación > Formato de cabecera > Estilo del encabezado. Recordá que también podés consultar la documentación de Divi (esto figura en el capítulo Formato de cabecera).

      Saludos.

      Responder
  4. Fermín

    Hola, muy buen child theme, lo he estado probando y me he dado cuenta de una cosa, al pasar a otro child theme de DIVI me mantiene las configuraciones cargadas con el Forty, sobre todo el menú estilo móvil ¿Cómo habría que hacer para borrar las configuraciones o cambiar al menú normal?

    Gracias por adelantado

    Responder
    • Caribdis Diseño Web

      Hola, Fermín.

      Gracias por tu comentario. Eso ocurre siempre que pases a otro tema hijo sin tocar nada de las configuraciones del Personalizador de tema. Si el tema hijo nuevo no incluye un archivo de portabilidad para el Personalizador de tema, tendrás que ajustar las opciones a mano.

      Saludos.

      Responder

Enviar comentario

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