Forty: Un tema hijo de Divi (gratuito)

22 comentarios

Divi Child Theme - Forty

Por: Caribdis.Net

Publicada: 5 de diciembre de 2016

Como regalo anticipado de Navidad, les presento el primer tema hijo para Divi (Elegant Themes) de vuestra humilde servidora, en descarga gratuita.

Forty está basado en la plantilla homónima de HTML5 UP, una web con montones de diseños HTML5/CSS3 adaptables, de carga rápida y código limpio, 100% gratuitos bajo la licencia Creative Commons de reconocimiento.

Hacía bastante tiempo que quería incursionar en la creación de un tema hijo para Divi, por dos motivos principales: el primero, simplemente como práctica para en un futuro ofrecer alguno premium;  el segundo, para poner a prueba la flexibilidad de Divi en cuanto a la adaptación de estilos.

La experiencia fue muy buena y en muy poco tiempo fue posible trasladar el diseño de Forty a Divi. No se trata de una copia exacta, ya que son notorias algunas diferencias. Pero la aventura de crear un tema hijo me resultó súper entretenida y el producto final superó ampliamente mis expectativas.

Forty consta de cuatro diseños guardados en la Biblioteca de Divi, siendo los tres primeros reproducciones de la plantilla original:

La página de inicio

Forty - Página de inicio

Una página de aterrizaje (Landing)

Forty - Página de aterrizaje

Una página genérica

Forty - Página Genérica

El cuarto diseño es una plantilla adicional para el Blog:

Forty - Página del blog

El menú está configurado con un estilo de encabezado en pantalla completa.

Forty - Menú

E incluye el pie de página como elemento global.

Forty - Pie global

Sin más vueltas, les presento a Forty:

Últimas entradas de Caribdis.Net (ver todo)

Se responden dudas o consultas de los lectores acerca del contenido de esta publicación únicamente en su respectiva sección de comentarios. Así que asegúrate de suscribirte a las respuestas para recibirlas en tu casilla de correo electrónico (podrás cancelar la suscripción cuando lo desees). Con la suscripción al blog, recibirás en tu correo únicamente las nuevas entradas que se publiquen.

Ten en cuenta que muchas de las preguntas ya fueron respondidas en distintas entradas; recuerda que puedes usar el buscador de la barra lateral, y Ctrl+F para buscar texto dentro de una página.

Esta u otras entradas pueden contener enlaces de afiliado. Esto significa que si usas un enlace para adquirir algún producto recomendado, recibiremos una comisión de afiliados, la cual no te generará ningún costo adicional.

22 Comentarios

  1. cesar

    problemas con la plantilla forty y buenos dias….

    la pagina de inicio se han sustiuido imagenes por (ver propia pagina de demo de forty( me ocurre lo mismo)

    solucion??
    https://caribdis.net/2016/12/05/forty-un-tema-hijo-de-divi-gratuito/

    gracias!!!

    Responder
    • Caribdis Diseño Web

      Hola, César.

      Perdón, pero no entendí cuál es el problema. Fijate que en la documentación está explicado que las imágenes de la página de inicio son imágenes de fondo de cada columna y se reemplazan desde los Ajustes de diseño avanzado de la fila.

      Saludos.

      Responder
      • cesar

        solucionado, gracias

        Responder
  2. Antonio

    Buenas noches desde Murcia( España) Ana y Feliz 2017.

    He descargado el tema Forty y me encuentro con el siguiente problema:

    El tema no tiene la hoja de estilos style.css. Y no puedo instalarlo.

    Un saludo y gracias de antemano.

    Responder
    • Caribdis Diseño Web

      Hola, Antonio.

      Gracias por tu comentario.

      Fijate en esta respuesta.

      Saludos y feliz 2017 para vos y toda Murcia 😀

      Responder
  3. Cesar Santana

    Buenas tardes Ana

    Tras no se qué, que toqué, mi web realizada con Zerif y con un tema hijo, se descolocó todo y no había forma de volver a su sitio, desconecte plugins, borre html, quite widwet y lo volvía instalar…y nada de nada, por ello he decidido este 2017 aventurarme en una pagina mas profesional y optado por Divi y tu tema hijo Forty, sobre todo por el buen hacer de tus Servicios en sacarnos de dudas a quienes nos aventuramos en ser blogeros o hacer webs para dar algún servicio, en mi caso una pagina de información sindical para trabajadorxs.

    No me alargo, salvo darte las gracias por los anteriores respuestas, respecto al Zerif Hijo, asi que aqui van las dudas nuevas…

    Que plugins recomiendas para instalar en este “Hijo Forty”??
    Sirven los que tenia con Zerif??
    Tus 4 paginas en sí, sus plantillas como las multiplico

    Nada mas y feliz 2017…ahhh perdon gracias de antemano

    Responder
    • Caribdis Diseño Web

      Hola, César.

      Gracias por tu mensaje.

      En cuanto a los plugins, todo es cuestión de probar, aunque según mi experiencia con Divi no tiene mayores problemas. Te recomiendo desinstalar el CF7 si no vas a necesitar campos adicionales en un formulario, y el plugin del botón para “Volver arriba” también es innecesario, ya que Divi tiene esta característica (se activa desde las opciones del tema).

      Y en cuanto al uso de los diseños, simplemente al crear una página y activar el constructor podés cargarlos desde la biblioteca todas las veces que quieras (y editarlos como más te convenga).

      Saludos.

      Responder
    • Cesar Santana

      Gracias por la respuesta rápida…desconecto “cf7” y el plugins de “volver arriba”…sigo descubriendo este tema pues veo que no tiene nada que ver con Zerif, aunque cierto es que lo mejore mucho con toda tu ayuda y los comentarios de vertidos aqui, espero hacer una gran pagina y ver al mismo tiempo ayudas para aprender y mejorar nuestras web…

      Saludos desde Gran Canaria

      Responder
  4. Jesús Aguirre

    Buenas tardes, quiero instalar su tema pero al instalar en mi word press 4.7 me sale el siguiente error: “No se ha podido descomprimir el paquete. El tema no tiene la hoja de estilos style.css.
    Fallo en la instalación del tema.”

    entiendo que FORTY, es un tema hijo de DIVI; entonces digame tengo que instalar algo mas aparte del archivo ZIP donde esta FORTY.
    o antes tengo que instalar DIVI.

    Responder
    • Caribdis Diseño Web

      Hola, Jesús.

      Tenés que seguir las instrucciones de la documentación. El ZIP que descargaste, primero tenés que descomprimirlo en tu equipo; en la carpeta /Tema/ está el ZIP para cargar desde Apariencia > Temas > Subir tema.

      Y sí, Divi tiene que estar instalado en tu WP.

      Saludos.

      Responder
  5. Carlos Sanchez

    Hola Ana,
    Estoy subiendo a WP tu tema, sin embargo me manda un error al tratar de subir “Forty_Ajustes_del_personalizador.json” indica que no puede cargarse bajo importacion de DIVI. Lo intente tambien bajo el otro esquema Herramientas>Importar>Wordpress y me dio el mismo problema. tengo WP 4.7 y el ultimo Divi.
    Te felicito por tu tema child, espero aprender y tener muchos errores, para aprender.
    Me puedes indicar que se puede hacer en este caso, considera por favor que no soy tecnico y estoy empezando con DIVI. Gracias

    Responder
    • Caribdis Diseño Web

      Hola, Carlos.

      Gracias por tu comentario.

      Seguí las instrucciones de la documentación (el paso 3). Cada archivo JSON debe ser importado en su respectivo contexto: Opciones del tema, Personalizador de tema y Biblioteca.

      Saludos.

      Responder
  6. Serjunco

    Que bueno Ana.

    No tengo donde ponerlo pero si me permites y saco algo de tiempo voy a trastearlo.
    Menudo regalo!!

    Responder
    • Caribdis Diseño Web

      Hola, Serjunco.

      Podés hacer lo que te venga en gana con Forty, no hay restricciones ni obligaciones. 🙂

      Saludos.

      Responder
    • serjunco

      Gracias Ana.

      Alguna web ya con el theme instalado ademas de la demo?

      Ana, si lo instalo esta todo tal cual la demo, fotos de fondo, letras, colores etc?

      Muchas gracias.

      Estoy pensando en una web nueva y me mola la idea de un paquete ya diseñado y que mejor que el tuyo 😀

      Responder
      • Caribdis Diseño Web

        De nada 🙂

        Que yo sepa, ninguno todavía… Si alguien se animara a compartir algún enlace, será más que bienvenido.

        Siguiendo los pasos de la documentación, debería quedar tal cual la demo. Un detalle es el menú, que al parecer hay que volver a seleccionarlo como ancho completo, y por supuesto reemplazar las imágenes de fondo de las columnas, que por alguna razón que desconozco el sistema de portabilidad no cifra como las demás imágenes.

        Saludos.

        Responder
    • Serjunco

      Ana, he adelantado una idea de web para ir probando en un hobby-micronicho.

      Asi que que mejor forma de comenzar a aprender por mi parte como se maneja el diseño y sacar partido que con tu forty.

      Eso si, preparate porque como lo voy a tener que toquitear y modificar a lo largo del mes seguro que me surgen mil dudas.

      Te presento la primera web con con forty en divi relacionada con la pesca sin muerte y las moscas artificiales : https://moscasparapescar.es/ 😀 😀

      (recien instalado hoy los themes y sin realizar casi cambios todavia!! )

      Responder
      • Caribdis Diseño Web

        Hola, Serjunco.

        ¡Genial! Espero que sea una aventura placentera 😉

        Con gusto responderé tus dudas, y recordá planteármelas en la página de la documentación, así ayudaremos a otros usuarios que puedan llegar a tener las mismas inquietudes.

        Saludos.

        Responder
  7. Elena

    Qué interesante, muchas gracias!!
    Te quería comentar una duda, me ofreciste un código para que la página de categorías de de un blog que tengo tuviese el formato de rejilla como un blog, pero no sé porqué se me descolocan los cuadros de la rejilla. En teoría es 3 por cada fila, pero luego el 4º se coloca a la derecha en vez de seguir un orden y el 5º en otra fila, dejando huecos en las rejillas. ¿como puedo arreglar eso en el código que me diste? Muchísimas gracias por tu ayuda!

    Responder
    • Caribdis Diseño Web

      Hola, Elena.

      Fijate agregando el siguiente código:

      @media (min-width: 768px) {
      .category #left-area article:nth-child(3n+4) {
          clear: both;
      }
      }
      

      Saludos.

      Responder
    • Elena

      Muchas gracias! con ese trozo de codigo se me ha cuadrado todo por fin 🙂 Algunas imagenes de cada anuncio en la rejilla son de diferentes alturas, ¿ sabes si para que sean todas iguales depende de que al subir las imagenes sean del mismo tamaño o si en el código se puede poner que todos los recuadros sean con el mismo tamaño de imagen? Mil gracias como siempre! Elena

      Responder
      • Caribdis Diseño Web

        Hola, Elena.

        Qué bueno que te haya servido. 🙂

        Lo más recomendable es subir todas las fotos que irán como imagen destacada en la misma proporción. Las medidas recomendadas para Divi son 1080 x 608 px o 795 x 448 px para que mantengan una calidad aceptable.

        Saludos.

        Responder

Enviar comentario

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

Pin It en Pinterest

Compartir esto

Compartir es agradecer

Si esta publicación te resultó útil, puedes compartirla y ayudar a otros. ¡Gracias!