Zerif Lite: ¿Cómo agregar una nueva sección personalizada?

326 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

Zerif Lite - Tutorial

Por: Caribdis.Net

Publicada: 17 de noviembre de 2015

Atención

El tutorial actualizado se encuentra aquí.

Zerif Lite es uno de los temas para WordPress más usados en el último año y medio. Gran parte de su éxito se debe a una combinación entre buen diseño, funcionalidad y simplicidad para configurar. Es, además, compatible con WPML y WooCommerce, y su equipo de desarrolladores y soporte se encuentra activamente involucrado en constantes mejoras.

Como todo tema gratuito tiene ciertas limitaciones, pero desde la documentación oficial de ThemeIsle ofrecen una completa base de conocimiento con códigos personalizados para lograr algunas modificaciones que son solicitadas con mucha frecuencia por los usuarios.

En esta serie de entradas que voy a archivar en la categoría Zerif Lite, presentaré cada uno de esos tutoriales traducidos al español (y algunos actualizados, ya que hubo varios cambios de código en las últimas versiones), comenzando con cómo añadir una sección nueva en la página frontal.

Zerif Lite: ¿Cómo agregar una nueva sección personalizada?

Últimas entradas de Caribdis.Net (ver todo)

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

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

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

326 Comentarios

  1. Dalia

    Hola!
    Realmente soy nueva en esto del WordPress, y para seguir el camino de creación de Slider en el Header, me piden crear antes un tema hijo, mi consulta es, a qué te refieres con CREAR CARPETA en el enunciado:

    “Cree una carpeta en /wp-content/themes/ denominada /zerif-child/. Cree un archivo nuevo en un editor de texto (por ejemplo, Notepad++), con el nombre functions.php. Copie el siguiente código en este archivo y guárdelo en la carpeta /zerif-child/ ”

    Como lo creo? qué botón se usa? o dónde le poncho? es posible que lo expliques mejor en imagenes?
    GRACIAS

    • Caribdis Diseño Web

      Hola, Dalia.

      Los archivos podés crearlos en tu PC y luego subirlos al servidor vía FTP.

      Te recomiendo primero buscar información sobre la administración de archivos de una web, luego la Guía WP Fácil para el manejo básico de WordPress, y por último adentrarte en la creación de temas hijos.

      Saludos.

  2. Mario Ulloa

    muchas gracias por tu desinteresada y valioa ayuda,, tengo un problema.. envío los pasos que hice enumerados.. despues del paso 8 te presento el problema:

    1.- crear /wp-content/themes/zerif-child/
    2.- crear en la carpeta /zerif-child/ el archivo funcions.php
    3.- edit /zerif-child/funcions.php y pegar el codigo:

    4.- crear en la carpeta /zerif-child/ el archivo style.css y pegar en el texto:
    /*
    Theme Name: Zerif Hijo
    Theme URI:
    Description: Tema hijo de Zerif Lite, por ThemeIsle.
    Author: Caribdis Diseño Web
    Author URI:
    Template: zerif-lite
    Version: 1.0
    License: GNU General Public License v2
    License URI:
    */
    5.- crear en la carpeta /zerif-child/ el archivo custom.css
    6.- crear la carpeta /wp-content/themes/zerif-child/sections
    7.- crear en carpeta /wp-content/themes/zerif-child/sections el archivo new_sections.php
    8.- copiar el archivo front-page.php desde /wp-content/themes/zerif-lite a /wp-content/themes/zerif-child/
    aqui viene el problema debido a que el contenido de mi archivo front-page.php es el siguiente:

    sprintf( __( ‘Newer posts %s’,’zerif-lite’ ), ‘→’ ), ‘prev_text’ => sprintf( __( ‘%s Older posts’, ‘zerif-lite’ ) , ‘←’ ) ) );

    else :

    get_template_part( ‘content’, ‘none’ );

    endif;
    ?>

    y no veo en ninfguna parte:
    /* OUR FOCUS SECTION */
    $zerif_ourfocus_show = get_theme_mod(‘zerif_ourfocus_show’);
    if( isset($zerif_ourfocus_show) && $zerif_ourfocus_show != 1 ):
    zerif_before_our_focus_trigger();
    get_template_part( ‘sections/our_focus’ );
    zerif_after_our_focus_trigger();
    endif;

    por lo cual no puedo seguir, me ayudas.. ¿en donde me equivoque? gracias

    • Mario Ulloa

      Lo mas parecido que encontre y creo que es el correcto es el archivo: template-frontpage.php.
      al fina en la carpeta zerif-child quedan los sgtes archivos:
      -carpeta sections
      archivo custom.css
      archivo functions.php
      archivo style.css
      archivo template-frontpage.php

      • Caribdis Diseño Web

        Hola, Mario.

        El código de esta entrada sirve para la versión 2.0.5 de Zerif Lite, que es la que se descargaba de la web de ThemeIsle. No estoy segura, pero creo que la descontinuaron y ahora quedó como oficial la 1.8.5.x, en la cual el código de las secciones se movió al archivo content-frontpage.php.

        Voy a ver si en unos días actualizo el tutorial.

        Saludos.

        • Mario Ulloa

          Muchas gracias, por lo visto así es… sobre la misma te hago una consulta… al final baje la copia del sitio hijo que subiste y la instale en mi servidor, el problema es que al activarla se desconfigura la plantilla.. por ejemplo mueve todas las imágenes a cualquier lado… como puedo solucionar eso.. te adjunto una imagen para ser mas gráfico

          ht tp ://i. imgur. com/ gskJZOm. png

          • Caribdis Diseño Web

            Hola, Mario.

            El tema hijo de esta entrada es para la versión 2.0.5. No está probado con la del repositorio y es muy probable que no sea compatible por los cambios de código que tuvo.

            Saludos.

        • Gustavo MArquez

          Hola, podrias ayudarme a ubicar el codigo que tiene el nombre del boton Finalizar Compra, de Woocommerce que lo quiero dejar solo en Finalizar.

          • Caribdis Diseño Web

            Hola, Gustavo.

            Tenés que copiar el archivo proceed-to-checkout-button.php de la carpeta /wp-content/plugins/woocommerce/templates/cart/ a una carpeta /woocommerce/cart/ creada dentro de la carpeta del tema hijo y reemplazar la parte que dice Proceed to checkout por el texto que quieras.

            Saludos.

  3. Verónica

    Hola Ana, estoy tratando de agregar otra página para poder acceder mediante elpa.com.uy/anuncios, que no va a ir en el menú sino que se utilizará para publicaciones en redes sociales, pude agregarla pero no encuentro la manera de agregarle entradas, si coloco una entrada nueva se queda junto a las otras en elpa.com.uy/noticias, ¿Cómo podría hacerlo? (si es que se puede).
    Gracias!

    • Caribdis Diseño Web

      Hola, Verónica.

      Si creaste una página que debería mostrar entradas, lo más conveniente sería buscar un plugin que te permita elegirlas por categoría e insertar el código abreviado dentro de esa página.

      Saludos.

      • Verónica

        Si, estuve buscando eso pero el problema que tengo es que sirven para mostrar ciertas entradas en otra página, pero yo necesito además que esas entradas que muestro en /anuncios ya no aparezcan en /noticias. Tienes idea de cómo hacerlo?

        • Caribdis Diseño Web

          Hola, Verónica.

          Podés usar como referencia esta entrada, y en lugar de 'category_name' => 'mi-categoria' usá el código 'cat' => '-234' para excluir la categoría que quieras. El 234 corresponderá a la ID de la categoría en cuestión (la sacás de la página de Categorías, parándote en el nombre y fijándote en la URL que aparece en la barra inferior (algo así como .../wp-admin/term.php?taxonomy=category&tag_ID=234).

          Espero que se haya entendido.

          Saludos.

          • Verónica

            Excelente, gracias! ¿Se puede hacer filtrando por etiqueta en vez de por categoría?

          • Caribdis Diseño Web

            Sí, por supuesto 🙂 El código sería 'tag__not_in' => '#', donde # es la ID de la etiqueta (misma lógica que para las categorías).

            Saludos.

          • Verónica

            Muchas gracias! Con eso logré quitar la categoría “anuncios” de las entradas recientes pero sin embargo si voy a /noticias me sigue mostrando el post de anuncio de prueba que no quiero que esté allí porque debería ir sólo en /anuncios. Es posible excluír la categoría de /noticias?

          • Caribdis Diseño Web

            Hola, Verónica.

            En ese caso, lo que te conviene hacer es excluir la categoría con una función:

            function zerif_exclude_category( $query ) {
                if ( $query->is_home() ) {
                    $query->set( 'category__not_in', array( 234 ) );
                }
            }
            add_action( 'pre_get_posts', 'zerif_exclude_category' );
            

            Donde 234 sería la ID correspondiente a la categoría.

            Saludos.

  4. Jose

    Hola,

    Tengo una sitio zerif lite, pero he tenido dificultad con los buscadores, no me estan haciendo busquedas a pesar de tener todo configurado correctamente, y las pruebas de Google Search Console son correctas, pero aún asi no me registran busquedas.
    alguna sugerencia?

    • Caribdis Diseño Web

      Hola, José.

      No hay fórmulas definitivas para eso, porque depende de muchos factores que hay que sumar al mero hecho de tener un sitio armado. Lo único que podría sugerirte es que busques información sobre posicionamiento web.

      Saludos.

  5. Caribdis Diseño Web

    Hola, Juan.

    El código sería el siguiente:

    /* colores al posar el puntero */
    #nuevaseccion span:nth-child(4n+1) .focus-box .service-icon:hover,
    #nuevaseccion span:nth-child(4n+1) .service-icon:focus {
        border: 10px solid #E96656;
    }
    #nuevaseccion span:nth-child(4n+2) .focus-box .service-icon:hover,
    #nuevaseccion span:nth-child(4n+2) .focus-box .service-icon:focus {
        border: 10px solid #34D293;
    }
    #nuevaseccion span:nth-child(4n+3) .focus-box .service-icon:hover,
    #nuevaseccion span:nth-child(4n+3) .focus-box .service-icon:focus {
        border: 10px solid #3AB0E2;
    }
    #nuevaseccion span:nth-child(4n+4) .focus-box .service-icon:hover,
    #nuevaseccion span:nth-child(4n+4) .focus-box .service-icon:focus {
        border: 10px solid #F7D861;
    }
    /* colores de líneas */
    #nuevaseccion span:nth-child(4n+1) .focus-box .red-border-bottom:before {
        background: #E96656;
    }
    #nuevaseccion span:nth-child(4n+2) .focus-box .red-border-bottom:before {
        background: #34D293;
    }
    #nuevaseccion span:nth-child(4n+3) .focus-box .red-border-bottom:before {
        background: #3AB0E2;
    }
    #nuevaseccion span:child(4n+4) .focus-box .red-border-bottom:before {
        background: #F7D861;
    }
    

    Tenés que crear un archivo custom.css en la carpeta del tema hijo y pegar esos códigos allí.

    Saludos.

    • Juan

      Eres Increíble, ha funcionado a la perfección. Muchísimas gracias.

  6. Juan

    Hola desde Barcelona, España, Increíble que todavía exista gente dispuesta a aportar sabiduría sin lucro. Mil gracias por tu tutoría. Ha funcionado a las mil maravillas, tambien he colocado widgets de “Enfoque” en columnas como comentaste en una de las respuestas. Pero ahora cuando monto el cursor sobre uno de ellos no cambia el color del circulo como si lo hace en la sección original. ¿podrías ayudarme en eso?

    • Caribdis Diseño Web

      Hola, Juan.

      Gracias por tu comentario. 🙂

      No me enviaste la URL para poder ver el código, pero entiendo que si están una sección personalizada usaste una ID específica para esa nueva sección. Fijate en el código de esta respuesta, y reemplazando #focus por #nuevaseccion (o el nombre que hayas usado).

      Saludos.

      • Juan

        Hola, gracias por la pronta respuesta. La dirección: www.prolabel.es no se si me explicado bien, en la nueva sección creada, llamada “productos” cuando te montas sobre los iconos redondos que contienen las fotos no cambian de color. Así mismo las lineas divisorias tampoco cambian. Si la respuesta anterior sigue siendo valida por favor indícame en que archivo debo hacer los cambios. De nuevo mil gracias por tu desinteresada ayuda. Saludos y exito

  7. Luis

    Buenas amigo me puedes ayudar a montar una nueva sección de galería de imágenes al estilo ultima noticias y blog.

    • Caribdis Diseño Web

      Hola, Luis.

      Podés seguir las instrucciones que se detallan en este tutorial (la última parte).

      Saludos.

  8. paola

    hola buenas noches tengo una duda, yo estoy realizando el proyecto directamente desde mi hosting, mi pregunta es ¿en dónde instalo el editor de texto ? lo instalo donde dice plugins o en dónde gracias

  9. paola

    Hola buenas noches, tengo una duda, si yo voy a realizar un tema hijo desde un servidor que no es local, dónde instalo el editor de texto, agrego el archivo de instalación del editor en wordpress donde dice plugins? o en que otro lado , gracias

    • Caribdis Diseño Web

      Hola, Paola.

      El editor de texto lo instalás en tu computadora y es para crear y editar los archivos necesarios del tema. Luego podés subirlos vía FTP, o, una vez creados, comprimir la carpeta y cargar el ZIP desde Apariencia > Añadir tema > Subir tema.

      Saludos.

      • paola

        vale muchas gracias, eso quiere decir que no hay forma de editarlo desde el hosting

        • Caribdis Diseño Web

          Hola, Paola.

          Si tu hosting tiene un administrador de archivos con opción de edición, sí.

          Saludos.

  10. Angel

    Hola,

    No recuerdo si ya escribí en esta entrada, pero quisiera saber si me puedes ayudar.
    He seguido los pasos haciéndolo manualmente y bajando los archivos que pones al final y en ninguno de los dos casos logro hacer que aparezca la nueva sección en el “Personalizador”. Lo he hecho unas tres veces, sin éxito 🙁

    Mi web es: http://lamaletaliteraria.com/

    Gracias 🙂

    • Caribdis Diseño Web

      Hola, Ángel.

      El tema hijo debe estar activado para que veas los cambios.

      Saludos.

  11. Sebas

    Buenos días, estoy enormemente agradecido por todas las ayudas que nos das y sin ningún interés.
    No se si mi pregunta va aquí pero no encuentro donde hacerla:
    Como puedo diseñar la página de entradas (blog) con los posts en 2 columnas? o por ejemplo como la tuya?
    Muchas gracias de antemano!

    • Caribdis Diseño Web

      Hola, Sebas.

      Gracias por tu comentario.

      Hoy estás de suerte, ya que acabo de publicar una entrada con instrucciones para mostrar el blog con un diseño de grilla. 🙂

      Saludos.

  12. Neomar Blanco

    Buenos días, pude realizar esta parte del tutorial sin problemas, sin embargo intente hacerlo pero tomando de base la sección latesnews y siempre me da error, no se exactamente que etiquetas cambiar para que realice la conexión

    • Caribdis Diseño Web

      Hola, Neomar.

      ¿Cuál sería el error? La único que tendrías que hacer en el archivo new_section.php es reemplazar la siguiente porción de código:

      echo '<section class="latest-news" id="latestnews">';
          zerif_top_latest_news_trigger();
          echo '<div class="container">';
          /* SECTION HEADER */
          echo '<div class="section-header">';
          /* Title */
          zerif_latest_news_header_title_trigger();
          /* Subtitle */
          zerif_latest_news_header_subtitle_trigger();
      

      por esta:

      echo '<section class="latest-news" id="nuevaseccion">';
          zerif_top_latest_news_trigger();
          echo '<div class="container">';
          /* SECTION HEADER */
          echo '<div class="section-header">';
          $zerif_newsection_title = get_theme_mod('zerif_newsection_title');
          if( !empty($zerif_newsection_title) ):
          echo '<h2 class="dark-text">' . wp_kses_post( $zerif_newsection_title ) . '</h2>';
          else:
          echo '<h2 class="dark-text">' . __('Latest news','zerif-lite') . '</h2>';
          endif;
          $zerif_newsection_subtitle = get_theme_mod('zerif_newsection_subtitle');
          if( !empty($zerif_newsection_subtitle) ):
          echo '<div class="dark-text section-legend">'.wp_kses_post( $zerif_newsection_subtitle ).'</div>';
          elseif ( is_customize_preview() ):
          echo '<div class="dark-text section-legend zerif_hidden_if_not_customizer"></div>';
          endif;
      

      Saludos.

  13. Younly

    Hola, estoy de regreso por acá…… agradeciendo nuevamente por las tantas y tantas veces que nos sacan de buenos apuros y clamando por su ayuda.
    En resumen, la duda de hoy es la siguiente, jamas pude hacer mi portafolios en la seccion de testimonios, oculté la misma y emprendi la tarea a crear una nueva seccion y alli usando el plugin Huge-it-portfolio, cree mi nuevo portafolio, la cual funciona de maravillas…….ahora, el problema radica en que al pinchar sobre las imagenes para mostrarlas y leer su contenido, observo que la imagen queda a la izquierda y el texto se despliega a la derecha a todo lo largo quedando un vacio muy feo en la parte de abajo de la imagen……mi pregunta es la siguiente como puedo alinear ese texto para que la imagen quede en el lado izquierdo o viceversa y el texto a la derecha de la imagen o viceversa y cdo se le termine la imagen, el texto continue debajo de la imagen….espero entiendan el trabalenguas…jajajaja….y la otra duda es si se puede insertar una pequeña imagen al lado derecho del footer???
    saludos y mil gracias

    • Caribdis Diseño Web

      Hola, Younly.

      La verdad, no sabría decirte sin verlo directamente.

      En cuanto a la segunda duda, podés agregar el código HTML con la ruta a la imagen en el campo Copyright del pie de página en Personalizar > Opciones generales > General. El código sería algo así:

      <img src="http://urldelsitio/carpeta/imagen.png" alt="descripcion" />

      Saludos.

  14. Toni

    Hay alguna forma de agregar una sección sin crear un tema hijo, ya que este me obligaria a volver a armar varias “cositas” que ya le habia hecho en la web?
    O sino mover las secciones existentes dentro del Thema original (Ponele que quisiera poner el llamado a la acción rojo arriba del Our_Focus)?

    Ademas aprovecho y pregunto si hay algun plugin o código para darle formato a las secciones internas de la web fuera de la front Page ya que no me doy mucha mañana con el diseño y el modo preseteado tiene mucha pinta de Blog.

    • Caribdis Diseño Web

      Hola, Toni.

      No hay otra forma, que no sea editar los archivos del tema padre, y obviamente eso no está recomendado.

      Para dar formato al contenido de las páginas internas podés usar un plugin. El que recomienda ThemeIsle es el de SiteOrigin.

      Saludos.

  15. Younly

    Disculpe, reemplacé todo lo que venia por defecto en la seccion de testimonios por el archivo que me indica, luego de activar el plugin pero cuando solicito la vista previa no me sale nada, la pagina se queda cargando sin mostrar nada, cual es el problema???, que fue lo que hice mal?…me ayudas…¡¡¡
    Gracias

    • Caribdis Diseño Web

      Hola, Younly.

      ¿Pegaste el código abreviado del plugin donde se indica? ¿Tiene comillas dobles o simples? Si el sitio te quedó inaccesible, simplemente borrá el archivo testimonials.php de la carpeta /sections/ del tema hijo.

      Saludos.

      • Younly

        Disculpe le vuelva a molestar, pero aun no he podido crear mi portafolio en la seccion de testimonios
        le explico mi proceder:
        1ro….active el plugin Portfolio Gallery, despues en el editor de temas de las apariencias en el escritorio abri el archico Testimonials.php borré todo lo que trae por defecto y pegue todo el archivo que me envío y el codigo generado por el plugin lo copie justo donde usted me indico, quedando de esta manera:

        <?php
        zerif_before_testimonials_trigger();
        echo '’;
        zerif_top_testimonials_trigger();
        echo ”;
        echo ”;
        /* Title */
        zerif_testimonials_header_title_trigger();
        /* Subtitle */
        zerif_testimonials_header_subtitle_trigger();
        echo ”;
        echo ”;
        echo ”;
        $pinterest_style = ”;
        $zerif_testimonials_pinterest_style = get_theme_mod(‘zerif_testimonials_pinterest_style’);
        if( isset($zerif_testimonials_pinterest_style) && $zerif_testimonials_pinterest_style != 0 ) {
        $pinterest_style = ‘testimonial-masonry’;
        }
        echo do_shortcode(‘[PFG id=598]’);
        echo ”;
        echo ”;
        echo ”;
        zerif_bottom_testimonials_trigger();
        echo ”;
        zerif_after_testimonials_trigger();
        ?>

        ejecute la vista previa y la pagina se queda cargando y nunca termina de abri.

        Luego apliqué la 2da variante sugerida por usted de eliminar el archivo testimonials.php de la carpeta /sections/ del tema hijo…..y cuando le doy a guardar los cambios me dice: Lo siento, este archivo no puede editarse.

        Pero ahora me surge otra duda si borro este archico de la carpeta seccion del tema hijo, con el plugin activado, eliminando el archico testimonios, que haría despues ???

        Gracias por su ayuda

        • Caribdis Diseño Web

          Hola, Younly.

          El archivo testimonials.php que tenés que editar/eliminar es el del tema hijo, el cual tiene que estar activado. Los archivos no se pueden eliminar desde el editor de temas, sino vía FTP.

          No me queda claro cuál es el plugin. Si podés poner la URL completa al repositorio de WP, mejor. Y tampoco estoy pudiendo relacionar el error sin verlo en la URL del sitio directamente, ¿podrías pasármela?

          Saludos.

  16. Younly

    De mucha ayuda me han servido sus tutoriales, y agradesco una ves mas por ellos.
    En esta ocasion acudo a usted pues me gustaría cambiar la seccion de testimonios, por un portafolios, pudieran ayudarme.
    Saludos

    • Caribdis Diseño Web

      Hola, Younly.

      Podés usar un plugin y luego reemplazar la sección de testimonios por el código abreviado que genere.

      El archivo de la sección testimonios te quedaría algo así:

      <?php
      zerif_before_testimonials_trigger();
      echo '<section class="testimonial" id="testimonials">';
      	zerif_top_testimonials_trigger();
      	echo '<div class="container">';
      		echo '<div class="section-header">';
      		/* Title */
      		zerif_testimonials_header_title_trigger();
      		/* Subtitle */
      		zerif_testimonials_header_subtitle_trigger();
      		echo '</div>';
      		echo '<div class="row" data-scrollreveal="enter right after 0s over 1s">';
      		echo '<div class="col-md-12">';
      		$pinterest_style = '';
      		$zerif_testimonials_pinterest_style = get_theme_mod('zerif_testimonials_pinterest_style');
      		if( isset($zerif_testimonials_pinterest_style) && $zerif_testimonials_pinterest_style != 0 ) {
      		$pinterest_style = 'testimonial-masonry';
      		}
      	echo do_shortcode('[codigo-del-plugin]'); // el código va aquí
      	echo '</div>';
      	echo '</div>';
      	echo '</div>';
      	zerif_bottom_testimonials_trigger();
      echo '</section>';
      zerif_after_testimonials_trigger();
      ?>
      

      Saludos.

  17. Vanessa Davila

    Hola, quisiera saber como agregar varias secciones. logre agregar una sección pero me gustaria agregar mas..

    • Caribdis Diseño Web

      Hola, Vanessa.

      El procedimiento sería el mismo, siempre usando un nombre nuevo para cada sección en todas las instancias. Fijate en esta respuesta para más info.

      Saludos.

  18. Alfonso

    Hola, me gustaría saber si es posible agregar los social icons como facebook en el header en vez del footer, y si también es posible poner algún dato de contacto (como telefono, correo) ahi.

    Saludos!

    • Caribdis Diseño Web

      Hola, Alfonso.

      Fijate si te sirve esta respuesta. También hay un tutorial para agregar un número de teléfono arriba del menú.

      Saludos.

  19. Sebastian

    Hola que tal?! La verdad que geniales tus posts… Ahora tengo una duda, a ver si me podes ayudar, me gustaria incluir un widget de la pagina principal (concretamente “Seccion de titulo grande”) al inicio de todas mis paginas. Osea que la “Seccion de titulo grande” con slider y todo, de esta pagina: www.marceloguijarro.com, aparezca tambien al principo de marceloguijarro.com/tratamientos

    • Caribdis Diseño Web

      Hola, Sebastián.

      Gracias por tu comentario.

      Podés usar el siguiente código en el archivo functions.php:

      function zerif_child_big_title() {
          if ( !is_front_page() ) {
          get_template_part( 'sections/big_title' );
          }
      }
      add_action('zerif_bottom_header','zerif_child_big_title');
      

      Y como recomendación, dale al slider un ancho mínimo de 1920 píxeles, porque en un monitor grande queda visible una porción de la imagen de fondo del lado derecho.

      Saludos.

      • Sebastian

        Muchas gracias! y otra cosa, como puedo tener paginas de ancho completo? Osea que sean realmente ancho completo y no lo que sucede al seleccionar la opcion “full width page” al momento de crear la pagina, que deja unos margenes a los costados…

        • Caribdis Diseño Web

          Fijate si te sirve este código:

          #content .container {
              width: 100%;
          }
          

          Saludos.

      • Sebastian

        Probe el codigo que me enviaste para el slider en las demas paginas, de hecho si funciona pero no se por que motivo aparece dos veces la barra de navegacion… Mira: www.marceloguijarro.com/tratamientos, y otra cosa, como les podria cambiar las imagenes al slider de cada pagina?

        • Caribdis Diseño Web

          En realidad, para que la portada no te quede de ancho completo, el código sería:

          .page #content .container {
              width: 100%;
          }
          

          No veo el menú dos veces. Pero si necesitás un slider distinto en cada página, el código en functions.php no sirve. Tenés que crear un slider nuevo por página y usar el código abreviado donde corresponda.

  20. Ernesto Medina

    Hola Ana, cómo estás? EXCELENTE tutorial sobre personalizar el tema! Me salvaste la vida, ya que no soy profesional en la programación. Sólo te pediría una idea de cómo proceder con algo.

    Quisiera agregar a esa “nueva sección” tres bloques con información X, digamos, como si fueran 3 columnas con divs donde poder volcar texto y algunos enlaces específicos. No widgets, en este caso. Es eso posible? Debería armar esa estructura en el espacio donde dice “Añada algunos widgets aquí.” y ya? O como sería?

    Desde ya agradezco tu ayuda extra, y te saludo desde Mar del Plata!

    • Caribdis Diseño Web

      Hola, Ernesto.

      Gracias por tu comentario.

      Podés insertar cualquier contenido HTML que se te ocurra en ese espacio, y para eso tendrías que eliminar todo el código correspondiente a la barra lateral, tanto en la nueva sección (el que está contenido en el div con la clase row) como en functions.php (ya que no tiene sentido registrar un área de widgets si no la vas a usar).

      Sin embargo, para lo que me comentás quizá sería más práctico dejar el área de widgets (asignarle tres columnas, como se indica en la última parte del tutorial) y usar el plugin Black Studio TinyMCE Widget, que te agrega un widget con el editor visual. De esta manera agregarías contenido en el widget tal como lo hacés en una página o entrada estándar (y podés ir viendo los cambios en tiempo real si usás el Personalizador), en lugar de escribir código dentro del archivo new_section.php.

      Espero que se haya entendido algo 😉

      Saludos.

      • Ernesto Medina

        Querida! Sos una genia! La solución del plugin creo que es la más saludable incluso para proveerle al cliente la opción de poder editar ese contenido sin molestarse en tener que perdírmelo. Ahí entendí y probé como funcionaría… EXCELENTE solución 😀

        Una pregunta más y ya no te molesto (por ahora jajaja): en caso de que quisiera añadir más secciones personalizadas, el proceder sería el mismo pero editando los nombres de las secciones para que no sean iguales, cierto?

        Millón de gracias por tu tiempo y amabilidad 😀

        • Caribdis Diseño Web

          De nada 🙂

          Exactamente. Siempre recordar cambiar el nombre de todas las instancias. Y en el caso de que la nueva sección deba contener un área de widgets, registrar una nueva en functions.php.

          Saludos.

  21. sandra

    Hola, todo muy bien hasta el paso 5, en el archivo new_section.php copie el còdigo descrito en el paso 5 pero la “nueva sección” no aparece, en personalizar si aparece correctamente todo, què estaré haciendo mal hay algún paso adicional o tengo que colocar otro código dentro del archivo new_section.php gracias

    • Caribdis Diseño Web

      Hola, Sandra.

      Todos los _ourfocus_ deben estar reemplazados por _newsection_, fijate que no te falte ninguno. Y fijate que la nueva sección esté agregada en el archivo front-page.php.

      Saludos.

  22. Richard

    Hola gracias por el tutorial me funciono, tengo una pregunta, al añadir la nueva sección esta queda muy separada de la anterior sección, como puedo quitar ese espacio o subirla mas arriba la nueva sección?? gracias espero tu respuesta.

    • Caribdis Diseño Web

      Hola, Richard.

      Tomá como referencia este tutorial. Usá la ID de la nueva sección y la clase que hayas duplicado, por ejemplo: #nuevaseccion.focus.

      Saludos.

  23. Caribdis Diseño Web

    Hola, Edinson.

    Gracias por tu comentario.

    Si te referís a los iconos/imágenes que van apareciendo a medida que se desplaza la página, es un módulo (Anuncio breve) del tema Divi. Para más información podés ver la documentación.

    Saludos y ¡feliz 2017! 😀

    • Edinson

      Ana si es eso mismo que tú dices, pero lo quiero agregar en mi web que no tiene el tema divi si no el Zerif, si miras aquí http://proyectocolmena.com/ en la sección Características veras que las imágenes y texto no son animadas como el resto de la web, es porque no encontre ningún modulo o plugin para hacer esto y lo que hice insertando un módulo texto y lo arme en HTML y además tampoco es responsive, conoces algún modulo o plugin que sea igual o parecido al que tenes en tu tema divi para usar en otros temas? desde ya muchas gracias y feliz año 2017

      • Caribdis Diseño Web

        Hola, Edinson.

        Fijate si este plugin te sirve.

        Saludos.

        • Edinson

          Hola Ana el plugin que me pasaste me sirvió para hacer las animaciones lo demás arme en una página con MotoPress la estructura y luego copie el código HTML y lo pegue en un widget de texto en la OnePage, muchas gracias quedo muy bien lo puedes ver en ProyectoColmena.com en la sección CARACTERÍSTICAS

          • Caribdis Diseño Web

            Hola, Edinson.

            ¡Te quedó genial! Gracias por compartirla.

            Saludos.

  24. Edinson

    hola Ana muchas gracias por tu ayuda, consulta que plugin es el que estas usando para los servicios en tu web https://caribdis.net/, desde ya muchas gracias y Feliz Año 2017

  25. Analia

    Hola! En la página Blog de Zerif Lite no me aparece la barra lateral con las categorias, busqueda y etiquetas. Ya tengo creados post con sus respectivas categorías, pero la barra lateral no se visualiza de ninguna manera. ¿Cómo podré solucionarlo? Gracias!

    • Caribdis Diseño Web

      Hola, Analía.

      Ya te había respondido aquí. Hay dos estilos incorporados que están ocultando la barra. Eliminalos.

      Saludos.

  26. Verónica

    Hola Ana, tengo creada la carpeta zerif-lite-child en la ruta que indicaste, con los archivos functions.php y style.css pero agrego las siguientes líneas en el archivo functions.php (antes del cierre del tag) pero no me las toma en cuenta. Sí funcionan los cambios si los hago en el functions.php del tema padre, qué me estará faltando hacer?

    remove_action( ‘woocommerce_after_shop_loop_item’, ‘woocommerce_template_loop_add_to_cart’, 10 );
    remove_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_add_to_cart’, 30 );
    remove_action( ‘woocommerce_simple_add_to_cart’, ‘woocommerce_simple_add_to_cart’, 30 );
    remove_action( ‘woocommerce_grouped_add_to_cart’, ‘woocommerce_grouped_add_to_cart’, 30 );

    add_filter( ‘woocommerce_currencies’, ‘add_my_currency’ );
    function add_my_currency( $currencies ) {
    $currencies[‘DOLAR’] = __( ‘Dólares’, ‘woocommerce’ );
    return $currencies;
    }
    add_filter(‘woocommerce_currency_symbol’, ‘add_my_currency_symbol’, 10, 2);
    function add_my_currency_symbol( $currency_symbol, $currency ) {
    switch( $currency ) {
    case ‘DOLAR’: $currency_symbol = ‘USD’; break;
    }
    return $currency_symbol;
    }

    • Caribdis Diseño Web

      Hola, Verónica.

      Si es la URL del comentario, no veo que tengas activado el tema hijo. Los códigos deberían funcionar sin problemas en functions.php del tema hijo cuando está activado.

      Saludos.

  27. Angeles

    Muchas gracias por tu respuesta, creo que no me expliqué bien, me gustaría poder hacer que una columna tenga más ancho que otra, por ejemplo, si dividí la sección en tres columnas, que la del centro tenga más espacio que las de los extremos.

    Gracias otra vez 🙂

    • Caribdis Diseño Web

      OK, en ese caso, el código debería ser:

      #nuevaseccion .col-lg-3:nth-child(3n+1) {
          width: 25%;
          clear: both;
      }
      #nuevaseccion .col-lg-3:nth-child(3n+2) {
          width: 50%;
      }
      #nuevaseccion .col-lg-3:nth-child(3n+3) {
          width: 25%;
      }
      

      Ajustá los porcentajes a la medida que necesites.

      Saludos.

  28. Angeles

    ¡Hola!

    Te agradezco mucho este tutorial, tengo una pregunta: ¿cómo puedo hacer para dar mas espacio a una columna de la sección?

    Muchas gracias por tu respuesta.

    Saludos.

    • Caribdis Diseño Web

      Hola, Ángeles.

      Depende de la ID que le hayas dado a la sección; por ejemplo para este tutorial el código sería:

      #nuevaseccion .col-lg-3 {
          padding: 0 50px;
      }
      

      Editá el valor de 50px por el que necesites.

      Saludos.

  29. Davis

    No entiendo bien como funciona o del tema hijo, hice todos lo que dice el paso 1 pero no me hace ningún cambio en el tema principal.

    • Caribdis Diseño Web

      Hola, Davis.

      ¿Activaste el tema hijo?

  30. liz

    gracias por tu articulo, ya hice una nueva seccion en el tema hijo, pero cuando lo subo a mi hosting q usa php 5.2, no se ve nada, lei q era incompatibilidad con la versión de php, ?como puedo resolver este problema???
    en mi entorno local usaba php 5.4 y funcionba bien..

    • Caribdis Diseño Web

      Hola, Liz.

      Fijate si en el panel de control tenés alguna opción para seleccionar la versión de PHP (lo ideal sería 5.6 o superior). Si no, tendrías que solicitarlo al soporte del hosting.

      Saludos.

  31. geeksha

    Hola!

    Buenísimo el tutorial aplicado a este tema en concreto. Yo estoy utilizando el tema hijo de zerif-lite llamado responsive boat, al cual a su vez le estoy haciendo un hijo.Siguiendo este tutorial todo va bien hasta el último paso. Puedo ver en personalizar y widgets la información de la nueva sección, pero esta no se ve al refrescar la página.Sólo aparece desde la administración.Qué podría estar pasando? Tendrá algo que ver con tener functions-php tanto en zerif-lite como en responsive boat? Quedaría muy agradecida si me pudiera dar respuesta.

    Gracias y saludos!!

    • Caribdis Diseño Web

      Hola, Geeksha.

      No es posible crear un tema hijo de otro tema hijo. Lo que tenés que hacer es editar los archivos que ya existen en ResponsiveBoat (y crear los que sean necesarios en esa carpeta); si este es el tema activo deberías poder ver los cambios a medida que los vas haciendo.

      Saludos.

    • geeksha

      Hola!

      Muchas gracias por la respuesta.Lo estoy intentando así ahora mismo, pero me surge la duda de si debo poner el prefijo rb_new section (el prefijo rb aparece en el functions.php de este tema hijo) o debería emplear igualmente el zerif_new section.mmmm, en principio creo que lo estoy haciendo todo correctamente dentro de responsive boat, pero no está funcionando.

    • geeksha

      Conseguido ya! 🙂
      Gracias por comentar que no se puede hacer un tema hijo de un tema hijo.

      • Caribdis Diseño Web

        De nada 🙂

        Y como seguramente ya lo habrás notado, el nombre que uses para las variables puede ser cualquiera, siempre y cuando no exista en otra sección del tema.

        Saludos.

  32. Jorge

    Excelente contenido. Muchas gracias, por compartirlo.
    Tengo una inquietud. Apliqué todo lo que mencionas y salió todo bien, excepto por que en la parte de Nueva Sección en vez de aparecerme los widgets, me aparece el texto ‘Añada algunos widgets aquí.’ y no tengo ningún botón para añadir widgets.
    Espero me puedas ayudar con esto. Muchas gracias.

    • Caribdis Diseño Web

      Hola, Jorge.

      Los widgets se agregan desde Personalizar > Widgets > Barra lateral de nueva sección, o Apariencia > Widgets > Barra lateral de nueva sección.

      Saludos.

  33. Carmen

    Hola, quisiera saber como poder hacer el header donde esta el logo con mayor altura?
    Gracias por tu respuesta. Tu blog de este tema ayuda muchísimo.

    • Carmen

      Mi pregunta es sobre el tema Zerif lite, gracias

    • Caribdis Diseño Web

      Hola, Carmen.

      Fijate en este tutorial.

      Saludos.

  34. mJose

    como puedo añadir google analitics.

    Muchas gracias

    Magnifico trabajo

    • Caribdis Diseño Web

      Hola, mJose.

      Fijate en esta respuesta.

      Saludos.

  35. Martín

    Hola, gracias por los tutoriales. Tengo una consulta: Quiero la barra lateral de las “entradas” de mi página zerif lite. Estaba en ese tutorial y me linkeó a éste para crear un tema hijo. La pregunta es hasta que paso debo seguir en éste tutorial para crear el tema hijo y luego volver al tutorial de eliminar la barra lateral.
    Espero se haya entendido mi pregunta. Gracias

    • Caribdis Diseño Web

      Hola, Martín.

      Es solo el paso 1: crear la carpeta, y los archivos functions.php, style.css y custom.css.

      Saludos.

  36. Andris

    Can you do an update to this tutorial, their template has updated a bit as well and I can’t seem to add widgets into the section. The code is so damn sensitive 🙁

    • Andris

      Ok, I seem to have hit a wall with the theme child. I have Polylang plugin that translates my content in 2 languages. The problem is that my Menu doesn’t show correctly in the child theme as it does in the parent one. The menu only shows the pages that are associated in the Menu even if they are not added in the Menu of the site. I have no clue where to solve this to get my full Menu like in the parent theme of Zerif Lite.

      Side issue that I solved, I found out that JetPack has a mobile theme option that severely alters the display of the parent theme and child themes if it’s active. Had a hard time figuring this out, hope it helps those who have the same issue.

      • Caribdis Diseño Web

        You need to create a separate menu for each language, and then assign them to their respective location. You can check this tutorial (Traducir el menú section).

        Regards.

    • Caribdis Diseño Web

      Hi Andris,

      As far as I know, this tutorial still works with Zerif Lite 2.0+. And yes, you have to be super thorough when writing code, because missing as little as a semicolon or a single quote is enough to break the entire site.

      Best regards.

  37. Rocío

    Buenos días!! Eres mi salvadora!!! jajajaja Gracias por todo loq ue me estás ayudando.
    Tengo otra consulta. ¿Sería posible insertar en el fondo de una de las secciones, por ejemplo en “equipo”, un vídeo?

    Gracias de nuevo.
    Saludos.

    • Caribdis Diseño Web

      Hola, Rocío.

      No es posible instertar vídeos de fondo en las secciones. Únicamente se podría en la página entera, y usando un plugin (hasta donde sé mb.YTPlayer for background videos funciona).

      Saludos.

  38. santiago

    Como puedo activar la barra lateral solo en la sección de noticia para luego colocar widgets personalizados ?

    • Caribdis Diseño Web

      Hola, Santiago.

      Si podés detallame un poco más lo que necesitás, porque no me queda claro.

      Saludos.

  39. Danilo

    Hola muchas gracias por lo que hacen y ayudan, ya me han ayudado en dos oportunidades. Tengo una pregunta con respecto al tema en particular, que no se si va aquí lo que preguntare, pero bueno hay voy.
    El tema zerif-lite hay ocaciones en las que se demora demasiado en partir, tengo que volver actualizar F5 para que cargue, desde hay no hay drama, pero si lo dejo de abrir desde mi computador en unos dos o tres días sucede lo mismo. Ya lo e probado desde otros navegadores y PC también. En mi hosting me hicieron una prueba y dicen que anda todo bien. Yo tengo otra pagina con otro tema y no me sucede lo mismo, que puede ser?

    • Caribdis Diseño Web

      Hola, Danilo.

      Si es aleatorio, es difícil determinar la causa. Podría ser algún plugin con código de dudosa calidad. El tamaño de las imágenes también influye; cuanto más pesadas más tiempo de carga.

      Probá desactivando plugins y también podrías hacer una prueba de rendimiento en Google PageSpeed y/o GTMetrix, donde te indican las áreas que necesitan optimización.

      Saludos.

      • Patricia Cruz

        Buenos días,
        me gustaría saber si es posible añadir enlace a analytics para conocer las visitas que entrar a tu web y cómo hacerlo… Gracias!

        • Caribdis Diseño Web

          Hola, Patricia.

          Podés usar un plugin, o pegar el código en el archivo footer.php del tema hijo (antes del cierre de la etiqueta </body>).

          Saludos.

          • Patricia Cruz

            Muchas gracias!

  40. David Arias

    Estimados le agradezco mucho por su trabajo, es de verdad muy profesional, queria preguntar acerca de añadir una nueva sección, ¿se podría añadir un side bar o barra lateral en este tema? ya que la seccion que en witgets que dice “barra lateral” no funciona?? (o como se publica la misma??) Gracias…

    • Caribdis Diseño Web

      Hola, David.

      Gracias por tu comentario. La barra lateral está diseñada para las entradas del blog y las páginas (si se selecciona la plantilla predeterminada), no para la página frontal.

      Saludos.

  41. Victor

    hola mi nombre es Victor Manrique
    como añado shop o tienda a mi pagina web , me gusta el formato que teneis y me gustaria configurarlo he mirado varias opciones y no puedo instalar
    Muchas gracias

    • Caribdis Diseño Web

      Hola, Víctor.

      Zerif es compatible con WooCommerce. Lo que tenés que hacer es instalar y activar el plugin.

      Saludos.

  42. karina

    buenas tardes me podrian ayudar a insertar un numero telefonico y los iconos de face y tuitter en la cabecera de mi pagina…ejemplo
    inicio blog contacto….y a lado que vaya el numero y los iconos todo en la misma linea,… habra manera sin que la cabecera se haga mas ancha

    • Caribdis Diseño Web

      Hola, Karina.

      Podés agregarlos como elementos del menú (Enlaces personalizados). En el campo Texto del enlace pegás los siguientes códigos:

      <i class="fa fa-facebook"></i> para Facebook.

      <i class="fa fa-twitter"></i> para Twitter.

      Para el teléfono también podés usar un icono. En el campo Texto del enlace pegás:

      <i class="fa fa-phone"></i> +54 11 4321 9876.

      La URL podés dejarla en blanco, o usar tel:541143219876 para que enlace a la llamada.

      Si necesitás algo más avanzado (como controlar el tamaño y color de los iconos), te conviene usar un plugin.

      Saludos.

      • karina

        disculpa la molestia,,pero dentro de que archivo lo modifico o en donde pego el codigo que me diste…o se pega en el simple custom. te agradesco la iformacion

        • Caribdis Diseño Web

          Apariencia > Menús > Enlaces personalizados. Esto es funcionalidad de WordPress, independientemente del tema que uses. Para más información sobre menús, te recomiendo la Guía WP Fácil, donde se explica esto en el capítulo Actualizar el menú.

          Saludos.

  43. merce

    Buenos días, estoy trabajando con el tema, responsiveboat, he añadido en nuestro equipo un widget de texto en page buider, hasta aquí todo correcto pero necesito que el titulo del widget este centrado al medio con el texto, y cuando hago la alineación, la linea de subrayado que sale por defecto debajo los títulos no se alinea. como modifico esta linea?? me puedes ayudar por favor… muchas gracias

    • Caribdis Diseño Web

      Hola, Merce.

      La línea no es un subrayado, es un seudoelemento que manejás con la clase .red-border-bottom:before. Posiblemente modificando el valor de width y poniendo left a 0 puede que se acomode, pero sin ver el código directamente no sabría decirte.

      Saludos.

  44. victor hugo ramirez

    hola quisiera saber como hago para que mi sitio cuando cree una pagina interna me quede como la pagina de inicio… no veo como duplicarla para que todos los contenidos se puedan manejar fullscreen

    • Caribdis Diseño Web

      Hola, Víctor.

      Este tema está diseñado para presentar la información en una sola página (la portada). Si necesitás algo más avanzado, tendrías que probar con algún plugin constructor de páginas.

      Saludos.

  45. Micom

    Hola! Realicé todo lo que has enseñado para crear mi tema hijo, cambiar el título grande por slider y agregar una nueva sección, agregar la hoja de estilo en custom.css y así editar los colores y más. Todo ha funcionado de maravilla, MIL GRACIAS! Sin embargo, y te ruego me ayudes, no logro editar la nueva sección. Necesito cambiar el color del fondo y justificar los textos, no me es posible ya no aparece en la hoja de estilo de custom.css ¿Cómo lo agrego? Por favor, te ruego me ayudes ya que con eso termino el estilo de mi página! MIL GRACIAS!

    • Caribdis Diseño Web

      Hola, Micom.

      Los estilos de la nueva sección se heredan de la clase que hayas usado (si duplicaste la sección Nuestro enfoque, la clase será .focus). Todas las personalizaciones tendrás que hacerlas manualmente en el archivo custom.css.

      Para cambiar el color de fondo, usás la propiedad background. Y el selector dependerá como ya te dije de la ID que le hayas puesto a la nueva sección y de la clase que uses. Por ejemplo, si usaste la ID nuevaseccion y duplicaste la sección Nuestro enfoque (es decir, tu archivo comienza con <section class="focus" id="nuevaseccion">), el código sería:

      #nuevaseccion.focus {
          background: #000000;
      }
      

      Para justificar el texto, text-align: justify;.

      Te recomiendo que hagas algún tutorial de HTML y de CSS para poder comprender mejor la personalización de estilos.

      Saludos.

  46. fabio

    ciao e grazie della tua presenza volevo chiedere se ce’ possibilita’ nella sezione testimonianze inserire un javascript che funzionasse da scorrimento per le immagini all’interno in modo da aggiungere testimonianze eavere cosi’ una sequenza tipo slider..
    possibile?

    • Caribdis Diseño Web

      Ciao, Fabio.

      Purtroppo non è possibile con i widget di questo tema. Dovresti cercare un plugin testimonial slider e aggiungerlo come un widget o come shortcode.

      Saluti.

      • fabio

        scusa non ha messo la punteggiatura dell HTML.

      • fabio

        perdonami non inserisce html..

      • fabio

        ciao Ana,
        dovrei inserire questo html nella sezione testimonial come potrei richiamarlo in php in modo che venga letto dallo stesso ? h creato un file js e il css nel tema bambino
        possibile inserire con require ()

        • Caribdis Diseño Web

          Ciao, Fabio.

          <?php include("pagina.html"); ?> è sufficiente.

          Saluti.

  47. fabio *

    ciao e grazie per quello che fai per tutti noi, e per la tua grande disponibilita’, ora ti spiego quello che vorrei fare nella home del tema figlio zerif…vorrei cambiare la sezione testimonianze ed inserire (nuova sezione) con slider che fa scivolare testimonianze in modo migliore… cosa mi consigli e come procedere? grazie ancora per il tuo grande aiuto.

  48. Verónica

    Hola, quisiera saber cómo puedo hacer para tener 5 items en vez de 4 en la sección “our focus”.

    Edité el archivo style.css cambiando

    @media screen and (max-width: 1190px) {
    .cbp-rfgrid li {
    width: 25%; /* Fallback */
    width: -webkit-calc(100% / 4);
    width: calc(100% / 4);
    }
    }

    Por

    @media screen and (max-width: 1190px) {
    .cbp-rfgrid li {
    width: 20%; /* Fallback */
    width: -webkit-calc(100% / 5);
    width: calc(100% / 5);
    }
    }

    Pero no me ha funcionado.

    Muchas gracias.

    • Caribdis Diseño Web

      Hola, Verónica.

      La respuesta aquí. Recordar no editar los archivos del tema (en este caso se puede usar el recuadro CSS adicional del Personalizador).

      Saludos.

      • Verónica

        Gracias por la pronta respuesta, no me queda claro en qué archivo de simple css debo colocar el código, podrías ayudarme?

        • Caribdis Diseño Web

          Hola, Verónica.

          Simple CSS es un plugin (cualquiera que permita añadir código CSS personalizado sirve).

          Para más información fijate en esta entrada.

  49. Caribdis Diseño Web

    Hola, Ana.

    Antes que nada, recordemos: nunca deben editarse los archivos del tema principal. Para eso existen los temas hijos.

    En tu caso, hacé lo siguiente: descargá de nuevo el tema (ahora se obtiene directamente de la página de ThemeIsle). Descomprimí el ZIP en una carpeta de tu equipo y luego subí vía FTP el archivo footer.php a la carpeta /wp-content/themes/zerif-lite/. Si no tenés acceso vía FTP abrí el archivo en un editor de texto, copiá el contenido entero y pegalo en Apariencia > Editar.

    Con eso ya deberías poder ver de nuevo el sitio correctamente.

    Saludos.

  50. Ana

    Hola!
    Tengo un problema, estoy creando una nueva página con el tema Zerif, quería eliminar el pié de página y he borrado todo el footer.php en apariencia-editar, al hacer esto ya no aparece mi página, nada…sólo el símbolo de carga…
    Por favor me podrías ayudar? tiene solución?
    Muchas gracias por todos tus consejos,
    Saludos!

  51. Alberto

    Buenas, con mis escasos conocimientos en desarrollo web, he utilizado esta plantilla y he estado modificando las diferentes hojas de estilo para cambiar, sobre todo, los colores al no tener la versión pro. Leyendo este post (ojalá lo hubiera encontrado antes), me he dado cuenta que debía haber creado un tema hijo para evitar que los cambios que hice se pierdan con las actualizaciones. ¿Hay alguna opción de solucionar este problema a posteriori? ¿Es posible guardar el tema tal y como está ahora para evitar que las actualizaciones borren los cambios? Muchas gracias y un saludo.

    • Caribdis Diseño Web

      Hola, Alberto.

      En tu caso, tenés dos opciones. Una es no actualizar el tema, y como ya sabrás no es lo recomendable. La otra opción es descargar la última versión del tema, abrir la hoja de estilos original y compararla con aquella que editaste para poder reconocer las clases que tendrías que pasar a un archivo custom.css del tema hijo. Los procesadores de texto avanzados tienen la herramienta Comparar, y en el editor de texto Notepad++ podés instalar un plugin que se llama Compare.

      Espero que te sirva.

      Saludos.

  52. karina

    buena tarde..una pregunta,, como agrego a mi menu principal un boton que sea desplegable y que me de opcion de entrar a dos o tres paginas

    por ejemplo center y que desplegue la mision y la vision

    • Caribdis Diseño Web

      Fijate en esta respuesta.

  53. fabio

    ciao risolto il problema reinstallando tutto. grazie della tua grande disponibilita’, vorrei chiederti se si puo’ inserire una slider in home page e se ce’ che tu conosci un plugin che fa al caso.. la procedura e’ sempre creare nuova sezione giusto?

    • Caribdis Diseño Web

      Ciao, Fabio.

      Meta Slider è un plugin gratuito abbastanza buono. C’è un tutorial per questo, se hai bisogno di sostituire la parte del titolo grande.

      Saluti.

  54. fabio

    Ciao e grazie ancora x il tuo lavoro, sono riuscito a fare tutto quello che mi serviva sviluppare. Vorrei porti un problema e non so se ti e’ capitato o hai sentito qualcuno che gli e’ capitata una cosa simile. Oggi ho trasferito da locale alla rete le ultime modifiche per il sito senza toccare nulla di che se non lavorando nelle sezioni specifiche ed mi appare un errore sulla rete del sito – Parse error: syntax error, unexpected ‘function’ (T_FUNCTION) in /web/htdocs/www.coachekis.it/home/wp-content/themes/zerif-lite/inc/jetpack.php on line 1- e non so cosa centri sta stringa in locale funziona tutto in rete mi compare questo.. Hai idea di cosa stia succedendo??? grazie

    • Caribdis Diseño Web

      Ciao, Fabio.

      Questa è la risposta.

      È un errore comune quando i file vengono caricati via FTP. Basta eliminare la cartella del tema dal server e provare a installare via Aspetto > Temi > Aggiungi nuovo.

      Saluti.

  55. Irleine Trapp

    Olá, gracias por los tutoriales, son mui buenos. Estoy empezando ahora y me queda mucho a aprender,
    Segui un tutorial que decia que si quires agregar a la direccion um mapa tendria que poner el codigo em footer.php. luego abaxo de esto:

    echo '';
    }
    <a href="https://www.google.com.ar/maps/place/Rua+Sebastião+Gregorini/128+Juquitiba+SP/" title="Ver en Google Maps">Rua Sebastião Gregorini,centro,SP</a>
    

    eso lo que me isso entender que seria pero me dá erro:

    Fatal error: Call to undefined function zerif_top_head_trigger() in /home/poliv467/public_html/wp-content/themes/Zerif-lite-child/header.php on line 12
    que devo hacer para tener um mapa en mi site?

    otra pregunta…que hice de errado que el menu encima de la pagina al hacer clic en el no mueve para ningun sitio?

    • Caribdis Diseño Web

      Hola, Irleine.

      Gracias por tu comentario.

      El código que mencionás solo agrega un enlace a Google Maps con la dirección específica. Y no haría falta editar ningún archivo, ya que podrías escribirlo en el campo Dirección dentro del Personalizador > Opciones generales > Contenido del pie de página.

      Si necesitás que se muestre el mapa dentro de la página (como en la versión PRO), tendrías que usar un plugin de mapas y luego insertar el código abreviado con un do_shortcode dentro del archivo front-page.php.

      En este tutorial se explica cómo asignar los enlaces del menú (sección Configurar el menú).

      Saludos.

      • Irleine Trapp

        No sée como agradecerte por lo que me has ayudado desde que empeze a leer sus tutoriales.
        No sée que haria sin usted. Muchas gracias. Lo trabajo que haces és mui lindo,espero que Dios te traiga em doble lo que haces por nosotros.
        Soy brasileira y mi espanhol és malo, me perdone, estoy em mi primer site, bien tosca mismo.
        Pero quiero que sepas que deseo que todo el bien del mundo lo caiga sobre ti.
        Gracias, Dios la bendiga.
        Quando necesitar, me voy acudir a ti de nuevo,kkkk

  56. Patricia Cruz

    Buenos días,
    es posible crear en el menú un enlace a la sección de CONTACTO del final de la página??? Lo he intentado con los div id=contacto y luego la url ……….com/index.php#contacto pero no me ha funcionado…
    Muchas gracias!!! 🙂

    • Caribdis Diseño Web

      Hola, Patricia.

      La ID de la sección Contacto es contact. El enlace personalizado debería ser /#contact.

      ¿Por alguna razón estás usando el index.php en la URL? ¿Por qué no simplemente usar Nombre de la entrada en Ajustes > Enlaces permanentes?

      • Patricia Cruz

        Buenos días, con el #contact me funciona.
        Lo de nombre de entrada en Ajustes permanentes lo he intentado, pero si no pongo index.php delante de #contact no me funciona… no sé si haré algo mal…
        Muchas gracias!! 🙂

  57. Lautaro

    buenas tardes, quería saber como cambiar el orden de los footers.
    Como para que me quede los footers 1,2 y 3 abajo del footer inicial.

    • Caribdis Diseño Web

      Hola, Lautaro.

      Para cambiar el orden de las secciones necesitás crear un tema hijo y editar el archivo footer.php. Moverías la línea <?php zerif_footer_widgets_trigger(); ?> justo arriba del cierre de la etiqueta </footer>.

      Saludos.

  58. Patricia Cruz

    Buenos días, muchas gracias lo primero por todas tus aportaciones que nos hace la vida mucho más fácil 🙂
    Me gustaría saber cómo cambiar el color del borde de los círculos con imagen de los widgets que ahora son blancos…
    Además tengo un problema con el menú al visualizarlo en vista tablet y móvil le doy al botón pero no se despliega….
    Muchas gracias!!

    • Caribdis Diseño Web

      Hola, Patricia.

      Para cambiar el color de los círculos usá el siguiente código:

      .focus-box .service-icon {
          border: 10px solid #ececec;
      }
      

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

      En cuanto al menú, con la última versión (1.8.4.7) parece que lo corrigieron. Si no, fijate aquí, en la parte donde dice ¿Cómo corregir el menú que desaparece en dispositivos móviles?

      Saludos.

      • Patricia Cruz

        Muchas gracias!! 🙂

  59. Raisa Pimentel

    Hola,
    Qué tal?
    Muchas gracias por los posts acerca de esta plantilla, me han servido mucho.
    Tengo un inconveniente no relacionado con el tema de esta publicación pero espero me puedas orientar. El widget de la sección de equipo no me muestra en ninguna de las páginas las fotografías, apenas se alcanza ver la leyenda -Imagen subida-
    De antemano, te agradezco.
    Saludos

    • Caribdis Diseño Web

      Hola, Raisa.

      Gracias por tu comentario.

      ¿Estás usando la última versión del tema? ¿Las fotos están en la biblioteca de medios?

      • Raisa Pimentel

        Hola, acabo de revisar y me pide que la actualice. Antes de actualizarla, quisiera saber si ocurre algún desajuste entre el tema hijo y el tema padre. En caso de que sí ¿Qué debo hacer?
        Gracias.
        Saludos.
        Pd: Las fotos sí están en la biblioteca de medios.

        • Caribdis Diseño Web

          Hola, Raisa.

          La actualización es del tema padre, así que no debería afectar los cambios que hayas hecho en el tema hijo.

          Saludos.

          • Raisa Pimentel

            Hola,
            Ya lo actualice y continúa con el mismo problema.
            Te mando una captura de pantalla, le puse en inspeccionar elemento.
            Gracias.
            http://subefotos.com/ver/?4d7010de99c809aa25aaa036f421bb3do.png

          • Caribdis Diseño Web

            Hola, Raisa.

            Por lo que veo de la captura, estás usando el Page Builder de SiteOrigin. Probá insertando los cuatro widgets en una sola columna y no cada uno en cuatro, porque son los widgets los que generan la división de la grilla.

            Otra solución no se me ocurre pues no estoy familiarizada con ese plugin y la verdad no sé hasta qué punto es compatible con los widgets de Zerif.

            Saludos.

  60. fabio

    – template-fullwidth-no-title.php –
    La pagina in questione e’ questa, dove ho inserito la sezione lifecoaching

    <?php
    global $wp_customize;

    $zerif_sezionelifecoaching_title = get_theme_mod('zerif_sezionelifecoaching_title',__('SEZIONE area Lifecoaching','zerif-lite'));

    if( !empty($zerif_sezionelifecoaching_title) ):
    echo '’.wp_kses_post( $zerif_sezionelifecoaching_title ).”;
    elseif ( isset( $wp_customize ) ):
    echo ”;
    endif;

    $zerif_sezionelifecoaching_subtitle = get_theme_mod(‘zerif_sezionelifecoaching_subtitle’,__(‘Sottotitolo area Lifecoaching.’,’zerif-lite’));

    if( !empty($zerif_sezionelifecoaching_subtitle) ):
    echo ”.wp_kses_post( $zerif_sezionelifecoaching_subtitle ).”;
    elseif ( isset( $wp_customize ) ):
    echo ”;
    endif;
    ?>


    <?php
    global $wp_customize;

    $zerif_sezionesotto_title = get_theme_mod('zerif_sezionesotto_title',__('SEZIONE FOOTER','zerif-lite'));

    if( !empty($zerif_sezionesotto_title) ):
    echo '’.wp_kses_post( $zerif_sezionesotto_title ).”;
    elseif ( isset( $wp_customize ) ):
    echo ”;
    endif;

    $zerif_sezionesotto_subtitle = get_theme_mod(‘zerif_sezionesotto_subtitle’,__(‘Sottotitolo sezione FOOTER.’,’zerif-lite’));

    if( !empty($zerif_sezionesotto_subtitle) ):
    echo ”.wp_kses_post( $zerif_sezionesotto_subtitle ).”;
    elseif ( isset( $wp_customize ) ):
    echo ”;
    endif;
    ?>


  61. fabio

    Hello, thanks to you I have made many changes in the theme Zerif Lite child, and I thank you 🙂 now I would like to ask you how I can in single page (template-fullwidth-no-title.php) insert a new section that I created, without this section appears on other pages? eg I have three pages – life – sport – business, by inserting a new section in this life also appears in sports and bussiness — I would just appear in life what ‘s the string php to insert? more and if ‘possible.
    Thank you so much
    Fabio

    Ciao, grazie a te ho fatto molti cambiamenti nel tema Zerif Lite child, e ti ringrazio:-) ora vorrei chiederti come posso nella pagina singola (template-fullwidth-no-title.php) inserire la sezione nuova che ho creato, senza che questa sezione compaia nelle altre pagine? es ho tre pagine – life – sport – business, inserendo la sezione nuova in life questa compare anche in sport e bussiness— vorrei solo comparisse in life qual’e’ la stringa php da inserire ? sempre se e’ possibile.
    ti ringrazio di cuore
    Fabio

    • Caribdis Diseño Web

      Ciao, Fabio.

      Basta creare un modello speciale per la nuova sezione, come template-lifecoaching.php. Ricorda di cambiare la parte Template Name: Full width with no title per Template Name: Lifecoaching e salvarlo come un nuovo file (template-lifecoaching.php). Quindi seleziona questo modello dal pannello Attributi pagina > Modello.

      Saluti.

      • fabio

        grazie per la risposta gentile come sempre, ma non ho compreso bene come devo fare. il template pagina “Full width with no title” non la devo usare ma se ho capito bene devo creare un new template lifecoaching.php e qui inserire parte del Full width with no title?

        • Caribdis Diseño Web

          Esattamente, è necessario usare il nuovo modello, che è sostanzialmente una copia del “Full width with no title”, ma con la nuova sezione. In questo modo, si usa solo per una pagina specifica e non tutte.

      • fabio

        gracias por su amable respuesta, como siempre, pero no he entendido cómo lo hago. La plantilla “de ancho total sin título” no tiene que usar, pero como yo lo entiendo tengo que crear una nueva plantilla lifecoaching.php aquí e introduzca el ancho sin título?

  62. Alejandro

    Hola Caribdis
    Primero que todo te agradezco por los tutoriales, son muy buenos. Te cuento que he tenido inconvenientes, ya que sigo todos los pasos y en el momento de buscar la “seccion nueva” no me sale, salen todas las secciones por defecto menos la creada, intente subiendo el zip que tu generaste pero tampoco de esta forma me sale.

    Podrias ayudarme

    muchas gracias

    • Caribdis Diseño Web

      Hola, Alejandro.

      Gracias por tu comentario.

      Recordá que, ya sea que crees las carpetas y archivos desde el servidor o subas el ZIP por medio de Apariencia > Temas > Subir tema tenés que activar el tema hijo.

      Saludos.

      • alejandro

        Muchas gracias, era eso exactamente 🙂

  63. Danilo

    Hola, como puedo cambiar el color del subtitulo en la nueva sección.

    Gracias
    Saludos.-

    • Caribdis Diseño Web

      Hola, Danilo.

      Depende de la ID que uses para la nueva sección. Si usaste el ejemplo de esta entrada, sería nuevaseccion. Entonces el código sería:

      #nuevaseccion .section-legend {
          color: #1990a4;
      }
      

      Saludos.

      • Danilo

        Resulto
        Muchas Gracias.
        Se agradece lo que hacen
        Saludos.-

  64. diego

    Hola, gracias por tus tutoriales me han servido un monton. Tengo una pregunta soy nuevo en wordpress ya pude poner la sección nueva pero en esta sección quisiera poner unos hover que muestren los productos que conseguí como plugins de wordpress pero como hago para que queden en esta sección y no en una página diferente

    • Caribdis Diseño Web

      Hola, Diego.

      Gracias por tu comentario.

      Si el plugin incluye widgets, podés agregarlos en la barra lateral de la nueva sección. Si el plugin genera códigos abreviados, tendrías que usar el código directamente en el archivo new_section.php, por ejemplo:

      <?php echo do_shortcode('[codigo-plugin id="123"]'); ?>

      Saludos.

  65. Silvina

    Hola. Buenas tardes. Me parecen muy buenos los tutoriales que he leído en esta página y de mucha utilidad…ahora una consulta…he encontrado en mi WP una selección de temas hijos de Zerif Lite, entonces..¿Se pueden realizar las modificaciones directamente en éstos, en lugar de crear yo un tema hijo?
    Muchas gracias!!!

    • Caribdis Diseño Web

      Hola, Silvina.

      Exacto, podrás modificar los archivos del tema hijo directamente.

      Saludos.

  66. lucho

    Muy bueno y completo, Gracias!!!!!

  67. mariano

    Gracias por todo, gracias a vos pude personalizar muchisimo el tema. Muy bien explicado aunque tengo una consulta al agregar una nueva seccion cambie la seccion about_us de lugar hacia arriba del todo debajo de big_title pero al hacer esto no anda mas la animacion de entrada del texto. Para probar cual era el problema agrege un div vacio de 500px de altura y ahi si andaba, no se la verdad no entiendo mucho pero espero que esa informacion te ayude. Desde ya muchas gracias si podes darme una mano!

    • Caribdis Diseño Web

      Hola, Mariano.

      La porción de código correspondiente a la sección About Us del archivo front-page.php debe ir o bien inmediatamente después de get_template_part( 'sections/big_title' ); endif;, o bien inmediatamente antes de /* OUR FOCUS SECTION */. Si está bien colocada, las animaciones deberían funcionar sin problemas (esto es, el texto grande de la izquierda, los párrafos del centro y los círculos de la derecha).

      Fijate que no hayas suprimido alguna parte del código sin darte cuenta.

      Saludos.

  68. Patricia

    Buenos días, me gustaría saber si es posible que un widget de Nuestro enfoque te lleve a una url que sea una sección de una de las páginas. Muchas gracias!

    • Caribdis Diseño Web

      Hola, Patricia.

      Sí, por supuesto es posible, simplemente tenés que pegar el enlace completo en el campo correspondiente (por ejemplo, http://urldetusitio.com/pagina/).

      Saludos.

      • Patricia

        Buenas, pero dentro de pagina quiero que me lleve a media pagina por ejemplo donde tengo un

        • Patricia

          perdon que me he quedado a medias… donde tengo un enlace < a con un name=seccion1 por ejemplo… (creo que en el anterior comentario me he equivocado de email..)

      • Patricia Cruz

        Buenos días, no veo la respuesta que he puesto antes… no sé si habrá dado algún error porque algo raro me ha salido… no me expliqué bien en el anterior email, lo que quiero es en esa pagina: http://urldetusitio.com/pagina/ vaya a una seccion marcada con el enlace del tipo a name=seccionpagina … eso es posible?? Gracias!!

        • Caribdis Diseño Web

          Hola, Patricia.

          Sí, perdón… cuando leí el comentario entendí la pregunta, pero cuando lo contesté a última hora mi cerebro ya había bajado las persianas. 😉

          La respuesta es: la sección tiene que tener una ID. Por ejemplo, <div id="seccion">Contenido</div> (puede ser un div, un span, un p o simplemente <a id="seccion"></a>). Y el enlace del widget deberá ser: http://urldetusitio.com/pagina/#seccion.

          Saludos.

          PD: el comentario queda pendiente de aprobación si usás un email nuevo.

          • Patricia Cruz

            Muchas gracias!! Ya siento lo del comentario pendiente… el doble clic en los formularios…. ¬¬

  69. Francisco

    Hola. Gracias por el excelente trabajo. Me gustaría saber como añado el texto legal a este tema Zarif Lite. No lo consigo.
    Gracias de nuevo.

    • Caribdis Diseño Web

      Hola, Francisco.

      Gracias por tu comentario. Para eso te conviene instalar un plugin. Sé que existen dos que pueden servirte: Asesor de cookies para normativa española y WordPress Plugin Ley Cookie. Podés buscarlos desde la página de Plugins > Añadir nuevo.

      Saludos.

  70. Patricia Cruz

    Buenos días, antes de nada felicitarte y agradecerte tu trabajo!! He seguido los pasos tal y como has explicado y ya he activado el tema hijo que he creado.. pero me gustaría saber cómo puedo pasar los cambios que había hecho anteriormente???? si hago copy paste de las carpetasa del tema anterior se me queda en blanco el dominio…
    Muchas gracias!!!

    • Patricia Cruz

      Ya he conseguido ver y modificar todo con la nueva sección, pero ahora me da un problema con el estilo, se me quedan las columnas de los widgets super estrechas… cómo lo puedo modificar?? He mirado y no encuentro el modo… si me puedes echar una mano… muchas gracias!! La nueva sección es la que se llama Otros productos de interés

      • Caribdis Diseño Web

        Hola, Patricia.

        Gracias por tus comentarios. Esto te ocurre porque estás usando widgets destinados a la sección Nuestro enfoque (que aplican sus propios div). Para corregirlo, tendrías que suprimir el contenido de before_widget y after_widget, en el archivo functions.php.

        'before_widget' => '<div class="col-lg-3 col-sm-3 focus-box"><aside id="%1$s" class="widget %2$s">',
        'after_widget' => '</aside></div>'
        

        tendrá que ser:

        'before_widget' => '',
        'after_widget' => '',
        

        Espero que te sirva.

        Saludos.

        • Patricia

          Perfecto!! Solucionado!! Muchas gracias!!! 🙂

  71. fabio sgarbi

    Ciao volevo chiederti se era possibile inserire ad pagina singola del tema una sezione es:(sezione form)
    E’ possibile?

    • Caribdis Diseño Web

      Ciao, Fabio.

      Sì, naturalmente è possibile. Per prima cosa, assicurati di avere il plugin Pirate Forms installato e attivato​​. Poi, crea una nuova pagina, diciamo con il titolo “Contatto”, e incolla il shortcode [pirate_forms] nel contenuto. Salva la pagina e il gioco è fatto. 🙂

      Saluti.

  72. Erick

    Hola buen dia estoy super impresionado de tu excelente trabajo, y me urge tu ayuda a ver si tu sabes que puedo hacer, necesito cambiar en el widget ourfocus que en lugar que salga el circulito poder poner un video de youtube diferente por cada uno tengo agregado 3 no se si me explico, gracias espero me puedas ayudar

    • Caribdis Diseño Web

      Hola, Erick.

      Gracias por tu comentario.

      Lamentablemente, el widget de Nuestro enfoque es bastante limitado y solo permite introducir la información de manera que se ve en la demo (foto, título y texto). Pero con un poquito de ingenio se puede hacer lo siguiente:

      Borramos los widgets de Nuestro enfoque y los reemplazamos por widgets de Texto. El título lo dejamos vacío, y en el campo Contenido del primero pegamos el siguiente código:

      <div data-scrollreveal="enter left after 0.15s over 1s">
      <iframe width="340" height="191" src="https://www.youtube.com/embed/7I8OeQs7cQA" frameborder="0" allowfullscreen></iframe>
      <h3 class="red-border-bottom">Título para mostrar</h3>
      Texto para mostrar.
      </div>
      

      Marcamos las casilla Añadir párrafos automáticamente y obviamente reemplazamos la URL de YouTube, Título para mostrar por tu título y Texto para mostrar por tu texto. En el segundo widget, lo siguiente:

      <div data-scrollreveal="enter left after 0.15s over 1s">
      <iframe width="340" height="191" src="https://www.youtube.com/embed/7I8OeQs7cQA" frameborder="0" allowfullscreen></iframe>
      <h3 class="green-border-bottom">Título 2</h3>
      Texto 2.
      </div>
      

      Y en el tercero:

      <div data-scrollreveal="enter left after 0.15s over 1s">
      <iframe width="340" height="191" src="https://www.youtube.com/embed/7I8OeQs7cQA" frameborder="0" allowfullscreen></iframe>
      <h3 class="blue-border-bottom">Título 3</h3>
      Texto 3.
      </div>
      

      Luego en la hoja de estilos del tema hijo (o con el plugin Simple CSS) pegamos:

      .row .textwidget h3 {
          margin-bottom: 15px;
          color: #404040;
          position: relative;
          display: inline-block;
          text-transform: uppercase;
          margin-bottom: 30px;
          font-weight: bold;
          font-size: 17px;
          float: none;
          width: auto;
          background: none;
      }
      .row .textwidget p {
          font-size: 14px;
          color: #808080;
      }
      @media (min-width: 980px) {
      .row .textwidget {
          display: inline-block;
          vertical-align: top;
          margin-bottom: 25px;
          width: 33%; /* aplica a tres widgets; para cuatro sería 25% */
          float: left;
          padding-left: 15px;
          padding-right: 15px;
      }
      }
      

      Fijate si te sirve.

      Saludos.

      • Erick

        Wow funciono de lujo gracias por tu aporte me ayudo tanto que no tiene idea, eres una eminencia. bendiciones

  73. Pau

    Hola. Buenas tardes. muy buenos los tutoriales que he leído en esta página. Me he leído algunos post y no encuentro donde establecer esta pregunta que quizás no tiene mucho que ver con el tema porque estoy aun lejos del punto que tratan. Estoy intentando instalar wordpress en mi hosting, pero no he podido hacerlo porque hay algo q no me deja terminar el proceso por cpanel, ni me permite conectarme por ftp y mi dominio me dice esto: Error establishing a database connection. Si sabes cuál pueda ser el problema y cómo resolverlo, me encantaría que me ayudaras. Gracias.

    • Pau

      Disculpa, ya encontre el asunto del defecto. Hice un cambio de contraseña que no se realizó a nivel de configuración de wp y por ello me daba error en la base de datos. Gracias mil de todos modos por el espacio para la consulta Un abrazo.

      • Caribdis Diseño Web

        Hola, Pau.

        Gracias por tus comentarios. Me alegro de que hayas podido resolver el problema.

        Saludos.

  74. fabio sgarbi

    ciao e grazie alla tua presenza sul web ho potuto mettere mano su zerif volevo chiederti se e’ possibile eliminare la sezione form e se si da dove?
    un saluto e ancora grazie

    • Caribdis Diseño Web

      Ciao, Fabio.

      Vai a Aspetto > Personalizza > Contact us section > Settings e seleziona Hide contact us section? È tutto.

      Ricordati che puoi vedere il tutorial del tema qui.

      Saluti.

  75. fabio*

    Ciao, fantastico il tutorial e grazie a te riesco a fare le modifiche. e’ possibile eliminare il form? la sezione form in zerif lite? e se si da dove??
    Grazie….

  76. cesar santana

    Muy buenas nuevamente, “vuelvo” a tirar de “ayuda” y que mejor de ustedes, solucionado la dudas anterior (mi primer post aquí), me surge otras dos necesidades:
    1ª quitar completamente la barra lateral de cualquier pagina ( probé copiando del zerif padre la carpeta barra lateras, sidebar.php a zerif hijo y fui borrando una a una cada linea hasta que desapareció, al creer que no es asi, volvi a dejarlo como estaba), pero lo cierto es que deseo eliminar por completo la barra lateral en la web) …solución a esto. gracias.
    2ºPoner dos menús horizontales es posible??…es decir dejar uno fijo a la izquierda y poner uno que cambie a la derecha…
    Gracias ante todo y en cuanto termine la remodelación de la web, vuelvo a e escribir la direccion y enlazare esta web a mi pagina, si me dan autorizacion, como pagina amiga en ayuda

    • Caribdis Diseño Web

      Hola, César.

      Para las páginas simplemente vas a Apariencia > Personalizar > Opciones generales > General y seleccionás la casilla Change the template to Full width for all the pages?.

      En cuanto a lo segundo, no me queda claro dónde irían esos menús y cuál es el efecto que querés lograr. Si pudieras mostrarme un ejemplo, o una captura de pantalla, mejor.

      Saludos.

  77. Gabriel Angel Chiarello

    Se puede agregar un campo mas en la sección de contactos? por ejemplo “Telefono” a demás de “Nombre” “Asunto” y “Mail”?

    • Caribdis Diseño Web

      Hola, Gabriel.

      No es posible agregar campos, pero si estás usando el plugin Pirate Forms, podés modificar la etiqueta de Asunto, por ejemplo, y reemplazarla por Teléfono.

      Saludos.

      • Patricia

        Y como se podría hacer? Gracias!

        • Caribdis Diseño Web

          Ajustes > Pirate Forms > Etiquetas de campos.

          • Patricia

            Muchas gracias!! 🙂

  78. Jose

    Hola,

    Excelentes tutoriales. He tratado de crear el tema hijo y funciona bien pero sin esta parte del código del archivo functions.php:

    if ( get_stylesheet() !== get_template() ) {
    add_filter( ‘pre_update_option_theme_mods_’ . get_stylesheet(), function ( $value, $old_value ) {
    update_option( ‘theme_mods_’ . get_template(), $value );
    return $old_value; // prevent update to child theme mods
    }, 10, 2 );
    add_filter( ‘pre_option_theme_mods_’ . get_stylesheet(), function ( $default ) {
    return get_option( ‘theme_mods_’ . get_template(), $default );
    } );
    }

    Sin embargo al agregar esa parte del código la web no abre y sale error en linea 9 o algo así. Hay alguna otra forma de escribirlo para así evitar la actualización del tema hijo?

    Un saludo

    • Caribdis Diseño Web

      Hola, José.

      Gracias por comentar.

      El error se da en los servidores que tienen una versión de PHP obsoleta. Fijate que cumpla con estos requisitos:

      • PHP 5.6 o superior
      • MySQL 5.6 o superior
      • Módulo mod_rewrite de Apache

      Para salir del paso, usar el archivo functions.php sin el filtro que ocasiona el error.

      Saludos.

      • andrea

        Gracias amiga.

  79. achinato

    Hola me gustaria saber si hay alguna manera de poder introducir Javascript en la nueva seccion. un saludo muchas gracias.

    • Caribdis Diseño Web

      Hola, Achinato.

      Siempre que la sintaxis sea correcta, podés agregar código HTML, PHP o JS en el archivo de la nueva sección. De todas maneras, lo recomendable es añadir el JavaScript en el archivo functions.php.

      Saludos.

      • andrea

        Buenas tardes amiga. Necesito tu ayuda. Hice todo lo que mencionas en el tutorial, pero cuando activo la plantilla me sale este error:
        Parse error: syntax error, unexpected T_FUNCTION..
        ¿Puedes ayudarme?

        • Caribdis Diseño Web

          Hola, Andrea.

          Hay algún error de sintaxis en el código (un carácter no válido, algún punto y coma o comilla que falta, por ejemplo). ¿En qué línea aparece el error y cuál sería el código?

          • andrea

            if ( get_stylesheet() !== get_template() ) {
            aquí es donde refleja el error=> add_filter( ‘pre_update_option_theme_mods_’ . get_stylesheet(), function ( $value, $old_value ) {
            update_option( ‘theme_mods_’ . get_template(), $value );
            return $old_value; // prevent update to child theme mods
            }, 10, 2 );
            aquí es donde refleja el error=> add_filter( ‘pre_option_theme_mods_’ . get_stylesheet(), function ( $default ) {
            return get_option( ‘theme_mods_’ . get_template(), $default );
            } );
            }

          • andrea

            Buenos días amiga. El problema es la función. No se que hacer.
            if ( get_stylesheet() !== get_template() ) {
            aquí es donde refleja el error=> add_filter( ‘pre_update_option_theme_mods_’ . get_stylesheet(), function ( $value, $old_value ) {
            update_option( ‘theme_mods_’ . get_template(), $value );
            return $old_value; // prevent update to child theme mods
            }, 10, 2 );
            aquí es donde refleja el error=> add_filter( ‘pre_option_theme_mods_’ . get_stylesheet(), function ( $default ) {
            return get_option( ‘theme_mods_’ . get_template(), $default );
            } );
            }

          • Caribdis Diseño Web

            Fijate en esta respuesta.

  80. Jonathan Merino

    Hola. Primero agradecer el tremendo aporte. pero te quiero hacer una pregunta.

    Necesito colocar una imagen entre medio de “Team” y “Testimonials” y estoy intentando de hacer con efecto Parallax, por favor ayudame, he estado varios días en eso y no he encontrado solución.

    Quedo atento a tus comentarios.
    Saludos

    • Caribdis Diseño Web

      Hola, Jonathan.

      Podés seguir este mismo tutorial, y en lugar de agregar una sección con widgets, duplicar la sección de llamado a la acción con botón inferior. Usá una clase específica y aplicale los estilos a esa clase.

      Por ejemplo:

      <section class="separator-new" id="ribbon_new">

      Y en la hoja de estilos:

      .separator-new {
          background: url('http://ruta/imagen.jpg');
          background-attachment: fixed;
          padding: 100px 0 100px 0;
      }

      Espero que te sirva.

      Saludos.

  81. Aseinc

    Buenas, quiero lograr colocar sólo 1 opción en our focus en la primera línea, luego 2 debajo, luego 3 debajo y luego 4 debajo, en forma de pirámide. http://prntscr.com/bfxmo2 (Este link hace referencia a lo que quiero hacer. ¿Como podría solucionarse? ¿Es posible hacerlo?)

    • Caribdis Diseño Web

      Hola, Aseinc.

      Técnicamente es posible, pero editando la plantilla our_focus.php y creando un área de widgets para cada fila adicional. Estas áreas estarían separadas por un <div class="row">.

  82. Aritz

    Hola Ana
    Quiero cambiar el color de fondo a testimonios y ponerlo en negro, se que has dado la respuesta ya, porque en su dia la he leido, pero busco y busco y no la encuentro
    Una cosa, imagino que se puede meter el photo slider, con photos mas apaisadas. Aproximadamente la mitad de altura de lo recomendado para esta seccion.
    En su dia lo probe, y se veia los bordes de la foto que tenia de portada anteriormente, pense en quitarla, pero me gusta de fondo en el formulario de contacto.
    Por curiosidad, no se si lo voy a utilizar. En el pie de pagina, podemos meter un boton en html, por ejemplo de paypal, donde aparece el copyright de wp?
    Un saludo y muchas gracias por tu ayuda, siempre precisa

    • Caribdis Diseño Web

      El código para cambiar el color de fondo es:

      .testimonial {
          background: #000000;
      }
      

      Y en el pie de página, tendrías que editar el archivo footer.php y guardarlo en la carpeta del tema hijo. Fijate en esta entrada, en la última parte, que está el código que deberías reemplazar.

  83. Rubén

    Hola Ana, gracias siempre por tu ayuda, quería saber si en zerif lite es posible crear un menu inferior, mas concretamente en la zona del footer para incluir allí un enlace a la política de privacidad y el sitemap. Y por otro lado el color del tema por defecto es el rojo, en enlaces activos, cuando vas a una sección y la raya que lo subraya es roja, ¿cómo podría cambiar ese color por ejemplo si quisiera poner un verde manzana?, muchas gracias por tu tiempo.

    • Caribdis Diseño Web

      Hola, Rubén.

      Gracias por tu comentario.

      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).

      En cuanto a tu segunda duda, fijate en esta respuesta.

      Espero que te sirva.

      Saludos.

      • Rubén

        Hola Ana perdona por ser pesado, pero estuve probando los códigos del post al que me redirigiste y solo consigo que me funcione el tercero, no consigo que desaparezca ese horrible color salmón de los enlaces activos ni de las barras de sección, gracias ante todo por tu ayuda y tu tiempo, un saludo.

        • Caribdis Diseño Web

          Hola, Rubén.

          El código es:

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

          Lo demás funciona para los enlaces de la página de inicio. Si usás enlaces de páginas internas en el menú, el código completo en el archivo custom.css sería:

          li.current > a:before,
          ul.nav > li.current_page_item > a:before,
          ul.nav > li.current-menu-item > a:before {
              background: #1990a4;
          }
          .navbar-inverse .navbar-nav > li.current > a,
          .navbar-inverse .navbar-nav > li > a:hover, 
          .navbar-inverse .navbar-nav > li > a:focus {
              color: #1990a4;
          }
          

          Saludos.

      • Susana

        Hola Rubén,

        Si es lo mismo que yo hice, prueba con esto:

        .navbar-inverse .navbar-nav > li > a:hover {
        color: “COLOR HEX” !important;
        outline: medium none;
        border-bottom: 2px solid #000066;
        -webkit-transition: all 100ms;
        transition: all 100ms;
        }

        .navbar-inverse .navbar-nav >li {
        display: inline;
        margin-right: 20px;
        margin-top: 20px;
        color: #”COLOR HEX” !important;
        }

        Y pon e color que quieras.

        Saludos

  84. Luis Salazr

    Muy buenos dias, tengo una duda que pense que podia resolver solo pero me he dado cuenta de que no. Quisiera simplemente agregar una galeria pero no el HEADER, quisiera que estuviera en la parte de testimonials por ejemplo ya que tengo un slider en la seccion de Big_tittle y la verdad estoy un poco desorientado sobre que debia hacer, agradezco su respuesta.

    • Caribdis Diseño Web

      Hola, Luis.

      Gracias por tu comentario.

      En ese caso, lo que te conviene es reemplazar el archivo /sections/testimonials.php por un do_shortcode. Fijate en esta respuesta, y en esta entrada donde se explica cómo reemplazar una sección por un código abreviado generado por un plugin.

      Espero que te sirva.

      Saludos.

      • Luis

        Muchísimas gracias 😀

  85. Rubén

    Hola buenos días desde España, nuevamente gracias por vuestros tutoriales porque estoy aprendiendo muchísimo. Tengo dos preguntas, una es que he conseguido poner la nueva sección debajo de testimonials, pero me sale con el mismo color de fondo, así ¿cómo podría cambiar el color de esta nueva sección para que se distinga de la anterior, por ejemplo en blanco?.

    La otra es que si quisiera añadir una segunda nueva sección ¿tendría que repetir el proceso?, es decir añadir un nuevo archivo “new_section” en la carpeta sections y añadir los respectivos códigos en los archivos front-page.php y functions.php.
    Muchísimas gracias de antemano.

    • Caribdis Diseño Web

      Hola, Rubén.

      Para cambiar el color de fondo de la sección nueva, fijate cuál es la ID que le asignaste. Por ejemplo, si le pusimos la ID nuevaseccion (<section class="testimonial" id="nuevaseccion">), el código CSS será:

      .testimonial#nuevaseccion {
          background: #1990a4;
      }
      

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

      En cuanto a tu otra pregunta, exacto, tendrías que repetir el proceso, pero no te olvides de darles un nombre diferente tanto al archivo para la nueva sección, como a las variables del código. Más abajo está mejor explicado.

      Saludos.

      • Rubén

        Muchas gracias por la info, he probado y al intentar integrar parte de los códigos del archivo functions es cuando todo se me tuerce porque en la web se me queda blanca y me indica que hay un fallo en el archivo fuctions en la linea “x”, nose donde estará exactamente el fallo ya que he copiado tal cual he ido añadiendo un 1 a todos los _new_sections_. Gracias igualmente seguiré probando y si fallo pues nada borrar y volver a empezar, un abrazo.

      • luis

        Hola seguí esta explicacion copiando a partir de our_focus , el id de mi nueva seccion es nuevaseccion y cuando coloco en custom.ccs el codigo no pasa absolutamente nada me podrias por favor decir en que falle ?

        .focus#nuevaseccion {
        background: #1990a4;
        }

        • Caribdis Diseño Web

          Hola, Luis.

          Gracias por tu comentario. El código está bien (aunque lo más correcto sería #nuevaseccion.focus { background: #1990a4; }). Lo único, fijate que el archivo es custom.css y no custom.ccs.

          Saludos.

          • luis

            pero que bruto pongale 0, XD muchas gracias por tu respuesta la verdad no me habia fijado, de todas formas quiero decir que puse ese mismo codigo dentro del archivo styles.ccs y tambien funciono saludos

  86. Isabel

    Hola! Muchísimas gracias por tus tutoriales, porque son geniales. He creado en este tema una página con parte de código php pero me falla muchas veces, el navegador no interpreta la parte que está entre ”, no me había pasado con otros temas… He probado a cambiar de plugin para el php y me sigue pasando, ¿Sabes por qué puede ser o cómo solucionarlo? Muchas gracias.

    • Caribdis Diseño Web

      Hola, Isabel.

      No me queda claro cuál es el problema. ¿Qué plugin estás usando? ¿Qué error/advertencia aparece en pantalla? ¿Cuál es el código?

      Dicho sea de paso, no es recomendable insertar código PHP en páginas o entradas de WP (tampoco en widgets, aunque sea vía plugins). La práctica correcta sería crear un tema hijo y agregar el código en la plantilla.

      Saludos.

  87. Aritz

    En el footer, cuando se mete una direccion de una calle, no se deberia de abrir en google maps?, se puede hacer?

    • Caribdis Diseño Web

      Depende. Si solo introducís texto, no. Si le agregás el código HTML con el enlace a Google Maps, sí. El código quedaría algo así:

      <a href="https://www.google.com.ar/maps/place/Piazza+San+Marcos/@45.434084,12.3379966,18.75z/" target="_blank" title="Ver en Google Maps">Piazza San Marco, Venezia</a>
      

      Espero que te sirva.

      Saludos.

      • Aritz

        Perfecto
        Muchas gracias

  88. Jorge

    Hola,

    He creado sección nueva y cambiado colores, pero no se como cambiar el color de la barra que aparece en el menú de navegación dependiendo de la sección en la que me encuentre. Es decir, la barra naranja que va cambiando.

    Gracias de antemano,

    Jorge

    • Caribdis Diseño Web

      Hola, Jorge.

      Fijate agregando el siguiente código al archivo custom.css:

      ul.nav > li.current > a:before {
          background: #1990a4;
      }
      

      Puede que también quieras cambiar el color del enlace activo, para que coincida:

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

      Y para cambiar el color al pasar el puntero:

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

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

      Espero que te sirva. 🙂

      • Susana

        Muchas gracias por tu respuesta!!! veo que no es el típico sitio donde las preguntas se pierden para siempre. La segunda aclaración ya la había conseguido :-), estoy aprendiendo a base de pruebas y la herramienta de desarrollo.

        Tenía otra pregunta, he añadido la sección como copia de ourfocus, y quiero cambiar las bolas por cuadrados, el problema es que si lo cambio también me lo cambia en la sección original, y queria que fueran diferentes. ¿Alguna idea sobre como hacerlo? te lo enseñaría en la web pero la tenemos cerrada hasta que la saquemos a la luz.

        • Caribdis Diseño Web

          Hola, Susana.

          En ese caso, tendrías que usar la ID de la sección nueva antes de la clase. Por ejemplo, si le pusimos la ID nuevaseccion (<section class="focus" id="nuevaseccion">), el código CSS será:

          #nuevaseccion .focus-box .service-icon {
              border-radius: 0;
          }
          #nuevaseccion .focus-box .service-icon .pixeden {
              border-radius: 0;
          }
          
      • Jorge

        Perfecto!!! Un millón de gracias.

    • Susana

      Hola de nuevo y gracias de antemano por todos tus aportes. Quería cambiar la barra de scroll (tamaño y color), y aunque modifico la sección que indica la herramienta de desarrollo no hace efecto. ¿Podrías indicarme como hacerlo?

      Saludos,

      Jorge

      • Caribdis Diseño Web

        Hola, Jorge.

        Por lo que veo, ya lo resolviste con la clase nicescroll-cursors.

        Saludos. 🙂

        • Jorge

          Hola,

          Si, tras bastante rato buscando en el código conseguí hacerlo. Espero que no te asustes viendo mi nuestra web, ten piedad de mi ya que es la primera vez que hago una web y nunca había tocado un css.

          Si ves alguna barbaridad te agradecería que me lo dijeras.

          Muchisimas gracias!!!

          • Caribdis Diseño Web

            Hola, Jorge.

            No te preocupes, me parece genial que te animes a bucear en las infinitas posibilidades que te da el CSS. La clave principal para aprender es probar mucho y equivocarse mucho. La práctica hace al maestro. 😉

            Saludos.

  89. Carolina

    Hola Ana!
    Estoy empezando a trabajar con Zerif Pro y tu articulo me sirvió mucho. Lo que yo necesito es agregar otro párrafo en la sección “about us” porque yo lo arme en tres y cuando lo publico me lo pone todo en uno. ¿Como lo puedo hacer? Y por otro lado, ¿hay forma de en estos mismos párrafos resaltar con negrita alguna palabra?

    ¡Muchas gracias!

    • Caribdis Diseño Web

      Hola, Carolina.

      Gracias por tu comentario.

      Fijate en esta respuesta. En resumen, el código sería algo así:

      <p>Párrafo 1</p><p>Párrafo 2 con un <strong>texto en negrita</strong></p><p>Párrafo 3</p>
      

      Espero que te sirva.

      Saludos.

  90. Mauricio

    Hola como estas? Consulta, hay alguna forma en la versión LITE de cambiar los nombres de las secciones (no los anclajes ni los titulos) sino la parte del panel de usuario que se accede por WP-Admin > Personalizar?

    Por ejemplo, quiero que “Nuestro Enfoque” sea por ejemplo “Servicios”

    Muchas gracias y te felicito por el sitio.

    • Caribdis Diseño Web

      Hola, Mauricio.

      Gracias por tu comentario.

      En este caso, lo más conveniente creo que sería crear un dominio de texto para el tema hijo y modificar las cadenas de traducción. De lo contrario deberías incluir más código en functions.php para eliminar primero un panel y luego volver a incluir el mismo solo que con otro nombre (no tiene mucho sentido).

      La cosa sería así: en el archivo functions.php del tema hijo añadís el siguiente código:

      function zerif_child_theme_setup() {
          load_child_theme_textdomain( 'zerif-lite', get_stylesheet_directory() . '/lang' );
      }
      add_action( 'after_setup_theme', 'zerif_child_theme_setup' );
      

      Luego creás en el tema hijo una carpeta /lang/ donde colocarás los archivos es_ES.mo y es_ES.po correspondientes a Zerif Lite (los copiás de una carpeta a la otra o descargás los que figuran en esta entrada). Editás el es_ES.po con Poedit y todas las instancias de “Nuestro enfoque” las reemplazás por “Servicios”. Guardás los cambios (compilando el es_ES.mo). De esta manera, con los nuevos archivos de traducción en la carpeta /lang/ debería aparecer el nuevo título en el panel del Personalizador del tema hijo. Podés hacer lo mismo para cualquiera de los otros paneles.

      Espero que se haya entendido.

      Saludos.

      • Mauricio

        Excelente! Voy a probar suerte, gracias por la rapidez y por responder, saludos!

  91. Liliana M.

    Hola como estás! Estoy trabajando con un tema hijo de Zerif Lite llamado ResponsiveBoat, mi duda es que para hacer modificaciones tendría que hacer un tema hijo de éste o los cambios lo haría en sus archivos directamente? Porque traté de crear un tema hijo y me salió que ResponsiveBoat no es un tema padre y no lo tomó.
    Muchas gracias de antemano!

    • Caribdis Diseño Web

      Hola, Liliana.

      Gracias por tu comentario.

      En efecto, todas las modificaciones las hacés en los archivos de ResponsiveBoat, ya que es un tema hijo de Zerif ya creado.

      Saludos. 🙂

  92. Pablo

    Hola,

    gracias por tus tutoriales. He logrado incluir la nueva sección solo que no me carga las personalizaciones que tenía dadas de alta en el plugin Simple Custom CSS. ¿Sabes a que podría deberse?

    Un saludo y mil gracias!!

    • Caribdis Diseño Web

      Hola, Pablo.

      Gracias por tu comentario.

      La verdad, no tengo idea por qué sucede eso con el tema hijo… Probá con el plugin Simple CSS (que he comprobado que sí funciona), o bien moviendo el código de Simple Custom CSS al archivo custom.css del tema hijo.

      Espero que te sirva.

      Saludos.

  93. Beatriz

    HOla
    Me gustaría saber cómo puedo cambiar el título de widget clientes. Ahora aparece como Nuestros clientes, y yo quiero poner mi propio título. Gracias.

    • Caribdis Diseño Web

      Hola, Beatriz.

      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.

  94. javier

    qué tal. gracias por compartir tus conocimientos. me surge una duda: me gustaría duplicar la página principal de mi sitio (direccionyevolucion.com) para especificar algunos servicios (direccionyevolucion.com/servicios) pero con las secciones (diferentes datos) del front-page. es posible? de antemano mil gracias.

    • Caribdis Diseño Web

      Hola, Javier.

      Gracias por tu comentario.

      Como poder se puede, pero tendrías que crear una nueva plantilla de página, más nuevas secciones con áreas de widgets. Es casi tanto trabajo como crear un tema nuevo. La esencia de este tipo de temas (los one page) es justamente que en la página principal muestren todo el contenido del sitio.

      Saludos.

  95. Jorge Suárez

    Buenas me podes ayudar para crear un enlace en el menú que apunte a la nueva sección,

    • Caribdis Diseño Web

      Hola, Jorge.

      El enlace sería el anclaje que elegiste para la nueva sección. Si, por ejemplo, el código del archivo new_section.php es <section class="focus" id="nuevaseccion">, el enlace personalizado que añadas al menú debe coincidir con la ID: en este caso, sería http://urldelsitio.com/#nuevaseccion.

      Espero que te sirva. Saludos. 🙂

      • Danilo

        Hola, muchas gracias. Me sirvió a mi también. Gracias por lo que hacen es muy bueno
        Consulta, el mismo enlace al menú, pero esta vez desde un botón INICIO, como lo enlazo?
        Osea que si estoy en contacto presione el botón inicio desde el menú y se valla así arriba.

        Saludos.-

        • Caribdis Diseño Web

          Hola, Danilo.

          Gracias por tu comentario.

          Tendrías que agregar un enlace personalizado con la ID home. El campo URL sería algo así como http://urldelsitio.com/#home.

          Saludos.

  96. Carmen

    Hola, te felicito por todas las recomendaciones y respuestas.
    Una consulta, quisiera saber como cambiar el color de los textos de título y párrafo de about us.

    Muchas gracias por tu respuesta,
    Saludos

    • Caribdis Diseño Web

      Hola, Carmen.

      Gracias por tu comentario.

      Para cambiar el color de texto de esa sección, tenés que agregar el siguiente código (en la hoja de estilos del tema hijo o en el recuadro CSS adicional del Personalizador):

      #aboutus h2.white-text {
          color: #1990A4; /* Para el título */
      }
      #aboutus div.white-text {
          color: #1990A4; /* Para el subtítulo */
      }
      .about-us p {
          color: #1990A4; /* Para los párrafos del medio */
      }
      .big-intro {
          color: #1990A4; /* Para el título de la izquierda */
      }
      .section-legend {
          color: #1990A4; /* Para el título de las habilidades */
      }
      .skills .skill p {
          color: #1990A4; /* Para el texto de las habilidades */
      }
      

      Reemplazá #1990A4 por el valor de color que necesites.

      Espero que te sirva.

      Saludos. 🙂

      • Carmen

        Muchas gracias por tu respuesta. Me olvide una consulta adicional. Para esa misma sección About us, ¿cómo agregar otro título y párrafo? Gracias.

        • Caribdis Diseño Web

          Hola, Carmen. De nada 🙂 ¿En qué lugar de la sección exactamente agregarías ese título y párrafo adicionales?

  97. Shirley

    Hola guapa, soy yo de nuevo, he intentado crear una nueva sección igual a testimonials, y según sé he seguido todos los pasos que nos has orientado en este tuto, sin embargo a actualizar me sale:
    Parse error: syntax error, unexpected ‘<' in /home/concepto/public_html/wp-content/themes/zerif child/sections/new_section.php on line 3

    No sé dónde estoy cometiendo el error. Te agradezco de antemano las moletias, Un abrazo

  98. Fernando

    Hola a todos, me gustaría cambiar el color de fondo de 1 de las secciones, en concreto la de TESTIMONIALS que va en dorado el fondo… ¿Es posible hacerlo con la versión lite aplicando algún ajuste de código?

    Muchas gracias,

    • Caribdis Diseño Web

      Hola, Fernando.

      Gracias por comentar. Es posible si usás un tema hijo, y agregás el código en la hoja de estilos o en el recuadro CSS adicional del Personalizador (esto se menciona en esta entrada).

      El código sería:

      .testimonial {
          background: #000000;
      }
      

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

      Saludos.

  99. Fernando

    Hola Ana,
    Estoy desarrollando un tema hijo de Zerif y no puedo eliminar secciones de personalizador … No sé lo que estoy haciendo mal.
    Este es mi functions.php, con este código así mismo secciones siguen apareciendo.

    Lo siento por mi mal español

    add_action(‘wp_enqueue_scripts’, ‘child_enqueue_styles’, 99);
    function child_enqueue_styles()
    {
    $parent_style = ‘parent-style’;
    wp_enqueue_style($parent_style, get_template_directory_uri() . ‘/style.css’);
    wp_enqueue_style(‘child-style’, get_stylesheet_directory_uri() . ‘/custom.css’, array($parent_style));
    }

    if (get_stylesheet() !== get_template()) {
    add_filter(‘pre_update_option_theme_mods_’ . get_stylesheet(), function ($value, $old_value) {
    update_option(‘theme_mods_’ . get_template(), $value);
    return $old_value; // prevent update to child theme mods
    }, 10, 2);
    add_filter(‘pre_option_theme_mods_’ . get_stylesheet(), function ($default) {
    return get_option(‘theme_mods_’ . get_template(), $default);
    });
    }

    add_action(‘customize_register’, ‘my_customizer’);
    function my_customizer($wp_customize)
    {
    /************* OUR FOCUS SECTION ******************/
    $wp_customize->remove_section( ‘zerif_ourfocus_section’);
    /* show/hide */
    $wp_customize->remove_setting( ‘zerif_ourfocus_show’);
    $wp_customize->remove_control( ‘zerif_ourfocus_show’);
    /* our focus title */
    $wp_customize->remove_setting( ‘zerif_ourfocus_title’);
    $wp_customize->remove_control( ‘zerif_ourfocus_title’);
    /* our focus subtitle */
    $wp_customize->remove_setting( ‘zerif_ourfocus_subtitle’);
    $wp_customize->remove_control( ‘zerif_ourfocus_subtitle’);

    }

    • Caribdis Diseño Web

      Hola, Fernando.

      El código debería ser el siguiente:

      function my_customizer( $wp_customize ) {
          $wp_customize->remove_section( 'zerif_ourfocus_section' );
      }
      add_action( 'customize_register', 'my_customizer', 11 );
      

      Pero también recordá eliminar la sección Our focus del archivo front-page.php del tema hijo, de lo contrario este seguirá “llamándola”.

      Espero que te sirva.

      Saludos. 🙂

      • Fernando

        Funcionó! Gracias Ana!
        Realmente olvidé el argumento de prioridad de ejecución.

        Gracias y felicitaciones por su trabajo.

  100. Darby

    Buenas.

    Hice todo lo indicado en el tuto hasta descargue tu archivos y no me sale nada despues que active el tema hijo, ne sale todo en blanco y tampoco me deja ingresar al wp-admin.

    Saludos.

    • Caribdis Diseño Web

      Hola, Darby.

      Algún error de código debe haber. Borrá por completo del servidor la carpeta del tema hijo e intentá ingresar nuevamente. Una vez hecho esto, fijate si podés subir el zip de esta entrada (desde Apariencia > Temas > Añadir nuevo > Subir tema).

      Luego me confirmás.

      Saludos.

  101. javiereyes

    qué tal. excelentes tutoriales. solo que tengo un problemita:

    cloco lo siguiente en el archivo : zerius/sections/new_section1.php


    <?php
    $zerif_newsection1_title = get_theme_mod('zerif_newsection1_title',__('NUEVA SECCIÓN','zerif-lite'));
    if( !empty($zerif_newsection1_title) ):
    echo '’.$zerif_newsection1_title.”;
    endif;
    ?>
    <?php
    $zerif_newsection1_subtitle = get_theme_mod('zerif_newsection_subtitle',__('Escriba un subtítulo para la nueva sección.','zerif-lite'));
    if( !empty($zerif_newsection1_subtitle) ):
    echo '’.$zerif_newsection1_subtitle.”;
    endif;
    ?>


    luego, lo siguiente en el functions

    ‘add_panel( ‘panel_newsection’, array(
    ‘priority’ => 32,
    ‘capability’ => ‘edit_theme_options’,
    ‘theme_supports’ => ”,
    ‘title’ => __( ‘Nueva Sección’, ‘zerif-lite’ )
    ));
    $wp_customize->add_section( ‘zerif_newsection_section’ , array(
    ‘title’ => __( ‘Contenido’, ‘zerif-lite’ ),
    ‘priority’ => 1,
    ‘panel’ => ‘panel_newsection’,
    ‘description’ => __( ‘El contenido principal de esta sección se puede personalizar desde el menú Personalizar -> Widgets. Allí podrá añadir cualquier widget.”‘, ‘zerif-lite’ )
    ));
    /* show/hide */
    $wp_customize->add_setting( ‘zerif_newsection_show’, array(‘sanitize_callback’ => ‘caribdis_sanitize_customizer’));
    $wp_customize->add_control(
    ‘zerif_newsection_show’,
    array(
    ‘type’ => ‘checkbox’,
    ‘label’ => __(‘¿Ocultar nueva sección?’,’zerif-lite’),
    ‘section’ => ‘zerif_newsection_section’,
    ‘priority’ => 1,
    )
    );
    /* new_section title */
    $wp_customize->add_setting( ‘zerif_newsection_title’, array(‘sanitize_callback’ => ‘caribdis_sanitize_customizer’,’default’ => __(‘NUEVA SECCIÓN’,’zerif-lite’)));

    $wp_customize->add_control( ‘zerif_newsection_title’, array(
    ‘label’ => __( ‘Title’, ‘zerif-lite’ ),
    ‘section’ => ‘zerif_newsection_section’,
    ‘settings’ => ‘zerif_newsection_title’,
    ‘priority’ => 2,
    ));
    /* new_section subtitle */
    $wp_customize->add_setting( ‘zerif_newsection_subtitle’, array(‘sanitize_callback’ => ‘caribdis_sanitize_customizer’,’default’ => __(‘Escriba la descripción de esta sección aquí.’,’zerif-lite’)));
    $wp_customize->add_control( ‘zerif_newsection_subtitle’, array(
    ‘label’ => __( ‘Subtítulo de la nueva sección’, ‘zerif-lite’ ),
    ‘section’ => ‘zerif_newsection_section’,
    ‘settings’ => ‘zerif_newsection_subtitle’,
    ‘priority’ => 3,
    ));
    $wp_customize->add_panel( ‘panel_newsection’, array(
    ‘priority’ => 32,
    ‘capability’ => ‘edit_theme_options’,
    ‘theme_supports’ => ”,
    ‘title’ => __( ‘Nueva Sección’, ‘zerif-lite’ )
    ));
    $wp_customize->add_section( ‘zerif_newsection1_section’ , array(
    ‘title’ => __( ‘Contenido’, ‘zerif-lite’ ),
    ‘priority’ => 1,
    ‘panel’ => ‘panel_newsection’,
    ‘description’ => __( ‘El contenido principal de esta sección se puede personalizar desde el menú Personalizar -> Widgets. Allí podrá añadir cualquier widget.”‘, ‘zerif-lite’ )
    ));
    /* show/hide */
    $wp_customize->add_setting( ‘zerif_newsection1_show’, array(‘sanitize_callback’ => ‘caribdis_sanitize_customizer’));
    $wp_customize->add_control(
    ‘zerif_newsection1_show’,
    array(
    ‘type’ => ‘checkbox’,
    ‘label’ => __(‘¿Ocultar nueva sección?’,’zerif-lite’),
    ‘section’ => ‘zerif_newsection1_section’,
    ‘priority’ => 1,
    )
    );
    /* new_section title */
    $wp_customize->add_setting( ‘zerif_newsection1_title’, array(‘sanitize_callback’ => ‘caribdis_sanitize_customizer’,’default’ => __(‘NUEVA SECCIÓN’,’zerif-lite’)));

    $wp_customize->add_control( ‘zerif_newsection1_title’, array(
    ‘label’ => __( ‘Title’, ‘zerif-lite’ ),
    ‘section’ => ‘zerif_newsection1_section’,
    ‘settings’ => ‘zerif_newsection1_title’,
    ‘priority’ => 2,
    ));
    /* new_section subtitle */
    $wp_customize->add_setting( ‘zerif_newsection1_subtitle’, array(‘sanitize_callback’ => ‘caribdis_sanitize_customizer’,’default’ => __(‘Escriba la descripción de esta sección aquí.’,’zerif-lite’)));
    $wp_customize->add_control( ‘zerif_newsection1_subtitle’, array(
    ‘label’ => __( ‘Subtítulo de la nueva sección’, ‘zerif-lite’ ),
    ‘section’ => ‘zerif_newsection1_section’,
    ‘settings’ => ‘zerif_newsection1_subtitle’,
    ‘priority’ => 3,
    ));
    }

    add_action( ‘customize_register’, ‘caribdis_customizer’ );
    function caribdis_sanitize_customizer( $input ) {
    return wp_kses_post( force_balance_tags( $input ) );
    }
    function caribdis_sanitize_checkbox( $input ) {
    if ( $input == 1 ) {
    return 1;
    } else {
    return ”;
    }
    }
    function new_section_widgets() {
    register_sidebar( array(
    ‘name’ => __( ‘Barra lateral de nueva sección’, ‘zerif-lite’ ),
    ‘id’ => ‘new-section-sidebar’,
    ‘description’ => __( ‘Widgets para la nueva sección’, ‘zerif-lite’ ),
    ‘before_widget’ => ”,
    ‘after_widget’ => ”,
    ‘before_title’ => ”,
    ‘after_title’ => ”,
    ) );
    register_sidebar( array(
    ‘name’ => __( ‘Barra lateral de nueva sección’, ‘zerif-lite’ ),
    ‘id’ => ‘new-section1-sidebar’,
    ‘description’ => __( ‘Widgets para la nueva sección’, ‘zerif-lite’ ),
    ‘before_widget’ => ”,
    ‘after_widget’ => ”,
    ‘before_title’ => ”,
    ‘after_title’ => ”,
    ) );
    }
    add_action( ‘widgets_init’, ‘new_section_widgets’ );’

    y lo siguiente entre ribbon y contact us:

    ‘ /* SECCIÓN NUEVA 1 */
    $zerif_newsection1_show = get_theme_mod(‘zerif_newsection1_show’);
    if( isset($zerif_newsection1_show) && $zerif_newsection1_show != 1 ):
    get_template_part( ‘sections/new_section1’ );’

    pero al cargar mi página, me aparece error del servidor 500

    agradeceré mucho tu ayuda.

    • Caribdis Diseño Web

      Hola.

      Estás mezclando código para dos secciones diferentes. Fijate descargando el tema hijo ya creado y trabajar directo desde ahí.

      Saludos.

      • javiereyes

        muchas gracias. logré colocar una sección e inserté una galería en ella, pero mi deseo es agregar otra sección (igual que pedro) entre contáctanos y el footer y seguí tus respuestas (Para esto, copiá todo el código que está luego de la línea function caribdis_customizer( $wp_customize ) { hasta el cierre de la }) aunque probablemente entendí mal.

        agradecería mucho tu ayuda.

        • Caribdis Diseño Web

          Debés estar salteándote algún paso o no reemplazando todos los nombres de las variables.

          Si ya tenés una sección nueva agregada y funcionando, para agregar una segunda sección tenés que hacer lo siguiente:

          En front-page.php agregar el código de la segunda sección justo despúes de este código:

          <!-- / END CONTACT FORM-->
          					<?php
          					endif;
          					?>
          				</div> <!-- / END CONTAINER -->
          			</section> <!-- / END CONTACT US SECTION-->
          			<?php
          		endif;
          

          y antes de este código:

          }
          get_footer(); ?>
          

          El final de ese archivo te quedaría así:

          <!-- / END CONTACT FORM-->
          					<?php
          					endif;
          					?>
          				</div> <!-- / END CONTAINER -->
          			</section> <!-- / END CONTACT US SECTION-->
          			<?php
          		endif;
          	/* SECCIÓN NUEVA 1 */
          	$zerif_newsection1_show = get_theme_mod('zerif_newsection1_show');
          	if( isset($zerif_newsection1_show) && $zerif_newsection1_show != 1 ):
          	get_template_part( 'sections/new_section1' );
          	endif;
          }
          get_footer(); ?>
          

          En el archivo functions.php: copiás todo el código que está justo después de la línea function caribdis_customizer( $wp_customize ) { hasta el cierre de la primera }. Lo pegás antes de ese cierre de la } y vas reemplazando todas las _newsection_ de las variables por _newsection1_ en esa nueva porción de código que pegaste.

          Luego, también en functions.php, copiás todo el código que está después de la línea function new_section_widgets() { hasta el cierre de la } correspondiente y lo pegás antes de ese mismo cierre de la }, reemplazando la ID new-section-sidebar por new-section1-sidebar.

          Por último, en el archivo new_section1.php tenés que reemplazar todas las _newsection_ por _newsection1_ y new-section-sidebar por new-section1-sidebar.

          Si querés, para no confundirte usá _elnombrequequieras_ para las variables de la nueva sección. Y los dos últimos pasos es por si querés agregar áreas de widgets. Si querés agregar un do_shortcode en su lugar, no hacen falta.

          Espero que se entienda.

          • javiereyes

            te amo. eres genial. mil gracias

  102. Cristhyan

    Hola ya sé que es algo tonto, pero como podría colocar una sección ya creada en una entrada nueva? por ejemplo:

    Entrada nueva:
    “Descripción” y debajo

    Sección: “Our Focus”

    Gracias

    • Caribdis Diseño Web

      Hola, Cristhyan.

      Gracias por comentar. No me queda claro dónde querés agregar la sección, ¿sería en una entrada del blog? Si pudieras darme más detalles o mostrarme alguna imagen, mejor.

      Saludos.

      • Cristhyan

        Hola Caribdis gracias por responder y disculpa por no ser más específico, me refería a que por ejemplo yo tengo un artículo nuevo y dentro de ese artículo quiero colocar por ejemplo la sección “nuestro enfoque” la que está en la página principal, como podría hacerse? muchas gracias por tu atención

        • Caribdis Diseño Web

          OK, creo que ahora entiendo. En ese caso, deberás agregar el siguiente código al archivo single.php del tema hijo (previamente copiado del tema padre):

          Donde dice:

          <?php get_footer(); ?>
          

          Reemplazar por:

          <?php
          get_template_part( 'sections/our_focus' );
          get_footer(); ?>
          

          Pero tené en cuenta que va a aparecer en todas las entradas que ya existan y en las nuevas.

          Espero que te sirva. Saludos.

          • Cristhyan

            Muchas gracias

  103. Caribdis Diseño Web

    Hola, Jorge.

    No me copiaste el contenido completo del archivo functions.php (no más el código para agregar la nueva sección). Es muy probable que te falte alguna coma o comilla simple, o haya algún carácter no válido. Probá descargando este ZIP que contiene el tema hijo ya creado y editá lo que necesites directamente en esos archivos.

    Confirmame si te sirvió. Saludos.

    • Jorge

      Hola Caribdis, gracias por responder! te comento, remplace en host los archivos por los que me enviaste en el Zip pero continua generando el mismo error. =O(

      Parse error: syntax error, unexpected T_FUNCTION in /home/a5562549/public_html/wp-content/themes/zerif-child/functions.php on line 9

      Te envió una imagen por el facebook para que veas como visualizo el tema, quizás sea de ayuda.

      Muchas gracias!

    • Jorge

      Caribdis, Al final funciono utilizando otro Hosting como dijiste! gracias!!

  104. Jorge

    Hola Caribdi! puedo seleccionar el tema zerif hijo, la previsualizacion esta vacia y me tira este error de sintaxis en la linea 9 del functions.php

    Parse error: syntax error, unexpected T_FUNCTION in /home/a5562549/public_html/wp-content/themes/zerif-child/functions.php on line 9

    Asi esta mi archivo functions.php en la carpeta zerif-child, me dirías como lo soluciono?

    Gracias!!

    /*******************************************/
    /************* NUEVA SECCIÓN *************/
    /*******************************************/
    function caribdis_customizer( $wp_customize ) {
    $wp_customize->add_panel( ‘panel_newsection’, array(
    ‘priority’ => 32,
    ‘capability’ => ‘edit_theme_options’,
    ‘theme_supports’ => ”,
    ‘title’ => __( ‘Nueva Sección’, ‘zerif-lite’ )
    ));
    $wp_customize->add_section( ‘zerif_newsection_section’ , array(
    ‘title’ => __( ‘Contenido’, ‘zerif-lite’ ),
    ‘priority’ => 1,
    ‘panel’ => ‘panel_newsection’,
    ‘description’ => __( ‘El contenido principal de esta sección se puede personalizar desde el menú Personalizar -> Widgets. Allí podrá añadir cualquier widget.”‘, ‘zerif-lite’ )
    ));
    /* show/hide */
    $wp_customize->add_setting( ‘zerif_newsection_show’, array(‘sanitize_callback’ => ‘caribdis_sanitize_customizer’));
    $wp_customize->add_control(
    ‘zerif_newsection_show’,
    array(
    ‘type’ => ‘checkbox’,
    ‘label’ => __(‘¿Ocultar nueva sección?’,’zerif-lite’),
    ‘section’ => ‘zerif_newsection_section’,
    ‘priority’ => 1,
    )
    );
    /* new_section title */
    $wp_customize->add_setting( ‘zerif_newsection_title’, array(‘sanitize_callback’ => ‘caribdis_sanitize_customizer’,’default’ => __(‘NUEVA SECCIÓN’,’zerif-lite’)));

    $wp_customize->add_control( ‘zerif_newsection_title’, array(
    ‘label’ => __( ‘Title’, ‘zerif-lite’ ),
    ‘section’ => ‘zerif_newsection_section’,
    ‘settings’ => ‘zerif_newsection_title’,
    ‘priority’ => 2,
    ));
    /* new_section subtitle */
    $wp_customize->add_setting( ‘zerif_newsection_subtitle’, array(‘sanitize_callback’ => ‘caribdis_sanitize_customizer’,’default’ => __(‘Escriba la descripción de esta sección aquí.’,’zerif-lite’)));
    $wp_customize->add_control( ‘zerif_newsection_subtitle’, array(
    ‘label’ => __( ‘Subtítulo de la nueva sección’, ‘zerif-lite’ ),
    ‘section’ => ‘zerif_newsection_section’,
    ‘settings’ => ‘zerif_newsection_subtitle’,
    ‘priority’ => 3,
    ));
    }

    add_action( ‘customize_register’, ‘caribdis_customizer’ );
    function caribdis_sanitize_customizer( $input ) {
    return wp_kses_post( force_balance_tags( $input ) );
    }
    function caribdis_sanitize_checkbox( $input ) {
    if ( $input == 1 ) {
    return 1;
    } else {
    return ”;
    }
    }
    function new_section_widgets() {
    register_sidebar( array(
    ‘name’ => __( ‘Barra lateral de nueva sección’, ‘zerif-lite’ ),
    ‘id’ => ‘new-section-sidebar’,
    ‘description’ => __( ‘Widgets para la nueva sección’, ‘zerif-lite’ ),
    ‘before_widget’ => ”,
    ‘after_widget’ => ”,
    ‘before_title’ => ”,
    ‘after_title’ => ”,
    ) );
    }
    add_action( ‘widgets_init’, ‘new_section_widgets’ );

    • Jorge

      vuelvo a copiar el archivo, que lo pegue mal

      /*******************************************/
      /************* NUEVA SECCIÓN *************/
      /*******************************************/
      function caribdis_customizer( $wp_customize ) {
      $wp_customize->add_panel( ‘panel_newsection’, array(
      ‘priority’ => 32,
      ‘capability’ => ‘edit_theme_options’,
      ‘theme_supports’ => ”,
      ‘title’ => __( ‘Nueva Sección’, ‘zerif-lite’ )
      ));
      $wp_customize->add_section( ‘zerif_newsection_section’ , array(
      ‘title’ => __( ‘Contenido’, ‘zerif-lite’ ),
      ‘priority’ => 1,
      ‘panel’ => ‘panel_newsection’,
      ‘description’ => __( ‘El contenido principal de esta sección se puede personalizar desde el menú Personalizar -> Widgets. Allí podrá añadir cualquier widget.”‘, ‘zerif-lite’ )
      ));
      /* show/hide */
      $wp_customize->add_setting( ‘zerif_newsection_show’, array(‘sanitize_callback’ => ‘caribdis_sanitize_customizer’));
      $wp_customize->add_control(
      ‘zerif_newsection_show’,
      array(
      ‘type’ => ‘checkbox’,
      ‘label’ => __(‘¿Ocultar nueva sección?’,’zerif-lite’),
      ‘section’ => ‘zerif_newsection_section’,
      ‘priority’ => 1,
      )
      );
      /* new_section title */
      $wp_customize->add_setting( ‘zerif_newsection_title’, array(‘sanitize_callback’ => ‘caribdis_sanitize_customizer’,’default’ => __(‘NUEVA SECCIÓN’,’zerif-lite’)));

      $wp_customize->add_control( ‘zerif_newsection_title’, array(
      ‘label’ => __( ‘Title’, ‘zerif-lite’ ),
      ‘section’ => ‘zerif_newsection_section’,
      ‘settings’ => ‘zerif_newsection_title’,
      ‘priority’ => 2,
      ));
      /* new_section subtitle */
      $wp_customize->add_setting( ‘zerif_newsection_subtitle’, array(‘sanitize_callback’ => ‘caribdis_sanitize_customizer’,’default’ => __(‘Escriba la descripción de esta sección aquí.’,’zerif-lite’)));
      $wp_customize->add_control( ‘zerif_newsection_subtitle’, array(
      ‘label’ => __( ‘Subtítulo de la nueva sección’, ‘zerif-lite’ ),
      ‘section’ => ‘zerif_newsection_section’,
      ‘settings’ => ‘zerif_newsection_subtitle’,
      ‘priority’ => 3,
      ));
      }

      add_action( ‘customize_register’, ‘caribdis_customizer’ );
      function caribdis_sanitize_customizer( $input ) {
      return wp_kses_post( force_balance_tags( $input ) );
      }
      function caribdis_sanitize_checkbox( $input ) {
      if ( $input == 1 ) {
      return 1;
      } else {
      return ”;
      }
      }
      function new_section_widgets() {
      register_sidebar( array(
      ‘name’ => __( ‘Barra lateral de nueva sección’, ‘zerif-lite’ ),
      ‘id’ => ‘new-section-sidebar’,
      ‘description’ => __( ‘Widgets para la nueva sección’, ‘zerif-lite’ ),
      ‘before_widget’ => ”,
      ‘after_widget’ => ”,
      ‘before_title’ => ”,
      ‘after_title’ => ”,
      ) );
      }
      add_action( ‘widgets_init’, ‘new_section_widgets’ );
      Syntax highlighting powered by GeSHi

      • Jorge

        Perdón, pero no sale esta parte del código cuando lo pego en el comentario, aqui se encontaria la fila 9

        Cree una carpeta en /wp-content/themes/ denominada /zerif-child/. Cree un archivo nuevo en un editor de texto (por ejemplo, Notepad++), con el nombre functions.php. Copie el siguiente código en este archivo y guárdelo en la carpeta /zerif-child/:

  105. pedro

    Hola Caribdis, gracias de ante mano por el tuto, esta genial.
    quisera saber como creo otra sección mas, aparte de la que ya nos enseñaste, otra igual y otra diferente. gracias por la respuesta.

    • Caribdis Diseño Web

      Hola, Pedro.

      Gracias por comentar. Todo depende de lo que necesites incluir en la nueva sección. Los pasos para agregar secciones nuevas serían los mismos, pero siempre dándoles un nombre único a cada una y creando el archivo php correspondiente en la carpeta /sections/.

      Si me pudieras dar un poco más de detalles, lo vemos.

      Saludos. 🙂

      • pedro

        eh agregado en front-page.php

        /* SECCIÓN NUEVA 1 */

        $zerif_newsection1_show = get_theme_mod(‘zerif_newsection1_show’);

        if( isset($zerif_newsection1_show) && $zerif_newsection1_show != 1 ):

        get_template_part( ‘sections/new_section1’ );

        Eh Creado en la carpeta Zerif-chil/sections/new_section1

        quiero saber si en function.php del tema hijo se le tiene que agregar algo y si es asi que se tiene que agregar.

        pues en el tuto se le agrego:

        /*******************************************/
        /************* NUEVA SECCIÓN *************/
        /*******************************************/

        function caribdis_customizer( $wp_customize ) {
        $wp_customize->add_panel( ‘panel_newsection’, array(
        ‘priority’ => 32,
        ‘capability’ => ‘edit_theme_options’,
        ‘theme_supports’ => ”,
        ‘title’ => __( ‘Nueva Sección’, ‘zerif-lite’ )
        ));
        $wp_customize->add_section( ‘zerif_newsection_section’ , array(
        ‘title’ => __( ‘Contenido’, ‘zerif-lite’ ),
        ‘priority’ => 1,
        ‘panel’ => ‘panel_newsection’,
        ‘description’ => __( ‘El contenido principal de esta sección se puede personalizar desde el menú Personalizar -> Widgets. Allí podrá añadir cualquier widget.’, ‘zerif-lite’ )
        ));
        /* show/hide */
        $wp_customize->add_setting( ‘zerif_newsection_show’, array(‘sanitize_callback’ => ‘caribdis_sanitize_customizer’));
        $wp_customize->add_control(
        ‘zerif_newsection_show’,
        array(
        ‘type’ => ‘checkbox’,
        ‘label’ => __(‘¿Ocultar nueva sección?’,’zerif-lite’),
        ‘section’ => ‘zerif_newsection_section’,
        ‘priority’ => 1,
        )
        );
        /* new_section title */
        $wp_customize->add_setting( ‘zerif_newsection_title’, array(‘sanitize_callback’ => ‘caribdis_sanitize_customizer’,’default’ => __(‘NUEVA SECCIÓN’,’zerif-lite’)));

        $wp_customize->add_control( ‘zerif_newsection_title’, array(
        ‘label’ => __( ‘Title’, ‘zerif-lite’ ),
        ‘section’ => ‘zerif_newsection_section’,
        ‘settings’ => ‘zerif_newsection_title’,
        ‘priority’ => 2,
        ));
        /* new_section subtitle */
        $wp_customize->add_setting( ‘zerif_newsection_subtitle’, array(‘sanitize_callback’ => ‘caribdis_sanitize_customizer’,’default’ => __(‘Escriba la descripción de esta sección aquí.’,’zerif-lite’)));
        $wp_customize->add_control( ‘zerif_newsection_subtitle’, array(
        ‘label’ => __( ‘Subtítulo de la nueva sección’, ‘zerif-lite’ ),
        ‘section’ => ‘zerif_newsection_section’,
        ‘settings’ => ‘zerif_newsection_subtitle’,
        ‘priority’ => 3,
        ));
        }

        add_action( ‘customize_register’, ‘caribdis_customizer’ );

        function caribdis_sanitize_customizer( $input ) {
        return wp_kses_post( force_balance_tags( $input ) );
        }

        function caribdis_sanitize_checkbox( $input ) {
        if ( $input == 1 ) {
        return 1;
        } else {
        return ”;
        }
        }

        function new_section_widgets() {
        register_sidebar( array(
        ‘name’ => __( ‘Barra lateral de nueva sección’, ‘zerif-lite’ ),
        ‘id’ => ‘new-section-sidebar’,
        ‘description’ => __( ‘Widgets para la nueva sección’, ‘zerif-lite’ ),
        ‘before_widget’ => ”,
        ‘after_widget’ => ”,
        ‘before_title’ => ”,
        ‘after_title’ => ”
        ) );
        }

        add_action( ‘widgets_init’, ‘new_section_widgets’ );

        quiero saber si se tiene que agregar otra seccion igual cambiandoles el nombre.

        gracias por la respuesta.

        Saludos.

        • Caribdis Diseño Web

          Sí, en functions.php tenés que agregar la nueva sección al personalizador y una nueva área de widgets.

          Para esto, copiá todo el código que está luego de la línea function caribdis_customizer( $wp_customize ) { hasta el cierre de la }

          Lo pegás antes de ese cierre de la } y vas reemplazando todas las _newsection_ por _newsection1_.

          Luego copiá todo el código que está después de la línea function new_section_widgets() { hasta el cierre de la } y lo pegás antes de ese mismo cierre de la }, reemplazando la ID new-section-sidebar por new-section1-sidebar

          Recordá también reemplazar todas las _newsection_ por _newsection1_ en el archivo new_section1.php y new-section-sidebar por new-section1-sidebar para que reconozca la nueva barra lateral correspondiente.

          • pedro

            Muchas gracias, esta excelente el tuto…disculpe eh agregado en el menù como fondo una imagen, y va excelente, pero al visualizarla en un dispositivo movil al dar click en la hamburguesa baja con todo e imagen de fondo(del menù)….talvez no le agregue correctamente…

          • Caribdis Diseño Web

            ¿Cuál sería el código completo que agregaste para la imagen de fondo? Es muy posible que tengas que ajustar el background-attachment y/o background-size para la media query correspondiente al dispositivo móvil.

  106. Lucrecia

    Hola muy buen tutorial aunque yo tengo un problema porque hice todo, me sale en el menú de customize pero no me sale la sección en sí … no sé que hice mal, yo he escogido copiar el código de testimonial para utilizarlo como separador entre contact y el footer pero nada :S

    • Caribdis Diseño Web

      Hola, Lucrecia.

      Gracias por tu comentario. No sé por qué no estás viendo la sección. Asegurate de que todos los _testimonials_ estén reemplazados por _newsection_, y no te olvides de agregar la nueva sección en el archivo front-page.php. Debería quedar entre /* RIBBON WITH RIGHT SIDE BUTTON */ y /* CONTACT US */ el siguiente código:

      /* SECCIÓN NUEVA */
          $zerif_newsection_show = get_theme_mod('zerif_newsection_show');
          if( isset($zerif_newsection_show) && $zerif_newsection_show != 1 ):
          get_template_part( 'sections/new_section' );
          endif;
      
  107. DaN_xD

    Muchas gracias por la información saludos desde MExico

    • Caribdis Diseño Web

      De nada, saludos 🙂

  108. Felipe Fortes

    No tutorial você explica como duplicar a seção Our Focus, mas eu gostaria de duplicar a seção About Us. Já fiz como você ensinou até o passo 3 mas duplicando o arquivo about_us.php ao invés do arquivo our_focus.php, como você explica no tutorial. No entanto a partir do passo 4 eu não sei oque fazer. Eu não sei exatamente onde devo adicionar esse código que você fez, se no começo, meio, ou final do arquivo function.php, e mesmo assim acho que esse código só serve caso eu queira adicionar a seção our_focus e não serve para a seção about_us.
    E outra coisa, acho que fiz alguma coisa errado porque não apareceu a área de widgets da nova seção.
    Caso não tenha entendido e puder entrar em contato por e-mail ou mesmo por aqui, eu agradeceria.
    Obrigado.

    • Caribdis Diseño Web

      Olá, Felipe. Obrigada pelo seu comentário.

      Sempre que você quer duplicar uma seção, deve ser atualizadas todas as variáveis ​​relevantes nas funções que registram a seção no personalizador, assim como as respectivas áreas de widgets.

      No seu caso, copie o conteúdo da about_us.php em new_section.php e substituir todas as instâncias de aboutus (por exemplo, newsection, ou pode ser qualquer outra palavra que não tenha sido usado antes). Com isso, $zerif_aboutus_title, $zerif_aboutus_subtitle, $zerif_aboutus_biglefttitle será $zerif_newsection_title, $zerif_newsection_subtitle, $zerif_newsection_biglefttitle, e assim por diante.

      Além disso, vamos colocar um nome diferente para área de widgets, caso contrário os widgets vai repetir a seção About Us, se houver. Podemos colocar new-section-aboutus.

      Então no seu arquivo functions.php, registra na seção em o Customizer com o seguinte código:

      /*******************************************/
      /*************  NUEVA SECCIÓN  *************/
      /*******************************************/
      function caribdis_customizer( $wp_customize ) {
      	
      		$wp_customize->add_panel( 'panel_newsection', array(
      			'priority' => 34,
      			'capability' => 'edit_theme_options',
      			'theme_supports' => '',
      			'title' => __( 'Nueva Sección', 'zerif-lite' )
      		) );
      		
      		$wp_customize->add_section( 'zerif_newsection_settings_section' , array(
      				'title'       => __( 'Settings', 'zerif-lite' ),
      				'priority'    => 1,
      				'panel' => 'panel_newsection'
      		));
      		/* new about us show/hide */
      		$wp_customize->add_setting( 'zerif_newsection_show', array('sanitize_callback' => 'zerif_sanitize_text'));
      		$wp_customize->add_control(
      			'zerif_newsection_show',
      			array(
      				'type' => 'checkbox',
      				'label' => __('Hide about us section?','zerif-lite'),
      				'section' => 'zerif_newsection_settings_section',
      				'priority'    => 1,
      			)
      		);
      		
      		$wp_customize->add_section( 'zerif_newsection_main_section' , array(
      				'title'       => __( 'Main content', 'zerif-lite' ),
      				'priority'    => 2,
      				'panel' => 'panel_newsection'
      		));
      		
      		/* title */
      		$wp_customize->add_setting( 'zerif_newsection_title', array('sanitize_callback' => 'zerif_sanitize_text','default' => __('About','zerif-lite')));
      		$wp_customize->add_control( 'zerif_newsection_title', array(
      					'label'    => __( 'Title', 'zerif-lite' ),
      					'section'  => 'zerif_newsection_main_section',
      					'settings' => 'zerif_newsection_title',
      					'priority'    => 2,
      		));
      		/* subtitle */
      		$wp_customize->add_setting( 'zerif_newsection_subtitle', array('sanitize_callback' => 'zerif_sanitize_text','default' => __('Use this section to showcase important details about your business.','zerif-lite')));
      		$wp_customize->add_control( 'zerif_newsection_subtitle', array(
      				'label'    => __( 'Subtitle', 'zerif-lite' ),
      				'section'  => 'zerif_newsection_main_section',
      				'settings' => 'zerif_newsection_subtitle',
      				'priority'    => 3,
      		));
      		/* big left title */
      		$wp_customize->add_setting( 'zerif_newsection_biglefttitle', array('sanitize_callback' => 'zerif_sanitize_text','default' => __('Everything you see here is responsive and mobile-friendly.','zerif-lite')));
      		$wp_customize->add_control( 'zerif_newsection_biglefttitle', array(
      				'label'    => __( 'Big left side title', 'zerif-lite' ),
      				'section'  => 'zerif_newsection_main_section',
      				'settings' => 'zerif_newsection_biglefttitle',
      				'priority'    => 4,
      		));
      		/* text */
      		$wp_customize->add_setting( 'zerif_newsection_text', array('sanitize_callback' => 'zerif_sanitize_text','default' => __('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec massa enim. Aliquam viverra at est ullamcorper sollicitudin. Proin a leo sit amet nunc malesuada imperdiet pharetra ut eros.

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec massa enim. Aliquam viverra at est ullamcorper sollicitudin. Proin a leo sit amet nunc malesuada imperdiet pharetra ut eros.

      Mauris vel nunc at ipsum fermentum pellentesque quis ut massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas non adipiscing massa. Sed ut fringilla sapien. Cras sollicitudin, lectus sed tincidunt cursus, magna lectus vehicula augue, a lobortis dui orci et est.','zerif-lite'))); $wp_customize->add_control( 'zerif_newsection_text', array( 'label' => __( 'Text', 'zerif-lite' ), 'section' => 'zerif_newsection_main_section', 'settings' => 'zerif_newsection_text', 'priority' => 5, )); $wp_customize->add_section( 'zerif_newsection_feat1_section' , array( 'title' => __( 'Feature no#1', 'zerif-lite' ), 'priority' => 3, 'panel' => 'panel_newsection' )); /* feature no#1 */ $wp_customize->add_setting( 'zerif_newsection_feature1_title', array('sanitize_callback' => 'zerif_sanitize_text', 'default' => __('YOUR SKILL #1','zerif-lite'))); $wp_customize->add_control( 'zerif_newsection_feature1_title', array( 'label' => __( 'Feature no1 title', 'zerif-lite' ), 'section' => 'zerif_newsection_feat1_section', 'settings' => 'zerif_newsection_feature1_title', 'priority' => 6, )); $wp_customize->add_setting( 'zerif_newsection_feature1_text', array('sanitize_callback' => 'zerif_sanitize_text')); $wp_customize->add_control( 'zerif_newsection_feature1_text', array( 'label' => __( 'Feature no1 text', 'zerif-lite' ), 'section' => 'zerif_newsection_feat1_section', 'settings' => 'zerif_newsection_feature1_text', 'priority' => 7, )); $wp_customize->add_setting( 'zerif_newsection_feature1_nr', array('sanitize_callback' => 'zerif_sanitize_number', 'default' => '80')); $wp_customize->add_control( 'zerif_newsection_feature1_nr', array( 'type' => 'number', 'label' => __( 'Feature no1 percentage', 'zerif-lite' ), 'section' => 'zerif_newsection_feat1_section', 'settings' => 'zerif_newsection_feature1_nr', 'priority' => 8 ) ); $wp_customize->add_section( 'zerif_newsection_feat2_section' , array( 'title' => __( 'Feature no#2', 'zerif-lite' ), 'priority' => 4, 'panel' => 'panel_newsection' )); /* feature no#2 */ $wp_customize->add_setting( 'zerif_newsection_feature2_title', array('sanitize_callback' => 'zerif_sanitize_text', 'default' => __('YOUR SKILL #2','zerif-lite'))); $wp_customize->add_control( 'zerif_newsection_feature2_title', array( 'label' => __( 'Feature no2 title', 'zerif-lite' ), 'section' => 'zerif_newsection_feat2_section', 'settings' => 'zerif_newsection_feature2_title', 'priority' => 9, )); $wp_customize->add_setting( 'zerif_newsection_feature2_text', array('sanitize_callback' => 'zerif_sanitize_text')); $wp_customize->add_control( 'zerif_newsection_feature2_text', array( 'label' => __( 'Feature no2 text', 'zerif-lite' ), 'section' => 'zerif_newsection_feat2_section', 'settings' => 'zerif_newsection_feature2_text', 'priority' => 10, )); $wp_customize->add_setting( 'zerif_newsection_feature2_nr', array('sanitize_callback' => 'zerif_sanitize_number','default' => '91')); $wp_customize->add_control( 'zerif_newsection_feature2_nr', array( 'type' => 'number', 'label' => __( 'Feature no2 percentage', 'zerif-lite' ), 'section' => 'zerif_newsection_feat2_section', 'settings' => 'zerif_newsection_feature2_nr', 'priority' => 11 ) ); $wp_customize->add_section( 'zerif_newsection_feat3_section' , array( 'title' => __( 'Feature no#3', 'zerif-lite' ), 'priority' => 5, 'panel' => 'panel_newsection' )); /* feature no#3 */ $wp_customize->add_setting( 'zerif_newsection_feature3_title', array('sanitize_callback' => 'zerif_sanitize_text', 'default' => __('YOUR SKILL #3','zerif-lite'))); $wp_customize->add_control( 'zerif_newsection_feature3_title', array( 'label' => __( 'Feature no3 title', 'zerif-lite' ), 'section' => 'zerif_newsection_feat3_section', 'settings' => 'zerif_newsection_feature3_title', 'priority' => 12, )); $wp_customize->add_setting( 'zerif_newsection_feature3_text', array('sanitize_callback' => 'zerif_sanitize_text')); $wp_customize->add_control( 'zerif_newsection_feature3_text', array( 'label' => __( 'Feature no3 text', 'zerif-lite' ), 'section' => 'zerif_newsection_feat3_section', 'settings' => 'zerif_newsection_feature3_text', 'priority' => 13, )); $wp_customize->add_setting( 'zerif_newsection_feature3_nr', array('sanitize_callback' => 'zerif_sanitize_number','default' => '88')); $wp_customize->add_control( 'zerif_newsection_feature3_nr', array( 'type' => 'number', 'label' => __( 'Feature no3 percentage', 'zerif-lite' ), 'section' => 'zerif_newsection_feat3_section', 'settings' => 'zerif_newsection_feature3_nr', 'priority' => 14 ) ); $wp_customize->add_section( 'zerif_newsection_feat4_section' , array( 'title' => __( 'Feature no#4', 'zerif-lite' ), 'priority' => 6, 'panel' => 'panel_newsection' )); /* feature no#4 */ $wp_customize->add_setting( 'zerif_newsection_feature4_title', array('sanitize_callback' => 'zerif_sanitize_text','default' => __('YOUR SKILL #4','zerif-lite'))); $wp_customize->add_control( 'zerif_newsection_feature4_title', array( 'label' => __( 'Feature no4 title', 'zerif-lite' ), 'section' => 'zerif_newsection_feat4_section', 'settings' => 'zerif_newsection_feature4_title', 'priority' => 15, )); $wp_customize->add_setting( 'zerif_newsection_feature4_text', array('sanitize_callback' => 'zerif_sanitize_text')); $wp_customize->add_control( 'zerif_newsection_feature4_text', array( 'label' => __( 'Feature no4 text', 'zerif-lite' ), 'section' => 'zerif_newsection_feat4_section', 'settings' => 'zerif_newsection_feature4_text', 'priority' => 16, )); $wp_customize->add_setting( 'zerif_newsection_feature4_nr', array('sanitize_callback' => 'zerif_sanitize_number','default' => '95')); $wp_customize->add_control( 'zerif_newsection_feature4_nr', array( 'type' => 'number', 'label' => __( 'Feature no4 percentage', 'zerif-lite' ), 'section' => 'zerif_newsection_feat4_section', 'settings' => 'zerif_newsection_feature4_nr', 'priority' => 17 ) ); } add_action( 'customize_register', 'caribdis_customizer' ); function caribdis_sanitize_customizer( $input ) { return wp_kses_post( force_balance_tags( $input ) ); } function caribdis_sanitize_checkbox( $input ) { if ( $input == 1 ) { return 1; } else { return ''; } }

      Como você pode ver, tudo o que era _aboutus_ foi substituído por _newsection_

      Por fim, registramos área de widgets correspondentes (também em functions.php) que terá a nova ID new-section-aboutus:

      function new_section_widgets() {
          register_sidebar(array(
              'name' => __('Barra lateral de nueva sección', 'zerif-lite'),
              'id' => 'new-section-aboutus',
      		'description' => __( 'Widgets para la nueva sección', 'zerif-lite' ),
              'before_widget' => '',
              'after_widget' => '',
              'before_title' => '<h1 class="widget-title">',
              'after_title' => '</h1>',
          ));
      }
      	
      add_action( 'widgets_init', 'new_section_widgets' );
      

      Com isso, vamos adicionar uma nova seção que tem a mesma funcionalidade que About Us, mas com as suas próprias opções do personalização. A única diferença é que os widgets não aparecem no painel Nueva Sección, mas no painel geral de widgets.

      Zerif - Nueva Sección

      Você pode baixar o tema filho com código personalizado aqui.

      Espero ter ajudado! E desculpe o meu português 🙂

      • Felipe Fortes

        Cara, desculpa o transtorno, mas eu não entendi praticamente nada. Sou novo nesse negócio de códigos, php, etc.

        Então, após isso aqui eu não sei pra onde vai:
        “Além disso, vamos colocar um nome diferente para área de widgets, caso contrário os widgets vai repetir a seção About Us, se houver. Podemos colocar new-section-aboutus.”

        Vi que você disponibilizou uns arquivos aí, mas eu substituí os meus pelos seus e deu problema na página, felizmente eu tinha salvo os arquivos originais em outra pasta.
        Então eu peguei os códigos dentro dos seus arquivos e coloquei dentro dos meus, mas também não funcionou.
        Resumindo, eu não sei como proceder, não sei onde devo colocar todo esse código e nem a questão dos widgets.

        Desculpa o transtorno.
        Obrigado pela ajuda.

        • Caribdis Diseño Web

          Não há problema. Peço desculpas se não foi bem entendido … Eu não tive em mente que você pode não estar familiarizado com os temas filhos.

          Faça o seguinte. Ir para Aparência > Temas, em seguida, clique em Adicionar Novo > Fazer upload do tema, carregue o arquivo baixado zerif-child-new.zip último comentário e, em seguida, ativá-lo. Deixe-me saber se isso funcionou.

          • Felipe Fortes

            Só pra constar. Dessa forma que você falou não funcionou, deu erro. Mas eu já consegui fazer funcionar copiando pra dentro do meu arquivo functions.php. Não sei se era assim mas funcionou.

        • Felipe Fortes

          Oi, respondendo novamente. Nada como uma boa noite de sono. Eu devia tá deixando passar alguma coisa ontem a noite. Consegui fazer aqui. Acho que só não tava vendo que os menus já estavam lá no local certinho. Obrigado.

          Só mais duas perguntinhas.
          Em qual linha eu mudo a cor do fundo da seção ABOUT_US?

          E a segunda pergunta acho que é uma pouco mais complicada.
          Na seção last_news, quando tem muita notícia aparecendo, ficam disponíveis para visualização apenas 3 ou 4 notícias e aparecem duas setas laterais para passar para outras notícias. Como faço para que as minhas outras seções (our_team e our_focus) funcionem do mesmo jeito? (deu pra entender?)

          Obrigado.

          • Caribdis Diseño Web

            Ah, perfeito.

            No entanto, é raro que você teve problemas com o tema filho, eu testei-o em localhost, bem como um servidor online.

            Quanto à sua primeira pergunta, abra o arquivo custom.css e adicione a seguinte linha:

            #aboutus.about-us {
                background: #2222aa;
            }
            

            Substitui o valor de #2222aa para a cor de sua preferência.

            A segunda coisa, infelizmente não é possível. 🙁

          • Felipe Fortes

            É, talvez eu tenha feito alguma coisa errada para que não tenha funcionado.

            Quanto a cor de fundo da seção, esse procedimento que você disse não funcionou.

            Obrigado.

          • Caribdis Diseño Web

            Se você não tiver alterado o link de âncora para esta seção (no arquivo about_us.php > <section class="about-us" id="aboutus">), o código deve funcionar.

            Caso contrário, deve substituir #aboutus pelo ID que você personalizou.

      • natalia

        hola, en esta parte me sale un error

        adjunto link http://fotos.subefotos.com/774bdd601be0802db85d59993caa1274o.png

        • Caribdis Diseño Web

          Hola, Natalia.

          Lo más probable es que el archivo functions.php esté guardado con una configuración incorrecta. Guardalo como UTF-8 sin BOM (en Notepad++, menú Configuración). También revisá que WordPress esté configurado en UTF-8 (el archivo wp-config.php tiene que tener la siguiente línea: define('DB_CHARSET', 'utf8');.

          Saludos.

  109. Mariano

    Buenas tardes! 🙂
    Primero y antes que nada quiero destacar y agradecer por este post que realmente esta geeenial!!! Muchas gracias por todos sus aportes, me son muy útiles y estoy aprendiendo mucho.
    Por otro lado quería saber si es posible agregar a esta sección un portfolio y de ser asi, si vendría bien con este tema el plugin FooGallery.

    Gracias!

    Saludos,

    • Caribdis Diseño Web

      Hola, Mariano.

      Gracias por tu mensaje. FooGallery es un plugin excelente, que se integra perfecto con cualquier tema. Este tutorial es el punto de partida para agregar una sección más a la página de inicio y puede servir tanto para insertar una galería de FooGallery, como para mostrar un Portfolio. Esto último, con algún plugin que cree tipos de entrada personalizada, y en lugar de crear un área para widgets, se imprimiría un do_shortcode con el código abreviado que genere el plugin. Todo depende de cómo quieras presentar las fotos, si de una manera similar al Portfolio de la versión PRO, o simplemente como galería de imágenes (FooGallery).

      Espero que se entienda algo, ja… Igual en el próximo tutorial ahondaré un poco más sobre do_shortcode (o sea, cómo mostrar los contenidos generados por otros plugins, ej.: un slider).

      Stay tuned! 😉

      • mariano

        Hola!!!

        Quería pasar para agradecer, la nueva sección funciona impecable, y por otro lado seguí tus consejos y pude poner un portfolio en mi web 🙂

        Muchísimas gracias!!!

        • Caribdis Diseño Web

          ¡Buenísimo! Gracias a vos por compartir tu experiencia.

Los comentarios están cerrados. ¿Por qué?

Pin It en Pinterest

Compartir esto

Compartir es agradecer

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