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

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

Últimas entradas de Caribdis.Net (ver todo)

Se responden todas las dudas o consultas de los lectores acerca del contenido de esta publicación únicamente en su respectiva sección de comentarios, por lo general dentro de las 24/72 hs. 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: pablobaroso@hotmail.com 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:tuemail@gmail.com" 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