Tutorial de Zerif Lite en español

750 comentarios

¡Atención! Zelle Lite (ex Zerif) ya no se actualiza. Cambia a:

Hestia

Hestia

Multipropósito
Adaptable a todos los dispositivos
Fácil de configurar

Más opciones en Hestia Pro

Neve

Neve

Súper rápido
Compatible con AMP
Hecho para Elementor

Más opciones en Neve Pro

Por: Caribdis.Net

Publicada: 18 de agosto de 2015

Atención

El tutorial actualizado se encuentra aquí

Hoy les traemos uno de los temas de una sola página más populares. Gratuito y súper fácil de usar, Zerif Lite por ThemeIsle es ideal para una agencia web, una empresa, un sitio personal o un portfolio. Está construido con Bootstrap y soporte Parallax, es adaptable a los distintos dispositivos móviles y mantiene un diseño minimalista, prolijo y moderno. Es compatible con WooCommerce, WPML, RTL, Retina-Ready, y está listo para la optimización en motores de búsqueda (SEO).

Descargar última versión de Zerif Lite

(o instalar desde Apariencia > Temas > Añadir nuevo)

Descargar archivos de traducción

(Zerif Lite ya incluye los archivos de traducción, pero podrían no estar actualizados)

Descargar archivos de traducción del plugin Pirate Forms

(Pirate Forms ya incluye los archivos de traducción, pero podrían no estar actualizados)

Más tutoriales para Zerif Lite

Caribdis.Net
Ú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.

750 Comentarios

  1. Javier

    Hola de nuevo Ana, respecto a los extractos, ya active la opcion del editor y lo metí manualmente, funciona ok, pero no corta el texto a las 55 palabras como cuando lo tienes automático y añade el […]. Como podría hacer para que a pesar de que añada los extractos manualmente me añada el […] al final con el link al post completo?muchas gracias.

    • Caribdis Diseño Web

      Hola, Javier.

      Es o uno u otro; el extracto manual es personalizado, si querés podés agregar el enlace […] ya que admite HTML; el código sería algo así: <a href="http://urldelsitio/slug-de-la-entrada/">[...]</a>

      Saludos.

  2. Robert

    Hola!

    He puesto el código para borrar el copyright de Zerif pero queda un cuadro más pequeño que el footer, tengo la última de versión de zerif y wp.

    Podrías dejarme por acá el código? Gracias.

    • Caribdis Diseño Web

      Hola, Robert.

      Probá con el siguiente código:

      .copyright {
          background: transparent;
      }
      

      Saludos.

  3. Javier

    Hola Ana, que habria que hacer para poder cambiar las lineas de resumen que aparecen para cada post en la plantilla de blog y en la seccion dede ultimas noticias? Me gustaria elegir a partir de una determinada palabra que tengo en todas las entradas y no el texto del principio. Muchas gracias y un saludo.

    • Caribdis Diseño Web

      Hola, Javier.

      Podés crear los extractos manualmente. En la página de la entrada, buscá el recuadro Extracto debajo del editor visual. Si no aparece, dale clic a Opciones de pantalla y seleccionalo de la lista de Cajas.

      Saludos.

  4. Oscar

    Buenos días, me gustaría saber como cambiar el formato y el tipo de fuente del menú, ya que se ven muy simple y me gustaría destacar, muchas gracias.

    • Caribdis Diseño Web

      Hola, Oscar.

      Tendrías que usar un plugin. Max Mega Menu es uno muy bueno y es compatible con Zerif (es el que se ve en la demo).

      Saludos.

  5. Diego Martin

    buenos dias, gracias por tus grandes aportes, muy agradecido, mi duda es como modificar el zoom predeterminado en una seccion de la pagina de inicio, por ejemplo que el zoom de la seccion “nuestro enfoque” sea del 80% . Gracias

    • Caribdis Diseño Web

      Hola, Diego.

      Aclarame, por favor, a qué te referís con “zoom” (¿al tamaño de fuente?)

      Saludos.

  6. Javier

    Hola de nuevo Ana, veo también que ahora recomendáis la creación del tema hijo con el functions.php en vez del @import. Yo lo cree con @import, me recomiendas que lo cambie para el método nuevo¿?Funcionaría todo perfectamente si lo cambio ahora¿?

    Muchas gracias. Un saludo.

    • Caribdis Diseño Web

      Hola, Javier.

      Aparentemente, la versión 2.0 la han descontinuado. Aun descargando el tema de la web de ThemeIsle, la versión oficial es ahora la 1.8.5.x, así que te recomendaría que usaras esta última porque es la que se va a seguir actualizando.

      También recomiendo crear el tema hijo con el archivo functions.php. Podés crearlo en una carpeta nueva para comprobar que todo va bien.

      Saludos.

  7. Javier

    Hola Ana,

    Respecto a la versión que hay en el repositorio de wordpress (1.8) con la que hay en la página oficial(2.0) ¿Cuál recomiendas usar? Yo estoy montando mi sitio con la 2.0, puede haber algún problema en el futuro por no usar la del repositorio¿?Las actualizaciones con las 2.0 tendremos que hacerlas de forma manual no¿?.

    Saludos y muchas gracias.

  8. Carlos Diez

    Tuve que migrar la web y ahora me aparece un espacio debajo de los widget de abajo que antes no tenia y no recuerdo como hice. Algún consejo para que desaparezcan.

    Adjunto el link de mi web

    • Caribdis Diseño Web

      Hola, Carlos.

      Probá con el siguiente código.

      .copyright {
          padding: 0;
      }
      

      Saludos.

  9. Diego

    Hola, gracias por compartir tus conocimientos…. lo que quiero hacer es agregar un boton a la seccion Testimonios, pero cuando lo hago mediante el widget de Texto o con un widget de imagen me sale la imagen con un borde blanco (este borde no pertenece a la imagen), es como si estos widgets generan un recuadro blanco y ahi mismo se pone la imagen, pero este recuadro es mas grande que la imagen del boton, como podria sacarlo? gracias

  10. Javier

    Hola de nuevo Ana,

    Me gustaría modificar algunas propiedades de la imagen destacada de las entradas individual del blog (creo que es la plantilla content-single.php). Quiero:
    1. Poder establecer una escala para la imagen destacada
    2. Poder cambiarla de lugar, que en vez de que salga debajo del titulo salga al final del post.
    3. O poder no mostrarla (pero si quiero que se siga mostrando en la plantilla (blog) donde salen todos los post a modo de resumen).

    Muchisimas gracias por todo.

    • Javier

      Ya lo tengo gracias de todas formas!!

  11. Javier

    Hola tengo un par de dudas:
    1. Como se puede quitar de la barra lateral de la plantilla de blog la seccion de comentarios recientes.
    2. Querría hacer una página estática con apariencia de la plantilla de blog con las entradas de una categoría específica de las que tengo (y solo pudiese ver esas desde esa página), pero a parte, no querría perder otra página que ya tengo creada con la plantilla de blog normal donde se puede ver todo. (Sólo se me ocurre montarla con un widget de carrusel de entradas donde se puede especificar la categoria que quiero mostrar, pero luego me faltaría una especie de barra lateral)
    para búsquedas etc..)

    Saludos y muchas gracias.

    • Caribdis Diseño Web

      Hola, Javier.

      Desde Apariencia > Widgets o Personalizar > Widgets podés eliminar o agregar los que necesites.

      Y en cuanto a la otra duda, podés tranquilamente usar la página de archivo de la categoría, que sería algo así: http://urldelsitio/category/nombre-de-la-categoría/.

      Saludos.

  12. Jaime

    Hola Ana, esta vez no te escribo para preguntar, sino simplemente para agradecerte toda la ayuda prestada. Gracias a ti estamos siendo capaces de montar una web bajo este tema tan usado.

    Espero que, cuando esté lista, tengas algún día un momento para visitarla y que des tu opinión!
    De verdad, MUCHAS GRACIAS

    Un abrazo desde España!

    • Caribdis Diseño Web

      Hola, Jaime.

      Gracias a vos por compartir tu experiencia. Con gusto me daré una vuelta por la web; no te olvides de pasarme la URL. 😉

      Saludos.

  13. Leandro

    Hola, como tengo que hacer para cambiarles el color de fonde a las secciones de llamado a la accion? Saludos

    • Caribdis Diseño Web

      Hola, Leandro.

      Fijate en esta respuesta.

      Saludos.

  14. Jaime

    Hola Ana, de nuevo MUCHÏSIMAS gracias por estas páginas de tutorial, gracias a ti estoy pudiendo hacer la web más o menos bonita jeje.
    Tengo otra duda por si no te importa ayudarme. No he encontrado sobre como quitarlo, al menos no si es por código y tal y por eso te pregunto.

    Es posible que, en la sección ÚLTIMAS NOTICIAS, no aparezca una parte de la entrada? Es decir, que aparezca el título de la entrada pero no el texto de la entrada ya a desarrollar, sólo el título

    MIL GRACIAS

    • Caribdis Diseño Web

      Hola, Jaime.

      La respuesta aquí.

      Saludos.

    • Jaime

      Ana, muchas gracias, he conseguido encontrar cómo se hace en otras entradas de tu webs, en distintos comentarios. Disculpa la molestia.
      Ahora estoy buscando para saber si se puede cambiar el orden de las secciones, es decir, que aparezca Últimas entradas antes que nuestro enfoque, o sobre nosotros etc., poner el orden que se quiera.
      Mil gracias, eres genial!

      • Caribdis Diseño Web

        Hola, Jaime.

        La respuesta estaba aquí. 😉

        Tené en cuenta que si usás la nueva versión de Zerif Lite (que se descarga del repositorio), el código correspondiente a las secciones está en el archivo content-frontpage.php.

        Saludos.

  15. Javier

    Hola, estoy creando un página para que se llame desde el menú con el page builder de site origin y tengo varios anclajes en la misma, me gustaría añadirles el efecto de scroll suave a los mismos (como hace en la portada del tema). Me gustaría saber que código de Jquery debo utilizar y en donde tengo que ponerlo. Gracias.

    • Caribdis Diseño Web

      Hola, Javier.

      La verdad, conozco muy poco el plugin y no sabría decirte, así que te recomiendo que lo plantees en el foro de soporte de SiteOrigin.

      Saludos.

  16. Antonio

    Hola nuevamente, me gustará saber si existe alguna forma de poner mi web para que también salga en inglés, es decir haya la opción de cambiar según el idioma y sea traducido

    • Caribdis Diseño Web

      Hola, Antonio.

      Respondido aquí.

      Saludos.

  17. Caribdis Diseño Web

    Hola, Juan Manuel.

    El fondo de la página es único, y se ve en las secciones que no tienen un color sólido. Si quisieras usar imágenes de fondo distintas para cada sección, tenés que usar CSS personalizado. Fijate en esta, esta y esta respuestas.

    Saludos.

    • Juan Manuel

      Muchas gracias por tu ayuda, eres formidable!!! y para no perder la costumbre de preguntar, como obtengo la url de una imagen o la ruta de la que hablas en la respuesta anterior quedo atento, Saludos!!

      • Caribdis Diseño Web

        Hola, Juan Manuel.

        Todo depende de dónde la hayas subido. Si está en la Biblioteca de medios, simplemente copiá la dirección completa que aparece en el campo URL o URL archivo de los detalles de la imagen.

        Saludos.

  18. Jorge Leon

    Buen día, tengo un problema y es que cuando la pagina se abre en Mozilla no me aparecen varios puntos, contenido principal, Nuestro enfoque, nuestros clientes y no se por que es… gracias por tu ayuda

    • Caribdis Diseño Web

      Hola, Jorge.

      Lo más probable es que sea un plugin que interfiere con el script de las animaciones. Desactivalos uno por uno hasta dar con el que ocasiona el conflicto.

      Saludos.

  19. Javier

    Hola! Tengo un problema y es que cuando configuro los anclajes, en vez de hacer la transición hacia abajo y situarse en la sección correspondiente, recarga la página y se sitúa en la sección. Si en vez de poner la url completa, pongo solo el #id, funciona bien (cuando te encuentras en la portada) pero si ya estas en otra página pues claro no encuentra #id en esa página y no funciona. No sé si será debido al plugin Polylang que tenga algun bug (y recargue cuando va al idioma correspondiente). No sé que más probar porque que recargue la página antes de situarse en la sección queda muy mal. Muchisimas gracias!

    • Caribdis Diseño Web

      Hola, Javier.

      Fijate que estés asignando los menús correctamente. Tenés que crear uno por idioma y usar la URL completa que le corresponda.

      Saludos.

    • Javier

      Ya está, me faltaba por poner el código de idioma en la URL.

  20. Christian

    Buenas tardes, de verdad que impresionado con la amabilidad que tomas para responder los comentarios.
    Soy nuevo con wordpress, estoy probando con zerif lite, mis dudas.

    1.- Si no quiero poner los títulos ni los botones en el “Título grande”, la imágen del fondo se reduce, como hago para que la imágen del fondo de esa sección se mantenga grande?
    2.- Si a futuro coloco el título y botones, como hago para cambiar la posición del texto y de los botones rojo y verde?
    3.- Como le cambio de color y fuente al menú?

    Te agradezco por tu amabilidad y felicitaciones por tu blog, me suscribo con gusto!

    • Caribdis Diseño Web

      Hola, Christian.

      Gracias por tu comentario.

      El primer punto está respondido aquí.

      Para el segundo, si te referís a la alineación del texto, tendrías que usar el siguiente código:

      .intro-text, .intro-text a, .buttons {
          text-align: left; /* alineados a la izquierda */
      }
      

      Para el tercero, podés instalar el plugin Easy Google Fonts y seguir estas instrucciones, usando las clases .navbar-inverse .navbar-nav > li > a y .navbar-inverse .navbar-nav ul.sub-menu li a.

      Saludos.

  21. hernan

    Hola.
    Estoy nuevamente por aqui, gracias por tu respuesta anterior ahora tengo una nueva pregunta ¿como cambiar de color la barra de menú y como cambiar el tamaña del título grande? agradezco tus respuestas, nuevamente eres una gran ayuda para lo q estamos empezando en este campo.

    • Caribdis Diseño Web

      Hola, Hernán.

      Respondido aquí y aquí.

      Saludos.

  22. Antonio

    Hola ,gracias por compartir tus conocimientos, tengo una pregunta cómo puedo hacer para ocultar el titulo de la página y el subrayado rojo de ese titulo, no quiero que salga al darle clic a cada página por que se duplica, ojala me haya comprendido.
    Gracias de antemano

    • Caribdis Diseño Web

      Hola, Antonio.

      Fijate en esta respuesta.

      Saludos.

      • Antonio

        Muchas gracias, nuevamente eres lo máximo, y dime cómo puedo hacer para que la página cargue más rápidamente, es decir, que no pase mucho tiempo, girando la animación de entrada. Gracias

        • Caribdis Diseño Web

          Hola, Antonio.

          Lo principal que deberías hacer es optimizar las imágenes. Tenés un GIF de 4MB 😯

          En todo caso, podrías desactivar el icono de carga previa, para que se vayan mostrando al menos los elementos de texto.

          Saludos.

          • Antonio

            Hola nuevamente, me gustaría saber si existe alguna forma de eliminar el texto que dice “Categoría: Blog”, cuando doy clic a mi menú blog y si se pueden cambiar el color de fondo de cada una de las páginas, de antemano gracias por tu respuesta.

          • Caribdis Diseño Web

            Hola, Antonio.

            Lo que tendrías que hacer es crear una página en blanco y asignarle la plantilla Blog. Luego colocar esa página en el menú.

            Para cambiar el fondo de las páginas fijate en esta respuesta.

            Saludos.

    • Antonio

      Nuevamente muchas gracias por su respuesta, una pregunta más, si no es molestia, cómo puedo hacer para cambiar el color de fondo de las páginas?

  23. Younly

    Hola como estas??
    Nuevamente estoy por aqui……y me gustaria saber si puedo colocar en el tema una aplicacion .exe hecha por mi.
    Mil gracias
    saludos

    • Caribdis Diseño Web

      Hola, Younly.

      No me queda claro lo que necesitás. De manera predeterminada WordPress no permite subir archivos .exe por razones de seguridad. Si de todas maneras querés subirlo a la biblioteca de medios, tendrías que agregar la línea

      define('ALLOW_UNFILTERED_UPLOADS', true);

      en el archivo wp-config.php y el siguiente código en el archivo functions.php del tema hijo:

      function enable_extended_upload ( $mime_types =array() ) {
         $mime_types['exe']  = 'application/exe'; 
         return $mime_types;
      } 
      add_filter('upload_mimes', 'enable_extended_upload');
      

      Saludos.

  24. fernando

    Hola quisiera cambiar el tamaño de la letra del menu pero no se donde y como hacerlo.

    Gracias

    • Caribdis Diseño Web

      Hola, Fernando.

      Podés usar el siguiente código (en la hoja de estilos del tema hijo, o CSS adicional del Personalizador):

      .navbar-inverse .navbar-nav > li > a,
      .navbar-inverse .navbar-nav ul.sub-menu li a {
          font-size: 17px;
      }
      

      Cambiá el valor en píxeles por el que necesites.

      Saludos.

  25. Alex

    Hola, muy útil el tutorial, es la primera vez que utilizo esta plantilla y no logro cambiar el párrafo inicial de “UNO DE LOS 10 TEMAS MÁS POPULARES EN WORDPRESS.ORG” por otro. Intente cambiarlo en Personalizando ▸ Sección de título grande Contenido principal pero no me deja. ¿Cómo lo puedo hacer?
    Saludos, Alex.

    • Caribdis Diseño Web

      Hola, Alex.

      ¿Podrías detallar un poco más el inconveniente? Gracias.

  26. Shirley

    Buen día, licenciada, gusto en saludarle nuevamente.
    Presento un problema inesperado en una página cuyo tema principal es zerif lite. Se veìa todo perfectamente y luego de actualizar a la nueva versión de wp entonces la pégina nunca carga, mostrando solo el reloj de tiempo en pantalla; actualicé también el tema y los plugins pero tampoco funciona. ¿Qué podría estar sucediendo?
    Espero atenta tu respuesta. Gracias por tu valioso tiempo.

    • Caribdis Diseño Web

      “Gracias, muchas gracias”, diría Lucas Tañeda. No soy licenciada, y el gusto es mío. 😉

      Es algún error de JS ocasionado por un plugin (probablemente Lightbox). Intentá desactivándolo, y/o desactivando uno por uno los demás plugins hasta dar con el que causa el conflicto.

      Saludos.

      • Shirley

        Hola nuevamente. Lo de licenciada lo dije por lo que me comentaste una vez que eres periodista y por ese lado somos colega :p
        Quedó solucionado el problema que tenía por ese lado, desactivé el plugin y ahora sí se ve la página de inicio sin problema.
        Sin embargo, el logo del cabecero el cual tenia centrado, ahora está alineado a la izquierda, y perdió el tamaño al que lo tenía configurado en css, y por más que edito la configuración no se hacen visibles los cambios; por otro lado las imágenes de la sección de Our focus no se ven. Todo esto sucedió luego de actualizar.

        • Caribdis Diseño Web

          Hola, Shirley.

          En efecto, soy periodista, pero no licenciada. Aquí la licenciatura es universitaria, y mi título es terciario (sería algo así como una tecnicatura). 🙂

          Supongo que pudiste resolver el inconveniente; al menos desde aquí veo que el logo está centrado y las imágenes aparecen sin problemas.

          Saludos.

          • Shirley

            Hola Ana, me preguntas si ya tengo el problema resuelto porque pasaste por la página y está todo bien, eso me confunde un poco, si entraste a la página que te enlacé a mí me sigue saliendo el logo del cabecero alieado a la izquierda y el tamaño se lo tuve que cambiar e el formato original de la imagen, porque por la configuración del custom css, como estaba, no se pudo; con respecto a la alineación no encontré la forma. Y en las imágenes de Our Focus, desaparecieron del front page luego de actualizar el tema, y eso tampoco lo veo resuelto desde aquí. Te pido por favor si puedes revisar nuevamente y si ves todo en su lugar entonces no sé porque a mi me aparece de otro modo.
            Muchas gracias.

          • Caribdis Diseño Web

            Sí, así es, tanto en Firefox como en Chrome lo veo bien. Es probable que tengas que limpiar historial/cookies para que muestre las últimas actualizaciones.

            Saludos.

      • Shirley

        Por cierto, gracias por tu acertada e inmediata respuesta anterior, siempre tan diligente y amable. Te felicito.

        • Shirley

          Tenías razón, disculpa la demora en responder. Todo estaba en los cookies, Todo anda bien con la página. Muchas gracias.

  27. Javier

    Buenas tardes,

    Cada resultado de busqueda que devuelve google, tiene el siguiente formato:

    1) Title
    2) URL
    3) Breve Texto Descriptivo

    Por favor, me interesaria saber si desde Zerit Lite, puedo configurar/cambiar el texto correspondiente al punto (3), ya que no quiero que aparezca el texto que Google esta escogiendo.

    Muchas Gracias,

    • Caribdis Diseño Web

      Hola, Javier.

      Si te referís a los resultados en el buscador, tendrías que usar algún plugin de SEO para poder asignar la descripción meta a cada página. Los dos más populares son All in One SEO y Yoast, pero también está WP Meta SEO que es muy bueno y fácil de usar.

      Saludos.

      • Javier

        De acuerdo, probare uno de los plug-in ! Muchas gracias!!!!

        Javier

  28. Caribdis Diseño Web

    Hola, Verónica.

    Las clases en las páginas de WooCommerce son .woocommerce-page .page-title:before, .woocommerce-page .entry-title:before y .woocommerce-page .entry-title:after (dales el background que quieras).

    Los botones de WooCommerce son:

    .woocommerce-page .woocommerce input[type="submit"],
    .woocommerce-page #content input.button,
    .woocommerce input.button.alt,
    .woocommerce-page #content input.button.alt,
    .woocommerce-page input.button.alt,
    .woocommerce a.button.alt,
    .woocommerce-page .products a.button,
    .woocommerce-page .woocommerce .add_to_cart_button,
    .woocommerce .checkout-button,
    .woocommerce .single_add_to_cart_button,
    .woocommerce #place_order,
    .woocommerce div.product form.cart .button
    

    Y la línea de las pestañas en la sección de información:

    .woocommerce div.product .woocommerce-tabs ul.tabs li.active {
        border-bottom-color: #000;
    }
    

    Saludos.

  29. lengriv

    buenos Dias, espero se encuentre muy bien….
    me gustan mucho sus tutos y recomendaciones, gracias por las ayudas…

    me gustaría pedirle un favor, y quisiera saber como hago para modificar el loading del tema hijo, cuando abro la pagina aparece una animación circular de carga, pero quisiera cambiarla..

    muchas gracias por su atención.

    • Caribdis Diseño Web

      Hola, Lengriv.

      La respuesta aquí.

      Saludos.

  30. Verónica

    Hola, nuevamente yo con consultas, me encantan tus tutoriales 🙂
    Logré cambiar los colores de las líneas bajo títulos o menú, pero sólo funciona para la página principal, sin embargo en /tienda se siguen viendo en color rojo, ¿Se pueden cambiar también para que todos los colores de /tienda sean como en la web principal? (sin líneas ni textos en rojo). Gracias!

  31. Claudia

    Hola Quisiera saber si esta plantilla requiere alguna version de php para ser instalada, me gustaria saber , ya que cuando la instalo en WordPress no me carga completa, parece una plantilla basica. Incremente memoria en el archivo php.ini, pero aun asi carga muy basico, no parece la plantilla real.
    Agradezco mucho la respuesta.

    • Caribdis Diseño Web

      Hola, Claudia.

      En la nueva versión del repositorio de WordPress.org tenés que configurar una página con la plantilla Frontpage y luego asignarla como página de inicio en Ajustes > Lectura > Página frontal muestra > Una página estática.

      Saludos.

  32. Jorge Cardona

    Por favor tengo problemas para agregar un Slider a la seccion de titulo grande en mi sitio web, he tratado de seguir las instrucciones pero no me da, es importante para mi hacer esto. Mi pregunta en realidad es si me pueden ayudar o si existe un toturial que explique como hacer esto posible. Gracias.

    • Caribdis Diseño Web

      Hola, Jorge.

      El tutorial se encuentra aquí. Y el tutorial para crear el tema hijo está aquí (solo es necesario seguir el Paso 1 para agregar el slider).

      Saludos.

  33. Javier

    Hola, como se puede poner imágenes de background en las páginas internas del tema, es decir las que vas creando con contenidos para luego enlazarlas desde el menú.

    Visualmente me refiero a https://themeisle.com/demo/?theme=Zerif%20Lite cuando pulsas en features – custom backgrounds y la página que se muestra pues de ese estilo. Gracias.

    • Caribdis Diseño Web

      Hola, Javier.

      Ese tipo de páginas están creadas con el constructor SiteOrigin Page Builder. Tendrías que instalar ese plugin.

      Saludos.

  34. Victor

    Hola , muy buena página con consejos para wordpress.

    Cómo puedo añadir un chat a mi web? (zerif lite) como por ejemplo Tawk.to?

    Atto.

    • Caribdis Diseño Web

      Hola, Víctor.

      Fijate si este plugin te sirve.

      Saludos.

  35. Armando Javier

    Buenas tardes, desde México.
    Soy novato en esto, algo hice que ahora en la pagina de inicio ya no me aparecen las secciones.
    si voy a apariencia general los datos están correctos y no están activadas las casillas de ocultar, me puedes ayudar .

    • Caribdis Diseño Web

      Hola, Armando.

      Fijate que estés usando la última versión del tema (que se descarga de aquí).

      Saludos.

      • Armando Javier

        es la versión 1.8 ahora la pregunta sería lo descargo y como lo actualizo en el hosting

        • Caribdis Diseño Web

          Si tenés acceso a un administrador de archivos en el panel de control de tu hosting, podés subir el ZIP y descomprimirlo dentro de la carpeta /wp-content/themes/ para que reemplace los archivos existentes. O bien borrar la carpeta /zerif-lite/ (activando otro tema previamente), y luego subir el ZIP desde Apariencia > Temas.

          Saludos.

  36. Juan Diaz

    Hola, buenos dias tengo mi pagina web www.bikesadventure.com a la cual le quiero agregar un chat en linea, cual me recomiendas, que sea gratuito, quedo atento y gracias por tu aporte!!

    • Caribdis Diseño Web

      Hola, Juan.

      Solo he probado uno: WP Live Chat Support. Es bastante sencillo de configurar, y la versión gratuita es para un solo operador.

      Saludos.

  37. luis

    Saludos

    ¿Como se podría cambiar el color de fondo de las secciones “testimonios” y “Quienes somos” por una imagen ?”

    • Caribdis Diseño Web

      Hola, Luis.

      En el archivo custom.css del tema hijo o en el recuadro CSS adicional del Personalizador pegá el siguiente código:

      /* Testimonios */
      .testimonial {
          background: url('http://urldelsitio/ruta_a_la_imagen.jpg') center top;
          background-size: cover;
      }
      /* Quiénes somos */
      .about-us {
          background: url('http://urldelsitio/ruta_a_la_imagen.jpg') center top;
          background-size: cover;
      }
      

      Reemplazá la URL de cada imagen por la ruta completa al archivo.

      Saludos.

  38. Verónica

    Hola, te he escrito en otra entrada porque en mi página elpa.com.uy ya no aparecían las entradas de blog en /noticias, luego de quitar el tema hijo veo que tampoco aparecen, la eliminé y fui a crearla nuevamente pero en los atributos de página ya no me aparece la plantilla blog, sólo veo “Frontpage”, “Planilla de ancho completo sin título” y “Página de ancho completo”, sabes a qué se debe?
    Gracias!

    • Caribdis Diseño Web

      Hola, Verónica.

      Como le comenté a Mireia recién, no sé qué están haciendo los amigos de ThemeIsle con Zerif Lite en el repositorio. Aparentemente, esta última versión 1.8.5.11 tiene varios errores en el código, como por ejemplo que faltan las líneas comentadas en las plantillas del blog (por eso no aparecen en los atributos), y que la sección de últimas noticias no muestra los extractos.

      Hasta tanto no lo resuelvan, mi recomendación es no actualizar desde el admin de WP, y usar la versión 2.0.5 que se descarga de aquí.

      Saludos.

      • Verónica

        Descargué lo que me dijiste, subí la carpeta a través del ftp y ahora mi página no funciona. Tampoco puedo acceder al admin de wordpress, podrías ayudarme? Muchas gracias. Ah, también probé subiendo al ftp un respaldo de ayer de la carpeta zerif-lite y el problema persiste

        • Caribdis Diseño Web

          Hola, Verónica.

          Vi que el sitio estaba funcionando.

          • Verónica

            En realidad levanté un respaldo (copiando las carpetas por ftp) y me falta un montón de contenido y widgets que tenía agregados, voy a tener que completarlo desde 0, no me quedó claro cómo trabajar con los temas porque al poner en el ftp la carpeta que respaldé no quedó como estaba antes de actualizar, alguna idea?

          • Caribdis Diseño Web

            Hola, Verónica.

            Es difícil en estos casos hablar de cuál es el mejor método, ya que cada sitio es distinto, e influyen entre otros factores las características del servidor en que está alojado, los plugins que tenga instalados, la versión del tema en uso, etc. Lo ideal sería tener copias de respaldo completas (archivos y base de datos), y —algo fundamental— hacer primero en un entorno de pruebas (un servidor local, por ejemplo) todos aquellos cambios que pudieran afectar el normal funcionamiento.

            Saludos.

  39. mireia

    Hola! Muchas gracias por el post! Me es super útil, ya que es la primera vez que utilizo wordpress.

    Tengo toda la página creada y configurada con éxito. El problema que tengo es que en el apartado de Latest news, me aparece todo el texto de los posts, no únicamente un párrafo.

    Como lo puedo solucionar?

    Mil gracias!

    • Caribdis Diseño Web

      Hola, Mireia.

      ThemeIsle está haciendo lío con la versión que se descarga/actualiza desde el repositorio de WordPress. Mi recomendación es usar la versión 2.0.5 que se descarga de aquí, y fue la última que ha funcionado bien. Tendrías que reemplazar los archivos vía FTP.

      Saludos.

  40. Luis Paz

    Hola Aye, no se que pasa (algo habré tocado) pero ha dejado de mostrar la sección de Titulo Grande (web de una página del tema) y va directamente a una página normal del sitio. Lo he mirado todo y no encuentro como activarla nuevamente. Gracias.

    • Caribdis Diseño Web

      Hola, Luis.

      Parece que estuviera haciendo una redirección. Podrías probar activando otro tema provisoriamente (para comprobar si sigue ocurriendo), y revisando las URL de WP y del sitio (en Ajustes > Generales) y los enlaces permanentes.

      Saludos.

      • Rodolfo G

        Buenas tardes

        Algo similar me pasa a mi y no me muestra las secciones como normalmente lo hacia, solo me manda como si tuviera un Blog y me pone y me pone como si yo hubiera o quisiera publicar un Blog. No se que haya pasado con la version de WordPress.org

  41. Gustavo Dueñas

    hola que tal amigo estoy haciendo una prueba de como se veria mi página con tu plantilla y la verdad me esta gustado mucho, mi problema es que no puedo quitarle el titulo de “uno de los 10 temas más pupulares en wordpress.org”
    ¿Me podrías ayudar a quitarlo?

    • Caribdis Diseño Web

      Hola, Gustavo.

      Zerif Lite no es mío, es de ThemeIsle 😉

      Tenés que seguir los pasos de la documentación (Sección de título grande > Contenido principal). Y fijate que estés usando una versión actualizada.

      Saludos.

  42. Rodolfo G

    Hola Caribdis!

    Recientemente tengo un problema con Zerif Lite, no he podido hacer que en mi pagina principal pueda ver todas las secciones como se muestra en el demo del Theme, solo me aparece nueva entrada del blog, pero por mas que quiero que me aparezca, focus, team, about, los ribbon, los botones personalizados, etc. No he podido, solo me aparece blog. Anteriormente si habia podido desde que instalaba WP y el theme, pero ahoro no lo puedo hacer. Tengo 2 dias intentando y nada 🙁 Agradecere mucho tu apoyo. Saludos.

    • Caribdis Diseño Web

      Hola, Rodolfo.

      Asegurate de usar una versión actualizada del tema. Está la 2.0.5, que se descarga de aquí, y la 1.8.5.11 que se descarga del repositorio de WordPress (volvió a estar disponible hace unos días). Esta última requiere la instalación del plugin ThemeIsle Companion.

      Saludos.

  43. Ana Figueroa

    Hola,

    Eres excelente.

    Estoy comenzando en esto del WordPress y no sé como entrar a el área de administrador para aplicar todos esos códigos de programación que expones. Me podrías orientar, por favor.

    • Caribdis Diseño Web

      Hola, Ana.

      Gracias por tu comentario.

      Antes que nada, te recomiendo la Guía WP Fácil, que es un buen material de referencia para los que recién están empezando a usar WordPress.

      Saludos.

  44. Jaime

    Muchísimas gracias por toda tu ayuda, gracias a ti nos está quedeando una web genial. Muchas gracias de verdad

    Tengo una duda, he conseguido cambiar el fondo de una de las páginas (que es blanco a un color). Se puede poner una imagen de fondo en esa página? Si puede ser la de la página principal, y luego ponerle un color transparente

    Mil gracias

    • Caribdis Diseño Web

      Hola, Jaime.

      Fijate en esta respuesta y esta otra.

      Saludos.

  45. Pablo

    Hola!

    Estoy usando el Plugin Elementor Tools para maquetar mis páginas.

    No es compatible con Zerif lite child?, porque no puedo aumentar el tamaño de la fuente usando la herramienta Editor de texto.

    Por otro lado no hay otra forma de aumentar el tamaño y tipo de la fuente en los encabezados y contenidos sin tener que usar pluggins?

    Gracias por tu excelente trabajo.

    Cordiales saludos

    • Caribdis Diseño Web

      Hola, Pablo.

      Zerif tiene asignado un tamaño de fuente fijo para casi todos los elementos HTML. Probá agregando el siguiente código en la hoja de estilos del tema hijo:

      html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
          font-size: inherit;
      }
      

      Saludos.

  46. juan

    Hola, siempre es un placer leer tu blog.
    Tengo un problema y quiero saber si te ha pasado.
    Tengo Zerif Lite desde hace tiempo, no tengo un tema hijo, no le hice mayor modificación alguna, de un día para otro tengo problemas para editar desde el apartado “personalizar”, vengo, quito o pongo según sea el caso y al darle “guardar y publicar” pues no hace nada, es decir, no guarda los cambios.

    Pensé que era un problema de memoria, hice lo que se hace en ese caso, etc pero nada.
    Dejé los mínimos pluguins necesarios pero sigo con el problema, ¿te ha pasado?, tienes algún ¿consejo?.

    Gracias de antemano.

    • Caribdis Diseño Web

      Hola, Juan.

      Fijate si actualizando a la última versión (la que se descarga de aquí) se corrige. Tendrás que reemplazar los archivos vía FTP.

      Saludos.

  47. Younly

    Hola, otra vez me gustaría saber si puedo darle un color de fondo o poner una imagen de fondo dertras de los textos, en las diferentes paginas que he creado…..he probado varios plugins pero no han surtido efecto…..algun codigo especifico que me puedas sugerir???.
    Gracias

    • Caribdis Diseño Web

      Hola, Younly.

      Fijate en esta respuesta.

      Saludos.

      • Younly

        Gracias, mil gracias, por lo acertado de sus respuestas y por la prontitud de las mismas……….el resultado fue perfecto, justo el que deseaba, puse en practica la variante para usar una imagen de fondo…….pero, todas las paginas me quedan con la misma imagen, alguna sugerencia para que cada una de mis paginas tenga un fondo diferente?? y la otra duda es si puedo aplicar algo semejante para mis entradas.
        Saludos

        • Caribdis Diseño Web

          Hola, Younly.

          El código sirve tanto para páginas como para entradas. Para que sea un fondo distinto por página tendrías que anteponer a la clase .site-content la clase .page-id-###, siendo ### la ID que corresponda a la página. Por ejemplo:

          .page-id-1680 .site-content {
              background: url('http://urldelsitio/carpeta/imagen.jpg');
          }
          .page-id-2230 .site-content {
              background: url('http://urldelsitio/carpeta/otraimagen.jpg');
          }
          

          La ID de la página podés verla en la parte inferior izquierda del navegador cuando posás el puntero del mouse sobre el título, dentro de la lista de páginas (es el número que figura después de /post.php?post=). Para las entradas, en lugar de .page-id-### la clase sería .postid-###.

          Saludos.

          • Younly

            Gracias, como siempre eres un angel…….enseguida pruebo tu sugerencia y como siempre espero tener los mejores resultados.
            Gracias por la ayuda.
            Saludos

  48. Caribdis Diseño Web

    Hola, Berta.

    La verdad no podría ayudarte en esto, ya que no tengo manera de probarlo en un iPhone. Hay un código para corregir el menú que desaparece en móviles (podés encontrarlo en esta entrada), pero ni idea si sirve. Ante la duda, te sugiero que lo plantees en el foro de Zerif.

    Saludos.

  49. Berta

    Hola!
    estaba mirando la versión demo para saber si me gustaba para descargármela…pero he detectado un tipo de fallo. El template visto en ordenador funciona el parallax perfectamente, en movil android también, pero en iphone el menú se queda paralizado y nunca te lleva al apartado correcto ni hace la transición. Mis preguntas son, puede ser que realmente no funcione bien para iphone? si es así lo veo muy precario, o cuando me instale el template va a funcionar bien? o es problema de la versión lite y necesito la pro? me tiene preocupada eso…a ver si me podéis ayudar.
    gracias!

  50. Angel

    Hola de nuevo Ana, como dicen por ahí arriba en otros comentarios, eres un sol. Gracias de antemano por toda la ayuda ofrecida.
    Días atrás me diste solución para quitar las etiquetas y fecha de publicación de las entradas, me dirigiste al minitutorial y perfecto.

    Ahora nuevo problema, me ha desa parecido en “artributos de página” “plantilla” la opción “blog”, con lo que no puedo hacer la pagina blog (tal como explicas en tu minitutorial configurar la página del blog), la cual ya tenía funcionando hacía tiempo, pero dicha página se ha vaciado por completo, las entradas existen pero no se ven en la página blog por lo que te he comentado.
    ¿? he provado actualizando WP a la última versión (que ya lo tenía así) y nada. He mirado por todas las páginas que tengo no fuera a ser que en alguna de ellas tuviese la opción de “blog” pero no.

    ¿Tu sabes como ayudarme esta vez?

    • Caribdis Diseño Web

      Hola, Ángel.

      Fijate actualizando a la última versión de Zerif Lite (2.0.5), que se descarga de aquí. Reemplazá los archivos vía FTP, o bien borrá el tema desde el administrador de WordPress y subí la nueva versión desde Apariencia > Temas > Añadir nuevo > Subir tema.

      Saludos.

  51. Edward

    buenos dias, mira mi problema es que quiero añadir en un texto de mi pagina web un archivo pdf que es un articulo, que cuando den clic encima del articulo automaticamente se descargue el archivo. sera que me pueden ayudar con esto gracias

    • Caribdis Diseño Web

      Hola, Edward.

      Para eso necesitás un plugin.

      Saludos.

  52. Rubén

    Hola:
    Acabo de pasar la web a https y me ha pasado una cosa muy rara.
    La página de blog no actualizaba mis últimos posts (no aparecía la miniatura de la imagen ni el texto) sí de las anteriores.
    He ido a la página blog y la he actualizado directamente, sin tocar nada más, y le doy a F5 y veo que se queda en blanco. La plantilla de página de blog no está.
    Vuelvo a WP y en atributos de página veo que en el desplegable han desaparecido las opciones de blog y blog-large. Sólo puedo seleccionar: frontpage, predeterminada, ancho completo título y ancho completo.
    Es rarísimo. Los php de blog y blog-large están en su sitio…
    ¿Sabes a qué puede ser debido y si tiene arreglo? Gracias!!

    • Caribdis Diseño Web

      Hola, Rubén.

      Supongo que ya lo habrás resuelto, porque vi que está todo en su lugar 🙂

      Saludos.

  53. Caribdis Diseño Web

    Hola, Daniela.

    Si te referís al color de fondo, fijate en este tutorial.

    Saludos.

  54. Daniela

    Hola muchas gracias excelente tutorial, quisiera saber si es posible y cual es la forma para cambiar el color verde de los testimoniales por algún otro color.
    gracias de ante mano!

  55. RAM

    Hola buenas noches, me gustaría saber si es posible mostrar las entradas completas en el blog en lugar de solo mostrar un extracto… Adjunto el enlace:

    http://nomadicpic.com/blog

    gracias!

    • Caribdis Diseño Web

      Hola, Ramiro.

      Tendrías que crear un tema hijo; luego copiar el archivo content.php del tema padre, y reemplazar todos los the_excerpt(); que figuran en ese archivo por the_content();.

      Saludos.

  56. Juan Carlos

    Hola y muchas gracias por estos tutoriales tan geniales y tus respuestas siempre amables y útiles a nuestras preguntas.
    He estado buscando esta pregunta que es fácil que ya esté contestada pero no la encuentro.
    ¿Como cambio el color de la lineas rojas que aparecen bajo los títulos y otras partes de las entradas y paginas?
    ¿Se pueden cambiar los colores de forma global? que todos los rojos sean azules,los verdes sean morado,etc.

    Muchas gracias de antemano

    • Caribdis Diseño Web

      Hola, Juan Carlos.

      Tendrías que usar el siguiente código (en el recuadro CSS adicional del Personalizador):

      .entry-title:after {
          background: #000000;
      }
      .widget .widget-title:before {
          background: #000000;
      }
      

      Cambiá el valor de color por el que necesites.

      Saludos.

  57. Abraham

    Hola, quisiera agregar un script de un chat en la pagina principal. esto se muestra a través de una pestaña en el footer.

    • Caribdis Diseño Web

      Hola, Abraham.

      Tendrías que crear un tema hijo y agregar el script en el archivo footer.php (pegarlo justo entre las etiquetas <?php wp_footer(); ?> y </body>), o bien usando un plugin que te permita insertar JS en el pie de página. En esta entrada hay dos recomendados.

      Saludos.

      • Victor

        Excelente, me resultó a la perfección!

  58. roberto

    buenos dias, queria saber si se podria poner la imagen de la pagina de inicio en las demas paginas q creemos?, conservando los botones y el movimiento q se crea al hacer scroll. muchas gracias!

    • Caribdis Diseño Web

      Hola, Roberto.

      Fijate en esta respuesta.

      Saludos.

  59. Gabriela

    Hola, soy nueva en paginas y Zerif me funcionaba muy bien, sin embargo ahora quiero editar la pagina y al seleccionar “personalizar” me aparece una pagina en blanco con la siguiente leyenda: “#Fatal error: Allowed memory size of 67108864 bytes exhausted (tried to allocate 3072 bytes) in /home/gabyre75/public_html/wp-admin/includes/deprecated.php on line 733”, borre imágenes por que pense que eso era lo que no me permitia avanzar pero no, sigue apareciendo, que es lo que debo hacer? podrían ayudarme? Saludos

    • Caribdis Diseño Web

      Hola, Gabriela.

      Es un problema de la configuración del servidor. Fijate agregando en el archivo wp-config.php de la instalación la siguiente línea (puede ir a continuación de define('WP_DEBUG', false);):

      define( 'WP_MEMORY_LIMIT', '128M' );
      

      Si el problema persiste, contactá con soporte de tu hosting.

      Saludos.

  60. Manu

    Hola de nuevo.
    Vi los mini tutoriales y me quedó claro como hacerlo.
    Gracias.
    Tengo un problema, cada vez que activo pirate forms mi cuestionario desaparece sólo queda el botón de envio.
    Si desactivo el plug in vuelve a aparecer.
    ¿Sabes por qué puede ser?
    Saludos

    • Caribdis Diseño Web

      Hola, Manu.

      Fijate que esté todo configurado correctamente en la página Ajustes > Pirate Forms. Si el problema persiste, probá desactivando otros plugins para ver si alguno genera un conflicto.

      Saludos.

  61. Manu

    Hola gracias por el post.
    Cambie el diseño de la plantilla de zerif lite y su post me fue de mucha ayuda pero veo que en la versión movil el menú se me desliza junto con la página y me gustaría poder dejarlo fijo.
    ¿podrías orientarme?

  62. Ernesto

    Hola!
    Una pregunta que me ronda hace tiempo.
    ¿puedo quitar la información que aparece después del resumen de cada artículo en la página del Blog?

    me refiero a: Publicada en …. Etiquetado con…

    ¿Cómo lo hago?

    Gracias!

    Gracias!

    • Caribdis Diseño Web

      Hola, Ernesto.

      Fijate en este tutorial.

      Saludos.

  63. Patricia

    No dejo de recurrir a tus tutoriales del zerif desde que instalé esta plantilla y en su día ya me ayudaste con un problemilla… mil gracias Ana!!!!
    Después de la última actualización me ha cambiado la página de entradas del blog: el título de cada artículo me es imposible modificarlo en css, no me responde a ningún código y además en versión móvil “desaparece” de la pantalla por algún margen que no puedo ni se modificar, vamos… que estéticamente ya no es acorde a la plantilla que tengo,ha dejado de ser responsive y desde el móvil no hay enlace al artículo porque no hay texto.

    He probado con:
    .entry-title
    .listpost-content-wrap h1.entry-title
    .list-post-top h1.entry-title

    Este fallo me aparece en la página de entradas del blog, en el título una vez dentro del artículo y en cualquier listado de post por categorías o etiquetas.
    ¿Cómo puedo arreglarlo? ¿Necesito modificar el código en alguna otra sección a parte del css?

    No doy con la solución ¿Puedes ayudarme con esto?
    Gracias!!!

    • Caribdis Diseño Web

      Hola, Patricia.

      No me aclaraste a qué versión se actualizó. Y la verdad, sin verlo no sabría decirte. Enviame la URL, si es posible.

      Saludos.

    • Patricia

      Ana el problema es que la plantilla está modificándose y no se por qué, acabo de confirmar que en Chrome no funciona lo que te comenté pero en Fox va mejor (no bien, pero mejor).

      De todas formas tenía un footer con 3 widgets y también acaba de desaparecer, estoy planteándome cambiar de plantilla pero después del trabajo hecho da pereza!

      la web es www.agrhumus.com

      Gracias!!!!

    • Patricia

      Ana ya está!!!!!

      no se por qué pero hay códigos de css que no los lee en el archivo custom.css pero al ponerlos en “css adicional” funcionan, y también pasa a viceversa.

      Así que el asunto de títulos y fuentes resuelto en todos los navegadores y dispositivos.

      Lo que no logro recuperar es cómo poner los 3 widget que tenía antes en el footer, si puedes ayudarme con eso te lo agradezco y si no, pues no pasa nada.

      Gracias por todo!!!!

      • Caribdis Diseño Web

        Hola, Patricia.

        Fijate en esta respuesta que le di a otra lectora. De todas maneras, los widgets deberían haber pasado a Inactivos y tendrías que poder colocarlos de nuevo en el pie de página. El tema del CSS, puede ser que con tantos plugins que tenés instalados alguno aplique sus propias reglas y sobrescriba otras (probá también desactivando la “minificación” de código CSS porque a veces eso también ocasiona conflictos).

        Saludos.

        • Patricia

          Muchas gracias Ana, estos tutoriales y comentarios son oro molido 😉

  64. Verónica

    Hola, Buenas tardes
    Quiero saber si en opcion de Ultimas Noticias, puedo seleccionar las entradas por categorias para que me muestre solo las que necesito.
    Gracias por su ayuda.

    • Caribdis Diseño Web

      Hola, Verónica.

      Fijate en este tutorial.

      Saludos.

  65. Dani_Cheng

    Hola,

    tengo una duda sobre la resolución de la imagen principal. Hay formatos en los que se ve a width:100% pero hay otros, por ejemplo, en la resolución 1366×768 donde aparece un margen. También pasa en la vista de la imagen en tamaño móvil, que la regula automáticamente y justo la parte más importante de la imagen no aparece.

    Lo que me gustaría es saber cómo puedo hacer que la imagen sea siempre 100% del ancho.

    Mil gracias!

    PD. Estoy usando el tema gratuito.

    • Caribdis Diseño Web

      Hola, Dani_Cheng.

      Fijate en esta respuesta. Igual tené en cuenta que en dispositivos móviles nunca se va a ver completa porque el área visible toma otra proporción.

      Saludos.

    • Dani_Cheng

      Genial,

      me ha funcionado perfectamente.

      Respecto a lo que me comentas del móvil, desconocía que eso fuera así… Es que tengo un “problemilla” con este, ya que en el punto central de mi imagen aparece un objeto que le da sentido a la frase y, en la visión móvil, como recorta a su antojo, el objeto desaparece y se pierde significado.

      ¿Cónoce alguna forma de que en la vista móvil tome otra imagen más apropiada o, al menos, que al ajustar la imagen se centre en un punto concreto?

      Mil gracias por la ayuda y por la rapidez en la respuesta. Sois geniales.

      • Caribdis Diseño Web

        Hola, Dani_Cheng.

        Para eso tendrías que usar una imagen alternativa y aplicarla como fondo en resoluciones menores con una media query en la hoja de estilos. Sería algo más o menos así:

        @media (max-width: 768px) {
        body.custom-background {
            background-image: url('http://urlcompleta/imagen.jpg') !important;
            background-size: cover !important;
        }
        }
        

        Saludos.

  66. Pedro

    Os dejo aquí este aporte por si a alguien le puede resultar útil…

    Llegó Woocommerce ver. 2.6.1!!!

    Y con él llegaron de nuevo los paréntesis, el fondo amarillo, y el número de productos por categorías.

    ¿La solución? Sin matarnos a usar código ni modificar archivoss .php, nos vamos al style.css de nuestro theme o theme-child, y modificamos ‘mark, ins {‘ dejándolo tal cual os muestro debajo

    mark, ins {
    background: #fff;
    text-decoration: none;
    color: #fff;
    font-size: 1px;
    }

    El resultado podéis verlo en mi tienda on-line en https://www.pymespc.com

    Saludos, y Feliz Navidad a todos.

  67. Verónica

    Hola, Buenas tardes, muy buena pagina
    tengo una consulta, necesito saber como le cambio el tamaño a mi cabecera ya que necesito que el logo se vea mas grande

    • Caribdis Diseño Web

      Hola, Verónica.

      Fijate en este tutorial.

      Saludos.

  68. Pedro

    Buenas tardes,
    He instalado el plugin wc-brand en mi tienda on-line (www.pymespc.com) y en el sidebar el widget no me aparece con el mismo diseño que el resto de widgets de buscar productos.
    Te agradecería muchísimo si pudieras orientarme sobre donde debería modificar el código para que tuviera este widget el mismo aspecto que el resto.
    Un millón de gracias!

    • Caribdis Diseño Web

      Hola, Pedro.

      Fijate si te sirve este código:

      .widget_pw_brands_widget .widget-title {
          letter-spacing: inherit;
          border-bottom: none;
      }
      .widget_pw_brands_widget {
          padding: 0;
      }
      .widget select {
          border: 1px solid rgba(0, 0, 0, 0.1);
          border-radius: 3px;
          color: #A0A0A0;
          letter-spacing: inherit;
      }
      

      Saludos.

    • Pedro

      Genial Ana!!!
      Un millón de gracias!!! Me salvaste la vida con este código, es exactamente lo que necesitaba.
      Muchísimas gracias.
      Un abrazo!!!

    • Pedro

      Hola Ana,
      Te lo voy a poner un poco más dificil 😉
      En mi tienda on-line tengo un sidebar, con tres widgets para buscar productos (por texto, por categoría, y por fabricante) y había pensando en colocarlos en la parte superior de la página, de forma que resulten más sencillas las búsquedas, porque desde pc los sidebar se ven bien, pero en la versión móvil tienes que bajar casi hasta el footer para poder ver los widgets de búsqueda de productos.
      ¿Hay alguna forma de colocar los widgets en la parte superior, debajo del título de la página?
      Gracias!

      • Caribdis Diseño Web

        Hola, Pedro.

        Colocar los widgets en la parte superior implicaría mover la barra lateral antes del contenido, lo cual no es recomendable en términos de usabilidad o SEO. Pero podrías manejarlo con CSS (funciona en los navegadores modernos). En el archivo woocommerce.php del tema hijo, agregale la clase col-rev al <div class="container">. Te quedaría así: <div class="container col-rev">. Luego en el archivo custom.css pegás el siguiente código:

        @media (max-width: 991px) {
        .col-rev {
             display: -webkit-flex;
             display: -ms-flex;
             display: flex;
             -webkit-flex-direction: column-reverse;
             -ms-flex-direction: column-reverse;
             flex-direction: column-reverse;
         }
        .sidebar-wrap {
            border-left: none;
        }
        }
        

        Así en resoluciones menores, la barra lateral se muestra primero y el contenido a continuación.

        Saludos.

  69. Cesar Santana

    HOLA de nuevo,
    y felices fiesta a todos y todas….bueno ahí va mi nueva duda, agghh.
    Hace tiempo que instale el plugins Max Mega Menu, pero no lo tenia activado, ahora lo quiero utilizar, pero los cambios no llegan a convencer por el siguiente problema visual…

    — Me sale el menú en dos lineas y queda “FATAL”…la solución que he buscado y no encuentro y la que pido “tu Ayuda” es la siguiente

    que el menu salga de lado a lado, es decir mas ancho de pantalla…

    esta es mi web www.cobaslimpiezaviaria.org

    Gracias.

    NOTA: he revisado todos los post y no veo nada, inlcuido el tutorial del propio plugins

    • Caribdis Diseño Web

      Hola, César.

      Fijate si te sirve este código:

      #main-nav .container {
          width: 100%;
          padding: 0;
      }
      #site-navigation {
          float: none;
          padding: 0;
      }
      

      Saludos.

  70. Dani_Cheng

    Hola,

    lo primero darte la enhorabuena por la labor que estás haciendo a la comunidad de habla hispana con tu blog. Dicho esto, te consulto una duda que no consigo solucionar.

    Quiero insertar un evento “onclick” de Google Analytics en el botón de “enviar” del formulario de contacto de la página principal (estoy usando el formulario por defecto, no el de Pirate form), pero no consigo que funcione de ninguna manera.

    Éste es mi evento:
    onClick=”ga(‘send’, ‘event’, ‘Registro_web’, ‘CTA’, ‘Activo’);”

    Si me puedes echar un cable y decirme cómo iría está línea de código te estaría eternamente agradecido.

    Mil gracias

    • Caribdis Diseño Web

      Hola, Dani_Cheng.

      Gracias por tu comentario.

      En principio, tendrías que crear un tema hijo. Las instrucciones están en esta entrada. Luego copiar el archivo front-page.php de la carpeta del tema padre a la del tema hijo y buscar las siguientes líneas:

      if( !empty($zerif_contactus_button_label) ):
          echo '<button class="btn btn-primary custom-button red-btn" type="submit" data-scrollreveal="enter left after 0s over 1s">'.$zerif_contactus_button_label.'</button>';
      elseif ( is_customize_preview() ):
          echo '<button class="btn btn-primary custom-button red-btn zerif_hidden_if_not_customizer" type="submit" data-scrollreveal="enter left after 0s over 1s"></button>';
      endif;
      

      Reemplazarlas por lo siguiente:

      if( !empty($zerif_contactus_button_label) ):
          echo '<button onClick="ga(\'send\', \'event\', \'Registro_web\', \'CTA\', \'Activo\');" class="btn btn-primary custom-button red-btn" type="submit" data-scrollreveal="enter left after 0s over 1s">'.$zerif_contactus_button_label.'</button>';
      elseif ( is_customize_preview() ):
          echo '<button onClick="ga(\'send\', \'event\', \'Registro_web\', \'CTA\', \'Activo\');" class="btn btn-primary custom-button red-btn zerif_hidden_if_not_customizer" type="submit" data-scrollreveal="enter left after 0s over 1s"></button>';
      endif;
      

      Espero que te sirva.

      Saludos.

  71. Santiago

    Hola, como va? tengo que cambiar el color de texto del menu y no encuentro como hacerlo.

    saludos

    • Caribdis Diseño Web

      Hola, Santiago.

      En la hoja de estilos del tema hijo, o en el recuadro CSS adicional del Personalizador en WP 4.7 pegá el siguiente código:

      .navbar-inverse .navbar-nav > li > a {
          color: #1990a4;
      }
      

      Cambiá #1990a4 por el valor de color que necesites.

      Saludos.

  72. Nacho

    Buenas tardes, me gustaría añadir de alguna forma en la parte inferior de la página una sección con varios enlaces, los típicos de “Aviso legal” “Política de privacidad” “Copyright”..

    ¿Cómo se puede hacer?

    También me gustaría poder editar el bloque de la derecha del pie dónde pone “Zerif Lite Creado con WordPress”.

    Muchas gracias

    • Caribdis Diseño Web

      Hola, Nacho.

      Podés usar un área de widgets del pie de página para incluir un menú personalizado, o bien los enlaces en un widget de texto. (Apariencia > Widgets > Área de pie de página 1, 2 o 3).

      Para lo segundo, está este tutorial (última parte).

      Saludos.

  73. Juan

    Hola, ¿qué tal?
    Primero felicitarte por ayudar con todo este contenido.
    Mi pregunta es si en los Widgets de la sección “Nuestro equipo” al tener sólo 2 la sección los coloca hacia la izquierda de la web, es decir, no los centra y se ve un espacio vacío a la derecha en la sección.
    chequea cafecafetal.com para que veas a que me refiero, ¿hay forma de centrar los items?

    • Caribdis Diseño Web

      Hola, Juan.

      Gracias por tu comentario.

      Los widgets de Nuestro equipo siempre quedan centrados. El problema es que están diseñados para ser usados únicamente en esa sección. Por lo que vi, duplicaste la sección Nuestro enfoque y creaste las áreas de widgets, pero estas solo pueden usar widgets convencionales y no los de Zerif. ¿Por qué no simplemente usar la sección Nuestro equipo? Por otro lado, si vas a usar una nueva sección personalizada, recordá darle una ID única (en este momento estás repitiendo la de Nuestro enfoque).

      Saludos.

  74. Galvan

    Hola Ana Ayelén,

    Podrías enseñarnos como colocar un slider en las categorías; algo así como un header en cada categoría

    De ante mano mil gracias por ese apoyo

    • Caribdis Diseño Web

      Hola, Galván.

      Si te referís a las categorías de las entradas, tendrías que usar el código abreviado que te genere el plugin en el campo Descripción de la categoría. Pero previamente, en el archivo functions.php del tema hijo, tenés que incluir lo siguiente:

      add_filter( 'term_description', 'do_shortcode' );
      

      Saludos.

  75. jesus

    buenos dias tengo otra como puedo cambiar los colores de los botones del titulo grande es que quiero poner un mismo color pero con diferente tonalidades

    • Caribdis Diseño Web

      Hola, Jesús.

      Fijate en esta respuesta.

      Saludos.

  76. Luis

    Hola Ana, Gracias por este post es una obra maestra sobre el Zerif Lite, gracias.

    quisiera saber si puedes ayudarme para desactivar en las “entradas” la fecha de publicación y el autor.

    Muchas gracias y felicitaciones, un gran trabajo, muy generoso por tu parte.

    • Caribdis Diseño Web

      Hola, Luis.

      Gracias por tu comentario. 🙂

      Fijate en este tutorial.

      Saludos.

  77. Elio

    Buenas Roberto creo que no soy solo yo pero por si acaso hay algo que se pueda hacer, te comento, después de la ultima actualización, la portada ha petado, no hay front page….. ayer salia el logo a toda pantalla, ahora me manda al blog directamente…no se por que.

    ¿hay solución o hay que esperar a que suban otra actualización?

    • Caribdis Diseño Web

      Hola, Elio.

      Tenés que seleccionar Tus últimas entradas en la opción Página frontal muestra del panel Portada estática (como se explica en este tutorial).

      Saludos.

  78. carlos

    Hola que tal?¿?¿

    Veras mi problema… no se que hacer. He hecho una web con zerif lite en un servidor y al cambiarlo a otro servidor de pago, me da el siguiente error:

    Parse error: syntax error, unexpected T_FUNCTION in /web/htdocs/www.ligasfifaxbox.com/home/wp-content/themes/zerif-lite/inc/jetpack.php on line 1

    Y no me deja entrar en el apartado de widgets en wp-admin y tampoco me deja cambiar el tema a zerif lite. Por favor necesito ayuda porque me estoy volviendo loco. Gracias de antemano. Un saludo

    • Caribdis Diseño Web

      Hola, Carlos.

      Borrá la carpeta /zerif-lite/ del servidor, y luego subí el ZIP del tema desde Apariencia > Temas > Subir tema.

      Saludos.

      • carlos

        Gracias por tu rapida pregunta pero al ir a acceder a mi panel wp-admin para subir un tema se me queda la pantalla en blanco y no me deja entrar. Voy a contactar con mi hosting a ver si va a ser problema suyo, ya que no me deja actualizar el tema antiguo ni meter el nuevo. Gracias un saludo

  79. jesus

    buenos días gracias pro tu ayuda tengo una duda de que tamaño (dimensiones) debe ser una imagen que yo quiero poner de fondo en la sección quienes somos yo ya tengo una imagen de fondo pero quiero poner otra de una foto que tengo pero quiero cambiarle las dimensiones para que quede bien cuadrada gracias por tu atención

    • Caribdis Diseño Web

      Hola, Jesús.

      El tamaño puede ser cualquiera, ya que se verá distinto de acuerdo con la resolución de pantalla. Fijate de usar background-size: cover; para que se ajuste al contenedor, y en caso de que quieras un efecto de fondo fijo, background-attachment: fixed;.

      Saludos.

  80. Galvan

    Hola
    Gracias por toda su colaboración;
    Cómo modificamos en Zerif Lite (hijo) el logo centrado en la cabecera al lado el botón buscar y abajo el menú centrado?
    Gracias
    quedo atento!

    • Caribdis Diseño Web

      Hola, Galván.

      El logo se puede centrar arriba del menú (también centrado), pero el cuadro de búsqueda forma parte del menú, así que no es posible alinearlo con el logo.

      El código sería:

      .navbar-brand, .navbar-header {
          float: none;
      }
      

      Saludos.

  81. Verónica

    Hola, tengo un inconveniente en la sección “Nuestro equipo” y es que sólo me muestra la opción “Contenido” para poner título y subtítulo, pero no la parte de agregar un widget para modificar los datos de cada integrante del equipo, cómo puedo hacer para que aparezca? Gracias!

    • Caribdis Diseño Web

      Hola, Verónica.

      ¿Estás usando la última versión del tema y de WP? Probá desactivando plugins, vaciando caché y cookies del navegador y reiniciando sesión.

      Saludos.

  82. Luis

    Hola Ana.
    Tengo una pregunta, y agradezco si me puedes ayudar. Como puedo integrar en la sección de contenido principal un formulario de aweber. Mil gracias.

    • Caribdis Diseño Web

      Hola, Luis.

      Tendrías que instalar un plugin. Luego lo agregarías como widget.

      Saludos.

  83. Galvan

    Hola Ana Ayelén, te felicito por tu gran trabajo y por los aportes que nos haces,
    Me gustaría que nos enseñaras o nos dieras algunas recomendaciones para que la pagina (zerif lite – zerif hijo) se cargue más rápido sobre todo en los celulares, ya que he comprimido al máximo posible las imágenes sin perder calidad y en los dispositivos móviles la carga es demorada.
    Muchas gracias por todo…

    • Caribdis Diseño Web

      La carga de un sitio depende de muchos factores y no hay una recomendación en particular que sea igual de efectiva para todos. Podrías hacer una prueba de rendimiento en Google PageSpeed y/o GTMetrix, donde te indican las áreas que necesitan optimización.

      Saludos.

  84. jesus

    buenos dias, de nuevo por aca con una duda sera que se puede hacer un video que se repita una y otra ves en la parte arriba del titulo grande como esta en esta pagina http://www.cafesancayetano.com/ mira la pagona del link y vera lo quiero hacer; quiero poner el video arriba agregando esa parte arriba del titulo grande sis e puede hacer eso que quiero hacer

    • Caribdis Diseño Web

      Hola, Jesús.

      Fijate en esta respuesta.

      Saludos.

  85. Juan Manuel

    Hola, buen dia. Es posible utilizar zerif lite como un shop? hay algun plugin? que me recomiendas. Saludos

    • Caribdis Diseño Web

      Hola, Juan Manuel.

      Zerif Lite es compatible con WooCommerce.

      Saludos.

  86. jesus

    buenos días ante mano muchas gracias por tu ayuda eres una dura, la ayuda que te pido ahora en la parte de noticias quiero hacerle un cambio de estructura a la que esta predeterminada quiero pornerle un slider para unas imagenes que se muevan en al parte izquierda y un pequeño texto del lado derecho con las noticias y que tenga el mismo efecto que al darle clic al titulo me mande donde esta al noticia mas detallada como puedo hacer ese cambio estructural

    • Caribdis Diseño Web

      Hola, Jesús.

      No es posible ese cambio. Tendrías que usar algún slider de entradas en reemplazo de la sección.

      Saludos.

  87. Galvan

    Nuevamente mucha gracias por tu colaboración me gustaría que no enseñaras algo: en la sección TESTIMONIOS estoy colocando Contenido a través del Widget HTML el sitio en pantallas de PC se ve perfectamente simétrico pero con los dispositivos móviles se me presentan dos problemas:

    1. El Facebook se me desborda por fuera del contenedor en el móvil se ve bien en en la computadora
    2. El el Twitter no se visualiza en el móvil pero si en la computadora

    Quedo atento a tu valiosa colaboración

    • Galvan

      Hola,
      Gracias nuevamente por colaborarnos
      Realicé las recomedaciones de instalar los plugins Simple Facebook Plugin y Responsive Twitter Widget pero no se arregló.
      el caso es que en la sección TESTIMONIOS estoy colocando Contenido a través del Widget HTML el sitio en pantallas de PC se ve perfectamente simétrico pero con los dispositivos móviles se me presentan dos problemas:
      1. El Facebook se me desborda por fuera del contenedor en el móvil se ve bien en en la computadora
      2. El el Twitter no se visualiza en el móvil pero si en la computadora

      Muchas gracias!!
      Quedo atento a tu valiosa colaboración

      • Caribdis Diseño Web

        Hola, Galván.

        Probá con el siguiente código:

        #client-feedbacks .feedback-box {
            padding: 0;
        }
        

        Si el widget de Twitter está bien configurado, debería verse sin problemas.

        Saludos.

  88. david madariaga

    Hola Master:
    Consulta… como le hago para mover una seccion y ponerla arriba primero por ejemplo quienes somos primero y la segunda tercera.eso.

    • Caribdis Diseño Web

      Hola, David.

      Fijate en esta respuesta.

      Saludos.

    • david madariaga

      no me adjunto niun enlace :S

      • Caribdis Diseño Web

        Hola, David.

        Perdón, tenía un error en el código. Está corregido.

  89. Luis

    Buenos Dias, como puiedo agregar una nueva seccion y asi poder ponerle un flipBook

    • Caribdis Diseño Web

      Hola, Luis.

      Este es el tutorial para crear una nueva sección, y este para incluir códigos abreviados generados por un plugin.

      Saludos.

  90. carlos

    Hola buenos dias… gracias por tu ayuda. Eres una crack jajajaa

    Dos preguntas… se puede cambiar el fondo de las secciones BottomButton Ribbon y RightButton Ribbon¿?¿?

    Y otra, he probado el plugin de los idiomas que dices mas arriba y no me deja añadir las banderas en el menu donde quiero ponerlas (como tienes tu arriba en tu menu despues de Contacto?¿?¿?¿ puedes ayudarme… Muchas gracias de antemano y felicidades por tu gran trabajo.

    • Caribdis Diseño Web

      Hola, Carlos.

      Para lo primero, fijate en esta respuesta.

      En cuanto a lo segundo, la bandera en este sitio es código agregado en el archivo header.php del tema hijo, porque es un enlace a otro dominio. Así que no aplica, porque depende del plugin que uses.

      Saludos.

      • carlos

        Muchas gracias preciosa… y ya por ultimo (bueno penultimo…), como puedo cambiar el color de la fuente en la seccion about-us¿?¿?¿? Muchas gracias por anticipado. Un saludo

        • Caribdis Diseño Web

          Hola, Carlos.

          Fijate en esta respuesta.

          Saludos.

  91. Galvan

    Cordial saludo
    Agradezco gentilmente el favor de colaborarme con la siguiente acción:
    Como se hace para que el Zerif – Widgets de Clientes se abra en otra pestaña (_blank)
    De antemano muchas gracias

    • Caribdis Diseño Web

      Hola, Galván.

      Es el mismo código que este, reemplazando .service-icon por .client-list.

      Saludos.

  92. Camilo

    Hola queria saber como se puede eliminar o disminuir la capa que esta sobre la imagen de fondo.
    Gracias

    • Caribdis Diseño Web

      Hola, Camilo.

      Fijate en este tutorial.

      Saludos.

  93. Luis

    Hola Ana.
    Primero que todo, quiero darte las gracias porque tú tutorial me ha servido mucho.

    También quiero contarte un problema que tengo el cual no logro resolver.
    Creo nuevas paginas y todas automáticamente se van al menú. Cuando voy a la opción de menú para quitarlas, efectivamente las quita, pero en la web permanecen.
    Agradezco me orientes sobre la solución.

    • Caribdis Diseño Web

      Hola, Luis.

      Gracias por tu comentario.

      Tenés que crear el menú con los anclajes y asignarlo a la ubicación Menú primario, tal como se explica en este tutorial.

      Saludos.

  94. Andres

    Hola Amiga lejos el la mejor pagina. Ayuda soy novato, quiero saber el tamaño de la imagen N°1 Y N° 2 del efecto parallax, quiero poner unas imágenes que calcen justo.

    Mucha gracias

    • Caribdis Diseño Web

      Hola, Andrés.

      El tamaño recomendado es el mismo para las dos imágenes: 1650×1100 píxeles.

      Saludos.

      • jesus

        hola buenos días agradezco por tu ayuda me gustaría saber como podría cambiar el titulo y subtitulo de la de sección quienes somos gracias por tu ayuda de ante mano

        • Caribdis Diseño Web

          Hola, Jesús.

          Es tal como figura en esta entrada: títulos y subtítulos de las secciones de editan desde el Personalizador.

          Saludos.

          • jesus

            jajajjaajaj tu disculpa pero me falto poner la palabra COLOR del titulo y subtitulo jajaja

          • Caribdis Diseño Web

            Fijate en esta respuesta.

  95. Francisco Higuera

    Hola Caribdis, tengo un problema al subir el tema, lamentablemente ya no esta disponible en wordpress.org y al subirlo por ftp no se me carga nada, solo una página en blanco,
    Estoy utilizando la opción de remplazar todos los archivos, cuando me aparece que un archivo esta duplicado.
    Muchas Gracias,
    Francisco H.

    • Caribdis Diseño Web

      Hola, Francisco.

      ¿Probaste subiendo el ZIP desde Apariencia > Temas > Añadir nuevo > Subir tema (borrando previamente la carpeta /zerif-lite/)?

  96. christian

    buen dia como hago para enviar mensaje mediante el formulario de contacto de zerif lite instale el plugin pirate form ia configure el fomulario para que me llegue a mi bandeja de mi correo personal pero no sale ningun mensaje de enviado ….

    • Caribdis Diseño Web

      Hola, Christian.

      Fijate en esta respuesta.

      Saludos.

  97. Caribdis Diseño Web

    Hola, Carlos.

    Para hacer un sitio multilingüe, es necesario un plugin: Zerif es compatible con Polylang y WPML. En este caso, las traducciones deben hacerse manualmente. Si lo que buscás es un sistema de traducción automática (por ejemplo, con Google Translate), un plugin como Google Language Translator podría servirte.

    Saludos.

  98. carlos

    Buenas tardes de nuevo… mi pregunta es si este tema se puede poner en ingles, con una “banderita” arriba a la derecha como teneis vosotros y que cuando la gente pinche ahi, se convierta al idioma de Shakespeare… Gracias de antemano.

  99. jesus

    hola buenos días señorita gracias por tu ayuda vuelvo por acá para hacerte una pregunta como puedo hacer o colocar en la pagina para poder hacer una vídeo llamada o video conferencia por skype

    • Caribdis Diseño Web

      Hola, Jesús.

      El código completo del enlace sería <a href="skype:NOMBREDEUSUARIO?call">Llamar por Skype</a>.

      Reemplazá NOMBREDEUSUARIO por el usuario real.

      Saludos.

      • jesus

        gracias por tu ayuda una duda sera que se puede poner ese botón en la parte final del inicio de la pagina donde uno coloca el facebook, twitter, etc poner ese botón, ay estuve averiguando encontré como hacer el botón de skype y quiero colocarlo en ese lugar ya que ay estáncolocadas las redes sociales de la empresa

        • jesus

          te hablo de este boton aca esta la pagina donde estuve mirando https://www.skype.com/en/developer/create-contactme-buttons/

        • Caribdis Diseño Web

          Hola, Jesús.

          Podés usar como referencia esta entrada. En lugar de pegar el código para el nuevo icono, pegás el que generaste para Skype.

          Saludos.

  100. Pedro

    Buenas tardes,
    Me estoy volviendo loco. He creado mi página con Zerif Lite, creé el tema hijo Zerif-child, personalicé el style.css del tema hijo, y no hay forma de que en la versión para móvil se vea igual que cuando abres la web desde cualquier navegador.
    ¿Qué estoy haciendo mal?
    Gracias!

    • Caribdis Diseño Web

      Hola, Pedro.

      Fijate en esta respuesta.

      Saludos.

      • Pedro

        Hola Ana,
        Antes de escribir mi comentario, ya había revisado esa respuesta.
        Yo también uso JetPack, y la verdad es que tiene algunas aplicaciones muy útiles, pero las que no lo son ya las tenía desactivadas.
        Al final opté por otra alternativa.
        Modifiqué el style.css del tema padre (Zerif-Lite), copié todo su contenido en el style.css del tema hijo (Zerif-child), y en el css del tema padre, que quedó vacio, creé la llamada @import url(“../zerif-child/style.css”);
        Antes hacía todas las modificaciones en el custom-css del tema hijo, ahora lo hago todo directamente en el style.css del tema hijo, sin necesidad del custom-css, y el sttyle.css del tema padre ha quedado vacio, por lo que en caso de actualización del tema, si se reescribe el archivo style.css, tan solo tendré que volver a vaciarlo y volver a copiar la instrucción @import url
        Ahora cualquier modificación que hago en la plantilla del tema hijo se visualiza igual en los browsers que en los dispositivos móviles.
        Gracias! Un saludo
        Gracias! Un saludo

        • Caribdis Diseño Web

          Hola, Pedro.

          Llamar a la hoja de estilos del tema hijo desde el tema padre es incorrecto; en todo caso es al revés (se usa @import en style.css del tema hijo), pero este método está desaconsejado y es obsoleto.

          El archivo custom.css no es estrictamente necesario, y las ediciones de estilo pueden estar tranquilamente en style.css del tema hijo, pero si la visualización en dispositivos móviles no es como debería ser, es porque hay algún error en la hoja de estilos o hay un plugin que interfiere.

          Saludos.

  101. eduardo

    Hola Ana! primero felicitarte por lo que haces, me eh dado cuenta que te das el tiempo de responder con mucha amabilidad y claridad a cada una de las preguntas y me parece genial. también tengo una duda y me encantaría tu ayuda. ya tengo la pagina funcionando pero en ingles jajaj instale polylang para traducir al español, y funciona pero en cada pagina aparece www.pagina.com/es y eso hace cambiar algunos link. me gustaria tener la pagina en español sin que tenga que aparecer el “es” y lo otro el woocommerce tambien esta en ingles. me interesa que las personas que visiten mi pagina puedan verla en español al igual que el carrito de compra. de antemano te agradezco por la ayuda que ofreces aqui en tu blog.
    saludos

    • Caribdis Diseño Web

      Hola, Eduardo.

      Gracias por tu comentario.

      Las URL las configurás desde Ajustes > Idiomas > Ajustes > Modificaciones de URL. Y el idioma predeterminado lo asignás desde Ajustes > Idioma (marcándolo con la estrellita).

      Para más información podés ver este tutorial.

      Saludos.

  102. jesus

    buenos días eres de mucha ayuda pero de mucha ayuda te agradezco por sacar tiempo para resolver nuestras dudas, vengo por algo que le quiero hacer a la pagina bueno la verdad no es idea mia es de mi jefe pero literal me tiene loco con que haga eso y no tengo una idea clara de como hacerlo, en cada secciono pagina esta escrito un texto de los producto que se venden de la empresa pero el quiere que cada parrafo se parta para que se pueda ver el fondo como asi como en bloques y quede en el espacio de cada uno se pueda el ver fondo como se ve en la pagina principal del tema la verdad no se si me dio a explicar bien espero tu pronta respuesta y espero con tus conocimientos puedas sacarme de este apuro

    • Caribdis Diseño Web

      Hola, Jesús.

      Creo que entendí, pero no es posible lograr ese efecto desde el editor predeterminado. Tendrías que probar con algún page builder que incluya bloques de texto con efecto Parallax, o similar.

      Saludos.

  103. christian

    hola segui el tutorial y pude instalar el slider , todo estaba genial pero hay un detalle no quiero k me aparesca Zerif Lite Creado con WordPress en el pie de pagina antes de crear el Zerif Lite hijo podia editar pero ahora noo porfavor no se k paso

    • Caribdis Diseño Web

      Hola, Christian.

      Si seguiste correctamente los pasos para crear el tema hijo, no deberías tener problemas. Para la edición del pie de página, fijate en este tutorial como referencia (la última parte).

      Saludos.

  104. leo

    Un cordial saludo

    Esta supér el post, pero tengo un inconveniente con el menú desplegable que hice en mi pagina, resulta que cuando lo intento ver en mi dispositivo móvil no funciona se contrae cuando le doy al menú. Como puedo solucionar este inconveniente??

    • Caribdis Diseño Web

      Hola, Leo.

      Fijate si estas instrucciones te sirven.

      Saludos.

  105. Danilo

    Hola, tengo una consulta, en realidad es un problama. hay va!!
    Al cargar la pagina la primera vez teniendo este plugins (Meta Slider) activado, se queda pegado, como cargando, para que lo haga bien debo presionar F5. Si saco el plugins carga bien. Solo tengo 3 plugins funcionando y por descarte probé que es este el del problema. Lo cambie y coloque este otro plugins CPT Bootstrap Carousel, y me ocurre exactamente el mismo problema . En herramientas del desarrollador me di cuenta que hay una imagen que no esta cargando por que no existe, esto me paso cuando hice el paso de local a remoto.
    Failed to load resource: the server responded with a status of 404 (Not Found)
    http://localhost/wordpress/wp-content/uploads/2016/07/Inicio.jpg

    como puedo sacar esa imagen al cargar?, puede ser ese el problema de que se demore al cargar?.

    Se los agradeceré un monto si me ayudan
    Gracias
    Saludos.-

    • Caribdis Diseño Web

      Hola, Danilo.

      Puede ser que ese sea el problema. Tendrías que quitar esa imagen de donde la hayas colocado originalmente y ver si se resuelve.

      Saludos.

  106. Caribdis Diseño Web

    Hola, Jesús.

    Ponele 100 al porcentaje de cada característica y pegá el siguiente código CSS:

    /* Ocultar número */
    .skill-count input {
        display: none;
    }
    /* Reemplazar número por símbolo ✓ */
    .skill-count:before {
        content: "\f00c";
        color: #fff;
        position: absolute;
        margin-left: 18px;
        margin-top: 10px;
        font-family: FontAwesome;
        font-size: 30px;
    }
    

    O bien podés reemplazar los gráficos por una imagen, tal como se indica en esta respuesta.

    Saludos.

  107. Serena

    Me acabo de dar cuenta que se me desapareció la “sección Contáctenos”, tampoco aparece cuando voy a la parte de “personalizar”, allí yo podía ocular o no las que yo quisiera, pero incluso las que había ocultado tampoco las veo mas, ni siquiera podría reactivarlas.

    Estoy usando “responsive boat”, que es un tema hijo.
    -Cómo puedo volver a poner la sección que se me perdió?

    • Caribdis Diseño Web

      Hola, Serena.

      El tema hijo ResponsiveBoat no incluye la sección de Contacto.

      Saludos.

      • jesus

        hola muchas gracias por tu ayuda de verdad muchas gracias me gustaria hacerte otra consulta como puedo cambiar en nuestro enfoque los números de los circulitos pro un chulito o solo dejarlos en blanco pero que no se desaparezcan

  108. merce

    Hola! se puede cambiar el color de fondo de la pagina principal (home) en responsive boat?? ahora es blanca y necesito que sea negra. muchas gracias.

  109. merce

    Hola!! se puede cambiar el color de la pagina principal (home) en Responsive Boat?? por defecto es blanca y me gustaría cambiarla a negro. muchas gracias

    • Caribdis Diseño Web

      Hola, Merce.

      Si te referís a los fondos de las secciones Nuestro enfoque, Nuestro equipo y Últimas noticias, tomá como referencia los códigos de esta respuesta.

      Saludos.

  110. sebastian

    buenas tarde ,como podría poner anuncios de adsense en mis entradas ?

    • Caribdis Diseño Web

      Hola, Sebastián.

      Fijate con algún plugin.

      Saludos.

  111. Carolina quiroz

    Hola, muy buen tutorial y muchas gracias por responder mis preguntas anteriores, hoy nuevamente tengo otra duda ajajajaja en la sección “nuestro enfoque” es posible agregar otro título y otro subtítulo?

    • Caribdis Diseño Web

      Hola, Carolina.

      Tendrías que crear un tema hijo, y editar el archivo /sections/our_focus.php (título y subtítulo los agregarías manualmente). Por ejemplo, a continuación del código del div con la clase row, pegar lo siguiente:

      <div class="section-header">		
      <h2 class="dark-text">Este es el otro título</h2>
      <div class="section-legend">Y este es el otro subtítulo</div>
      </div>
      

      Saludos.

    • Caribdis Diseño Web

      O algo más sencillo aún… sin usar un tema hijo. Añadir un widget de texto debajo de los widgets de Nuestro enfoque y pegar mismo código anterior en el campo Contenido.

  112. Pepe Arcos

    Buenas tardes,
    Me gustaría saber como meter el timeline de Facebook en la pagina. ¿Se puede meter código directamente?

    Gracias,

    • Caribdis Diseño Web

      Hola, Pepe.

      Podés insertar código en un widget de texto sin problemas. O podés buscar algún plugin.

      Saludos.

      • jesus

        buenos dias tengo otro problemita como hago que para cada seccion o paginas creadas no qeuden con ese fondo blanco me gustaria poder ponerle una imagen de fondo por que me han dicho que parece un periodico por lo blanco y las letras negras jajajaajaj

        • Caribdis Diseño Web

          Hola, Jesús.

          Te respondí aquí.

  113. juan

    Hola, tengo un problema cuando quiero subir la plantilla de Zerif-lite al wordpress.
    Si la subo por medio del wordpress me sale lo siguiente: “¿está seguro que quiere hacer esto?. Por favor vuelva a intentarlo”.
    Si lo intento subir por el filezilla, de subir se sube, pero cuando lo activo al abrirse la página me sale lo siguiente: “Parse error: syntax error, unexpected T_VARIABLE in /home/a3769886/public_html/wp-content/themes/zerif-lite/sections/our_focus.php on line 1”.
    Hay alguna solución?

    • Caribdis Diseño Web

      Hola, Juan.

      Por lo que deduzco de la ruta de instalación de tu WP, estás en 000Webhost (o similar). Los servidores gratuitos, tarde o temprano, siempre presentan problemas con WordPress. Mi consejo es que cambies de servidor.

      Saludos.

  114. jesus

    buenos días gracias por tu ayuda de verdad eres una gran programadora, necesito tu ayuda como hago para que un texto largo no se vea así como así que aparezca asi (ver mas…) en testimonio tengo alguien que me escribió una historia jajajajaj y quiero que los 3 testimonios estén iguales de párrafos osea que queden iguales no uno mas largo que el otro me puede ayudar con eso te lo agradecería

    • Caribdis Diseño Web

      Hola, Jesús.

      En este caso, no queda otra que editar el testimonio. El nivel de personalización del código va más allá de la ayuda que te pueda dar por aquí. Fijate si no hay algún plugin que te permita tener un control mayor sobre la presentación.

      Saludos.

  115. Eliecer

    Que tal estimados.

    Una consulta hay un parte en la pagina debajo de acerca de que dice Área de Clientes y contiene dos lineas, y allí quiero colocar pequeñas imágenes o logos de los clientes y cambiar el color de las lineas, pero quisiera que las imágenes se vallan pasando mientras el usuario las este mirando y que cuando al pasar el mouse se detenga las imágenes, es algo así como un carrusel o una marquesina, porque he visto que se van colocando en bloque y fila de 7 imágenes no se si es por el tamaño, y son como 30 pequeñas imágenes pero se apilan unas arriba de otra…. Ahora mi pregunta es se puede realizar esto con esta plantilla, no quisiera cambiarme porque de verdad que me gusta y voy muy adelantado en esto, solo me faltan detalles para colocar mi pagina en un Hosting.

    Saludos cordiales

    • Caribdis Diseño Web

      Hola, Eliecer.

      En este caso tendrías que buscar un plugin que te permita agregarlo como widget.

      Saludos.

      • Eliecer

        Muy bien agradecido por tu atención, estaré revisando y probando.

        Otra consulta en la parte de Widgets específicamente en Real del pie 1, tengo 4 widgets pero se me colocan uno debajo de otro y quisiera que se colocoran uno al lado del otro cuando los agregue, no se como hacerlo he estado viendo el css del tema padre y no encuentro esa opción, no se si esta en el responsive bien solo estoy inspeccionando el codigo del tema padre ya que no lo he tocado estoy trabajando con el tema hijo. Por favor como puedo hacer esto?

        Saludos cordiales

        • Eliecer

          Que tal ya solucione, pude lograr colocar ya los cuatro widgets de Real del pie 1 que se me vieran uno al lado del otro y no uno debajo del otro como lo trajo la plantilla, de tidas formas igual muchas gracias.. de esta manera pude colocarlo no se si existira otra forma???
          .footer-widget{
          display: flex;
          margin-top: 10px;
          justify-content: space-between;
          width: 100%;
          }

          Saludos cordiales

  116. Caribdis Diseño Web

    Cambiá los valores de color que necesites:

    #focus span:nth-child(4n+1) .focus-box .service-icon:hover,
    #focus span:nth-child(4n+1) .focus-box .service-icon:focus {
        border: 10px solid #000;
    }
    #focus span:nth-child(4n+2)  .focus-box .service-icon:hover,
    #focus span:nth-child(4n+2)  .focus-box .service-icon:focus {
        border: 10px solid #444;
    }
    #focus span:nth-child(4n+3) .focus-box .service-icon:hover,
    #focus span:nth-child(4n+3) .focus-box .service-icon:focus {
        border: 10px solid #888;
    }
    #focus span:nth-child(4n+4) .focus-box .service-icon:hover,
    #focus span:nth-child(4n+4) .focus-box .service-icon:focus {
        border: 10px solid #ccc;
    }
    
  117. Caribdis Diseño Web

    Hola, Jesmuvi.

    Cambiá los valores de color por los que necesites.

    /* Fondo semitransparente */
    .separator-one {
        background: rgba(52, 210, 147, 0.8);
    }
    /* Fondo del botón */
    .separator-one .green-btn {
        background: #666666;
    }
    /* Fondo del botón al posar el puntero */
    .separator-one .green-btn:hover {
        background: #000000;
    }
    

    Saludos.

    • Jesmuvi

      Genial! Gracias por la ayuda. También me gustaría saber como puedo colocar una imagen justo encima del texto de la cabecera (intro.tex), que suba de la misma forma que el texto cuando se hace scroll. Es eso posible?

      • Caribdis Diseño Web

        Hola, Jesmuvi.

        Podés usar código HTML en el campo del título, en el Personalizador > Sección de título grande > Contenido principal. Por ejemplo:

        <img src="http://urldelsitio.com/wp-content/uploads/imagen.jpg" alt="textoalternativo" /><br />Este es el título
        

        Saludos.

  118. jesus

    hola buenas como puedo hacer para qeu al imagenes de neustro equipo queden bien es que se ven un poco anchas me gustaria que quedaran bien en el marco mira mi pagina para que veas a qeu me refiero agrososa.com

    • Caribdis Diseño Web

      Tenés que guardar las imágenes en el tamaño exacto del contenedor, que en el caso de ResponsiveBoat es de 220×220 píxeles.

  119. jesus

    hola buenas tardes tenggo un problema con un error 404 no me deja subri imagenes a las secciones que he cerado con anteriodidad trato hacer hacer un menu colocar el boton de inicio y me manda error y no puedo colocar el plugin de cambio de idiomas por que necesito hacer algo en el menu y me bota ese error que puede ser este es el error
    Forbidden

    You don’t have permission to access /wp/wp-admin/nav-menus.php on this server.

    Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.
    Apache Server at agrososa.com Port 80

  120. Jesmuvi

    Muy buenas. Antes de nada agradecer este tutorial y tu ayuda 😉
    Me gustaría saber como se puede cambiar el color verde de la llamada de acción con el botón inferior.
    Un saludo.

  121. Ariel

    Hola Ana , muchísimas gracias por este tutorial , me vino de 10!
    Solo hay una cosa que no me queda del todo clara… yo estoy usando como base ResponsibeBoat , ese ya es un tema hijo verdad? O de todas formas tengo que hacer uno?

    • Caribdis Diseño Web

      Hola, Ariel.

      Exacto, ResponsiveBoat es un tema hijo, así que todas las ediciones que quieras hacer van en los archivos de esa carpeta.

      Saludos.

  122. Rocío

    Buenas tardes. Me gustaría saber si es posible cambiar los skills de la sección de about-us por imágenes.
    Gracias!

    • Caribdis Diseño Web

      Hola, Rocío.

      Sí es posible, pero tenés que usar un tema hijo y editar el archivo about_us.php.

      La parte de cada skill que tenés que buscar es:

      echo '<div class="skill-count">';
      echo '<input type="text" value="'.esc_attr( $zerif_aboutus_feature1_nr ).'" data-thickness=".2" class="skill1" tabindex="-1">';
      echo '</div>';
      

      Y reemplazarla por:

      echo '<div class="skill-count">';
      echo '<img src="http://urldelsitio.com/imagen.png" alt="descripcion" />';
      echo '</div>';
      

      Guardá la imagen en el tamaño real de visualización (no mayor de 64x64px).

      Saludos.

  123. Vladimir

    Hola, trabajo mis paginas de aterrizaje con instabuilder, desde que instale el tema de Zerif me ha ocurrido algo muy extraño, cuando estoy diseñando mis pag de aterrizaje el tamaño de los textos es el que quiero, pero al visualizarlo en vista previa el tamaño de la fuente me cambia se hace mas pequeña y no he podido solucionar ese inconveniente, mi pregunta es, el problema es por el tema de zerif? sabes que puede estar pasando? y cómo puedo corregirlo, mil gracias por tu colaboración

  124. jesus simanca

    buenas tardes gracias por tu gran ayuda eres muy buena en lo que haces tengo otra duda como las anteiores como hago para justificar la parte de la descrpcion en la seccion de las caracterisitcas te agradeceria mucho tu ayuda

    • jesus simanca

      bueno es la seccion NUESTRO ENFOQUE

    • Caribdis Diseño Web

      Hola, Jesús.

      Este es el código:

      .focus-box p {
          text-align: justify;
      }
      

      Saludos.

  125. younly

    Hola me animo nuevamente a solicitar su ayuda, y esta vez necesito que me faciliten el codigo para poner un color diferente a cada uno d elos circulitos que aparecen en la sección Nuestro Enfoque.
    Saludos y gracias

    • Caribdis Diseño Web

      Hola, Younly.

      Fijate en esta respuesta.

      Saludos.

      • Younly

        Hola y buenos dias, sobre mi pregunta para el color de los circulitos en nuestro enfoque, le comento que ya los tengo puesto los cuatro para que al pasar el mouse sobre ellos cambien de color, los cuatro tienen el mismo color pero lo que quiero es que al pasar el mouse por encima, cada uno cambie por un color diferente……me explico???:
        Gracias nuevamente

  126. Eliecer

    Buenas tardes estimados, tengo una consulta, estoy editando la plantilla zerif lite trabajandola sobre el tema hijo de zerif de forma local y cuando pruebo a visualizar el responsive en los diferentes navegadores, en el navegador chrome se ve bien, pero en mozilla va bien hasta que la comprimo toda y se ve una pequeña barra de scroll horizontal al final claro y lo que se mueve es solo una parte muy minima de la pagina, ahora mi pregunta es: es normal eso? o existe algo que deberia de realizar?, no he tocado el codigo del tema padre solo estoy trabajando con el tema hijo.

    • Caribdis Diseño Web

      Hola, Eliecer.

      Si ves una barra de desplazamiento horizontal es porque dentro de la página hay algún elemento que está excediendo los límites del ancho. A veces puede ser un texto muy largo sin espacios. Tendrías que inspeccionar el código para detectar cuál sería ese elemento.

      Saludos.

      • Eliecer

        Hola!! muchas gracias por la informacion, pero pude darme cuenta que solo pasa cuando estoy como administrador cuando se coloca la barra negra arriba, mientras no estoy como admin el responsive funciona bien en los navegadores y he revisado los textos las imagenes y todas estan bien…

        A demas tengo una duda agregue otros 4 botones mas los dos que ya trae por default el tema a la seccion de titulo grande para usarlos como el menu de la pagina principal y el menu TOP lo he eliminado del todo, les he dado los estilos correspondientes desde el css del tema hijo, pero hay dos botones que las letras siempre esta en roja y cuando paso el mouse se colocan en blanco, y lo que quiero es que las letras se mantengan en blanco, y si le doy clic si se coloca en blanco entonces no logro colocar esa accion que lo pude hacer para los otros dos botones. Cuando coloco el estilo de los botones que estan bien a los otros dos no toma los cambios… Por favor si me puedes indicar si existe una manera para colocar un solo estilo a estos botones.
        Saludos cordiales,

        • Eliecer

          Despues de tanto dar ya pude ubicar esta pequeña duda que estaba aqui! Luego volvere por alguna duda mas…Muy bien este tutorial me gusta mucho ya que estoy aprendiendo esto con word press…

          a {
          color: #fff;
          }
          a:visited {
          color: #fff;
          }
          a:hover,
          a:focus,
          a:active {
          color: #fff;
          }

          Saludos!

  127. roberto

    buenos dias. Tengo una pregunta importante, los dos botones del Header, el rojo y el verde. He cambiado el verde por el amarillo pero ahora cuando le hago click al amarillo, se queda azul. Y no se como arreglarlo. Gracias

    • Caribdis Diseño Web

      Hola, Roberto.

      Fijate en esta respuesta. Y recordá usar la clase correspondiente al botón amarillo (.yellow-btn).

      Saludos.

  128. jesus simanca

    hola buenas necesito cambiar de idioma a esta plantilla como puedo hacer para cambiar intente hacerlo con el plugins pero ay una parte cuando llegan a la entrada y hacen un texto cualquiera para traducirlo pero mi pagina principal no lleva esa clase de entrada es la plantilla como tal que le agregue sus datos como se hace ay para cambiar ese idioma y a las paginas que he creado y acada seccion de la platolla como tal

    • Caribdis Diseño Web

      Hola, Jesús.

      No entiendo qué es lo que estás necesitando, si ver el tema en español (ya incluye la traducción, solo tenés que configurar Español en Ajustes > Generales > Idioma del sitio), o tener un selector de idiomas (terreno de plugin).

  129. jesus simanca

    Buenos Dias, ya tengo mi pagina echa.. solo quiero hacerle algunos retoques.. como el escrito en la parte central del Quienes Somos, para que quede separado un parrafo del otro por un enter en todo momento. Tambien que quede justificado en testimonios y en la parte donde uno pone el equipo la descripcion quede justificada te agrasdeceria que me ayudaras.

    • Caribdis Diseño Web

      Hola, Jesús.

      El formato del párrafo de la sección Quiénes somos se maneja con HTML. Fijate en esta respuesta.

      Y en cuanto a justificar el texto de testimonios, el código es:

      .feedback-box .message {
          text-align: justify;
      }
      

      Saludos.

  130. Holguer

    Hola gracias por tu tiempo y por hacer tan maravilloso post.
    Tengo una pregunta como podría cambiar el elemento de carga previa es decir ese circulito que aparece cuando esta cargando la pagina, por un elemento propio como por ejemplo mi logo en movimiento. Saludos

    • Caribdis Diseño Web

      Hola, Holguer.

      Gracias por tu comentario.

      Tendrías que crear un GIF animado y subirlo a la biblioteca de medios. Luego, en la hoja de estilos del tema hijo o en el recuadro CSS adicional del Personalizador, pegás el siguiente código:

      .status {
          background-image: url("http://urldelsitio.com/wp-content/uploads/loader.gif");
      }
      

      Reemplazá la URL por la ruta completa a la imagen.

      Saludos.

  131. karina

    buen tarde. como podria cambiar el color de texto de la seccion testimonios. ya que cuando cambio el fondo las letras no se ven..y si me apoyan para como cambiar el color del fondo de nuestro enfoque y equipo…gracias

    • Caribdis Diseño Web

      En la hoja de estilos del tema hijo o en el recuadro CSS adicional del Personalizador usá los siguientes códigos (cambiando los valores de color por los que necesites):

      /* Título de Nuestro enfoque */
      .focus .dark-text {
          color: #000000;
      }
      /* Subtítulo de Nuestro enfoque */
      .focus .section-legend {
          color: #000000;
      }
      /* Título de widget Nuestro enfoque */
      .focus-box h3 {
          color: #000000;
      }
      /* Contenido de widget Nuestro enfoque */
      .focus-box p {
          color: #000000;
      }
      /* Fondo de Nuestro enfoque */
      .focus {
          background: #1990A4;
      }
      /* Fondo de Quiénes somos */
      .about-us {
          background: #1990A4;
      }
      /* Fondo de Equipo */
      .our-team {
          background: #1990A4;
      }
      /* Título de Equipo */
      .our-team .dark-text {
          color: #000000;
      }
      /* Subtítulo de Equipo */
      .our-team .section-legend {
          color: #000000;
      }
      /* Fondo de Testimonios */
      .testimonial {
          background: #1990A4;
      }
      /* Título de Testimonios */
      .testimonial .white-text {
          color: #000000;
      }
      /* Subtítulo de Testimonios */
      .testimonial .section-header .section-legend {
          color: #000000;
      }
      /* Fondo de Últimas noticias */
      .latest-news {
          background: #1990A4;
      }
      /* Título de Últimas noticias */
      .latest-news .dark-text {
          color: #000000;
      }
      /* Subtítulo de Últimas noticias */
      .latest-news .section-legend {
          color: #000000;
      }
      /* Título grande en cabecera */
      .intro-text {
          color: #000000;
      }
      
      • Juan Manuel

        Hola, buenas tardes. Copie los codigos para cambiar los colores de los fondos y los titulos, los cambios en los titulos me funcionan, pero en los fondos no, que podra ser? te pregunto ademas si es posible reemplazar esos fondos de cada seccion por una imagen, de ante mano muchas gracias. Saludos

  132. karina

    buen dia…como puedo cambiar el color a la seccion caracteristicas y equipo.. y al de las letras para que no alla contraste….

    tambien hay opcion de campiar el tipo de letra??

    gracias por su ayuda

    • Caribdis Diseño Web

      Hola, Karina.

      Para cambiar las fuentes, fijate en esta respuesta.

  133. Luis Reyes

    Buenos Dias, ya tengo mi pagina echa.. solo quiero hacerle algunos retoques.. como el escrito en la parte central del Quienes Somos, para que quede justificado en todo momento..

    • Caribdis Diseño Web

      Hola, Luis.

      El código que tendrías que agregar (en la hoja de estilos del tema hijo o en el recuadro CSS adicional del Personalizador) es:

      .about-us p {
          text-align: justify;
      }
      

      Saludos.

      • Luis Reyes

        entiendo aplique el cambio pero sigue igual! en que parte del editor del codigo debo cambiarlo.. para que quede centrado y Justificado

        • Caribdis Diseño Web

          No sé qué lío hiciste con los temas. ZBlackbeard debería ser el tema hijo, pero tiene el código de Zerif Lite y a la hoja de estilos le falta la línea Template (es como si lo estuviera tomando como tema padre). En tu caso, los cambios tienen que ir en esa hoja de estilos de ZBlackbeard y los aplicaste a la de Zerif Lite. Abrí el archivo style.css de la carpeta /zblackbeard/ y cambiá text-align: left; por text-align: justify; en la clase .about-us p.

  134. Robert

    Hola, Ana.

    Sabes que tengo insertado un plugin de Photo Gallery (Por Web Dorado) en la sección de nuestro equipo y me gustaría agregarle un marco a las imágenes, pero no sé como hacerlo, será que podrías ayudarme con eso?

    No importa si el marco es cuadrado, pero si pudiese ser redondo me ayudaría más, de verdad muchas gracias por tu apoyo, abajo te dejo la web.

    • Caribdis Diseño Web

      Hola, Robert.

      Te recomiendo el plugin Foo Gallery, que incluye la opción con marco redondo.

      • Robert

        Gracias, pero como las inserto en la sección de nuestro equipo? Porque no incluye widgets como lo hacía Photo Gallery!

        Atento a tu respuesta, agradecido!

        • Caribdis Diseño Web

          En el archivo functions.php del tema hijo agregá la siguiente línea:

          add_filter('widget_text', 'do_shortcode');
          

          Luego podrás insertar un widget de texto y pegar el código abreviado que genera el plugin. Me olvidé de decirte, también instalá el FooBox para que las fotos se abran en Lightbox. Las traducciones de los dos plugins están aquí.

          Saludos.

          • Robert

            Sé que he sido algo fastidioso, has ayudado mucho, me gustaría cambiar el color del marco circular que agregué, podrías ayudar con eso?

          • Caribdis Diseño Web

            Hola, Robert.

            No hay problema… en este caso no es lo ideal, pero el plugin no deja otra opción al cargar los estilos en el pie de página y aplicar !important al borde de las miniaturas. Lo que tendrías que hacer es abrir el archivo footer.php del tema hijo y pegar el siguiente código, justo antes del cierre de la etiqueta </body>:

            <style type="text/css">
            .foogallery-default.border-style-circle-white a, .foogallery-default.border-style-circle-white a:hover {
                border: 5px solid #555555 !important;
            }
            </style>
            

            Cambiá el valor en px del ancho y #555555 por el color que necesites.

            Saludos.

          • Robert

            Muchas gracias, ahora solo tengo 2 últimas dudas!

            1 – Es posible cambiar el tamaño del widget de Focus? Es que se ve muy pequeño en comparación con la galería

            2 – Existirá algún plugin para la edición de la web que sea tipo Word o Powerpoint?

            Muchísimas gracias, Ana.

          • Caribdis Diseño Web

            Hola, Robert.

            Para cambiar el tamaño del círculo tendrías que agregar el siguiente código:

            .focus-box .service-icon {
                width: 200px;
                height: 200px;
            }
            

            Recordá guardar las imágenes en el mismo tamaño (200x200px para este ejemplo).

            En cuanto a la segunda duda, no sé si te referís a que sea un editor visual. Dos plugins gratuitos que podrías probar son Beaver Builder o Elementor (tené en cuenta que en Zerif Lite solo te van a servir para editar páginas internas y no la página de inicio, que se controla únicamente desde el Personalizador).

            Saludos.

  135. Francisco

    Buenos dias, soy nuevo en el tema de programacion y estoy diseñando poco a poco mi pagina gracias a sus tutoriales.
    Quiero poner un video en el inicio y cambiar el fondo y me dice que tiene que ser version pro. he visto que cuesta unos 100€ pero mi duda es que pone al año. Si compreo la version basica pro puede insertar video?? y al año que hay que volver a pagar?

    • Caribdis Diseño Web

      Hola, Francisco.

      En Zerif Lite tendrías que usar un plugin. Fijate si alguno de estos te sirve: Video Background o mb.YTPlayer for background videos.

      La versión PRO tiene la característica integrada, y la suscripción es por un año (podrás seguir usando el tema, pero las futuras actualizaciones no estarán disponibles).

      Saludos.

  136. karina

    buenos dias…espero me puedan ayudar…yo manejo mi pagina localmente, pero cuando se reinstalo el servidor local,,como hago para que mis datos de mi pagina de wordpres nose pierdan y volver a tener la misma pagina y no volver a reiniciarla de cero…

    • Caribdis Diseño Web

      Hola, Karina.

      Podés exportar la base de datos de WP desde la herramienta phpMyAdmin. Y si no borraste ninguna carpeta, los archivos de medios deberían estar en su correspondiente ubicación (/wp-content/uploads/).

      Saludos.

  137. Ariel

    Buenas, tus tutoriales estan geniales, te queria consultar si es posible con este tema la suscripcion de un usuario y asignarle un perfil que otros pudieran ver, por ejemplo: un usuario x que se registro tiene un perfil a la vista de todos con todos sus datos, te agradeceria si me pudieras ayudar.. Gracias!!

  138. Miguel

    Hola Ana,
    Instale el plugin Co-Authors Plus ya que necesito que aparezca mas de un autor por post. En la edicion del post (back-end) todo funciona y puedo agregar los autores que necesito. Pero en la pagina del post publicada no se ve (front-end). Esto es algo normal segun los creadores del plugin. Para resolver esto, dicen que hay que modificar tags en el codigo del template que uno tengo instalado.
    Probe cambiando varios archivos pero no logre que aparecieran los multiples autores…
    Este es el link del autor con lo que habria que cambiar…
    https://vip.wordpress.com/documentation/incorporate-co-authors-plus-template-tags-into-your-theme/

    Espero tu amable ayuda. Gracias.

    • Caribdis Diseño Web

      Hola, Miguel.

      Por lo que vi en el enlace, el código hay que agregarlo en functions.php. Pero te sugiero que lo plantees al soporte del plugin para que te orienten mejor.

      Saludos.

  139. Juan

    Hola, ¿como puedo hacer para que en la versión de mi pagina con Zerif lite para los celulares se vea de igual forma que en los computadores y no salgan las ultimas entradas?

    • Caribdis Diseño Web

      Hola, Juan.

      Fijate en esta respuesta.

      Saludos.

  140. Josue Segura

    Hola,me podrías ayudar, en el tema cuando pasas el cursor por botones de la pagina principal cambia de color a rojo, quisiera saber si hay alguna forma de que en vez de que cambie a rojo cambie a azul.

    • Caribdis Diseño Web

      Hola, Josué.

      El código que tendrías que usar es el siguiente:

      /* Botón rojo */
      .red-btn:hover {
          background: #0000FF;
      }
      /* Botón Verde */
      .green-btn:hover {
          background: #0000FF;
      }
      

      Cambiá #0000FF por el valor de color que necesites.

      Saludos.

  141. Robert

    Feliz tarde, me gustaría agregarle a mi página una opción para cambio de idioma, específicamente inglés, podrían ayudarme con eso? Gracias por su ayuda, son excelentes!

    • Caribdis Diseño Web

      Hola, Robert.

      Este tutorial es para usar traducciones manuales. Para traducciones automáticas, un plugin como Google Language Translator podría servirte.

      Saludos.

  142. Alejandro

    Hola, una consulta… se puede usar Contact Form 7 en zerife lite?, por que el formulario de contacto que viene por default no me es amigable. O si hay alguna manera de agregarle campos y ponerlo en español.

    Muchas Gracias.

    Saludos.

    • Caribdis Diseño Web

      Hola, Alejandro.

      Sí es posible usar Contact Form 7, pero hay que seguir una serie de pasos para integrarlo en el tema y que quede acorde al diseño. En una próxima entrada voy a publicar el tutorial correspondiente.

      Saludos.

  143. Alejandro

    Hola, esta muy bueno el tutorial, queria consultarte por que el tema se instalo en ingeles y queria saber si en el formulario de contacto se puede pasar a español en ves de que diga “Your Name” dijera “Nombre”.
    he usado en otras plantillas el CF7 y me resulto muy simple.
    hay alguna forma de modificarlo?
    te dejo mi web: www.bgpsoluciones.com.ar

    Muchas Gracias.

    • Caribdis Diseño Web

      Hola, Alejandro.

      Si no instalaste el plugin Pirate Forms, instalalo. Luego de activarlo, ya deberías poder ver los campos en español. Si no, vas a Ajustes > Pirate Forms > Fields Labels y allí podés escribir los textos de las etiquetas. Igual podés descargar la traducción el plugin en esta misma entrada.

      Saludos.

  144. Anthony Urbina

    como puedo cambiar el estilo de letra del menú principal? Gracias

    • Caribdis Diseño Web

      Hola, Anthony.

      Fijate en esta respuesta o esta otra.

      El código correspondiente al menú sería:

      #site-navigation {
          font-family: 'Open Sans';
      }
      

      Saludos.

  145. Nicasio

    Hola, como estas? Me gustaria saber si puedo poner en una pagina nueva de contacto el formulario de contacto por que he tratado y no puedo.

    Muchas gracias excelente todos los tutoriales.

    • Caribdis Diseño Web

      Hola, Nicasio.

      Gracias por comentar. Tenés que instalar y activar Pirate Forms, crear una página nueva y pegar el código abreviado dentro del contenido. Guardá la página y listo.

      Saludos.

  146. Carol

    Hola, como agrego un video que se muestre en la página de inicio en la sección ¨ultimas noticias¨ que seria el blog, pero no un enlace sino que se vea el video en la pagina. Muchas gracias!

    • Caribdis Diseño Web

      Hola, Carol.

      Si es un video de YouTube, tendrías que incluir el iframe en la plantilla latest_news.php del tema hijo, pero depende de dónde quieras mostrarlo (arriba o abajo de las entradas, o reemplazándolas).

  147. Robert

    Saludos, quería saber si me pueden ayudar, en el área de QUIÉNES SOMOS me gustaría agregar una imagen abajo de las letras del costado izquierdo, habrá forma de hacerlo? Gracias!

    • Caribdis Diseño Web

      Hola, Robert.

      Tendrías que usar código HTML para la imagen dentro del campo Contenido principal > Título grande del lado izquierdo, que quedaría algo así:

      Título <img src="http://sitio.web/wp-content/uploads/foto.jpg" alt="textoalt" />

      Saludos.

  148. Alberto

    Hola Ana! Estoy casi terminando la web y tenía otra duda…
    En Zerif Lite (versión gratuita) estoy intentando utilizar una página (sample page) para hacer una descripción de servicios de mi empresa y solo quiero montar texto y alguna foto y enlace url externo.
    Mi pregunta es, cómo puedo “eliminar” o desaparecer las opciones de buscar, archivo y meta?? para que solo quede el texto explicativo y las imágenes.
    O quizás otra opción….que no se me ocurre! Estoy dando mis primeros pasos en WordPress
    Muchas Gracias!!

    • Caribdis Diseño Web

      Hola, Alberto.

      Al momento de crear o editar la página, en el panel Atributos de página seleccioná del menú desplegable Plantilla la opción Full Width Page. Eso sería todo.

      Te recomiendo la Guía WP Fácil, que es un buen material de referencia para los que recién están empezando a usar WordPress.

      Saludos.

      • alberto

        Mil gracias!! Anoto la guía 🙂

  149. Robert

    Saludos, necesito de su ayuda, en la parte de TEAM coloqué un widget de galería, pero resulta que no le puedo cambiar el color de la fuente a la galería porque también se lo cambia al input de CONTACTO, quisiera saber si me pueden suministrar un código que me cambie el color de la fuente de las galerías únicamente, igual les dejo la web para que vean.

    Agradecido, ayudan mucho

    • Caribdis Diseño Web

      Hola, Robert.

      El código sería el siguiente:

      #team h2 {
          color: #ffffff;
      }
      

      Reemplazá #ffffff por el valor de color que necesites.

      Saludos.

  150. Alberto

    Buenas! Estoy montando una página web para mi empresa y nos decidimos por utilizar Zerif Lite en su versión gratuita. Casi todo terminado a excepción de algunos textos, en el apartado de “¿Quienes Somos?” en la descripción…no me respeta los puntos y aparte ni los espacios entre párrafos…le he dado varias vueltas y no sé…

    Gracias!!

    • Caribdis Diseño Web

      Hola, Alberto.

      Fijate en esta respuesta.

      Saludos.

      • alberto

        Muchas gracias Ana, funcionó a la perfección!

  151. Francisco Bastidas

    Hola Ana como estas, saludos desde Venezuela, sabes que a pesar de que coloco mi correo en la sección de comentarios, no me llega ninguno, pudieras ayudarme gracias de antemano

    • Caribdis Diseño Web

      Hola, Francisco.

      Gracias por comentar. Los problemas con la recepción de correos por lo general se deben a que en el servidor no está activada la funcion mail. Fijate de seguir estos pasos.

      Saludos.

  152. Diade Salamanca

    Hola,
    Será que me puedes ayudar indicandome como hago un slider horizontal en la sección de testimonios de la plantilla Zerif Lite. Muchas gracias de antemano.

    • Caribdis Diseño Web

      Hola, Diade.

      No es posible con los widgets de este tema. Tendrías buscar un plugin de testimonios con ese estilo que te permita agregarlos como widget, o en su defecto genere un código abreviado que puedas incluir en la plantilla /sections/testimonials.php del tema hijo con un do_shortcode.

      Saludos.

  153. Miguel

    Hola Ana,
    Tengo instalado el tema hijo Zerius.
    Cuando uso la función Buscar (haciendo click en el icono de la lupa) de mi home page aparece la barra roja de búsqueda para escribir el texto a buscar pero sale Search… y el boton para buscar dice SEARCH (ambos en ingles).
    Acabo de actualizar los archivos de idioma zerif-lite-es_ES.mo y zerif-lite-es_ES.po de tu sitio pero no hubo cambios.
    Instale Loco translate pero no veo nada con el string search para traducir.
    Alguna sugerencia ? Te paso el link del screenshot http://goo.gl/rBpO7Q

    Gracias.

    • Caribdis Diseño Web

      Hola, Miguel.

      En este caso, te conviene abrir el archivo header.php y editarlo directamente. Zerius también tiene una carpeta /languages/ donde iría la traducción, pero en el código esa cadena específica apunta al dominio de texto de Zerif Lite. 🙁

      • Miguel

        Excelente !!! Gracias a tu consejo modificando el header.php cambié el string de texto y ahora aparece buscar en vez de “Search”, espero no encontrar màs ingleses en mi sitio jajaja

        Saludos desde Milan 😀

      • Miguel

        No creo que esté relacionado con el cambio, ya que era solo texto para la traduccion. Pero la search bar desde celulares aparece traducida pero al escribir un texto para inciar la busqueda, luego de apretar el boton “BUSCAR” no se activa la busqueda…. Sitio: http://academia-inmuebles.com/

        Alguna idea?

        • Caribdis Diseño Web

          Hola, Miguel.

          Lo probé en Android y funciona. Para comparar, fijate en la demo.

          Saludos.

          • Miguel

            Hola Ana,
            Parece que el problema es mi celular HTC con android. Tampoco funciona la busqueda del template original. De iphone funciona…
            Paciencia…

  154. Ana

    Buenas tardes, me esta siendo de gran ayuda su pagina, felicidades.
    En los widget de testimonios, cuando escribes algo en autor, luego enla pagina se puede pulsar sobre el y se abre un enlace. El problema es que se sale de mi pagina. ME gustaria saber si es posible que se abriese otra pagina nueva y asi la mia no se cerrara.
    saludos

    • Caribdis Diseño Web

      Hola, Ana.

      Gracias por tu comentario.

      Fijate en esta respuesta; es el mismo código y solo reemplazarías '.service-icon a' por '.client-name a'.

      Saludos.

  155. Younly

    Hola, necesito nuevamente de su ayuda……..en la seccion de nuestro enfoque, que en mi web lleva otro nombre y otro contenido…en uno de sus widget me gustaria agregar una x cantidad de resoluciones que serian mas de 10…..para que esten organizadas y ubicadas todas en el mismo lugar y orden me gustaría agregarlas a una tabla de 4 columnas de la siguiente manera….en la 1ra columna el nombre de la resolucion, en la 2da el organismo que la emitio, en la tercera el año en que fue publicada y en la cuarta la palabra descarga que me lleve a la resolucion como tal para que el usuario la lea o la descargue si lo desea…..de que manera pudiera lograr esto???….espero me hayan entendido…gracias

    • Caribdis Diseño Web

      Hola, Younly.

      Para eso tendrías que usar tablas. Fijate si estos plugins te sirven (agregarías un widget Editor visual con una tabla creada con las opciones avanzadas). Si no, algo más específico, como TablePress.

      Saludos.

  156. Francisco

    Hola nuevamente tengo una duda ,como puedo renombrar las secciones es decir #aboutus cambiarlo por ejemplo por #nosotros Gracias

    • Caribdis Diseño Web

      Hola, Francisco.

      Existe un tutorial para eso. 😉

      Saludos.

  157. Ramiro Esteban

    Hola, he estado trabajando Zerif Lite de forma local con MAMP, he utilizado el plugin Foogallery para incluir una galería de fotos en una de las secciones por defecto del tema “Nuestro Enfoque”, he eliminado todos los widgets activados por defecto de la sección y he incluido un widget de texto donde escribo el shortcode de foogallery… Esto en local funciona perfectamente pero en linea no aparece la galería de ninguna forma, solo se visualiza el shortcode dentro de la sección. Me he puesto en contacto con el soporte de mi hosting, han estado probando diferentes versiones de php en el directorio pero no han encontrado ninguna solución, me comunican que hable con un desarrollador para solucionarlo. Cuando subí todos los archivos locales con Filezilla ya tuve problemas con un error de sintaxis… Tuve que empezar de 0 con el autoinstalador de mi hosting y ahora tengo este error con la galería…¿Hay alguna forma de resolverlo?

    • Caribdis Diseño Web

      Hola, Ramiro.

      Zerif no tiene activado el filtro para ejecutar códigos abreviados desde el widget de texto. Lo que tendrías que hacer es crear un tema hijo y en el archivo functions.php incluir la siguiente línea:

      add_filter('widget_text', 'do_shortcode');
      

      Y lo del error de sintaxis es algo que he visto con frecuencia en algunos servidores (los gratuitos, especialmente) cuando se suben los archivos vía FTP. En este caso, hay que instalar el tema desde Apariencia > Temas > Añadir nuevo. El tema hijo podés crearlo en local y comprimirlo en un ZIP para subirlo con el mismo método.

      Espero que te sirva.

      Saludos.

  158. Vladimir

    Hola, realmente te felicito, son muy útiles tus sugerencias y consejos, tengo una inquietud con relación a la sección de “contáctenos”, en las pruebas que he hecho cunado ingreso nombre, correo, asunto y comentario y le doy enviar, sale el agradecimiento “su correo fue enviado con éxito”, pero no se borró ni el nombre, correo, asunto y el comentario, es decir la gente debe borrar si desea enviar otro mensaje? no borrar automáticamente? mil gracias por tu ayuda

    • Caribdis Diseño Web

      Hola, Vladimir.

      Gracias por tu comentario.

      No debería ocurrir así. ¿Está activado el plugin Pirate Forms? Fijate también que no sea otro plugin el que está causando un conflicto.

      Saludos.

  159. jorge

    Hola me sale este error en la web

    Parse error: syntax error, unexpected ‘function’ (T_FUNCTION) in /home/hotelsmy/public_html/wp-content/themes/zerif-lite/inc/jetpack.php on line 1

    • Caribdis Diseño Web

      Hola, Jorge.

      Respondido aquí.

      Saludos.

  160. Carla Diaz

    Oye yo tengo un problema con lo de PirateForms, osea el formulario de contacto, los mensaje no me llegan a mi correo no se que onda!

    Si me pudieras ayudar te lo agradecería mucho 🙂

    • Caribdis Diseño Web

      Hola, Carla.

      Puede deberse a diversos factores. Fijate siguiendo estos pasos.

      Saludos.

  161. Miguel

    Hola Ana,
    Estoy usando resúmenes (excerpt) en todos mis posts para tener mayor control de las publicaciones y meta description para google y Facebook. Pero ahora no aparecen mas los famosos 3 puntos […] para leer el post completo, en la pagina del blog ( http://academia-inmuebles.com/blog/ ) ni tampoco en la seccion “Ultimas novedades” ( http://academia-inmuebles.com/#latestnews ).
    Como se hace para agregar a todo el texto del resumen un hyperlink al post completo, así como lo tienen el titulo y la foto de cada post.
    Gracias.

    • Caribdis Diseño Web

      Hola, Miguel.

      Al activar los extractos manuales, Zerif suprime el enlace “Leer más”. Lo que tendrías que hacer es, en el archivo functions.php de Zerius, pegar el siguiente código:

      function remove_zerif_filter() {
          remove_filter('excerpt_more', 'zerif_excerpt_more');
      }
      add_action( 'after_setup_theme', 'remove_zerif_filter' );
      function zerifchild_excerpt_read_more_link( $output ) {
          global $post;
          return $output . ' <a href="' . get_permalink( $post->ID ) . '" class="more-link" title="Leer más">Leer más</a>';
      }
      add_filter( 'the_excerpt', 'zerifchild_excerpt_read_more_link' );
      

      Podés reemplazar el texto Leer más por el que prefieras.

      Saludos.

      • Miguel

        Hola Ana,
        Funciona lo que recomiendas, pero lo que necesitaba era que el hyperlink no esté en el texto “Leer Más” sino en todo el texto del resumen del post. Que parte del código habría que modificar?

        Gracias de nuevo por tu preciosa ayuda.

        • Caribdis Diseño Web

          Hola, Miguel.

          OK, en ese caso, borrá el código de functions.php y copiá el archivo /sections/latest_news.php de Zerif a Zerius.

          Luego reemlpazá las dos instancias de este código:

          $ismore = @strpos( $post->post_content, '');
          	if($ismore) {
          	the_content( sprintf( esc_html__('[...]','zerif-lite'), '<span class="screen-reader-text">'.esc_html__('about ', 'zerif-lite').get_the_title().'</span>' ) );
          	} else {
          	the_excerpt();
          	}
          

          Por este:

          echo '<a href="' . get_permalink() . '">';  the_excerpt();  echo '</a>';
          

          Fijate si te sirve.

          • Miguel

            Con este ultimo código se genero un hyperlink en el texto del resumen de la sección ultimas noticias (http://academia-inmuebles.com/#latestnews) Pero parece que no hay ningún link a ojos del lector ya que pasando el mouse por encima del texto del resumen no cambia de color el texto.
            Se puede agregar esto?

            Pero en la pagina /blog/ no hay links a ningún lado…

            Gracias….

          • Caribdis Diseño Web

            El color tendrías que manejarlo con la clase .latesnews-content p, y la parte del blog reemplazando igual código que el anterior en el archivo content.php. Pero revisándolo bien, mi consejo es que no uses este método, ya que es semánticamente erróneo. Un extracto no está diseñado para funcionar como enlace. La manera correcta sería la del código en functions.php y que cada parte cumpla su debida función: miniatura y título con enlace, extracto únicamente de texto y enlace “leer más”.

  162. Erick

    Hola como siempre muy feliz de como me esta quedando mi sitio web http://yourdivine.live/ gracias a tu ayuda

    Tengo dos pregunta como puedo agregarle el botón arriba a mi pagina y la opción de compartir es agradecer que tiene aqui me gustaria tenerlo.

    • Caribdis Diseño Web

      Hola, Erick.

      Para el botón arriba, podés usar algún plugin gratuito.

      El plugin de redes sociales que uso en este sitio es Monarch, de Elegant Themes. Pero podrías buscar en el repositorio alguno con la etiqueta social share.

      Saludos.

      • Erick

        wow como siempre mil gracias sos Grande!!

        bendiciones

  163. Alberto

    Buenas, lo primero felicitarte por tu blog y tú ayuda. Lo segundo, a ver si puedes ayudarme. Uso el tema Responsive Boat, un hijo del Zerif Lite, y estoy intentando encontrar donde se define la altura de la sección Big Title. Me coge un tamaño de 768, que hace que al abrir la página se vea todo el fondo, pero me gustaría poder hacerla más pequeña, que fuera solo un texto y los botones, pero no localizo donde poder cambiar la altura de esta sección.

    • Caribdis Diseño Web

      Hola, Alberto.

      En el archivo style.css, tendrías que editar los valores de relleno en las siguientes clases:

      .header-content-wrap {
          padding: 10% 0px 290px;
      }
      .rb_logo {
          padding-bottom: 190px;
      }
      

      Saludos.

  164. Diego soler

    Buenos dias, eres de gran ayuda, te mereces lo mejor. Mi duda es si en NUESTRO ENFOQUE, al pusar sobre los circulos se abre la URL que previamente he configurado. ¿es posible que esta URL se abra en una nueva pestaña?actualmente se sale de mi pagina

    • Caribdis Diseño Web

      Hola, Diego.

      Gracias por tu comentario.

      Tendrías que insertar un pequeño código de JavaScript. Esto podés hacerlo en el archivo footer.php del tema hijo (pegarlo justo entre las etiquetas <?php wp_footer(); ?> y </body>), o bien usando un plugin que te permita insertar JS en el pie de página. En esta entrada hay dos recomendados.

      El código sería el siguiente:

      <script type="text/javascript">
      jQuery(document).ready(function(){
      jQuery('.service-icon a').attr('target','_blank');
      });
      </script>
      

      Saludos.

  165. Danilo

    Hola Muchas Gracias por lo que entregan, tengo un problema trabaje en local con el template y todo bien y cuando lo subo a un servidor remoto que compre me arroja errores no se si ustedes me podrán ayudar, ya que en local funciona todo bien y acá no, este es el error.

    Parse error: syntax error, unexpected ‘function’ (T_FUNCTION) in /home/camavicc/public_html/wp-content/themes/zerif-lite/inc/jetpack.php on line 1

    Gracias.
    Saludo.-

    • Caribdis Diseño Web

      Hola, Danilo.

      Ese error suele ocurrir cuando se suben los archivos por FTP. Borrá la carpeta /zerif-lite/ del servidor e intentá instalar el tema desde WP, Apariencia > Temas > Añadir nuevo.

      Saludos.

  166. Joaquin

    hola, yo tengo un problema, ya que al seleccionar el tema desde wordpress o al subirlo desde mi compu, no me queda la pagina como la demo. Hay un archivo demo content para poder importar y que quede igual a la demo? Gracias.

    • Caribdis Diseño Web

      Hola, Joaquín.

      Si lo instalás de 0 debería mostrar los widgets igual que en la demo. El contenido de muestra podés descargarlo de aquí, pero tené en cuenta que son solo las páginas y entradas.

      Saludos.

  167. Robert

    Saludos! Quisiera saber como hacerle el cambio de color a la fuente de últimas noticias que no logro dar con el código, muchísimas gracias!

    • Caribdis Diseño Web

      Hola, Robert.

      El código es el siguiente:

      .latesnews-content p {
          color: #000000;
      }
      

      Cambiá #000000 por el valor de color que necesites.

      Saludos.

      • robert

        Muchas gracias, pero el título de las entradas en Noticias sigue estando del mismo color, sabrán como puedo cambiarlo? Disculpen el abuso, atento a sus comentarios.

        • Caribdis Diseño Web

          El código sería:

          #carousel-homepage-latestnews .carousel-inner .item .latestnews-title a {
              color: #000000;
          }
          
  168. Caribdis Diseño Web

    Hola, José Antonio.

    Gracias por tu comentario. Tendrías que pegar el siguiente código en style.css:

    #focus span:nth-child(4n+1) .focus-box .service-icon,
    #focus span:nth-child(4n+2) .focus-box .service-icon,
    #focus span:nth-child(4n+3) .focus-box .service-icon,
    #focus span:nth-child(4n+4) .focus-box .service-icon {
        border: 10px solid #000000;
    }
    

    Cambiá #000000 por el valor de color que necesites.

    Saludos.

    • Ana Mari

      Buenos dias, cada dia mas sorprendida con sus conocimientos. Espero que mi pregunta no sea muy complicada. En el apartado de equipo, cuando pasas el ratón encima de las fotos, aparece un menu desplegable negro con la información. En otro tema he visto que sale con color y medio trasparente. Sabes que codigo tengo que poner para que se vea medio trasparente y cambiar el color.
      un saludo

      • Caribdis Diseño Web

        Hola, Ana Mari.

        Gracias por tu comentario. 🙂

        El código sería el siguiente:

        .team-member:hover .details {
            background: rgba(25,144,164,.7);
        }
        

        Donde 25,144,164 es el valor de color RGB y .7 el nivel de transparencia (valores decimales entre 0 y 1).

        Espero que te sirva.

        Saludos.

        • jesus simanca

          una duda en ese misma seccion como puedo hacer para que me quede justificado esa descripcion del equipo

          • Caribdis Diseño Web
            .team-member:hover .details {
                text-align: justify;
            }
            
        • jesus simanca

          muchas gracias por tu ayuda me he quedado sorprendido por tus conocimeintos en este tema de verdad muchas gracias aunque no sera la ultima que te moleste jajajajajaaj

  169. Mar Padrón

    Buenos días desde Málaga. Otra vez recurriendo a ti, Ana, que eres una enciclopedia. Resulta que hemos usado la plantilla Zerif Lite para nuestro sitio http://byhschool.com

    El asunto es que no doy con la clave de cómo hacer que en las entradas de la sección “Últimas noticias” (que en nuestra web se llama “BYH World”) aparezca la autoría de la entrada (autor o autora). Sólo consigo que aparezca la fecha de publicación.

    Podrías ayudarme? Mil gracias de nuevo. Un abrazo internáutico 😉

    • Caribdis Diseño Web

      Hola, Mar.

      En el archivo custom.css del tema hijo, o en el recuadro CSS adicional del Personalizador pegá el siguiente código:

      .byline {
          display: initial !important;
      }
      

      Saludos. 🙂

      • Mar Padrón

        Mil graciaaaaassss! No sé qué haríamos sin ti. Es increíble todo lo que sabes. Un abrazo.

  170. Jose Antonio

    Buenos dias, primero felicitarle por la pagina, es de gran ayuda. Tengo el tema zerif y he activado en nuestro enfoque que los circulos al pasar el ratón por encima se le cambie el color (gracias a este blog porque venía desabilitado)
    Me salen 4 colors diferentes. ¿sabes donde se puede cambiar el color para que todos los circulos tengan el mismo?
    un saludo

  171. Miguel

    Tengo instalado el tema hijo Zerius. Intento traducir el texto “This entry was posted in Categoria. Bookmark the permalink.” que aparece al final de cada post publicado haciendolo desde el archivo que copie desde el tema padre Zerif-Lite en /wp-content/themes/zerius/content-single.php
    Cualquier cambio que haga aunque sea solo de un carácter al salvarlo y subirlo al server al actualizar la pagina de cualquier post me da un error de codigo.
    Instale Loco Translate y Polylang pero veo que este archivo no lo muestra para traducir.
    Alguna solución alternativa?
    Gracias.

    • Caribdis Diseño Web

      Hola, Miguel.

      Probá descargando la traducción que figura en esta entrada. Tenés que colocar el archivo zerif-lite-es_ES.mo en la carpeta /wp-content/languages/themes/.

      Saludos.

  172. Caribdis Diseño Web

    Hola, Paco.

    Gracias por tu comentario. Para usar una fuente de Google, fijate en esta respuesta. Si necesitás usar una fuente TTF o similar, tendrías que subirla a una carpeta de tu sitio (cualquiera, siempre que sea pública) y luego usar el siguiente código en la hoja de estilos:

    @font-face {
    	font-family: NombredeFuente;
    	src: url(http://urldetusitio.com/ruta-completa/fuente/NombredeFuente.ttf);  
    	font-weight: normal;  
    }
    

    No te olvides de agregarla a los elementos donde quieras aplicar esa fuente. Por ejemplo:

    p {
        font-family: NombredeFuente;
    }
    

    Saludos.

    • Paco

      De acuerdo, muchísimas gracias por tu respuesta, es de gran ayuda.
      Un gran saludo

  173. Caribdis Diseño Web

    Hola, Fran.

    Gracias por tu comentario.

    Tendrías que pegar el siguiente código en la hoja de estilos del tema hijo o en el recuadro CSS adicional del Personalizador:

    .navbar {
        background: #1990A4;
    }
    

    Reemplazá #1990A4 por el valor de color que necesites. Para más información sobre crear un tema hijo podés ver esta entrada.

    Saludos.

    • jesus

      buena tengo un problema igual con el logo quisiera que no tuviera el fondo blanco si no transparte y solo se vieran las letras o el ogo comotal sin fondo como me podrias ayudar con eso te lo agradeceria mucho

      • Caribdis Diseño Web
        .navbar {
            background: transparent;
        }
        
        • jesus

          Funciono pero las seccion o el menu tambien se volvieron trasnparente como hago para que tenga un color por qeu no se ven

          • Caribdis Diseño Web

            No entiendo bien qué necesitás que sea transparente. No veo ningún logo.

          • jesus

            el logo si esta pero en la pagina principal desaparece tienes que entrar a una pagina del menu y aparece la verdad no entiendo por que se quita

          • Caribdis Diseño Web

            OK, ahora entiendo. El código que te pasé borralo. Lo que tenés que hacer es guardar la imagen en PNG transparente. En este momento es un JPG con fondo blanco.

  174. Fran

    Muy buenas y enhorabuena por el trabajo, es de gran ayuda para los novatos como yo! Estoy creando la página web y me encuentro el primer problema en la cabecera, ya que el fondo de mi LOGO empresarial es de color amarillo, mientras que el fondo del resto de la cabecera es blanco y queda muy antiestético, ¿habría alguna manera de sustituir el blanco por el color de fondo de mi logo para que quede todo uniforme? conozco el código del color que necesito, pero no se en dónde debo escribirlo en el Editor.

    Muchas gracias por adelantado

  175. Jester Amaro

    Hola quisiera saber si se le puede colocar un contador de visitas?

    • Caribdis Diseño Web

      Hola, Jester.

      Sí, seguro, nada más tendrás que instalar algún plugin.

      Saludos.

      • Jester Amaro

        Hola Gracias por la respuesta, ya instale el plugin WP-PostViews pero no me sale nada tendría que realizar alguna configuración en la edición del plugin?

        • Caribdis Diseño Web

          Hola, Jester.

          Ese plugin es para mostrar las visitas a las entradas (como otro elemento de información meta). Tendrías que usar uno que te permita insertar el contador en el pie de página o como widget.

          • Jester Amaro

            Ok gracias pero cual plugin me sirve para insertar en pie de Pagina o como widget a este tema?

  176. Francisco Javier

    Hola gracias por tu dedicación,estoy usando un tema como One Pirate ,tema hijo,necesito un poco mas de espacio para el logo corporativo pero no lo consigo,espero puedas ayudarme gracias.

    • Caribdis Diseño Web

      Hola, Francisco.

      Probá con el siguiente código.

      .navbar-brand {
          height: 120px !important;
      }
      .navbar-brand > img{
          max-height: 100px !important;
      }
      

      Modificá los valores de altura de acuerdo con el tamaño de la imagen, pero tené en cuenta que si sobrepasa el límite del ancho (que depende de la cantidad de elementos que tengas en el menú), quedará centrada y arriba del menú (no a la izquierda).

      Espero que te sirva.

      Saludos.

    • Francisco Javier

      Gracias ha salido todo bien,voy a ver como cambiar el color de los botones y me interesa cambiar el color de la sección testimonios,uso un plugins como simple css. Gracias

      • Caribdis Diseño Web

        Hola, Francisco.

        Ya que estás usando un tema hijo, conviene editar los estilos en la hoja style.css, de lo contrario estarás redefiniendo clases dos veces (esto en un punto afecta el tiempo de carga de la página). Las propiedades que tendrías que modificar son los background, de las clases .red-btn, .green-btn y .testimonial.

        Saludos.

  177. Maria Avila

    Hola! Quisiera que me ayudaran con dos cositas:

    1. No logro subir ninguna imagen al widget de “our focus” ni al de “our clients”, ya tengo la página casi lista pero no se como resolver lo de esas imágenes que no se suben.

    2. Como hago para cambiar el color del texto de la sección “about us” y como hacer para que me respete los enter.

    Muchas gracias de antemano!

    • Caribdis Diseño Web

      Hola, María.

      En cuanto a la primera pregunta, probá desde Apariencia > Widgets (no desde el Personalizador). Si sigue sin funcionar, fijate de desactivar plugins que pudieran estar ocasionando algún conflicto.

      Y en cuanto a la segunda, las respuestas están aquí y aquí.

      Saludos.

      • María Avila

        Hola de nuevo! Muchas gracias por su ayuda! Logre con éxito cambiar el color del texto y que acepte los enter pero aún no logro que se suban las imágenes a “our focus” y “our clients” probe desde apariencia y desactive los plugins que pensé que podrían estar causando problemas pero nada. 🙁

        • Caribdis Diseño Web

          ¿Estás usando las últimas versiones de WP y del tema? Si es así, probá limpiando historial y cookies del navegador y volvé a iniciar sesión. Como última alternativa, reinstalá WP y el tema.

  178. Sara

    ¡Hola! En primer lugar, muchísimas gracias por este tutorial, es de grandísima utilidad.
    Me gustaría cambiar la etiqueta “Nuestros clientes” del widget perteneciente a la sección “About us” por otro nombre. Muchas gracias y enhorabuena por tu trabajo.

    • Caribdis Diseño Web

      Hola, Sara.

      Gracias por comentar.

      Está respondido aquí.

      Saludos.

  179. diego

    Hola una pregunta rápida, cual es el precio para “pro”
    Muchas Gracias.

    • Caribdis Diseño Web

      Hola, Diego.

      El precio es de $99 e incluye acceso a todos los temas.

      Saludos.

  180. jafet figueroa

    hola:

    soy novato en esto, instalé el theme y me puse personalizar la página que viene por defecto de inicio.
    terminé pero, al momento que quiero agregarla al menú no me aparece como página si no como enlace personalizado o algo así. Yo quisiera tenerla como una página de inicio por que estoy creando un blog.

    no se si me explico bien…

    • Caribdis Diseño Web

      Hola, Jafet.

      Gracias por tu comentario. Ya lo hablamos por Facebook. 🙂

      Saludos.

  181. Andrés Ortega

    Hola, muy bueno el turorial.

    Tengo una duda de como ver en la sección de contactanos, los campos en español, ya que me aparece Your name, your mail, etc.

    • Caribdis Diseño Web

      Hola, Andrés.

      Si no instalaste el plugin Pirate Forms, instalalo. Luego de activarlo, ya deberías poder ver los campos en español. Si no, vas a Ajustes > Pirate Forms > Fields Labels y allí podés escribir los textos de las etiquetas.

      Espero que te sirva.

      Saludos.

  182. carolina

    Hola, gracias nuevamente por responder todas mis dudas 🙂
    tengo otra consulta, como le puedo cambiar el color al botón del formulario de contacto?

    Saludos

    • Caribdis Diseño Web

      Hola, Carolina.

      Este es el código que deberás usar:

      .pirate_forms .pirate-forms-submit-button {
          background: #000000;
      }
      

      Reemplazá #000000 por el valor de color que necesites.

      Saludos.

  183. Neomar Blanco

    Buenos días, de antemano muchas gracias por tu atención… Soy nuevo en wp, sin embargo ya ando haciendo varias paginas con el tema zerif lite, cree un tema hijo y aplico las modificaciones en el… Ahora quiero cambiar el orden de las secciones, ejemplo: primera sección titulo grande, segunda feactures, una de las ultimas es noticias; lo que quiero haces es poner la sección noticias después del titulo grande… Revisando el tema observo que esa opción se habilita con la versión pro, pero modificando algún archivo del proyecto no se podrá cambiar ese orden en la versión gratis?

    • Caribdis Diseño Web

      Hola, Neomar.

      Gracias por tu comentario. Sí, es posible, editando el archivo front-page.php (moviendo el código correspondiente a /* LATEST NEWS */ arriba de /* OUR FOCUS SECTION */).

      Para más información podés revisar esta entrada.

      Saludos.

      • Neomar Blanco

        Muchisimas gracias, ya había encontrado el archivo a modificar y probé y funciono bien

  184. José

    Hola, antes que nada agradecer tu tiempo y dedicación para responder nuestras dudas y problemas. Quería preguntarte, si no es molestia, qué debo hacer para actualizar los cambios que hice en el tema y se repliquen en la web. Hice varios y funcionó ok. Pero los nuevo, no se replican al dominio. Sabés por qué debe ser? Muchas gracias! José

    • Caribdis Diseño Web

      Hola, José.

      Te está sucediendo lo mismo que a este usuario. Tenés que actualizar las URL al dominio principal en la base de datos. Si necesitás ayuda para esto, contactame.

      Saludos.

  185. carolina

    Hola, gracias por responderme anteriormente, me sirvio mucho 🙂 tengo otra consulta, como puedo quitar el texto “Zerif Lite funciona con WordPress” del footer? Saludos

    • Caribdis Diseño Web

      Hola, Carolina.

      De nada. 🙂 Para tu otra consulta, aquí está la respuesta (casi al final).

      Saludos.

  186. Angelo

    Acabo de darme cuenta que al subir una imagen a una entrada muy grande cuadrada, sí logra ocupar todo el ancho del post. Sin embargo si esa misma imagen la recorto arriba o abajo para que sea más rectangular (manteniendo el mismo ancho) al momento de subir la imagen al post, wordpress la centra pero la minimiza, y aparece como si fuera un rectángulo pequeño centrado y no ocupa todo el ancho del post. No entiendo por qué pasa eso si es que el ancho es el mismo de cuando subí la primera imagen “más cuadrada y grande” solo que ahora más rectangular. Debe haber algo en el código que provoca que la imagen no se suba al tamaño real y no me permite subir una imagen rectangular que ocupe todo el ancho del post. Por favor, ayuda. me desespera.

    • Caribdis Diseño Web

      Hola, Angelo.

      Creo que te referís a las imágenes que insertás en una entrada por medio del botón Añadir objeto. En este caso, cuando se abre la opción Insertar multimedia tenés una serie de opciones del lado derecho: campos para llenar el título, descripción, etc., y más abajo Ajustes de visualización de adjuntos. Allí, en la opción Tamaño, tenés que seleccionar Tamaño completo (recordá que la imagen deberá tener al menos 825px de ancho para que cubra toda el área de la entrada).

      Fijate si te sirve.

      Saludos.

      • Angelo

        No me sirve. Cuando subí una imagen 1400×932 se puso al ancho de la entrada. Pero cuando subo una imagen de 1400×636 se reduce toda y no mantiene el ancho. Adjunto pantallazo donde la grande si completa el ancho del post y la otra no. No entiendo por qué pasa eso https://postimg.org/image/guao5eyxz/

        • Caribdis Diseño Web

          Hola, Angelo.

          La manera que te indiqué en el comentario anterior es la correcta (probé subiendo dos imágenes de las dimensiones que mencionaste y ambas ocuparon el ancho de la entrada). Revisá que no sea algún plugin el que las está redimensionando.

          Saludos.

  187. Angelo

    Por favor, ayuda. Aún no logro cambiar el tamaño de las imágenes en los posts. Siempre salen más pequeñas a comparación del texto. Pareciera que para las imágenes en las entradas solo está hasta un 60% de tamaño aprox, pero quiero que ocupen todo el espacio del bloque de la entrada. Espero me puedas ayudar, gracias.

  188. Carolina

    muy buen tutorial!, una consulta, como puedo agregarle un sub titulo a la pagina de big title?

    Saludos

    • Caribdis Diseño Web

      Hola, Carolina.

      En el campo Título del Contenido principal podés usar etiquetas HTML. Por ejemplo, si pegás lo siguiente:

      ¡Hola!<br /><span>¿Qué tal?</span>

      “¡Hola!” será el título y “¿Qué tal?” aparecerá debajo, en una fuente más pequeña.

      Espero que te sirva.

      Saludos.

      • jesus

        buenas como hago para que esa fuente del subtitulo sea mas grandecita

        • Caribdis Diseño Web

          Hola, Jesús.

          Usá el código corregido <br /><span>Subtítulo</span>. No es correcto usar etiquetas de encabezado (no me di cuenta de que quedaban dentro de las etiquetas <h1></h1>).

          Saludos.

          • jesus

            coloque lo que me dijiste em pone el subtitulo cen un color gris y sigue del mismo tamaño =(

          • Caribdis Diseño Web

            Ahí corregí el código. Si necesitás editar color y tamaño usarías:

            .home-header-wrap h1 span {
                color: #ffffff;
                font-size: 25px;
            }
            
  189. Jorge Trias

    Hola, he visto que para comprar la versión pro debes comprar un pack de themes?

    hay precio para solo este tema? son los 99 dolares?

    felicidades por tu trabajo, muy bien explicado y al alcance de todos.

    un saludo

    • Caribdis Diseño Web

      Hola, Jorge.

      Gracias por tu comentario. Hasta hace un tiempo se podían comprar los temas de manera individual, pero la diferencia de precio no era muy grande. Ahora el plan más económico es el de $99 e incluye acceso a todos los temas.

      Saludos.

  190. Jester Amaro

    Hola gracias por la respuesta del otro dia, tengo otra pregunta se puede cambiar mi pagina a otro domiinio? por ejemplo mipagina.com.ve a mipagina.org,ve? tengo alojada mi pagina en 000webhost.com

    • Caribdis Diseño Web

      Hola, Jester.

      Creo que 000webhost tiene una opción Park domain. Luego de apuntar los DNS en el registrar podés agregarlo desde el panel de control a tu actual cuenta.

      Espero que te sirva.

      Saludos.

  191. cesar santana

    de nuevo otra vez por aquí…y me sois de gran ayuda, es por ello pido de nuevo solución para este miniproblemilla:
    En la zona de “quienes somos” cuando incluimos widgets” nos salle una linea y en medio de ella “NUESTRO CLIENTES”..la pregunta..como cambio ese titulo

    gracias y saludos

    • Caribdis Diseño Web

      Hola, César.

      En Zerif Lite ese título es una de las cadenas de los archivos de traducción (en Zerif Pro es editable desde el Personalizador). Tendrías que abrir el archivo es_ES.po de la carpeta /languages/ con Poedit y editar el texto NUESTROS CLIENTES por el que vos quieras.

      Espero que te sirva.

      Saludos.

  192. Greicy

    Hola, quiero cambiar los colores de los circulos que aparecen en las habilidades de quienes somos, como lo haria etsoy usando el tema onepirate que es hiojo de zerif lite.

    Gracias

  193. David Gonzalez

    Hola, primero quiero agradecer por el post, esta muy completo, soy nuevo en esto de WordPress y este tema (Zerif Lite) lo recorri al derecho y al reves antes de leer el post, me hubiera servido mucho antes. Resulta que estaba editando la seccion “Nuestro enfoque”, pero luego de ello ingrese a leer lo de los temas hijos, en esas instale por curiosidad uno de ellos y al devolver el cambio las modificaciones del Widget “Nuestro enfoque” quedaron como al inicio, todo en ingles y los textos que habia editado se perdieron. Lo extraño acá es que algunos textos de otras secciones no se perdieron siguen intactos, pero esta seccion (Nuestro enfoque y Nuestro Equipo) si se perdio todo el texto. Aclaro algo y es que no tengo acceso al equipo de hosting o al acceso de FTP porque alguien lo instalo y solo me dio la cuenta de acceso para editar. En una ocasion pasada edite mal un codigo del editor y la pagina quedo inservible a tal punto que se tuvo que reiniciar todo el tema y los cambios se perdieron. Intente de muchas maneras hacer un buckup de la pagina pero tampoco sirvio, nada de lo que hago restaura el contenido, ahora el problema es que pueda perder los avances que hago por un error y no tenga forma de recuperar mi contenido. Ya han sido dos ocasiones en que pierdo los avances y no llevo mucho editando la pagina, no me puedo imaginar que haria si tuviera bastante progreso o contenido o si se actualiza y de igual forma pierdo todo. Muchas Gracias por la colaboracion

    • Caribdis Diseño Web

      Hola, David.

      Gracias por tu comentario.

      Al activar un nuevo tema (sea hijo o no), algunos widgets asignados al tema anterior pasan a quedar inactivos, pero no deberían borrarse. Fijate que tienen que estar en la sección Apariencia > Widgets > Widgets inactivos (o Barra lateral inactiva) y desde allí los podés arrastrar de nuevo a las áreas del tema activo.

      Lo ideal sería que tuvieras acceso a los archivos. Igual, con el plugin UpdraftPlus podés hacer copias de respaldo en la nube y restaurarlas desde el administrador de WordPress.

      Saludos.

  194. Greicy

    Hola, gracias por su ayuda, quiero cambiar el color de los circulos que son las habilidades que sale en quienes somos como lo haría, estoy usando la plantilla onepirate que es un hijo de zerif lite.
    Gracias

    • Caribdis Diseño Web

      Hola, Greicy.

      Para One Pirate no hace falta crear ningún archivo, nada más abrir one_pirate_script.js de la carpeta /js/ y modificar los valores de color que correspondan (podés usar como referencia este tutorial).

      Saludos.

  195. Isabel

    Hola buenas, lo primero darte las gracias por este tutorial y la ayuda que brindas, es un gran trabajo 😉
    La verdad es que tengo unas cuantas dudas ya que no tengo mucha idea del uso de wordpress y de los temas… No sé si habrás respondido alguna vez estas cosas puesto que no he llegado a leer todo (demasiadas preguntas jeje) pero allá van:

    1. ¿Pasa algo si estoy haciendo la página sin el uso de temas hijos? Empecé a modificarla y ni siquiera sabía de la existencia de los temas hijos ni de lo que eran. Si pongo ahora un tema hijo donde realizar las modificaciones (si he entendido bien, los temas hijos son como un resguardo de los datos por si el tema se actualiza, ¿me equivoco?), ¿perderé todas las modificaciones que he realizado hasta ahora? Sería un poco tedioso volver a hacerlo todo :S

    2. ¿Hay alguna forma de poner un fondo en la sección “Contáctenos” que sea diferente a la imagen de fondo principal?

    3. Me gustaría cambiar la tipografía de los nombres en la sección “Testimonios”, he leído en una respuesta que diste que se hace sobre temas hijos y como no tengo ninguno no sé cómo hacerlo…

    4. He puesto un menú en la parte superior de la página, donde me redirige a páginas secundarias de galería y demás cosas. Pero una de las opciones del menú que he creado (“Contacto”) quiero que en vez de redireccionarme a otra página, baje hasta la sección “Contáctenos” de la página principal, ¿es posible hacer eso? (Espero haberme explicado con claridad.)

    Eso es todo, se que es bastante pero me harías un gran favor para poder avanzar con la página y finalizarla cuanto antes.
    Gracias de antemano, saludos 🙂

    • Caribdis Diseño Web

      Hola, Isabel.

      Gracias por tu comentario. Vamos por partes, dijo Jack:

      1) Como pasar, no pasa nada… el cielo no se va a derrumbar, pero tené en cuenta que por cada persona que modifica los archivos de un tema padre, muere un cachorrito en algún lugar del mundo.*

      No, en serio, es lo más recomendable porque si bien podés optar por no actualizar el tema nunca más, WordPress se seguirá actualizando y pueden surgir incompatibilidades en el futuro. Y quién sabe si resolverlas no sería aun más tedioso. Pero ojo, no es un resguardo de los datos (páginas, entradas, categorías, etc.) sino de las personalizaciones de estilo y estructura (ejemplo: cambiar colores o tamaños de fuentes, agregar una sección que no forme parte del tema original). Si lo único que hiciste fue agregar páginas, entradas y usar el personalizador para darles títulos, descripciones y contenido a las secciones de Zerif, eso lo seguirás teniendo en el tema hijo. Otra cuestión para considerar es que si solamente hacés algunas pocas modificaciones de estilo, basta con instalar un plugin para agregar los códigos CSS y el tema hijo ya no sería necesario. El que recomiendo para este tema es Simple CSS. Y a partir de WP 4.7, la sección CSS adicional está incluida en el Personalizador, por lo cual tampoco haría falta instalar un plugin.

      De todas maneras, nunca está de más crear un tema hijo. En esta entrada están las instrucciones para Zerif Lite. Es una pavada y no toma más que dos minutos.

      2) En la hoja de estilos del tema hijo (o con el plugin Simple CSS) agregar el siguiente código:

      /* Para usar una imagen */
      .contact-us {
          background-image: url(http://urldelsitio.com/archivodeimagen.jpg);
      }
      /* Para usar un color sólido */
      .contact-us {
          background-color: #000000;
      }
      

      Obviamente, reemplazar http://urldelsitio.com/archivodeimagen.jpg por la ruta completa a la imagen o #000000 por el valor de color que quieras.

      3) Esta respuesta puede servirte.

      4) Está explicado en la sección Configurar el menú > Anclaje de enlaces para la página de inicio de este mismo tutorial.

      Saludos.

      * Uno como este:

      Cachorrito

      • Isabel

        Muchas gracias, he conseguido poner el fondo en “Contáctenos” y el enlace personalizado también.
        Ese plugin de Google Fonts ya lo instalé aunque creo que no entiendo muy bien su funcionamiento para que sólo cambie esa parte que quiero :S Tendré que investigar más sobre ello.
        El cachorrito me ha partido el corazón, en cuanto disponga de más tiempo miraré bien lo de los temas hijos jeje.

        Gracias de nuevo 😉

        • Caribdis Diseño Web

          De nada 🙂

          Con el plugin deberás hacer lo siguiente: vas a Ajustes > Google Fonts y en la pestaña Edit Font Controls le das un nombre al estilo en el campo Control Name (por ejemplo, “Testimonios”). Hacés clic en el botón Create Font Control. Luego en el campo Add CSS Selectors pegás lo siguiente: .feedback-box .client-info .client-name y clic en Save Font Control.

          Listo. Con esto tendrás el control de la fuente de los nombres en el Personalizador > Typography > Theme Typography > Testimonios > Edit Font. Hasta podés cambiar el tamaño, el color, el margen y más.

          Espero que te sirva.

          Saludos.

          • Isabel

            Woo, muchas gracias, lo que no entendía era lo que había que poner en “Add CSS Selectors”, ahora funciona perfecto 😀

  196. Jonathan García

    Es un gran tutorial, se agradece. Tengo una pregunta y no sé si alguien más la ha hecho. ¿Se puede cambiar las fuentes del tema? He intentado por todas las opciones sin éxito. No sé si se tenga que hacar algo más o simplemente no se puede. ¡Gracias de antemano!

    • Caribdis Diseño Web

      Hola, Jonathan.

      Fijate si esta respuesta te sirve.

      Saludos.

  197. Greicy

    Hola instale la plantilla one pirate es un hijo de zerif lite, la version free cuando reviso en móviles no se ve bien , esta plantilla es responsive?. La pag es ciider.org
    Si puede ayudarme se lo agradezo.

    Saludos

    • Caribdis Diseño Web

      Hola, Greicy.

      One Pirate es responsive, y al revisarla en un celular con Android se ve bastante bien. Lo único que no funciona bien es el menú, pero es porque tenés una imagen de logo demasiado grande. Tendrías que usar el tamaño recomendado de 161px × 41px.

      Saludos.

  198. Jester Amaro

    Hola Como puedo pasar ese tema a español como lo tienes en las imagenes?
    Ya tengo el pugin de Loco Tratductor y el PirateForms y no me sale en español. y tambien al entrar a informacion de los plugin me sale este aviso!!
    Ocurrió un error inesperado. Algo puede estar mal con WordPress.org o con la configuración de este servidor. Si continúas teniendo problemas, por favor trata de resolverlos en los foros de soporte. (WordPress no pudo establecer una conexión segura a WordPress.org. Por favor contacte al administrador de su servidor) in /home/a1694154/public_html/wp-includes/update.php on line 306

    • Caribdis Diseño Web

      Hola, Jester.

      Fijate en esta respuesta. Zerif Lite ya trae el idioma español: WP tiene que estar configurado en Ajustes > Generales > Idioma Español y no Español de XXXXXXX[nombre del país].

      Los archivos de traducción de Pirate Forms los podés descargar de esta misma entrada y subirlos siguiendo las instrucciones del archivo Léeme.txt que encontrarás al descomprimirlo.

      El error parece ser del servidor. Si estás usando un hosting gratuito, esta clase de errores son frecuentes.

      Saludos.

  199. Raul

    Hola, magnifica la ayuda que ofreces!
    Tengo una duda y no se si sera posible realizar lo que quiero. En el apartado Equipo me gustaría que solo aparecieran una cantidad de miembros y para ver el resto pulsar un enlace y que se desplegara el resto, ya que si son muchos miembros se hace muy pesado sobre todo si se ve desde el móvil.

    Gracias!

    • Caribdis Diseño Web

      Hola, Raúl.

      Gracias por tu comentario.

      Lamentablemente no es posible con los widgets de este tema. 🙁

      Saludos.

  200. Caribdis Diseño Web

    Hola, José.

    Para eso vas a necesitar un plugin de SEO que te permita seleccionar una imagen para las redes sociales. Yoast SEO, WP Meta SEO y All in One SEO tienen esta característica (el último, activando la utilidad Social Meta; el segundo es uno muy bueno y liviano, y el primero es el más famoso, pero yo ya casi he dejado de usarlo porque me resulta demasiado recargado).

    Espero que te sirva.

    Saludos.

  201. Jose

    Hola

    Como se establece una imagen especifica para que salga al momento de compartir la web en Facebook?

    Saludos

  202. Pablo Baroso

    Hola, muchisimas gracias por toda esta información. Fue de muchisima ayuda!
    Te consulto un problema: después de agregar varias secciones al tema, como explicaste en otro post, en algún momento, no se cuando, me pasó que quedaron separadas algunas secciones entre si. Es decir, entre secciones, se ve una franja de un cm de alto aprox en donde se ve la imagen de fondo del tema (la que aparece al principio y en la parte de constactos). Con ese error tambien vino el error de que el menu de arriba de todo dejó de estar arriba de todo y quedó un espacio arriba también de 1 cm aprox con la imagen de fondo. Todo esto es independiente de la cantidad de widgets que le pueda a poner en las secciones, simpre queda ese espacio intermedio entre secciones. Supongo que con algún código podré solucionarlo. Desde ya muchas gracias y te digo que si me solucionas esto quiero tu dirección postal para mandarte un bien vino!!! para que veas: www.ietsa.com.ar

    • Caribdis Diseño Web

      Hola, Pablo.

      Gracias por tu comentario. 🙂

      El espacio de más podés corregirlo con el siguiente código:

      #nuevaseccion2.focus, #nuevaseccion1 {
          margin-top: -25px;
      }
      

      Pero me suena a que es algún plugin el que está interfiriendo. Por las dudas, desactivá todos los módulos de Jetpack que no uses (por ejemplo, el de la info del pie de página). Y también podés ir desactivando otros plugins para ver si se corrige.

      Dos recomendaciones más: una, con el siguiente código la imagen ocupará el ancho de la pantalla en resoluciones mayores (en un monitor de 23″ por ejemplo, queda con espacios a los costados):

      body.custom-background {
          background-size: cover;
      }

      Y la otra, dejá vacía el área de widgets del pie de página si no vas a usar widgets ahí, así no te queda la franja gris debajo de la sección Contacto.

      El menú lo veo bien ubicado, puede ser que se muestre fuera de lugar cuando estás logueado.

      Avisame si te sirvió. Y te tomo la palabra de lo del vino, ¿eh? 😉

      • pablo baroso

        Excelente los códigos que me pasaste!!!!! el espacio intermedio quedó solucionado!, tmb saque muchos modulos y widgets que no usaba.
        -con respecto al menú cuando uno navega queda arriba pero.. apenas entras a la pagina, está en una posición inferior dejando ver parte de la imagen de fondo por arriba, es mas se nota la diferencia en esa franja entre el color orginal de la imagen y el sombreado del tema que en el post habias explicado como darle mas o menos sombreado. se pordrá hacer algo?
        – no me doy cuenta cual es el modulo de zerif de info de pie de pagina, me dirias cual es?
        – te consulto tambien sobre la version para celular. Cuando entro con telefono, me aparece como una version de blog y despues mas abajo dice: ver sitio completo. cuando apreto sitio completo, se ve bastante bien la verdad. hay alguna forma que acceda directamente a sitio completo desde el telefono?
        -otro error que hay es que el formulario de contacto en algun momento se desarmó ampliandose la parte superior para los costados, alguna idea sobre como solucionar esto?
        – muchisimas gracias por tu aporte, disculpa por la cantidad de cosas que te pregunto, es mi primera pagina y me cuesta bastante, desde ya que cumpliré con el vino!!! me podes mandar la direccion a mi email personal: y arreglamos el envio!

        • Caribdis Diseño Web

          Hola, Pablo.

          Lo del menú, ahora que lo abrí en Chrome sí lo vi (en Firefox no sucede). Pero estoy casi segura de que es el módulo de Jetpack que te dije (se llama Scroll infinito para ser precisos). Andá a Jetpack > Configuración y desactivá todos los módulos que no sean necesarios. Jetpack tiene cosas súper útiles (como las Estadísticas, Suscripciones, Difusión, Entradas relacionadas, Widgets condicionales, que son algunas de las que uso aquí), pero la gran mayoría son completamente innecesarias, y menos si no tenés un blog donde aprovecharlas. Ahí mismo está Tema para móviles, que es el que está reemplazando la versión responsive de Zerif Lite en este momento. Fijate desactivando todo para ver si el problema del formulario de contacto también se resuelve.

          Luego me decís.

          • Pablo Baroso

            Buen dia,
            – con respecto al espacio superior al menu, probé todo lo que me sugeriste pero no funcionó, por suerte me iluminé y solucioné el espacio superior al menu analogando tu codigo de la siguiente forma!:
            .header, .home-header-wrap
            {
            margin-top: -38px;
            }
            -Desactivando lo de jetpack ya tengo mi version movil !
            – No recibi tus datos a mi mail para el famoso vino!
            – te consulto: en pirate forms, para que me lleguen mails a gmail tenes idea como configurar eso?, estuve leyendo lo que hay acá sobre el tema pero no lo puedo solucionar. Uso hostinger.
            Como siempre muchas gracias! y mandame tu info al mail!!!!

          • Caribdis Diseño Web

            Hola, Pablo.

            Ese código te resuelve el problema en Chrome, pero en Firefox al cargar la página te corta medio menú (luego al desplazar la página hacia abajo se corrige). Probá con esto:

            #main-nav {
                top: 0;
            }
            @media (max-width: 767px) {
            #main-nav, #main-nav.fixed {
                position: absolute;
            }
            }
            

            Con Hostinger no vas a poder enviar mails con la función PHP mail (está desactivada). Tendrás que usar la opción SMTP de Pirate Forms (podés configurar el envío con una dirección de Gmail, pero ya no es tan fácil como antes, porque Google te bloquea el acceso a menos que actives el acceso de “aplicaciones menos seguras”; más info aquí).

            En esta página explican cómo configurar el plugin Gmail SMTP y crear una app para usarlo (está en inglés).

            Otra opción sería usar el SMTP de una cuenta de mail de tu ISP (ej: Fibertel, Speedy, etc.), pero no estoy muy segura de que funcione.

            OK, te mando la info 🙂

            Saludos.

          • Pablo Baroso

            Hola, escribo nuevo post porque no me deja responder la seguidilla anterior.
            Probé la nueva manera de subir el menú y funcionó muy bien.
            Con respecto a conectar el formulario de wordpress con mail de gmail mediante mi hosting hostinger usando pluggin gmail smtp y pirate forms no funciona despues de hacer todo bien y varias veces, entiendo que en hostinger me cobrarian para usar smtp, sabes de alguna forma de conectar todo esto con imap o pop3 ?, esto estaria dentro del paquete gratuito de hostinger.
            Sino en ultima instancia, borrar la seccion del formualrio de contacto y añadir un boton que le habra el outlook a la persona con el mail?
            MUUUUUUUCHAS gracias!!

          • Caribdis Diseño Web

            Hola, Pablo.

            Aparentemente Hostinger no te deja usar ningún puerto SMTP. IMAP y POP3 son protocolos de recepción de correo, no de envío así que no te sirven.

            Mi mejor consejo es evitar Hostinger, te vas a ahorrar futuros dolores de cabeza. De todas maneras, si preferís reemplazar el formulario por un botón tendrías que hacer lo siguiente:

            Abrís el archivo front-page.php del tema hijo. Vas hasta la sección <!-- CONTACT FORM-->, borrás todo el código que está dentro de <div class="row"> y pegás:

            <a href="mailto:" class="btn btn-primary custom-button red-btn">Enviar un mensaje</a>
            

            Y en custom.css pegás:

            .contact-us .custom-button {
            	float: none;
            }
            

            Eso sería todo.

            Saludos.

  203. Mostacho

    Hola esta genial y facil de usar pero tengo un problema no me abre el menu desde ningun movil y no se a que se deba

    • Caribdis Diseño Web

      Hola, Mostacho.

      Probá agregando el siguiente código (en la hoja de estilos del tema hijo o con el plugin Simple CSS):

      nav#site-navigation.in {
      	height: auto !important;
      }
      

      Saludos.

  204. Leinis

    Hola Caribdis. Gracias por la excelente explicación. Mi asunto creo que es un poco más tonto de lo que parece, y es que creo que me he liado instalando el wp en alguna parte, porque al colocar mi dominio debo agregarle /wordpress para que pueda funcionar. No sé si logro explicarme y si hay forma de solucionarlo sin dañar el trabajo que he hecho. Gracias

    • Caribdis Diseño Web

      Hola, Leinis.

      Tenés que seguir los siguientes pasos:

      1. Vas a Ajustes > Generales.
      2. En el campo Dirección de WordPress (URL) escribís http://tusitio.com/wordpress y en el campo Dirección del sitio (URL) http://tusitio.com
      3. Guardás los cambios (no intentes abrir el sitio todavía, ya que te dará error).
      4. Copiá los archivos index.php y .htaccess de la carpeta /wordpress/ y pegalos en el directorio raíz del sitio (generalmente, la carpeta /public_html/). El archivo .htaccess está oculto, así que si es necesario tenés que configurar el FTP para que muestre este tipo de archivos. Si no configuraste enlaces permanentes, ese archivo no estará presente.
      5. Editá el archivo index.php del directorio raíz, cambiando la línea
        require( dirname( __FILE__ ) . '/wp-blog-header.php' );
        por
        require( dirname( __FILE__ ) . '/wordpress/wp-blog-header.php' );
      6. Guardá los cambios.
      7. Iniciá sesión en tu sitio. La URL de inicio de sesión seguirá siendo http://tusitio.com/wordpress/wp-login.php
      8. Si configuraste enlaces permanentes, andá a Ajustes > Enlaces permanentes y actualizá la estructura de enlaces.

      Eso sería todo. Espero que te sirva.

      Saludos.

      • Leinis

        Genial. Eres fantástica. Quedó perfecto. Muchas gracias.

      • Kokori

        Hola, soy muy nuevo en este tema de wp y me sucede lo mismo que Leinis. Cuando configure Cpanel y wordpress me hizo dos sitio por asi mencionarlo; mi dominio.com y dominio.com/blog. Cuando edito y aplico algun theme se modifica el dominio.com/blog y yo quiere editar mi dominio.com ¿Como lo soluciono? Al entrar al administrador de archivos no esta en la carpeta /wordpress/ el file index.php sin embargo aparecen las carpetas wp-admin y wp-content y ambas tienen un index.php ¿de cual de estas dos carpetas tengo que copiar el index.php ponerlo en public_html y modificarlo?

        • Caribdis Diseño Web

          Hola, Kokori.

          Tenés que copiar el archivo index.php que se encuentra en la carpeta de instalación de WP, la cual puede no llamarse /wordpress/. Si tu carpeta se llama /blog/, copialo desde esa carpeta (allí tiene que estar sí o sí, de lo contrario WP no funcionaría). Y cuando reemplaces require( dirname( __FILE__ ) . '/wp-blog-header.php' );, tenés que hacerlo con el nombre de la carpeta de instalación de WP, ejemplo: require( dirname( __FILE__ ) . '/blog/wp-blog-header.php' );.

          Espero que te sirva.

          Saludos.

  205. Ignacio

    Hola, querría saber si es posible insertar un link de descarga dentro de una de las páginas creadas por mí. El documento que quiero poner para la descarga es un PDF. De ser posible, me gustaría que me ayudaseis para poder insertarlo. Un saludo y gracias de antemano.

    • Caribdis Diseño Web

      Hola, Ignacio.

      Gracias por tu comentario. Podés agregar el archivo PDF vía Biblioteca de medios y luego añadir el enlace dentro del contenido de la página que hayas creado. Te recomiendo la Guía WP Fácil, donde se explica esto en la sección Insertar enlaces a archivos multimedia.

      Saludos.

  206. Aritz

    Hola Ana
    Me ha pasado una cosa rarisima, de repente, a la hora de hacer una pagina nueva, no existe mas la opcion de escoger la plantilla de pagina de ancho completo y sin titulo. Y muchas de las paginas que tenia creadas con esa plantilla, automaticamente han cambiado a plantilla predeterminada, me parece muy raro porque no he añadido ningun plugin, ni he actualizado nada, el unico cambio que hice fue en la hoja de style, para modificar el menu, e ingrese un slider en la pagina principal. Tienes idea de que puede ser esto?

    • Aritz

      Solucionado, hice alguna variacion en la carpeta style del tema hijo, y he vuelto a pegar el codigo de creación

      /*
      Theme Name:     Zerif Hijo
      Theme URI:      https://wordpress.org/themes/zerif-lite/
      Description:    Tema hijo de Zerif Lite, por ThemeIsle.
      Author:         Caribdis Diseño Web
      Author URI:     https://caribdis.net/ 
      Template:       zerif-lite
      Version:        1.0
      License:        GNU General Public License v2
      License URI:    http://www.gnu.org/licenses/gpl-2.0.html
      */

      Por si alguien le pasa
      Un saludo

  207. Luis

    quiero ponerle efectos asi http://www.zippergaleria.com.br/en/# a mi pagina me pueden decir como se hacen

    • Caribdis Diseño Web

      Hola, Luis.

      Fijate si este plugin te sirve.

      Saludos.

      • Luis

        no no me sirve… como hago.. ya que los efectos van detras de del contenido.. como los pongo..

        • Caribdis Diseño Web

          En ese caso, dado el nivel de personalización que requiere el código, tendrás que buscar otro tema que ya incluya los efectos que estás buscando, u otro plugin.

          Saludos.

  208. Luis

    Amigos necesito realizar una animación para la parte del cuerpo de la pagina específicamente en las zonas de QUIENES SOMOS, SERVICIOS Y NOTICIAS, la animación la quiero parecida a la entrada que le dan al contenido de QUIENES SOMOS. quiero que entren algunos recuadros o algo por el estilo.. me podrán ayudar.

  209. Antoni

    Hola Buenas,

    tengo dudas respecto al idioma. El idioma de mi sitio es Catalán.
    ¿Existe un archivo como el es_ES.mo pero en catalán? Si es así, ¿como lo consigo? ¿o debo cambiar directamente las expresiones en la plantilla? Y si es así, ¿debo crear un child theme?

    muchas gracias y un saludo

    • Caribdis Diseño Web

      Hola, Antoni.

      Gracias por tu comentario. No estoy segura de que exista una traducción de Zerif Lite al catalán. Lo que tendrías que hacer es traducir las cadenas del archivo es_ES.po con el programa Poedit (tiene una versión gratuita), asignarle el idioma catalán, guardar el archivo como ca_ES.po y luego subir el archivo ca_ES.mo. Otra opción es instalar el plugin Loco Translate para hacer la traducción dentro de WordPress.

      Espero que te sirva.

      Saludos.

      • Antoni

        Muchísimas gracias . Con el Poedit tradujimos el tema, pero algunos elementos de texto no quedó mas remedio que cambiarlos en la plantilla. Hemos creado un tema hijo, y hecho cambios sobre el mismo. Mi duda, lo que no acabo de entender bien, es si cuando se actualice el tema, ¿mi tema hijo también se va a actualizar o no se actualizará? muchas gracias de nuevo , excelente tutorial.
        saludos

        • Caribdis Diseño Web

          Hola, Antoni.

          Cuando haya alguna actualización de Zerif, se aplicará únicamente al tema padre.

          Saludos.

  210. Felix

    Buenas!

    Ante todo gracias por la respuesta.
    Por absurdo que parezca al cambiar la imagen del background, la primera y aún subiendo una imagen con los pixels que dicen son los recomendados, la imagen se hace “grande” de tal forma que no se ve apropiadamente, me refiero a la imagen que aparece en “IMAGEN DE FONDO” cuando estás personalizando el sitio.

    Gracias por su ayuda.

    • Caribdis Diseño Web

      Hola, Felix.

      Gracias por tu comentario.

      Fijate agregando el siguiente código en la hoja de estilos del tema hijo (custom.css), o con el plugin Simple CSS, o en el recuadro CSS adicional en WP 4.7.

      body.custom-background {
          background-size: cover;
      }
      

      Espero que te sirva.

      Saludos.

      • Felix

        Por supuesto que me ha valido, es el resultado que he estado buscando. Página la suya muy recomendable que por supuesto publicitaré.

        Muchas gracias por su ayuda y por su rapidez.!!!

  211. jesy Agudelo

    Como puedo cambiar el tamaño y color del texto en la sección de Widgets de la sección “Nuestro enfoque”

    • Caribdis Diseño Web

      Hola, Jesy.

      Colores y tamaños de fuente se pueden cambiar desde la hoja de estilos del tema hijo (custom.css), o en el recuadro CSS adicional del Personalizador. El código para la los widgets de la sección Nuestro enfoque es:

      /* Título */
      .focus-box h3 {
          color: #000000;
          font-size: 20px;
      }
      /* Contenido */
      .focus-box p {
          color: #000000;
          font-size: 20px;
      }
      

      Reemplazá los valores de color y font-size por los que necesites.

      • Néstor

        Hola, tengo exactamente el mismo inconveniente. A pesar de haber incluido las líneas comentadas el problema persiste. Las dimensiones que estoy colocando son las indicadas por uds.

        • Caribdis Diseño Web

          Hola, Néstor.

          No me queda claro cuál es el inconveniente. Por favor, enviame una URL para poder verlo.

          Saludos.

          • Nestor

            Perdona, continue el tema en el comentario erroneo. Me refiero a que al cambiar la imagen de fondo usando las medidas proporcionadas por uds, la imagen resultante se ve muy grande, no se ve ajustada.

          • Caribdis Diseño Web

            OK. Entonces, esta es la respuesta.

            Saludos.

  212. Jorge

    Hola quisiera saber si se puede cambiar la tipografia del widget testimonials.
    gracias

    • Caribdis Diseño Web

      Hola, Jorge.

      Para eso es necesario crear un tema hijo. Las instrucciones están en esta entrada.

      Luego en el archivo functions.php (antes del cierre de la etiqueta ?> si la tuviera) tendrías que pegar el siguiente código:

      function zerifchild_font() { 
          wp_enqueue_style( 'zerifchild_font', 'https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic', false );
      }
      add_action( 'wp_enqueue_scripts', 'zerifchild_font' );
      

      Luego, en el archivo custom.css pegás el siguiente código:

      .feedback-box .message {
          font-family: 'Open Sans';
      }
      .feedback-box .client-info .client-name {
          font-family: 'Open Sans';
      }
      

      Reemplazá la URL de la fuente de Google por la que corresponda, y lo mismo con el nombre de la familia en la hoja de estilos.

      Espero que te sirva.

      Saludos.

  213. David

    Hola.
    ¿En el pie de pagina no se podría eliminar Zerif Lite funciona con WordPress?

    • David

      Ya llegue en la respuesta dentro del panel de edición en apariencias About zerif Lite la tabla Gratis vs Pro

      • Caribdis Diseño Web

        Hola, David.

        También podés fijarte en esta entrada, donde está explicado cómo modificar los datos del pie de página mediante un tema hijo.

        Saludos.

  214. Caribdis Diseño Web

    Hola, Gerson.

    En un par de días voy a publicar el tutorial. Pero mientras tanto, lo que te conviene hacer es modificar la plantilla /sections/latest_news.php (como la sección Últimas noticias no usa widgets, el tutorial de ThemeIsle no aplica). Descargá este archivo y descomprimilo en la carpeta /sections/ del tema hijo.

    Modificá la línea echo do_shortcode('[recent_products per_page="4" columns="4"]'); con el código abreviado de WooCommerce que quieras incluir.

    Saludos.

  215. Miguel

    Hola! Muchas gracias por la info, resulta muy útil.

    Consulta, son mis primeros pasos y quisiera saber:

    1- al empezar con el tema zerif lite, es mejor hacerlo sobre un tema hijo?

    2 – al apretar el botón enviar en el formulario de contacto, envía el mail pero linkea a la página para poner la clave de acceso al administrador de mi sitio en wordpress. Eso se puede cambiar para que no pase y simplemente envíe el mail?

    Muchas gracias!

    • Caribdis Diseño Web

      Hola, Miguel.

      Gracias por tu comentario. En cuanto al punto 1, siempre es recomendable arrancar con un tema hijo, por si en el futuro necesitás hacer cambios. Y en cuanto al punto 2, te está sucediendo lo mismo que a este usuario. Tenés que actualizar las URL al dominio principal en la base de datos. Si necesitás ayuda para esto, contactame.

      Saludos.

  216. Caribdis Diseño Web

    Hola, Lucía.

    En el momento de comprar seguramente habrás tenido que llenar tus datos, entre los cuales te pidieron un usuario y contraseña. Con esos datos tenés que iniciar sesión en tu cuenta. Una vez dentro de tu cuenta, vas a la sección Purchased Items donde encontrarás el enlace de descarga del tema.

    Espero que te sirva.

    Saludos.

  217. Caribdis Diseño Web

    Hola, Ana.

    Gracias por tu comentario.

    Demasiado largo para explicar aquí, así que descargá este ZIP con los archivos content.php y content-single.php, los cuales tenés que guardar en la carpeta del tema hijo. Las instrucciones para crear un tema hijo están en esta entrada.

    Por último, agregá el siguiente código en el archivo custom.css:

    .byline {
        display: initial !important;
    }
    

    Espero que te sirva.

    Saludos.

    • Ana

      Gracias por la respuesta pero no me funcionó.

      El content.php sí me pone lo de los comentarios arriba pero no el autor (y la fecha que ya salía).
      El content-single.php no me hizo ningún cambio, no me aparece ni autor ni número de comentarios, sólo la fecha.

      He probado en el css con byline, comments-link, posted-on y entry-meta así que algo está interfiriendo en mi plantilla.

      Muchas gracias por tu ayuda.

      Ana

      • Caribdis Diseño Web

        El archivo content-single.php es para que muestre el número de comentarios abajo del título en una entrada individual. Debería funcionar una vez agregado el código CSS.

    • Ana

      Acabo de solucionar el autor añadiendo la línea

  218. lucia Periáñez

    Hola buenas tardes, he comprado la versión pro y ahora no sé cómo instalarla ya que no he recibido ningún enlace ni dowload. En otras ocasiones con otras plantillas me ha sido más fácil. Gracias por vuestra yuda

  219. Ana

    Gracias por el tutorial,

    me gustaría saber cómo se pone el autor y el número de comentarios debajo del título de la entrada, justo al lado de la fecha.

    Y que también aparezcan (autor y nº de comentarios) en la página del blog en los extractos (donde se publican las últimas entradas). Aunque aquí cuando hay sí que sale el número de comentarios al lado de categoría y etiquetas ¿pero podría igualmente ponerse debajo del título?

    Gracias

  220. Leinis

    Buenas tardes, excelente tutorial, nos ha ayudado mucho. Pero hay algo que no he sabido como resolver, necesito una página de noticias donde se concentren todas las entradas que publicamos (tipo blog), pero no hemos encontrado la manera. Si me pudieras ayudar. Muchas Gracias Caribdis.

    • Caribdis Diseño Web

      Hola, Leinis.

      Fijate que está explicado en el último punto: Configurar la página del blog. Luego podés agregar el enlace al menú, desde Apariencia > Menús > Páginas.

      Saludos.

      • Leinis

        Es cierto, esta muy claro y no lo había visto. Mil Gracias. Mucho éxito

  221. kino

    Hola,
    Al visualizar la web en el móvil o pantallas pequeñas el texto ‘quieres somos’ sale descentrado. Por favor, podíais orientarme de como puedo corregirlo.
    Gracias y saludos,
    Kino

    • Caribdis Diseño Web

      Hola, Kino.

      Este es el código que tendrías que agregar:

      @media screen and (max-width 980px) {
      .about-us .row {
          margin: 0 auto;
      }
      }
      

      Espero que te sirva.

      Saludos.

      • Kino

        Hola, probare.
        Muchas gracias,
        Slds
        Kino

      • Kino

        Hola de Nuevo,
        Agregue el codigo que me indicaste en la hoja style.css y sigue igual. Tendria que agregarlo en otro lugar tambien?
        Gracias y saludos,
        Kino

        • Caribdis Diseño Web

          Hola, Kino.

          Es porque las clases están siendo redeclaradas más abajo (en la sección About us de tu hoja de estilos). Colocá el código al final de todo.

          Saludos.

  222. Jorge

    Hola! Soy usuario de este tema desde hace tiempo y la verdad que estoy muy contento con su rendimiento y va de acuerdo a lo que hago.

    Tengo una pregunta: Se que para cambiar un color de fondo y otros detalles debo crear un tema hijo para no perder los cambios con las actualizaciones. En la pestaña de temas hijos vi el tema ZBlackBeard y me gusta bastante. Si instalo este tema hijo entiendo que si le hago algunos cambios en style.css ¿no los pierdo si se actualiza el tema?

    Quisiera tener esta duda aclarada antes de iniciar cualquier proceso. Muchas gracias por su atención!

    • Caribdis Diseño Web

      Hola, Jorge.

      Gracias por comentar.

      Es exactamente así. El tema hijo se crea básicamente para poder cambiar estilos. Cuando se actualiza el tema padre no los perderás.

      Saludos.

  223. Alberto

    Hola Saludos sabes estoy usando wamp y desde mi localhost intento enviar mensages; al hacerlo recibo una confirmacion de que ha sido enviado, pero al revisar mi correo este no llega ni siquiera a la carpeta spam, que debo Hacer, estoy en tus manos y Agrdezco todo lo que haces por nosotros

    • Caribdis Diseño Web

      Hola, Alberto.

      Enviar mensajes de correo desde tu localhost depende de la configuración de WAMP que uses. No puedo ayudarte en este caso, ya que nunca lo he usado. Ante la duda, Google es tu amigo. 😉

      Saludos.

      • Younly

        Hola tengo la misma problematica que Alberto, pero yp estoy usando Xampp. Alguna solucion para eso????…Gracias

        • Caribdis Diseño Web

          Hola, Younly.

          Te doy la misma respuesta que a Alberto: Google. 😉

          Saludos.

  224. fran

    Bueno tengo dos cuestiones una,no funciona bien al actualizar la version de wordpress el plugin pirate,he tenido que borrarlo y otra es como hago un sitemap de un tema que es casi una sola pagina,tengo algunas paginas fuera de la principal,pero claro cuando utilizo un plugin para realizar el sitemap,solo me coje las paginas creadas fuera como tal.
    Gracias

    • Caribdis Diseño Web

      Hola, Fran.

      Pirate Forms también tuvo una actualización importante estos últimos días, fijate instalando la última versión.

      En cuanto al sitemap, no sé si el que genera el plugin te permite editarlo. Tendrías que agregar a mano los enlaces de la página de inicio, tales como te figuran en el menú (ej.: http://urldelsitio.com/#focus).

      Saludos.

  225. Rocío Villanueva

    Hola, muchas gracias por el tutorial, está muy bueno. Tengo 3 consultas puntuales para editar en mi web y poder así hacer público mi proyecto:

    1. ¿Las secciones verde y rojo de llamado a la acción podrían funcionar con el efecto de anclaje al menú principal de la página? Encontré esto http://urldelsitio.com/#ribbon_bottom
    , pero no funciona.

    2. ¿Habría alguna forma de cambiar de ubicación las acciones actuales con las que cuenta Zerif Lite? Esto me ayudaría mucho a que mi información se entienda aún mejor

    3. ¿Podría añadir una nueva sección antes de “nuestros servicios”?

    Estaré atenta. Muchas gracias!

    • Caribdis Diseño Web

      Hola, Rocío.

      Gracias por tu comentario.

      Fijate en este tutorial para agregar una sección nueva, y en esta respuesta para cambiar el orden.

      En cuanto al primer punto, es correcto y funciona, solo que tenés que tener en cuenta cuál es la ruta completa de la Home. Si estás trabajando en una carpeta /wp/, por ejemplo, la dirección que tenés que poner en el enlace personalizado es http://urldelsitio/wp/#ribbon_bottom.

      Espero que te sirva.

      Saludos.

      • Rocío Villanueva

        Gracias por las respuestas.

        En cuanto al punto 1, intenté haciendo las modificaciones, pero no tuve éxito. Para las otras secciones no tengo ningún inconveniente, por ejemplo:
        – Sección about us: http://blog.pucp.edu.pe/blog/gestionlab/#aboutus
        – Sección our focus: http://blog.pucp.edu.pe/blog/gestionlab/#focus
        * Entonces para la sección verde de llamado a la acción lo puse de la siguiente manera: http://blog.pucp.edu.pe/blog/gestionlab/#ribbon_bottom (tendrá algo que ver este símbolo “_” que hace la separación de ribbon y botton? Intenté todo junto “#ribbonbottom”, pero tampoco funcionó).

        Espero sus comentarios.
        Muchas gracias

        • Caribdis Diseño Web

          Fijate que estás usando una versión vieja del tema. Por alguna razón que desconozco, les faltan las ID a las dos secciones de llamado a la acción. Actualizá el tema (la última versión es la 1.8.4.1) y probá. Las ID que faltan serían ribbon_bottom y ribbon_right.

          Saludos.

  226. David

    Hola, yo uso este tema en version gratuita y para mis intereses es mas que genial. Pero me gustaria personalizar un poco el tamaño de fuente en el menu del header y del footer. ¿Como lo cambio? Tambien me gustaria saber si es posible cambiar el tipo de fuente por una de las fuentes de Google.

    Gracias por su ayuda y todos los utiles tutoriales que han subido. Son un gran apoyo.

    Saludos

    • Caribdis Diseño Web

      Hola, David.

      Gracias por tu comentario.

      Lo más rápido y sencillo sería instalar un plugin. Easy Google Fonts te permite cambiar las fuentes desde el Personalizador.

      Espero que te sirva.

      Saludos.

      • Paco

        ¡Hola! Primero de todo muchas gracias por tus tutoriales, son de gran ayuda.
        ¿Cómo sería para subir una fuente propia? Es decir, sin usar plugin. ¿En que carpeta del servidor se mete y como modificamos el css?
        Saludos

  227. Kino

    Hola,
    Antes de nada, agradecerte tu tiempo en la realización de este tutorial. Esta genial.
    Estuve realizando cambio en la web, creando los diferentes enlaces y subenlaces dentro de los enlaces principales. Mi sorpresa es que no se visualizan.
    Podrías echarme un cabo…
    Un saludo,
    Kino.

    • Caribdis Diseño Web

      Hola, Kino.

      Gracias por tu comentario.

      ¿Recordaste asignar el menú a la ubicación correspondiente (Menú primario)? Otra cosa no se me ocurre, sin verlo directamente.

      Saludos.

      • Kino

        Hola de nuevo,
        Gracias por su respuesta. Perdona pero me olvide de indicar la web para que le eches un vistazo.
        Un saludo.
        Kino

        • Caribdis Diseño Web

          Hola, Kino.

          El menú de navegación se ve correctamente, con los enlaces: Nosotros, Metodología, Cursos, Estancias, Spelling Bee, Blog y Contacto. ¿Qué sería exactamente lo que no se visualiza?

          • Kino

            Hola de nuevo, muchas gracias por su rápida respuesta. Lo que no visualizo son las subenlaces dentro de los enlaces principales. Por ejemplo: ‘contacto’ dentro cree dos enlaces, aviso legal y ley cookies. Estos son los que no visualizo. Me temo que si sigo creando subenlaces dentro de otros enlaces sigan sin verse en linea.
            Un saludo,
            Kino

          • Caribdis Diseño Web

            Las páginas secundarias no se agregan automáticamente como subelementos del menú. Tenés que crear un menú y asignarles la jerarquía correspondiente desde Apariencia > Menús.

          • kino

            gracias por su respuesta. Probare su sugerencia.
            Saludos,
            Kino

  228. Javier

    Por favor, les hago una nueva consulta. Nuevamente, los felicito por las prontas respuestas.

    La imagen por defecto que viene en el Background se llama bg.jpg , sus dimensiones son 1920×1280 y el archivo pesa aproximadamente 280 kb.

    Me interesaria cambiar esa imagen. Por favor, conocen bancos de imagenes que me permitan buscar imagenes de estas dimensiones (1920×1280) y tamaño similar (280 kb aprox) ?

    Muchas gracias,
    Javier

    • Caribdis Diseño Web

      Hola, Javier.

      Te paso algunos bancos de imágenes gratuitos con muy buenas fotos: Unsplash, Pixabay, PicJumbo, StockSnap.

      Espero que te sirva.

      Saludos.

      • Javier

        Muchisimas Gracias, buscare en esos bancos.

        Saludos,
        Javier

  229. jb

    Buen aporte amigo. Gracias por compartir.

  230. Javier

    Hola! Muy buenos los tutoriales en español, los felicito! Como hago para cambiar el idioma del theme Zite Lite a español? Segun estuve viendo existe una carpeta “languages” que adentro ya vienen los archivos es_ES.mo y es_ES.po . Sin embargo, desconozco como tengo que hacer para que el theme aparezca en español. Por ejemplo, al completar el formulario de contactenos , luego aparece un mensaje que dice: “Thanks, your email was sent successfully!” …. pero si los archivos en español estan, por que no aparece en castellano? Que cambio debo hacer? Como este ejemplo, hay varias partes donde aparecen palabras o frases en ingles, que me gustaria que tome las que ya estan traducidas en los archivos de castellano. Muchas Gracias!

    • Caribdis Diseño Web

      Hola, Javier.

      Gracias por tu comentario.

      El idioma de los archivos de traducción de los temas/plugins tiene que coincidir con el de la instalación de WordPress. Si lo tenés configurado en Español de Argentina no lo reconoce. O bien tenés que seleccionar Español en Ajustes > Generales > Idioma del sitio, o renombrar el archivo a es_AR.mo.

      Espero que te sirva. Saludos.

      • Javier

        Cambie Español Argentina por Español y funciono!!! Muchas Gracias!

  231. Jesus

    Saludos
    Lo primero es felicitarte y agradecer el gran trabajo que haces en esta página.
    Tengo dos problemas
    1. No consigo crear dos versiones de la pagina de inicio para dos idiomas independientes, si lo logro en las páginas anidadas, pero no en al home. Quisiera tenerlas sin ser con traducciones automáticas de los textos.
    2. Las imágenes de los widgets de “nuestro enfoque” no se me visualizan, de hecho cuando carga una imagen en uno, se me carga la misma en todos, sin embargo no se visualizan.

    Muchas gracias

    • Caribdis Diseño Web

      Hola, Jesús.

      Gracias por tu comentario.

      Primera duda: fijate en esta respuesta, que puede servirte. Para tener dos idiomas necesitás un plugin y el recomendado para este tema es Polylang (es gratuito).

      En cuanto a la segunda, no sabría decirte sin verlo directamente. Probá desactivando otros plugins, o si podés enviame una captura de la sección de Widgets, para ver si hay algún error allí.

      Saludos.

      • Jesús Alberto

        Muchas gracias por la respuesta, las primera pregunta está totalmente resuelta, muchas gracias.
        En cuanto a la segunda es todo un misterio, ni desactivando los plugins, no veo errores en al sección de widget. Pero hay algo más curioso aún, el problema no aparece si trabajo con Mozilla, en Chrome si, incluso si accedo a la página como visitante (sin wordpress). Con otros temas de Zerif que tiene el mismo widget no hay problema, pero claro en ellos no cuento con tus maravillosos tutoriales.

        • Caribdis Diseño Web

          ¿Será entonces algún complemento del navegador el que está interfiriendo?

  232. Gerson

    Hola, les escribo desde Venezuela. Reciban un cordial saludo. Agradecido además por la traducción del tema Zerif Lite, al español.

    Estoy trabajando con el tema, y tengo un par de dudas. Les escribo a ver si me pueden ayudar. En primer lugar, quisiera saber si la cortina que sale al posicionar el cursor sobre los miembros del equipo (Sección “our team”), se puede eliminar. Es la parte de la descripción de cada miembro del equipo. Y, en segundo lugar, necesito ayuda para colocar el widget “sidebar” que aparece en el lado derecho, moverlo hacia el lado izquierdo.

    Agradeciendo de antemano cualquier ayuda que me puedan ofrecer.

    Atte.,

    Gerson.

    • Caribdis Diseño Web

      Hola, Gerson.

      Gracias por tu comentario.

      La porción de texto que aparece al posar el cursor es el contenido que figura en el campo Descripción del Widget de Miembro de equipo. Si dejás ese campo vacío, no aparecerá.

      Y en cuanto a mover la barra lateral, vas a necesitar crear un tema hijo y editar el archivo de la entrada individual (y el de la plantilla de página si también querés moverla allí). Las instrucciones para crear un tema hijo se encuentran aquí. Tendrías que copiar los archivos single.php y page.php de la carpeta del tema padre a la del tema hijo y luego modificarlos con un editor de texto.

      En los archivos single.php y page.php reemplazá las clases content-left-wrap por content-right-wrap. Y en el archivo custom.css, pegá el siguiente código:

      .content-right-wrap {
          padding-top: 60px;
      }
      .sidebar-wrap {
      	border-left: 0;
      }
      	
      @media screen and (min-width: 1024px) {
      .sidebar-wrap {
          border-right: 1px solid rgba(0, 0, 0, 0.05);
      }
      .content-right-wrap.col-md-9 {
      	float: right;
      }
      }
      

      Espero que te sirva.

      Saludos.

      • Gerson

        Muchas Gracias!!!

        Excelente! Nuevamente, gracias! por su amable atención a mi solicitud.

        Un abrazo,

        Gerson

      • Gerson

        Hola nuevamente,

        Necesito hacer un enlace desde la imagen de cada uno de los miembros de equipo, y no consigo el lugar exacto en donde colocar el <a href="#" rel="nofollow"></a>, por favor, me pueden ayudar?

        Gracias.

        • Caribdis Diseño Web

          Hola, Gerson.

          Lamentablemente, esto no es posible, porque depende del widget. Lo que podrías hacer es pegar el enlace dentro de la descripción, para que cuando se pase el puntero sobre la foto, aparezca en lugar del texto.

          Saludos.

        • Gerson

          Gracias. Intentaré cambiando la sección con la de “nuestro enfoque”, a ver…

          • Gerson

            Hola.

            Una pregunta: ¿Cuándo traducen “How to Show WooCommerce Products on Home Page in Zerif”? Me gustaría mostrar productos de WooCommerce en la sección “Latest News”. Les agradecería mucho su asesoría en este tema.

            Gracias.

          • Caribdis Diseño Web

            Hola, Gerson.

            Procuraré que sea el próximo tutorial que traduzca.

            Saludos.

          • Gerson

            Hola Ana,

            Gracias por tu respuesta.
            He colocado productos woocommerce en la sección “latest news”!, incluso he logrado que no se vean las entradas en esta sección (solo en modo PC). Sin embargo, me siguen apareciendo cuando visualizo el tema desde un dispositivo móvil. Me puedes ayudar en este asunto?
            Gracias.

  233. Aritz

    Hola
    Gracias por este sitio es de gran utilidad
    A ver si puedes ayudarme con esto:
    En el apartado quienes somos
    Abajo hay iconos sociales, me gustaria cambiar uno de ellos, de manera de crear un boton para mostrar el curriculum, y otro para añadir el blog personal
    No tengo tema hijo, es posible hacerlo con html directamente?

    • Caribdis Diseño Web

      Hola, Aritz.

      Ese tutorial aún no está traducido, pero podés fijarte en la documentación oficial de ThemeIsle: How to change Our Team icons in Zerif. No es necesario un tema hijo, pero sí un plugin.

      Saludos.

  234. Ulises

    Hola, necesito editar el texto explicativo de la sección Quienes Somos.
    Quiero poner en “bold” algunas palabras y separar con espacios en blanco los párrafos.
    Podrían ayudarme diciéndome cuál es el archivo que contiene los textos que agrega el administrador del theme?
    Gracias

    • Caribdis Diseño Web

      Hola, Ulises.

      Fijate en esta respuesta que le di a otro usuario. Podés usar código HTML directamente en el campo Texto de la Sección “Quiénes somos” > Contenido principal dentro del Personalizador.

      No es recomendable modificar archivos del tema padre.

      Espero que te sirva.

      Saludos.

  235. Francisco Javier

    hola tengo mi tema terminado y funcionando pero ahora wordpress que no el theme me pide actualizar,¿SI actualizo la versión de wordpress pierdo cambios?

    • Caribdis Diseño Web

      Hola, Francisco.

      No te preocupes, podés actualizar la versión de WP y no perderás ningún cambio.

      Saludos. 🙂

  236. Leinis

    Buenos días, mi nombre es Leinis, Venezuela, ya me ayudaron una vez con una duda que tenía y les agradezco tan inmediata atención. Escribo ahora para saber su opinión acerca de la compatibilidad de la actualización del WordPress 4.5.1 en el tema de Zerif Lite, ya que cuando lo hice se me alteraron algunas cosas y tuve que volver a la versión anterior de WP.

    • Caribdis Diseño Web

      Hola, Leinis.

      Fijate que también hubo una actualización del tema. Yo no experimenté nada raro luego de actualizar; es probable que haya sido por causa de algún plugin. Ante la duda, desactivarlos e ir activando uno por uno para identificar el problema.

      Saludos.

      • Leinis

        Muchas Gracias. Actualicé ambos (tema y WP) y todo marchó bien.

        • Leinis

          Buenas tardes, disculpa, luego de actualizar tema y WP todo ha marchado bien, excepto porque cada vez que guardo un cambio, sale durante unos segundos una pantalla que dice:
          “Notice: add_utility_page ha quedado obsoleto desde la versión 4.5. Utiliza add_menu_page() en su lugar. in /home/concepto/public_html/wp-includes/functions.php on line 3658”

          No sé que significa ni que tengo que hacer realmente. Agradecería mucho si me pueden ayudar.

          • Caribdis Diseño Web

            Hola, Leinis.

            No es un error, sino una advertencia. Más que seguro se debe a algún plugin cuyo código no fue actualizado correctamente de acuerdo con las directrices de WP 4.5. No es problema de Zerif Lite. Desactivá todos los plugins y luego activalos uno por uno hasta identificar cuál es el que ocasiona la advertencia.

            Para dejar de ver ese aviso tendrías que desactivar el modo de depuración en el archivo wp-config.php: cambiar la línea que dice define( 'WP_DEBUG', true ); por define( 'WP_DEBUG', false );.

            Saludos.

  237. Raul

    Muchísimas gracias por tu ayuda y aportaciones. Este tema es muy bueno y fácilmente configurable, sin embargo tengo una duda, cuando entro en mi web a través de mi teléfono móvil, esta no aparece con el tema zerif lite, en su lugar me aparecen las entradas del blog. He buscado donde configurar esto y no he encontrado nada y tampoco encuentro la razón de la diferencia, me puedes iluminar para resolverlo?

    Un saludo y muchísimas gracias

    • Caribdis Diseño Web

      Hola, Raúl.

      Gracias por comentar.

      Seguro es porque está activada la versión para móviles de Jetpack. Tendrías que ir a Jetpack > Configuración y desactivar Tema para móviles.

      Espero que te sirva.

      Saludos. 🙂

      • Raul

        efectivamente, ese era el problema, mil gracias por la ayuda!!

        Un saludo y de nuevo mencionar la gran labor que haces.

    • Carlos

      Hola
      Tus tutoriales me están siendo de mucha ayuda.
      Tengo un problema, quiero que no sea obligatorio rellenar todos los campos del formulario pero no se donde lo puedo modificar ¿se puede?
      Muchas gracias

      • Caribdis Diseño Web

        Hola, Carlos.

        Si no instalaste el plugin Pirate Forms, instalalo. Luego de activarlo, vas a Ajustes > Pirate Forms > Campos y allí seleccionás la opción para cada campo.

        Espero que te sirva.

        Saludos.

        • Carlos

          Muchas gracias me ha funcionado pero no se porqué me ha descuadrado el botón de enviar.

          • Caribdis Diseño Web

            Fijate que tengas instalada la última versión del tema (esto ocurría en un par de versiones atrás, pero fue corregido).

        • fran

          tengo un problema yo en vez de utilizar el correo de dominio,pongo una direccion de gmail para que llegue el formulario,pero no llega le he dado mil vueltas.

          • Caribdis Diseño Web

            Hola, Fran.

            Revisá lo siguiente:

            1. Que esté instalado el plugin recomendado Pirate Forms
            2. Que la dirección de correo no contenga errores
            3. Si no envía con la función nativa de WordPress, que esté bien configurado el SMTP
            4. Que los mails no vayan a parar a la carpeta spam

            Si todo esto está correcto, probá con otro plugin de SMTP (por ejemplo, este, y recordá desmarcar la opción ¿Usar autenticación SMTP? de Pirate Forms).

            Saludos.

  238. Carlos

    Hola Caribdis, estoy haciendo una web y tus consejos me están sirviendo de mucho pero tengo dos problemas uno es que no se como añadir una imagen en el apartado de packages section o en our team es que no lo logro.
    Otra cosa que no consigo es ampliar el logo he logrado ampliar el nav bar con css pero el logo me lo deja igual.
    Muchas gracias y un saludo

    • Caribdis Diseño Web

      Hola, Carlos.

      Gracias por tu comentario. Si no me equivoco, la sección Packages ya no está disponible en la versión Lite, aunque no permite subir imágenes, solo los widgets de Packages. Y en Our Team también hay que usar los widgets correspondientes.

      Para ajustar el tamaño del logo, tenés que modificar los valores de height y padding (de acuerdo con el tamaño de la imagen) de esta clase:

      .navbar-brand {
          height: 76px;
          padding: 7px 15px;
      }
      

      Espero que te sirva.

      Saludos.

  239. Vincent

    Buenas,
    En el tema life, no está funciona la image de fondo. Ni el predeterminado ni la que estoy poniendo. Sabeis como solucionar ese problema por favor.

    • Caribdis Diseño Web

      Hola, Vincent.

      ¿Podrías ser un poco más específico? ¿Ves la opción Personalizador > Imagen de fondo? ¿Hay algún mensaje de error durante la carga?

      • Vincent

        Perdona, entramos en aperencia>fondo lo cambiamos no sale ningun error pero no instante no aparece el fondo por ningun lado y se volvemos a poner el image predeterminada sigue sin aparecer nada de nada. En q php esta el background por favor

        • Caribdis Diseño Web

          Hola, Vincent.

          La imagen de fondo predeterminada está en la carpeta /images/ del tema, con el nombre bg.jpg. Deberías poder cargar una imagen de la biblioteca de medios, y si no la guarda, probá reinstalando el tema y desactivando plugins. Otra solución no se me ocurre sin verlo directamente.

          Saludos.

  240. Romina

    Gracias por extenso tutorial

  241. Luis Reyes

    Buenos Dias, mi problema es el sguiente.. cuando intento enviar un mensaje por mi formulario de mi pagina CONTACTENOS, al momento de dar click en ENVIAR MENSAJE, me lleva a la pagina de INICIO de sesion de WP admin.
    necesito ayuda..

    • Caribdis Diseño Web

      Hola, Luis.

      Te está sucediendo lo mismo que a este usuario. Tenés que actualizar las URL al dominio principal en la base de datos. Si necesitás ayuda para esto, contactame.

      Saludos.

  242. Marly

    Hola! Muchas gracias por el tutorial. 🙂

    Por favor, podrían recomendarme un plugin para comentarios compatible con Zerif Lite, estaba usando el de JetPack pero se ve feo, como que no es tan compatible o no sé.

    ¡Gracias!

    • Caribdis Diseño Web

      Hola, Marly.

      Gracias por tu comentario.

      La verdad, no puedo recomendar nada que no haya usado, así que te diría Disqus. Me parece sencillo y se adapta bien a todo tipo de tema.

      Si alguno de los lectores puede aportar otras recomendaciones, serán bienvenidas.

      Saludos. 🙂

  243. Leinis

    Buenas noches, muy buen tutorial. Mi pregunta es respecto a un cambio de forma en los círculos que representan los miembros del equipo; quisiera saber si puedo hacer que se vean hexágonos en lugar de círculos y cómo podría cambiar estas formas. Gracias.

    • Caribdis Diseño Web

      Hola, Leinis.

      Gracias por tu comentario. No existe aún una manera sencilla -y que sea reconocida por todos los navegadores- de usar formas de recorte poligonales en las imágenes. Lo más conveniente sería editarlas en Photoshop (o similar) y guardarlas como PNG transparente.

      Espero que te sirva.

      Saludos.

  244. Francisco Javier

    Tengo un problema,quiero por ejemplo que el boton rojo de la sección grande cuando se pulse vaya hacia abajo quienes somos,lo tengo todo en modo local y no se si eso es el error Pero seria nombre del boton quienes somo,Dominio.es /#quienes somos

    Gracias de ante mano

    • Caribdis Diseño Web

      Hola, Francisco.

      Gracias por tu comentario. Tanto en localhost como en un dominio funcional, para los botones basta con que pongas la ID correcta del enlace. En este caso, #aboutus si es que no cambiaste los anclajes usando un tema hijo.

      Para los menús, sí conviene usar la ruta completa. Por ejemplo, http://midominio.es/#aboutus o http://localhost/carpetadewp/#aboutus.

      Espero que te sirva.

      Saludos.

  245. FEE

    cómo quitar Zerif Lite funciona con WordPress foot note?

    • Caribdis Diseño Web

      Hola, Fee.

      Eso está explicado en este tutorial.

      Espero que te sirva.

      Saludos.

  246. Àngel Mas

    Que maravilla, he resuelto no se cuantas dudas en un pis pas…
    Pero se me resiste una de momento y no la he visto en tu tutorial ni por los comentarios.
    Haber si puedes ayudarme.
    Quiero poner un widget de imagenes en la barra lateral y para ello me voy a “apariencia/widgets” y no me sale ninguno de “imagen”.
    ¿Como puedo hacerlo? o hay que bajarlo e instalarlo de algún modo.
    Gracias por adelantado.

    • Caribdis Diseño Web

      Hola, Ángel.

      Gracias por tu comentario. En efecto, para usar un widget de imagen primero tenés que descargar y activar algún plugin. Buscá uno con el término image widget (algunos que he usado y puedo recomendar: el de Modern Tribe, el de Cedaro y el de Goran87).

      Espero que te sirva.

      Saludos. 🙂

      • Àngel Mas

        Dicho y hecho.
        He instalado el de modern tribe y genial.
        Muchas gracias.

  247. Gabriel

    Gracias por guiarnos en la modificacion de este tema. Si fueras tan amable de explicarme como puedo hacer el logo de mi empresa mas grande y centrado, no tan pequeñito y a la izquierda.

    Gracias por tu atencion

    Gabriel

    • Caribdis Diseño Web

      Hola, Gabriel.

      Gracias por tu comentario.

      Para centrar el logo, tenés que agregar el siguiente código a la hoja de estilos del tema hijo:

      .navbar-header {
          float: none;
      }
      

      Y para controlar el tamaño, tendrás que ajustar los valores de padding (relleno) y height (altura) de acuerdo con la imagen que desees usar:

      .navbar-brand {
          padding: 1px; /* cambiar el valor de acuerdo con la imagen */
          height: 80px; /* cambiar el valor de acuerdo con la imagen */
      }
      

      Espero que te sirva.

      Saludos. 🙂

      • Gabriel

        Me funcionó perfectamente

        Mil Gracias

        Gabriel

  248. Hector

    Hola nuevamente!!!!, tengo una consulta, no me había percatado que el formulario de la sección Contact Us o Contáctenos perdió el efecto animado, las otras secciones tienes su efecto correspondiente excepto el formulario, ya desde hace tiempo instale el pugin de pirate forms y no me había percatado de la falta de efecto, sabrán a que se puede deber esto???

    Saludos!!!!!!

    • Caribdis Diseño Web

      Hola, Héctor.

      Al parecer es un bug de alguna de las últimas actualizaciones (en la demo oficial tampoco está).

      En el foro de soporte de WP hay un hilo muy reciente al respecto. Tendremos que esperar a que lo respondan, y ver si lo resuelven.

      Saludos.

      • Hector Salas

        Gracias estaré al pendiente.

        Saludos 🙂

  249. Thalula

    Hola,
    Estoy creando páginas internas para mi web usando el page builder de siteorigin que me encanta. Va perfecto, pero a la hora de incluir un widget de zerif, como el de “nuestro enfoque” por ejemplo, no sube la imagen…
    He visto en muchos foros en inglés que bastante gente tiene ese problema, pero no hay solución…
    Vosotros tenéis algún consejo para poder poner los widgets en las páginas internas de la misma forma que aparece en la home?
    Ya no se que hacer… tengo la web prácticamente completa y cambiar de tema sería una faena.
    Muchas gracias!

    • Caribdis Diseño Web

      Hola, Thalula.

      Me temo que estas dos características son incompatibles. Por lo que leí, SiteOrigin dice que es problema de Zerif, y ThemeIsle no se hace cargo de corregirlo porque va más allá del soporte para los temas gratuitos. 😉

      La única alternativa que tenés aquí, sería copiar el código HTML de la Home y pegarlo en un widget simple de texto, dentro del Page Builder.

      Por ejemplo, para el primer widget predeterminado sería algo así:

      <div class="focus-box" style="text-align:center;">
          <div class="service-icon">
              <a href="#"><i class="pixeden" style="background:url(http://urldelsitio.com/wp-content/themes/zerif-lite/images/parallax.png) no-repeat center;width:100%; height:100%;"></i></a>
          </div>
          <h3 class="red-border-bottom">PARALLAX EFFECT</h3>
          <p style="text-align:center;">Create memorable pages with smooth parallax effects that everyone loves. Also, use our lightweight content slider offering you smooth and great-looking animations.</p>	
      </div>
      

      Hay clases que no hacen falta si usás la estructura de columnas del Page Builder, y también es posible que tengas que agregar algunos estilos en línea (como el text-align:center; del ejemplo) para que coincida con el diseño de la Home.

      Espero que te sirva.

      Saludos.

    • Caribdis Diseño Web

      O para no complicar tanto las cosas, usar una sola columna y pegar el código de los cuatro bloques en un solo widget:

      <div class="col-lg-3 col-sm-3 focus-box" style="text-align:center;">
          <div class="service-icon">
              <a href="#"><i class="pixeden" style="background:url(http://urldelsitio.com/wp-content/themes/zerif-lite/images/parallax.png) no-repeat center;width:100%; height:100%;"></i></a>
          </div>
          <h3 class="red-border-bottom">PARALLAX EFFECT</h3>
          <p style="text-align:center;">Create memorable pages with smooth parallax effects that everyone loves. Also, use our lightweight content slider offering you smooth and great-looking animations.</p>	
      </div>
      <div class="col-lg-3 col-sm-3 focus-box" style="text-align:center;">
          <div class="service-icon">				
              <a href="#"><i class="pixeden" style="background:url(http://urldelsitio.com/wp-content/themes/zerif-lite/images/woo.png) no-repeat center;width:100%; height:100%;"></i></a>
          </div>
          <h3 class="red-border-bottom">WOOCOMMERCE</h3>
          <p style="text-align:center;">Build a front page for your WooCommerce store in a matter of minutes. The neat and clean presentation will help your sales and make your store accessible to everyone.</p>	
      </div>
      <div class="col-lg-3 col-sm-3 focus-box" style="text-align:center;">
          <div class="service-icon">
              <a href="#"><i class="pixeden" style="background:url(http://urldelsitio.com/wp-content/themes/zerif-lite/images/ccc.png) no-repeat center;width:100%; height:100%;"></i></a>
          </div>
          <h3 class="red-border-bottom">CUSTOM CONTENT BLOCKS</h3>
          <p style="text-align:center;">Showcase your team, products, clients, about info, testimonials, latest posts from the blog, contact form, additional calls to action. Everything translation ready.</p>	
      </div>
      <div class="col-lg-3 col-sm-3 focus-box" style="text-align:center;">
          <div class="service-icon">
              <a href="#"><i class="pixeden" style="background:url(http://urldelsitio.com/wp-content/themes/zerif-lite/images/ti-logo.png) no-repeat center;width:100%; height:100%;"></i></a>
          </div>
          <h3 class="red-border-bottom">GO PRO FOR MORE FEATURES</h3>
          <p style="text-align:center;">Get new content blocks: pricing table, Google Maps, and more. Change the sections order, display each block exactly where you need it, customize the blocks with whatever colors you wish.</p>	
      </div>
      
  250. Gonzalo

    Hola. Cuando personalizo el texto de la sección “Quienes Somos” (el que está al centro) y lo pego, no me sale completo y tampoco respeta los “enter” con que viene el texto original. Sabes que podría estar mal?

    Gracias por tu súper aporte!
    Slds

    Espero que se haya entendido 😀

    • Caribdis Diseño Web

      Hola, Gonzalo.

      Gracias por tu comentario.

      Para dar formato a esa porción de texto tenés que usar etiquetas HTML. Por ejemplo, el texto predeterminado aparece así en el campo:

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec massa enim. Aliquam viverra at est ullamcorper sollicitudin. Proin a leo sit amet nunc malesuada imperdiet pharetra ut eros.<br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec massa enim. Aliquam viverra at est ullamcorper sollicitudin. Proin a leo sit amet nunc malesuada imperdiet pharetra ut eros. <br><br>Mauris vel nunc at ipsum fermentum pellentesque quis ut massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas non adipiscing massa. Sed ut fringilla sapien. Cras sollicitudin, lectus sed tincidunt cursus, magna lectus vehicula augue, a lobortis dui orci et est.
      

      Notarás las etiquetas <br><br>, que son dos saltos de línea.

      Podés envolver un párrafo en las etiquetas <p></p>, usar saltos de línea <br />, negritas <strong></strong>, etc. Para referencia, podés visitar este enlace.

      Espero que te sirva.

      Saludos.

      • Gonzalo

        Sos una ídola!!. funciona perfecto.
        Gracias por tu tiempo y dedicación

      • jesus simanca

        hola buenas yo de nuevo tengo una duda como hago para cada seccion de quienes somos, nuestro equipo y testimonios quiero poner un boton que diga INICIO como asi, cuando alguien este en testimonio y quiere subir que este boton que lo lleve al comienzo de la pagina

        • Caribdis Diseño Web

          En ese caso, lo más conveniente es instalar un plugin para agregar un botón que esté fijo en la parte inferior (como el que hay en este sitio).

  251. Maria Montserrat

    Hola. Tengo problemas para cambiar el favicon en este tema Zerif Lite. No encuentro donde cambiarlo en “personalizar”.
    Tampoco encuentro donde cambiar el texto en inglés del formulario de contacto. Podrías indicarme. Muchas gracias

    • Caribdis Diseño Web

      Hola, María.

      ¿Tenés la última versión del tema y de WP? El favicon se cambia desde el panel Identidad del sitio del Personalizador (tal como se muestra en la captura de este tutorial).

      En cuanto al formulario, si tenés la última versión del tema, debería incluir la traducción. Y si instalaste el plugin Pirate Forms también debería estar traducido. En todo caso, fijate que en los ajustes del plugin están los campos para editar: Ajustes > Pirate Forms > Etiquetas.

      Espero que te sirva.

      Saludos.

      • Marcos

        Se puede realizar sin la versión pro, pero es una manera avanzada en donde debes reemplazar la imagen por el mismo nombre. Puede ser por FTP o la herramienta que tengas en tu hosting.

  252. Shirley

    Buenas noches, he leído todo el post y me parece estupendo, adicionalmente he leído cada pregunta y respuesta y no consigo ningún caso que se asemeje al mío, por lo que me he motivado a escribir directamente.
    Instalé anteriormente el tema zerif lite en una página web que cree, incluso cree un tema hijo y funcionó de maravilla, me encantó. Ahora intento hacerlo nuevamente con otra página y resulta que no me da acceso a ningunas de las secciones para modificar, no me aparecen widgets en ninguna seccion excepto en área de pie de pagina. He desinstalado todos los plugins, desactive el modo mantenimiento de la página, he desinstalado e instaldo de nuevo el tema y no hay manera de que funcione. Cabe destacar que otros temas funcionan bien en esta página.
    Me gusta mucho este tema para esta página y de verdad me gustaría saber donde se origina el problema. Agradezco si e pueden ayudar.

    • Caribdis Diseño Web

      Hola, Shirley.

      Gracias por tu comentario.

      Por lo que describís, es un tema muy puntual y la verdad no sabría decirte dónde o cómo se origina sin verlo directamente. ¿No tenés acceso a un registro de errores (por ejemplo, en el panel de control del hosting)? O bien activando el modo de depuración en el archivo wp-config.php: define('WP_DEBUG', true);.

      Saludos.

      • Shirley

        Hola de nuevo, lo he intentado todo, también realicé la depuración del archivo wp-config.php y nada… en el registro de errores no me aparece nada. No puedo entender lo que sucede. de que modo podrías verlo directamente para que me des una opinión más precisa? Lo agradecería mucho.

        • Caribdis Diseño Web

          Resuelto 🙂

          • Shirley

            Excelente, gracias por tu ayuda. Gratamente impresionada por la eficacia, la dedicación y la solidaridad con la que responden no solo a los comentarios y preguntas, sino a la solución de los problemas que presentamos.
            Saludos Ana, un abrazo y nuevamente gracias.

  253. Jorge

    Buenos dias. Felicidades por el tutorial. Estoy usando Zerich pero tengo dos problemas que no sé como resolver. Pido si alguien puede ayudarme porfavor
    No sé como puedo quitar la frase “Zerif lite funciona con wordpress” al final de la página
    Tampoco consigo redirigir mi botón inicial rojo de “curso” a una nueva página
    Gracias

    • Caribdis Diseño Web

      Hola, Jorge.

      Gracias por tu comentario.

      Para editar el pie de página podés seguir las instrucciones de este tutorial.

      Para lo segundo, tenés que copiar el archivo big-title.php de la carpeta /sections/ del tema padre a una carpeta /sections/ del tema hijo, abrirlo con un editor de texto y buscar la siguiente línea:

      echo '<a href="'.esc_url( $zerif_bigtitle_redbutton_url ).'" class="btn btn-primary custom-button red-btn" rel="nofollow">'.wp_kses_post( $zerif_bigtitle_redbutton_label ).'</a>';
      

      Reemplazarla por:

      echo '<a target="_blank" href="'.esc_url( $zerif_bigtitle_redbutton_url ).'" class="btn btn-primary custom-button red-btn" rel="nofollow">'.wp_kses_post( $zerif_bigtitle_redbutton_label ).'</a>';
      

      Espero que te sirva.

      Saludos.

  254. Federico

    Hola,
    Estoy usando el tema con polylang, pero hay 3 secciones que no encuentro manera de traducir: la seccion de titulo grande, la seccion de about y la seccion de llamado a la accion. Hay forma de traducir estas secciones?

    Gracias por la ayuda del tema.

    • Caribdis Diseño Web

      Hola, Federico.

      Gracias por dejar tu comentario.

      Fijate de seguir estos pasos (no sé si estás usando un tema hijo): http://docs.themeisle.com/article/80-how-to-translate-zerif

      Aparentemente, deberías primero asignar los títulos/subtítulos desde el Personalizador y luego guardar los cambios para que las cadenas se agreguen en la página Ajustes > Idiomas > Traducciones de cadenas.

      Espero que te sirva.

      Saludos.

      • Federico

        Gracias por la respuesta. Ese fue el tutorial que use, y el problema que tengo, es que las cadenas de esas secciones no aparecen para ser traducidas. No estoy usando tema hijo. No estoy seguro si es que me falta algo mas por hacer.

        • Caribdis Diseño Web

          ¿Estás usando la última versión del tema? Porque lo que tenés que hacer es lo que te dije en el comentario anterior. Ir al Personalizador, por ejemplo a Sección de título grande y escribir en el campo el título y luego Guardar y publicar. Lo mismo con las demás secciones. Aunque escribas exactamente el mismo texto, tenés que guardarlo como si hubieras hecho cambios. De esta manera las cadenas se agregan en las opciones de Polylang.

          • Mireia

            A mi me pasa igual que a Federico, no me aparecen en las cadenas varias secciones para traducir. He ido tal y como has dicho al personalizador, lo he vuelto a escribir guardar y publicar, pero siguen sin aparecer.

          • Caribdis Diseño Web

            Hola, Mireia.

            Fijate que estés usando las últimas versiones, tanto del tema como del plugin. Y por las dudas, desactivá otros plugins.

            Saludos.

          • Mireia Pomar Natal

            Si ya lo hice, no funciona, he tenido que poner un traductor automático, voy a probar con otro pluguin multilingüe, si no funciona, me veré obligada a cambiar de template. Es una lástima pq sería un buen template si funcionara bien.

          • Caribdis Diseño Web

            Polylang y Zerif Lite son totalmente compatibles y si el plugin está bien configurado, debería funcionar sin problemas. Si ves que algunas cadenas no aparecen, fijate si están presentes en el archivo wpml-config.xml. Si no están presentes, podés agregarlas manualmente (y conviene agregar el archivo en el tema hijo).

            Saludos.

      • Regis Perruchot

        hola,

        enhorabuena por el blog y sus grandes aportaciones.

        a mi me pasa como a federico y mireia, no puedo traducir con WPML (no hay forma que me aparezca en los strings) el titulo grande de la pagina ni el boton rojo ni el titulo del apartado “features” que viene a continuacion, y eso a pesar de haber seguido tus instrucciones.

        De hecho en google (en ingles) vi que hay mucha gente a quien le esta occuriendo lo mismo y da mucha rabia.

        Agradeceria alguna ayuda sencilla para no programadores…la situacion es muy frustrante y ya me comi todas las uñas de las manos y estoy atancando las de los pies…

        mil gracias anticipadas!

        • Caribdis Diseño Web

          Hola, Regis.

          Gracias por tu comentario.

          Honestamente, no sabría darte una respuesta concreta, porque nunca usé WPML con Zerif. Si hay mucha gente con el mismo problema tiene que ser algún bug del tema o del plugin. Fijate si en los foros de WPML o Zerif hay algo al respecto.

          Saludos.

  255. Hector Salas

    Saludos nuevamente, recientemente vi un video de este tema con una sección de PORTFOLIO y un apartado para NEWSLETTER FORM, la pregunta es si estas secciones asi como las de precios son exclusivas para la versión de pago o de lo contrario como se pueden configurar.

    Gracias y saludos!!!!!

    • Caribdis Diseño Web

      Hola, Héctor.

      En efecto, esas dos características pertenecen a la versión PRO del tema. Podés agregar más secciones e integrar plugins. El tutorial para crear una nueva seccción está en este enlace, y el tutorial para integrar plugins por medio de códigos abreviados está aquí.

      Saludos.

  256. moises

    Hola, me gustaria cambiar el orden de las secciones, concretamente que el contacto salga antes de ultimas noticias.

    En la seccion de ultimas noticias me sale la primera imagen de 250 x 250px, no hay forma de cambiarle el tamaño?

    Gracias

    • Caribdis Diseño Web

      Hola, Moisés.

      Para hacer estos cambios, tenés que usar un tema hijo. En esta entrada encontrarás las instrucciones.

      Para lo primero, lo que deberás hacer es, en el archivo front-page.php, cortar este código:

      /* LATEST NEWS */
      $zerif_latestnews_show = get_theme_mod('zerif_latestnews_show');
      if( isset($zerif_latestnews_show) && $zerif_latestnews_show != 1 ):
      get_template_part( 'sections/latest_news' );
      endif;
      

      Y pegarlo justo antes de:

      }
      get_footer(); ?>
      

      Para lo segundo, en el archivo functions.php tendrías que agregar la siguiente línea:

      add_image_size('custom-post-thumbnail', 250, 200, true);
      

      Donde 250 es el ancho y 200 es el alto (usá las medidas que necesites).

      Y por último, en el archivo /sections/latest_news.php, modificá las dos líneas:

      the_post_thumbnail();
      

      Por:

      the_post_thumbnail('custom-post-thumbnail');
      

      Espero que te sirva.

      • Moises

        El contacto lo movi sin problemas, muchas gracias por la ayuda. Las imagenes de muestra de latest news no hay forma de cambiar el tamaño, siempre hay una ke falla… puse todas al mismo tamaño y listo, pero no me acepto los 250x250px, dejo 240x200px pero me vale. Hice un par de cosas, pero no me funciona bien los enlaces de redes sociales, intente añadir flickr y youtube, parece ke funciona pero no actualiza el enlace. Se podrian poner otro iconos tanto en el fooyer como cabecera? 🙂

        Gracias!

        • Caribdis Diseño Web

          Hola, Moisés.

          Sí, vi que agregaste los iconos en el pie de página, con sus respectivos enlaces. Siguiendo este tutorial se puede agregar cualquier icono de Font Awesome. Para agregarlos en la cabecera, quizá lo más sencillo y rápido sería agregarlos como elemento de menú. Vas al menú y creas un Enlace personalizado; en el campo URL escribís la dirección, y en el campo Texto del enlace, escribís <i class="fa fa-facebook"></i> (para Facebook, por ejemplo). Guardás el menú y listo.

  257. Santiago

    Hola, perdón que moleste nuevamente con otra consulta. Tal vez sea algo muy sencillo, pero estoy volviendome loco y no logro resolverla.
    En el formulario de Pirate Forms, todo funciona bien. Per arriba de los cambios, aparece un texto que por lo que dice fui yo quien lo edité. Pero sinceramente no me queda campo por revisar para eliminarlo. La idea de este formulario en mi página es que no lo completen mas de una vez. El texto dice “Ya estas registrado”, o sea que en algun lugar debo haber podido escribir eso, pero no logro encontrarlo. El problema es que ahora le sale a todo el mundo ese texto, independientemente si haya o no completado el formulario previamente. Ojalá puedan ayudarme, muchas gracias nuevamente!

    • Caribdis Diseño Web

      Hola, no es molestia. No me queda claro dónde aparece ese texto, si dentro de algún campo del formulario u otro lado. Si pudieras enviarme el enlace, lo reviso.

      Saludos.

      • Santiago

        Aparece encima de los campos. En el mismo lugar donde normalmente aparece el mensaje de formulario enviado.
        Solo tengo dos Campos. Nombre y mail. Ese texto que aparece tengo que haberlo puesto yo en algún lado porque es muy propio del mensaje de mi web, no puede ser automático. Pero reviso por todos lados y no lo encuentro.
        Es como si fuera un mensaje de que ese usuario ya completo el formulario. Pero le aparece a todo el mundo.
        Dicho sea de paso, como hago para generar una thank you page diferente? No logro que el botón redireccione correctamente.

        Muchas gracias de verdad por tu ayuda. Dejó el link del sitio debajo.

        • Caribdis Diseño Web

          Aparentemente, está agregado en el archivo front-page.php, a continuación de <!-- / END SECTION HEADER -->.

          Pirate Forms no tiene la opción de configurar una URL de redireccionamiento, pero si te animás a modificar el código, hacé lo siguiente:

          En el archivo pirate-forms.php de la carpeta del plugin, buscá la línea:

          $redirect = $_SERVER["HTTP_REFERER"] . ( strpos( $_SERVER["HTTP_REFERER"], '?' ) === FALSE ? '?' : '&' ) . 'pcf=1#contact';
          

          Y reemplazala por lo siguiente:

          $redirect = $_SERVER["HTTP_REFERER"] . ( strpos( $_SERVER["HTTP_REFERER"], '?' ) === FALSE ? '' : '' ) . 'slug-de-la-pagina/';
          

          Modificá slug-de-la-pagina/ por el que corresponda. Y si en algún momento se actualiza el plugin tendrás que volver a cambiar esa línea.

          Espero que te sirva.

          Saludos.

          • Santiago

            Sos un genio, muchas gracias!
            Ya pude setear el redireccionamiento a la thank you page, y voy a tomar tu comentario sobre la propiedad para las imagenes de cada seccion. Muchas gracias!

            Lo unico que no pude resolver es el mensaje de “ya estas registrado”. Miré en el .php pero no aparece nada raro. Está intacto tal como viene entiendo.
            Me parece muy raro porque no toqué nada del código para el form, sólo edité las opciones que da desde el personalizador.

            Se te ocurre qué puedo hacer?

            Muchas gracias nuevamente!

          • Caribdis Diseño Web

            Pareciera que está en ese archivo, quizá dentro de la línea echo '<div class="row">'; a continuación de if ( defined('PIRATE_FORMS_VERSION') && shortcode_exists( 'pirate_forms' ) ):

            En todo caso, hacé una búsqueda de texto en los archivos (Notepad++ tiene esta herramienta). Y por lo que vi, modificaste directamente la hoja de estilos del tema… Te convendría trabajar con un tema hijo, porque no vas a poder actualizarlo sin perder los cambios.

        • Caribdis Diseño Web

          Una posdata, ahora que veo el sitio (muy buena personalización, por cierto). Quizá quieras agregarles la propiedad background-attachment: fixed; a las secciones para que tengan un “seudoefecto” Parallax. 🙂

  258. Santiago

    Hola, a ver quien puede ayudarme! Se los voy a agradecer mucho.
    Tengo un problema con algo que intento hacer con la imagen de fondo.
    Lo que quiero es que el contenido se vaya desplazando por la imagen de fondo, y no que esta sea siempre igual. Es decir, la imagen de fondo es grande, y no se puede ver toda en un solo scroll. Mi idea es que a medida que uno va scrolleando, va descubriendo la parte de abajo de la imagen. De esta manera la imagen muestra su continuidad.

    Al subir la imagen de fondo, esta permanece fija y a medida que uno scrollea se ve siempre la misma parte de la imagen. Imaginen que fuera un paisaje, veo siempre las nubes y nunca llego al suelo por más que baje y baje.

    Ojalá puedan ayudarme! Gracias.
    Saludos,

    • Caribdis Diseño Web

      Hola, Santiago.

      Entiendo lo que decís, pero en este tema es imposible lograr ese efecto por el alto que tienen las secciones de fondo transparente. La alternativa que tenés es a cada sección aplicar vía CSS un fondo para que se superponga al fondo del sitio (y asignarles una altura de acuerdo a la de la imagen de fondo que quieras mostrar).

      Saludos.

      • Santiago

        Hola Caribdis, muchas gracias por tu comentario.
        Disculpame pero no terminé de entenderte.
        Inicialmente tenía asignada via CSS una imagen de fondo a cada seccion. Pense que podria por ejemplo a cada seccion aplicarle una parte de la imagen completa de fondo que quiero para toda la pagina, y al ensablarse seccion con seccion podria verse como una imagen completa. Pero no quedo bien. Y el mayor problema fue que al asignar imagenes en el background de cada seccion, deja de ser responsive y en mobile se ve muy mal.

        Me ayudar a entender mejor cuál es la alternativa que recomendas o como solucionarlo?
        Muchas gracias por tu ayuda!

        • Caribdis Diseño Web

          Hola, Santiago.

          Me refería a aplicar una imagen de fondo que ocupe el alto de la sección (para que se vea completa). El ancho, obviamente va a ser relativo a la resolución de pantalla en que se vea la página. Cuando vos ves la imagen de fondo en una PC de escritorio (más ancha que alta), no va a adaptarse mágicamente a una pantalla de móvil (más alta que ancha), sí o sí tiene que dejar afuera las partes laterales. Las imágenes no pueden tomar una proporción distinta de la original sin perder alguna porción visible o sin distorsionarse (como por ejemplo, usando la propiedad background-size: contain;).

          No sé si se entiende ahora…

          • Santiago

            Muchas gracias, ya pude ajustar el tamaño de las imagenes. Gracias! Saludos.

  259. Pablo

    Buenas tardes, tengo una inquietud sobre el formulario de contacto y es que no esta enviando información, inicialmente mostraba el mensaje que se había enviado, pero no me llega nada al correo que coloque, después de leer los comentarios, como no estaba el plugin pirateform lo instale, configure el smtp, pero tampoco llega el correo y ahora cuando le doy enviar recarga la página y no muestra mensaje de éxito o falla, podrían ayudarme.

    Gracias

    • Caribdis Diseño Web

      Hola, Pablo.

      Revisá lo siguiente:

      1. Que la dirección de correo no contenga errores
      2. Si no envía con la función nativa de WordPress, que esté bien configurado el SMTP
      3. Que los mails no vayan a parar a la carpeta spam

      Si todo esto está correcto, probá con otro plugin de SMTP (por ejemplo, este, y recordá desmarcar la opción ¿Usar autenticación SMTP? de Pirate Forms).

      Si sigue sin funcionar, tendrás que contactar con el soporte de tu servidor de hosting.

      Saludos.

      • pablo

        Buenos días, ya esta solucionado lo del envío de los correos, estaban llegando a la carpeta de spam, ahora legan a inbox, pero tengo otra duda, no se esta mostrando el recaptcha y esta llegando mucho correo basura, en la configuración esta que se debe mostrar, pero no se ve, como puedo corregir eso?

        Gracias

        • Caribdis Diseño Web

          Hola, Pablo.

          Me alegro de que hayas podido resolver el problema. En cuanto al reCaptcha, ¿has generado las claves API desde https://www.google.com/recaptcha/admin?

          • pablo

            Buenas tardes,

            Ya genere las claves del api y coloque los dos valores en la configuración de la plantilla, pero todavía no se muestra, se debe hacer algo mas?

          • Caribdis Diseño Web

            Tenés que escribir los dos valores en Ajustes > Pirate Forms > Campos > Clave del sitio y Clave secreta, tildando la casilla Yes de Añadir un reCAPTCHA.

          • Pablo

            Buenas tardes, yo no tengo instalado pirate forma, el formulario apareció por defecto al instalar la plantilla, pero ya configure la key y el secret en el la parte de Contáctenos en la personalización de la plantilla, y esta marcado que no oculte el recaptcha.

            Es necesario instalar el pirate forma para que se vea el recapcha? La vez pasada que lo instale tenia el problema es que al enviar el formulario con el pirate form instalado no mostraba el mensaje de envió exitoso

          • Caribdis Diseño Web

            Lo más recomendable es instalar el plugin, ya que como anuncian los desarrolladores de ThemeIsle en futuras versiones del tema se va a suprimir el formulario integrado y solo se usará Pirate Forms (el mensaje de envío exitoso se configura en Ajustes > Pirate Forms > Mensajes > Envío del formulario con éxito).

            Saludos.

  260. NATALIA

    PUEDO AGREGAR WIDGETS EN ULTIMAS NOTICIAS?

    • Caribdis Diseño Web

      No, esa sección solo toma entradas del blog. Para agregar widgets está el pie de página, o tendrías que agregar una nueva sección como se explica aquí. Fijate que ahí también hay un ZIP con los archivos del tema hijo ya creados, tal como se explica en el tutorial.

      Saludos.

  261. javiereyes

    qué tal. excelente tutorial aunque tengo un situación con mi tema child (lo he probado con todos los temas hijos del tema zerif lite) y es que la sección “nuestro enfoque” y “nuestro equipo” se muestran de forma vertical. no recuerdo haber modificado algo para que se muestre de esta forma. eliminé todos los temas y volví a instalarlos, pero nada, sigue igual. ¿alguna sugerencia? de antemano, gracias.

    • Caribdis Diseño Web

      Hola, Javi.

      Gracias por comentar. Si en el tema hijo no modificaste nada del código de esas secciones, no deberías tener problemas, pero tené en cuenta que las secciones Nuestro enfoque y Nuestro equipo se rellenan únicamente con los widgets Nuestro enfoque y Nuestro equipo respectivamente. No funcionan con otro tipo de widgets. Si usás otros widgets que no correspondan a estas secciones, se apilaran uno a continuación del otro.

      Si necesitás usar en una sección cuatro widgets que no pertenezcan a Zerif Lite, este tutorial quizá pueda servirte.

      Saludos.

  262. carlos

    Buenas, tengo un problema en la sección ultimas noticas se muestran las mismas pero no la imagen, solo un cuadrado blanco y debajo el texto, no se si es que hay que enlazar alguna de las imágenes de esa entrada para que se visualicen o cual es la manera de hacerlo. si pudieran ayudarme

    • Caribdis Diseño Web

      Hola, Carlos.

      A cada entrada tenés que agregarle una imagen destacada. Esta respuesta que le di a otro usuario quizá te sirva.

      Saludos.

  263. Jesica

    Hola!
    Excelente ayuda!!!
    una duda, recientemente he instalado el tema Zerif, pero no me aparece la opcion sección de contacto he instalado el plugin recomenado y configurado pero nada en personalización no aparece… como lo puede hacer aparecer!!

    Muchas Gracias

    • Caribdis Diseño Web

      Hola, Jesica.

      Gracias por comentar. La verdad, no sabría decirte con exactitud por qué no aparece la sección de contacto en el Personalizador. Probá desactivando plugins y/o reinstalando el tema.

      Saludos.

  264. diego

    Gracias por responder a mis dudas de hace unas semanas. He tenido un error bastante tonto pero que me trae por el camino de la amargura porque no puedo solucionarlo de ningún modo (eres mi ultima esperanza).

    Olvidé la contraseña de mi sitio web y cuando le doy a “¿Has perdido la contraseña?” me aparece “Por favor, escribe tu nombre de usuario o tu correo electrónico. Recibirás un enlace para crear la contraseña nueva por correo electrónico.” pero cuando lo escribo me aparece
    “No se pudo enviar el correo electrónico
    Posible razón: Tu alojamiento puede tener desactivada la función mail()”

    He llamado a mi servidor y me dicen que todo mi servicio de correo está correcto y que ellos no pueden resolverme el problema…

    ¿Qué puedo hacer?

    Gracias por adelantado!

    • Caribdis Diseño Web

      Hola, Diego.

      No te sientas solo, eso nos pasó alguna vez a todos… 😉

      En este caso tenés dos opciones: una es editar la contraseña en la base de datos de WordPress (necesitás acceso a phpMyAdmin o similar desde el panel de control del hosting). La otra, quizá más sencilla es la que se explica aquí: https://codex.wordpress.org/User:MichaelH/Orphaned_Plugins_needing_Adoption/Emergency

      Básicamente lo que tenés que hacer es copiar el código y pegarlo en un archivo de texto que guardarás con el nombre emergency.php. Luego subís este archivo al directorio raíz de tu sitio y accedés a él desde el navegador. Usás tu nombre de usuario y restablecés la contraseña. Cuando la hayas restablecido (y guardado en un lugar seguro) borrás el archivo emergency.php del servidor.

      Espero que te sirva. Saludos.

  265. Carlos

    Hola:
    Felicidades por los tutoriales y muchas gracias por compartirlo.
    Tengo una duda/problema con el formulario de pirate forms, no envia el mensaje y se queda la página con el siguiente mensaje: “esperando a reservayvete.com” y luego sale el mensaje de que la verificación del Retcatchap ha caducado y no envia nada. de las pruebasáque he hecho solo me ha enviado uno y ya ya está. ¿me puedes indicar donde puede estar el error?

    • Caribdis Diseño Web

      Hola, Carlos.

      Gracias por comentar. Recién lo probé y salió el aviso ¡Gracias, su mensaje fue enviado con éxito! Confirmame si el correo te llegó. Si lo recibiste, pudo tratarse de algún problema momentáneo del servidor. Si se llega a repetir, quizá te convendría contactar con el soporte del hosting.

      Saludos.

      PD: Recibí el mensaje de confirmación.

  266. Elio

    Tengo una duda/problemilla, resulta que el scroll del raton no funciona en la pagina, pero solo hacia abajo cuando quiero subir si funciona el scroll.
    ¿alguna idea del por que?
    gracias!!

    • Caribdis Diseño Web

      Hola, Elio.

      Intentá desactivando el smooth scroll: Apariencia > Personalizar > Opciones generales > General y seleccioná la opción ¿Desactivar desplazamiento suave?

      De lo contrario, tendrías que revisar si algún plugin que hayas instalado está generando un conflicto (los desactivás todos y si el scroll funciona, luego vas activando uno por uno, probando hasta que se produce nuevamente el error).

      Espero que te sirva. 🙂

  267. Diego

    Hola caribdis,

    En primer lugar gracias por el tutorial y el soporte que has dado durante este tiempo, realmente nos es de gran ayuda.

    Mis dudas son las siguientes;
    1. Por defecto los enlaces de mis entradas vienen configurados como predeterminados, cosa que no me resulta nada visual ni me ayuda en seo. Cuando procedo a editar el enlace permanente por enlaces “nombre entrada” obtengo los enlaces deseados pero desde ese momento las urls resultantes me dan el siguiente error: “The requested URL /la-reforma-del-codigo-penal/ was not found on this server.

    Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.”

    ¿sabes por qué puede pasar esto?

    2. En el formulario de contacto, relleno todos los campos que me pide -en especial mi correo (he probado con varios)- pero nunca he recibido ningún correo electronico, y me he asegurado de haber rellenado y enviado varios formularios desde varios ordenadores y “desde” varias cuentas de correo electronico diferentes. ¿Sabes qué estoy haciendo mal?

    Muchas gracias por tu tiempo!

    • Caribdis Diseño Web

      Hola, Diego.

      Gracias por el comentario.

      El primer error que mencionás es muy probable que se deba a que el archivo .htaccess del sitio no tiene permisos de escritura. Deberías acceder a la carpeta de instalación de WordPress en el servidor (vía panel de control o cliente FTP) y verificar que los permisos son los correctos y que el contenido del archivo .htaccess es el siguiente:

      # BEGIN WordPress
      <IfModule mod_rewrite.c>
      RewriteEngine On
      RewriteBase /
      RewriteRule ^index\.php$ - [L]
      RewriteCond %{REQUEST_FILENAME} !-f
      RewriteCond %{REQUEST_FILENAME} !-d
      RewriteRule . /index.php [L]
      </IfModule>
      # END WordPress 
      

      Si la instalación de WordPress está en una carpeta (por ejemplo /wordpress/), el código sería:

      # BEGIN WordPress
      <IfModule mod_rewrite.c>
      RewriteEngine On
      RewriteBase /wordpress/
      RewriteRule ^index\.php$ - [L]
      RewriteCond %{REQUEST_FILENAME} !-f
      RewriteCond %{REQUEST_FILENAME} !-d
      RewriteRule . /wordpress/index.php [L]
      </IfModule>
      # END WordPress 
      

      En cuanto al formulario de contacto, verificá que el hosting tenga habilitada la función de PHP mail. Si no fuera así, tendrías que configurar el plugin Pirate Forms para que use SMTP (con los servidores configurados correctamente de acuerdo a los datos que te haya proporcionado el hosting).

      Espero que te sirva.

      Saludos 🙂

  268. Israel

    Hola, el tema viene por defecto sin página de blog.

    Como puedo activar la página de del blog?

    • Caribdis Diseño Web

      Hola, Israel.

      Para activar la página del blog tenés que crear una nueva página y asignarle la plantilla Blog, tal como se ve en esta imagen:

      Zerif Lite Plantilla Blog

      Luego buscás esa página en Apariencia > Menús para poder agregar el enlace en el menú de navegación.

      Espero que te sirva. Saludos 🙂

      • Israel

        Si me sirvió, queda resuelta mi duda.
        Muchas gracias.

  269. Isabel

    Hola! Un tutorial genial! He instalado este tema, y el plugin de WooComerce, pero cuando voy a la tienda, no me muestra los productos, ¿Sabes por qué puede ser? Gracias.

    • Caribdis Diseño Web

      Hola, Isabel.

      Gracias por tu comentario. Si has creado la página de la Tienda desde los ajustes de WooCommerce y existen productos, debería mostrarlos. Si te aparece un mensaje “No se ha encontrado la página” probá actualizando los Enlaces permanentes (guardando los ajustes nuevamente, no es necesario cambiar ninguna opción).

      Avisame si esto te sirve. Saludos 🙂

  270. Jorge Alarcón

    ¿Cómo puedo agregar campos al formulario de contacto?

    • Caribdis Diseño Web

      Hola, Jorge.

      No es posible agregar campos desde los ajustes. Tendrías que usar un plugin externo, como por ejemplo Contact Form 7, y luego integrarlo en un tema hijo, además de aplicarle los estilos del tema.

      Saludos. 🙂

  271. Elio

    Buenas de nuevo, la verdad que lo voy cogiendo el gustillo a este tema, lo 1º como siempre felicitarte por el blog y por tus respuestas. Mi duda de hoy es, puedo mover en el zerif lite los contenidos o directamente puedo coger 3 secciones y que salgan por ejemplo en el “about us” es algo que realmente me interesa, gracias.

    Con respecto a crear el tema hijo, solo puedo llegar hasta intentar crear la carpeta “/sections/”, no me deja dice que ya hay otra.

    Muchas gracias!

    • Caribdis Diseño Web

      Hola, Elio.

      Para cambiar el orden de las secciones, necesitás sí o sí un tema hijo para poder editar el archivo front_page.php.

      No vas a poder usar otras secciones para ubicar en el espacio de About Us porque esta no es un área de widgets.

      Si la carpeta /sections/ ya está creada en la carpeta del tema hijo (por ejemplo, en /wp-content/themes/zerif-child/ nada más tenés que guardar los archivos correspondientes ahí dentro.

      Avisame si esto te sirve.

  272. Elio

    Hola, la verdad que este tema esta muy bien, solo hace falta tocarle algunas cosillas para que quede muy profesional, mi duda es, ¿Como puedo hacer que en la sección llamado de atención los botones se abran en otra ventana?

    Gracias por la ayuda que prestas y un saludo!

    • Caribdis Diseño Web

      Hola, Elio. Gracias por tu comentario.

      Para esto, tendrías que trabajar con un tema hijo. De necesitarlas, podés pasar por esta entrada, donde están las instrucciones para crear un tema hijo.

      Luego, tenés que copiar los archivos ribbon_with_right_button.php y ribbon_with_bottom_button.php de la carpeta /sections/ del tema padre a la carpeta /sections/ del tema hijo. Con un editor de texto (recomendado: Notepad++) abrís el archivo ribbon_with_right_button.php y buscás la siguiente línea:

      echo '<a href="'.$zerif_ribbonright_buttonlink.'" class="btn btn-primary custom-button red-btn">'.$zerif_ribbonright_buttonlabel.'</a>';
      

      Justo al lado de <a y antes de href añadís target="_blank", con lo cual la línea completa quedaría:

      echo '<a target="_blank" href="'.$zerif_ribbonright_buttonlink.'" class="btn btn-primary custom-button red-btn">'.$zerif_ribbonright_buttonlabel.'</a>';
      

      Lo mismo con el archivo ribbon_with_bottom_button.php. Buscás la línea:

      echo '<a href="'.$zerif_bottomribbon_buttonlink.'" class="btn btn-primary custom-button green-btn">'.$zerif_bottomribbon_buttonlabel.'</a>';
      

      Y le agregás el target="_blank":

      echo '<a target="_blank" href="'.$zerif_bottomribbon_buttonlink.'" class="btn btn-primary custom-button green-btn">'.$zerif_bottomribbon_buttonlabel.'</a>';
      

      Espero que te sirva. Saludos 🙂

      • Elio

        Si me ha servido, lo he editado desde el tema padre, es que con el tema hijo cuando llego al paso de crear la carpeta /sections/, no me deja, dice que ya hay uno con ese nombre…..

  273. Alvaro Ortiz

    Buen dia, quisiera agregar una zona (una posición) nueva en la plantilla. Como hacer esto?. Que archivos debo modificar he seguido un tutorial (http://www.esandra.com/wordpress-como-crear-zonas-listas-para-widgets/) pero no logro ver a donde pegar el segundo fragmento de codigo. Podrian ayudarme? Muchas gracias.

    • Caribdis Diseño Web

      Hola, Álvaro.

      Justo venía planeando hacer una serie de entradas con varios tutoriales para Zerif Lite, que forman parte de la documentación ofrecida por ThemeIsle. Si me tenés un poquito más de paciencia, esta semana arranco directamente con ¿Cómo agregar una nueva sección personalizada?.

      Los tutoriales completos incluirán:

      • ¿Cómo reemplazar la sección de título grande con un carrusel de imágenes?
      • ¿Cómo cambiar los anclajes del menú?
      • ¿Cómo reemplazar la sección de habilidades con una imagen?
      • ¿Cómo eliminar la opacidad del fondo?
      • ¿Cómo añadir iconos de redes sociales en el pie de página?
      • ¿Cómo añadir una barra de búsqueda en el menú superior?
      • ¿Cómo desactivar las animaciones de los contenidos?
      • ¿Cómo cambiar el color de los círculos de las habilidades?
      • ¿Cómo mostrar siempre el icono “hamburguesa” para el menú?
      • ¿Cómo añadir un tercer botón en la sección de título grande?
      • ¿Cómo eliminar la barra lateral de una página individual?
      • ¿Cómo añadir una barra lateral en las páginas de WooCommerce?
      • ¿Cómo desactivar el icono “hamburguesa” para el menú en dispositivos móviles?
      • ¿Cómo cambiar los bordes circulares a bordes cuadrados?
      • ¿Cómo mostrar entradas de una categoría en especial en la sección “Últimas noticias”?
      • ¿Cómo añadir bordes a las pestañas de la página de productos de WooCommerce?
      • ¿Cómo cambiar el tamaño de los logos de clientes?
      • ¿Cómo añadir 5 miembros de equipo?

      No olvides suscribirte al blog (en la barra lateral) para recibir los avisos de nuevas entradas.

      Saludos. 🙂

      • Alvaro Ortiz

        Muchisimas gracias por responder y estare pendiente de los tutoriales

  274. Mariano

    Hola!!! Ojala puedan iluminarme.
    Luego de hacer mi pagina en wordpress la subí vía Filezila. En mi pagina aparece el siguiente error:
    Parse error: syntax error, unexpected ‘function’ (T_FUNCTION) in /home/xxxxxxxxx/public_html/wp-content/themes/zerif-lite/inc/jetpack.php on line 1
    HACE 3 SEMANAS QUE NO ENCUENTRO SOLUCIÓN!
    Borre el tema volví a subirlo, borre el archivo que falla del plugins de por cierto viene por defecto, pero nada.
    Les agradecería por favor me puedan dar una mano.
    Por cierto esta bárbaro el post.
    Saludos!!!

    • Caribdis Diseño Web

      Hola, Mariano. Ya lo conversamos vía chat, espero que hayas podido resolverlo.

      Este error a veces aparece cuando se suben los archivos por FTP. La solución sería borrar por completo la carpeta de /wp-content/themes/, buscar el tema desde Apariencia > Temas > Añadir nuevo e instalarlo desde el repositorio de WordPress.

      • Mariano

        Tal como me dijiste desde un principio volví a un tema por defecto, lo subí y efectivamente la pagina quedo en blanco, por ende tal como lo premeditaste mi problema venia mas de fondo.
        Borre la carpeta que me especificas e instale el tema nuevamente desde el repositorio. Ahora lo estoy subiendo.
        Espero funcione!! y desde ya muchas gracias!!!!
        Luego te cuento…

        • Mariano

          Hola quería contarles que luego de reinstalar el WordPress desde cero, instale el tema y funciona a la perfección.
          Quería agradecerte por la ayuda y estar pendiente si pude o no solucionar el problema.
          MUCHAS GRACIAS !!!!

          • Caribdis Diseño Web

            ¡Genial! Me alegro de que hayas podido resolver el inconveniente.

            Saludos 🙂

  275. Albert

    Hola,

    Como puedo añadir el wigdet de google translate en el footer o en el menú superior principal? Ahora solo lo puedo añadir dentro de los wigdet predeterminados y no queda bien.
    Gracias
    Albert

    • Caribdis Diseño Web

      Hola, Albert.

      Al activar el plugin y elegir los idiomas, si seleccionás la opción Yes, show widget en el ajuste Show floating translation widget?, la pequeña pestaña a la derecha queda fija en todas las páginas del sitio (como se ve en la web del autor).

      Para hacer un menú desplegable, tenés que seguir las siguientes instrucciones:

      Vas a Apariencia > Menú. Activás el cuadro Descripción para los elementos del menú, desde la pestaña superior derecha Opciones de pantalla.

      Una vez activadas las descripciones, en el menú que has creado para la navegación principal, creás un nuevo elemento de menú desde el panel Enlaces personalizados:

      En el campo URL escribís el signo #. En el campo Texto del enlace, escribís una etiqueta que lo identifique (por ejemplo, English o Inglés; este texto no se muestra de todos modos). Luego pegás el siguiente código en el campo Descripción: [glt language="Spanish" label="Español"]. Para cada idioma que quieras mostrar, editás el contenido de las etiquetas language y de label, siguiendo estos ejemplos:

      • [glt language="English" label="English"], para inglés
      • [glt language="French" label="Français"], para francés

      Teniendo en cuenta que el nombre del idioma seleccionado tiene que estar escrito en inglés (language="English", language="French", etc.). En este menú los iconos de las banderas no se muestran, pero creo que esa es una limitación de la versión gratuita. Por último, podés hacer otro elemento de menú llamado Idioma (también como Enlace personalizado con un # en el campo URL) y pasar los distintos idiomas creados a subelementos de este menú.

      Espero que te sirva. Saludos 🙂

      • Albert

        Hola,

        Gracias. Me funciona pero cuando cambio de idioma el css se me desmonta. Por ejemplo el texto de la imagen principal se reduce y pasa lo mismo con todos. Alguna solución?

        Gracias.

        • Caribdis Diseño Web

          Hola, Albert.

          La verdad, no sé por qué sucede esto; aparentemente el plugin está envolviendo los títulos en la etiqueta <font>. Una solución —no sé si es la mejor, pero funciona— es agregar el siguiente código CSS (lo ideal, en la hoja de estilos del tema hijo; si no, deberá ser editando la del tema, y luego recordar volver a agregarlo cuando se actualice):

          .intro-text font { font-size: 55px; }
          .dark-text font, .white-text font { font-size: 45px; }
          .big-intro font { font-size: 60px; }
          h3 font { font-size: 24px; }
          
          • Albert

            Hola,

            Muchas gracias por la rapidez. Lo que he hecho ha sido poner el CSS dentro del widget en el aparatado add CSS style y me funciona. Imagino que aunque actualice no se borrará.
            Por otra parte veo que también me traduce la dirección que tengo en el footer. Se puede evitar?
            y por otro lado, no me he creado un tema hijo. Es necesario? Soy nuevo en wordpress pero voy batallando.
            Gracias!!

          • Caribdis Diseño Web

            Excelente. Para que no te traduzca la dirección, la envolvés en la etiqueta <span> con la clase notranslate. Quedaría así:

            <span class="notranslate">Nombre de calle 1300, Ciudad - Provincia (etc.)</span>

            Esto sirve para cualquier frase (o incluso nombres propios) que quieras conservar en el idioma original.

            El tema hijo es necesario únicamente si hacés modificaciones en el estilo o en los archivos de tema. Si te manejás solo con las opciones de personalización, no hace falta.

  276. David Montellano

    Hola, muy buen diccionario de Zerif,

    Solo tengo un problema, las entradas se visualizan en la sección de #latestnews de forma correcta, cuando le doy click a la Entrada me lleva a la página donde sólo se visualiza el título de la entrada pero nada de contenido y tampoco el sidebar derecho.

    Estoy utilizando el theme free, tendrás una idea que se debe el escenario?

    Saludos.

    • Caribdis Diseño Web

      Hola, David.

      Gracias por dejar tu comentario. La verdad, no se me ocurre qué es exactamente lo que ocasiona el problema que mencionás, porque si las entradas tienen contenido y la barra lateral tiene widgets asignados, deberían aparecer. Tendría que verlo en funcionamiento para darte una respuesta más acorde. En todo caso, probá desactivando todos los plugins para ver si alguno está causando algún conflicto.

      Saludos.

  277. Vicente

    Hola, muy buen artículo. En la actualidad trabajo para implantar este tema, pero tengo unas preguntas. ¿Como añadiría otros iconos de redes sociales en el apartado su equipo o en el pie de página? Un saludo

    • Caribdis Diseño Web

      Hola, Vicente. Gracias por tu comentario. Me temo que esto no es posible en la versión gratuita, sin modificar manualmente el código de varios archivos del tema. La versión PRO sí tiene opción para agregar, además de los disponibles en Zerif Lite, Google+, Pinterest, Tumblr, Reddit, Correo electrónico y URL del sitio.

      Saludos.

  278. josep

    Genial aportación y de gran ayuda!!
    Como se puede instalar el zip con la traducción en el tema?

    Muchas gracias!!

    • Caribdis Diseño Web

      Hola, Josep:

      Gracias por tu comentario. El .zip tenés que descomprimirlo en alguna carpeta de tu equipo (tendrás ahora dos archivos: es_ES.mo y es_ES.po). Luego, para instalar la traducción, necesitás acceso vía FTP a la carpeta de instalación de WordPress. Buscás la carpeta /wp-content/themes/zerif-lite/languages/ y subís el archivo es_ES.mo. No es necesario subir el archivo es_ES.po, pero si en algún momento querés editar algo de la traducción, tendrás que abrir este archivo con un programa como Poedit, y luego compilar el .mo antes de subir la traducción editada a la carpeta indicada anteriormente. Es probable que en la siguiente versión de Zerif Lite incluyan la traducción directamente en el tema.

      Espero que esto sea de ayuda, y por cualquier otra consulta quedo a tu disposición.

      Un cordial saludo 🙂

    • josep

      Hola de nuevo.
      Ya tengo más o menos acabada mi página con zerif lite pero tengo un problema que no consigo resolver.
      Las entradas de la página “blog” solo me aparecen resumidas y con un botón de “leer mas”, entonces veo la entrada completa y las fotos.
      Y en la página principal en la sección de “ultimas noticias” que (te llevan a la página blog) solo veo el resumen de texto (eso ya está bien) pero no me aparece la foto que ilustra el texto.
      Te adjunto un link a la página para que lo veas.
      http://josepllordes2.apps-1and1.net/

      Muchísimas gracias otra vez por tu gran ayuda!!
      josep

      • Caribdis Diseño Web

        Hola, Josep:

        Esto es porque no estás asignando una imagen destacada a las entradas. Fijate en la parte derecha del Editor de cada entrada, en el panel justo debajo de Etiquetas, le das clic a Asignar imagen destacada y seleccionás alguna que tengas en la biblioteca de medios (o subís una nueva).

        • josep

          Problema resuelto. Ya he aprendido un poco mas.
          Muchísimas gracias por vuestra ayuda!!
          josep

  279. Miguel

    Hola,

    muchas gracias por este post, he tenido problemas con quitar los comentarios en el theme gratuito, no me da la opción, ni en menu “opciones” y luego “discusión”, tampoco en editar página, qué se puede hacer?

    gracias por la ayuda

    • Caribdis Diseño Web

      Hola, Miguel:

      De nada 🙂 No sabría darte una respuesta exacta, porque no sé la configuración que estás usando. Pero fijate en Editar página > Opciones de pantalla (la pestaña del extremo superior derecho) que esté seleccionada la primera casilla Comentarios. Luego de seleccionarla, verás debajo del editor las opciones para permitir comentarios y pingbacks.

      Otra manera es hacer clic en Edición rápida (en la lista de páginas), y desmarcar la opción Permitir comentarios.

      Luego querrás desactivar los comentarios para las nuevas entradas y páginas, desde Ajustes > Comentarios, desmarcando la opción Permite que se publiquen comentarios en los artículos nuevos.

      Espero que esto te sirva.

      Saludos.

      • Miguel

        Muchas gracias! Seguí tus consejos y lo pude solucionar.

  280. Roberto

    Hola:
    Gracias por este post. Me está siendo de gran utilidad.
    Una pregunta, para cambiar el color de fondo del Big title section, dónde puedo hacerlo?
    Muchas gracias y un saludo

    • Caribdis Diseño Web

      Hola, Roberto:

      De nada 🙂 Me alegro de que sea útil.

      La versión gratuita no tiene opción para cambiar colores. Tendrías que crear un tema hijo y aplicar los estilos en el archivo style.css, o bien modificar directamente la hoja de estilos del tema, pero no es lo más recomendable ya que tendrías que editarlo cada vez que se actualice el tema.

      La clase a editar sería .header-content-wrap. De manera predeterminada, tiene un color negro semitransparente superpuesto que oscurece la imagen de fondo. Podés elegir allí un color sólido de fondo, y aun tener la imagen de fondo en la sección “Contáctenos” (o eliminar la imagen por completo desde el Personalizador). Para un color sólido gris, por ejemplo, el código sería:

      .header-content-wrap {
          background: #ccc;
      }

      Para un rojo semitransparente, el código sería:

      .header-content-wrap {
          background: rgba(180,43,27, 0.5);
      }

      Espero que se haya entendido, y cualquier otra consulta, aquí estoy para ayudar.

      Saludos.

      • Roberto

        Muchas gracias. Probaré con tus consejos. Por ahora puedo ir tirando con lo básico para un quienes somos, dónde estamos.
        Un saludo

Los comentarios están cerrados. ¿Por qué?

Pin It en Pinterest

Compartir esto

Compartir es agradecer

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