Seguimos haciendo crecer el repertorio de tutoriales para el tema Zerif Lite de ThemeIsle, y en el episodio XI veremos cómo añadir un tercer botón en la sección de título grande.
Los predeterminados del tema son dos: uno rojo y uno verde, cuya etiqueta y enlace se pueden modificar desde el Personalizador.
¿Qué tal si queremos agregar un tercer botón, al lado del botón verde?
Ante todo, asegúrese de que está usando un tema hijo. Las instrucciones para crear un tema hijo se encuentran en esta entrada anterior.
Abrimos el archivo functions.php del tema hijo, y pegamos el siguiente código (antes del cierre de la etiqueta ?>, si lo hubiere):
function zerif_third_button() {
echo '<a href="#" class="btn btn-primary custom-button">Tercer botón</a>';
}
add_action( 'zerif_big_title_buttons_bottom', 'zerif_third_button');El resultado será el siguiente:
Tenga en cuenta que tendrá que reemplazar manualmente el enlace (#) y la etiqueta del botón (Tercer botón) por los que correspondan.
Como vemos, el color es el predeterminado de la hoja de estilos del tema, pero podemos usar los otros tres incluidos, modificando las clases del código anterior.
Para el color rojo (la clase .red-btn):
echo '<a href="#" class="btn btn-primary custom-button red-btn">Tercer botón</a>';
Para el verde (la clase .green-btn):
echo '<a href="#" class="btn btn-primary custom-button green-btn">Tercer botón</a>';
Para el amarillo (la clase .yellow-btn):
echo '<a href="#" class="btn btn-primary custom-button yellow-btn">Tercer botón</a>';
¿Y qué tal si queremos un color personalizado? Usemos una clase personalizada, por ejemplo .custom-btn.
echo '<a href="#" class="btn btn-primary custom-button custom-btn">Tercer botón</a>';
Luego vamos a la hoja de estilos del tema hijo, custom.css, o al recuadro CSS adicional del Personalizador, y pegamos el siguiente código (reemplace el valor del color de fondo por el de su preferencia):
.custom-btn {
background: #1990a4;
}
Por último, si queremos modificar también el color de fondo al posar el puntero (y evitar el azul predeterminado), añadimos el siguiente código:
.custom-btn:hover {
background: #15798a;
}
Recuerde reemplazar el valor del color de fondo por el de su preferencia.
Técnica en electromecánica, periodista, entusiasta de los idiomas y enamorada de WordPress. Amante del mate, la lectura, la música y las series de sci-fi. Mamá de una vizsla loca.
- Guía para WordPress 6.4 disponible - 5 de diciembre de 2023
- 🔥 Ofertas de WordPress 🛒Black Friday y Cyber Monday 2023 - 21 de noviembre de 2023
- 🎃 Ofertas de WordPress Halloween 2023 - 30 de octubre de 2023
Saludos. ¿Cómo puedo poner una barra ancha de búsqueda sobre los dos botones?
Hola, Nadiuska.
En el archivo
functions.phpdel tema hijo pegá el siguiente código:function zerif_child_search_form() { echo '<li class="widget_search">' . get_search_form( false ) . '</li>'; } add_action( 'zerif_big_title_buttons_top', 'zerif_child_search_form');Saludos.
Hola, como puedo ponerle al boton de enviar de mi formulario de contacto un codigo de seguimiento? Saludos
Hola, Leandro.
En el archivo
functions.phpdel tema hijo, agregá el siguiente código:function zerif_child_send() { ?> <script> jQuery(document).ready(function($){ $(".pirate-forms-submit-button").click(function(){ EVENT }); }); </script> <?php } add_action('zerif_bottom_body_trigger', 'zerif_child_send');Reemplazá
EVENTpor el código correspondiente.Saludos.
Hola nuevamente Ana. Hoy te consulto lo siguiente: ¿Donde encuentro en Editor el código del botón ENVIAR para editar y agregarle pixel de evento Conversión de Facebook?
Facebook marca debe ir algo así, pero lo que no encuentro es en que hoja de Editor se encuentra este código. Gracias
Generar cliente potencial
$( ‘#$botónEnviar’ ).click(function() {
insertar_código_del_evento_aquí;
…
Hola, Oscar.
Depende de cuál sea el botón al que querés agregarle el evento. Fijate en esta respuesta. Deberías editar ese código con la clase correspondiente al botón.
Saludos.
perdón, esto fue lo que agregué a functions.php
function zerif_third_button() {
echo ‘<a href=”#custom-modal-0″>CONTACTO</a>’;
}
add_action( ‘zerif_big_title_buttons_bottom’, ‘zerif_third_button’);
Estimada, nuevamente muchísimas gracias por toda la ayuda!!!
Quisiera que de un botón apareciera un formulario de contacto en forma de modal, bajé un par de cosas y cree este shortcode:
[modal text=”CONTACTO” title=”CONTACTO” xclass=”btn-primary”]
[contact-form-7 id=”47″ title=”MODAL”]
[modal-footer]
[button type="primary" link="#" data="dismiss,modal"]Dismiss[/button]
[/modal-footer]
[/modal]
Pero los botones no leen shortcodes, hay alguna forma de hacerlos leer?
de todas maneras intenté agregar esto a functions.php
function zerif_third_button() {
echo ‘<a href=”#custom-modal-0″>CONTACTO</a>’;
}
add_action( ‘zerif_big_title_buttons_bottom’, ‘zerif_third_button’);
Pero no funcionó
Hola, Carmen.
Aparentemente hay algún conflicto con los estilos del tema.
Podés probar este plugin y pegar directamente el shortcode en la función (el botón y el enlace pueden estar asignados en el personalizador). Sería algo así:
function zerif_third_button() { echo do_shortcode( '[Wow-Modal-Windows id=1]' ); } add_action( 'zerif_big_title_buttons_bottom', 'zerif_third_button');El cualquiera de los dos botones de la sección pegarías
#wow-modal-id-1como URL del enlace.La versión gratuita del plugin no tiene muchas opciones de estilo, pero si manejás CSS los podés ajustar agregando un
divque envuelva el código de CF7.Saludos.
Muchísimas gracias! lo probaré
Saludos!
Funcionó para el botón, el único problema que tengo es que al actualizar la página aparece el modal sobre el video sin necesidad de hacer click en el botón, me aparece desplegado por defecto
Solucionado! gracias!!!!!
queria poner un contador en una de las secciones de la pagina principal. Tengo el código html para poner el contador pero no se donde ponerlo
Hola, Laura.
¿En qué sección exactamente querés agregar el código? Si es en alguna de las que se pueden agregar widgets, podés usar un widget HTML personalizado y pegar el código ahí.
Saludos.
Si es en una de las secciones con widget. Pongo en el html personalizado el código siguiente que es el del flipclock
[flipclock countdown=”true” date=”1st January 2050″ face=”days” name=”countdown”]
pero me sale solo el código no se genera el contador si lo hago en una pagina normal si que me sale.
Agradezco mucho tu ayuda.
Hola, Laura.
Ah, es que en realidad sería un shortcode, no HTML per se. Zerif no tiene activado el filtro para ejecutar códigos abreviados desde widgets. Lo que tendrías que hacer es crear un tema hijo y en el archivo
functions.phpincluir la siguiente línea:add_filter('widget_text', 'do_shortcode');Saludos.
Hola buenos dias, muchas gracias por toda la ayuda que ofreces a esta comunidad.
Tengo dos preguntas:
1. Es posible reemplazar los dos botones de la cabecera (slider) donde esta el titulo grande… Por imagenes ?, si es posible agradezco que me indiques como se puede hacer.
2. Para crear otra sección nueva (tener dos), solo sería replicar el codigo como se hace en la sección nueva creando una nueva carpeta sections2 ?… y en esta nueva sección como puedo colocar una imagen grande y al lado otras dos una encima de otra… seria algo asi como dos columnas, la primera completa y la segunda didivida en dos, de forma horizontal.
Espero me puedas ayudar…. muchisimas gracias.
Hola, Alexander.
Gracias por tu comentario.
Podés usar código HTML en el campo del título, en el Personalizador > Sección de título grande > Contenido principal. Por ejemplo:
Y los campos de los botones los dejás vacíos para que no aparezcan.
En cuanto al segundo punto, es más complicado. Tendrías que duplicar el código dentro de la función
caribdis_customizer( $wp_customize )y cambiar todos los nombres de las variables ('zerif_newsection1_section','zerif_newsection1_show', etc.) La carpeta/sections/es siempre la misma, lo que tendrías que crear es un archivo nuevonew_section1.php. Para referencia, fijate en esta respuesta.Saludos.
Muchas gracias por tu respuesta, una ultima consulta, cómo puedo cambiar el tipo de letra de todo el theme, y cómo puedo cambiar el tipo de letra en la sección testimonios… nombre del autor !… Muchas gracias…
y como puedo solucionar el problema de cuando estoy en la pagina principal www.mipagina.com, el menu superior está enlazando a por ejemplo #focus, #testimonial … etc… para llevar a las secciones y cuando paso a una pagina diferente www.mipagina.com/pagina-nueva/ …. El menú superior ya no funciona…
Muchas gracias por tus respuestas.
Hola, Alexander.
Tenés que usar la ruta completa del enlace en el campo URL. Fijate en el ejemplo del tutorial (sección Menús > Ubicaciones de menús).
Saludos.
Hola, Alexander.
Lo más sencillo en este caso sería instalar el plugin Easy Google Fonts y seguir estas instrucciones.
Saludos.
Antes que nada decirte que gracias por toda tu ayuda! Gracias a tus consejos y tutoriales, conseguí cambiar el color de los dos botones principales (rojo y verde), pero tras seguir añadiendo códigos css en el personalizador, me he dado cuenta que el botón rojo, que le había cambiado el color por un morado, ¡se vuelve a mostrar rojo de nuevo! pero sin embargo cuando paso el cursor por encima si me respeta el cambio de color que le hice… Es como si el código de de :hover se mantuviera bien, pero el .red-btn se hubiera movido de sitio o perdido. ¿Cómo puedo solucionarlo? No sé que más hacer ya…
Hola, Davi.
Gracias por tu comentario.
Tendrías que revisar si no agregaste un código nuevo que lo está sobrescribiendo. Fijate con
Ctrl + Fpara buscar la clase.red-btny donde veas que se repite, eliminala (tiene que permanecer la que esté más arriba).Saludos.
Hola Ana, primero agradecer tu profesional ayuda.
Te comento que he logrado insertar el tercer botón pero quiero que este apunte a una Nueva Sección en formato anclaje, para mi caso una galería con Widget que he creado.
Por favor, me podrías indicar la mejor forma de hacer esto?
gracias!
Hola, Cristián.
Gracias por tu comentario.
Depende de la ID que le hayas dado a la sección, dentro de las comillas de
a hrefirá esa ID precedida del símbolo#. Ejemplo, para una sección con IDnuevaseccion, botón amarillo:Saludos.
Como puedo añadirle imagenes a los botones Gracias
Hola, Uverley.
¿Te referís a usar una imagen como fondo del botón, o enlazar a una imagen?
Hola, hay manera de agrandar los círculos de Nuestro enfoque?, el círculo, no el borde. Gracias
Hola, Ricardo.
Fijate en esta respuesta.
Saludos.
Buena tarde. gracias por ayudar tanto con zerif lite he podido realizar muchos cambios.
me encuentro realizando una página la cual no me queda la parte de clientes, elimine esa sección y coloque widgets de team para colocar los beneficios que ofrecemos solo que son 5 en total y al ver en el movil se ven bien, pero al ver en la computadora se ven solo 4 en la misma fila y el ultimo abajo. hay forma de colocar los 5 en la misma fila??
Agradezco tu atención y tiempo. es la primera vez que uso wordpress y trato de aprender lo que puedo.
Está es la página
http://www.elearningcore.com
Hola, Albert.
Gracias por tu comentario.
Tené en cuenta que a cada sección corresponde un tipo determinado de widgets. Si usás widgets de otra sección, el aspecto no será el deseado. Si necesitás repetir widgets de Nuestro enfoque en otra sección, lo más conveniente es agregarla. En este tutorial está explicado.
Saludos.
Gracias por contestar tan rápido disculpa hay manera de colocar en la sección de equipo links en las imágenes como en nuestro enfoque? o al dar click en el texto me mande aparte de los que son para redes sociales.
te agradezco mucho tu atención y tiempo
Hola, Albert.
Tendrías que agregarlo como código, dentro del campo Descripción. Un ejemplo sería algo así:
Fijate también en esta respuesta, para agregar un enlace con el estilo de los botones de Zerif.
Saludos.
hola!!! muchas gracias por contestar me han servido de muchos tus consejos y he aprendido mucho. ya pude arreglar varias cosas donde tenia duda. infinitas gracias por el buen trabajo que realizas y ayudarnos.
Hola, mi nombre es Ricardo. Estoy terminando de darle los últimos detalles a mi página. y mis problemas son básicamente para cambiar el color de algunos elementos.
1. No se como cambiar el color de los botones que están en llamada a la acción, al menos no cuando el cursor se coloca encima.
2. Quiero cambiar el color que aparece debajo del formulario en la página de contacto, del botón y el cambio que hace al colocarse encima de él.
3. quiero cambiar también el color de las líneas que salen debajo de los círculos de servicios en inicio y de las líneas de la sección de últimas noticias, que en mi caso la tengo como promociones. me podrías ayudar con esto porfa, veo que conoces bastante sobre esta plantilla. Un abrazo.
mi página es www.rbpublicidad..com como verás quiero cambiar todo lo rojo a verde manzana.
Hola, Ricardo.
Saludos.
Hola, gracias por ayudarme en realizar los cambios, quisiera cambiar varias cositas que me perturban en mi página.
1. El botón de enviar de contáctenos, pero no el de la sección que habilitamos en inicio, es el botón que aparece en el formulario de mensaje en la página de contacto del menú.
2. el botón de publicar comentario. Deseo cambiarles el color principal y el color que aparece al posicionar el cursor encima de ellos.
Lo otro es que no logro cambiar el color cuando posicionamos el cursor en cualquier elemento de SUBMENU, cambié los principales pero no los que se despliegan. Gracias. Mira lo linda que está quedando.
Hola, Ricardo.
Para el primer punto, usá el siguiente código:
button.pirate-forms-submit-button { background: #000000; border: none; } /* Color al posar el puntero */ button.pirate-forms-submit-button:hover { background: #0000FF !important; border: none; }Y para el segundo:
.comment-form #submit, .comment-reply-link { background: #000000; border: none; } /* Color al posar el puntero */ .comment-form #submit:hover, .comment-reply-link:hover { background: #0000FF !important; border: none; } /* Color al posar el puntero en submenú */ .navbar-inverse .navbar-nav ul.sub-menu li a:hover { color: #000000; }Te felicito, es muy bueno el trabajo que has hecho en la web 😀
Saludos.
hola Ana, antes que nada agradecerte la ayuda que me has dado a otras preguntas.
ahora mi problema es el siguiente, estoy cambiando el color de titulos, sub , texto y fondo, y me ha resultado para todas las secciones salvo para QUIENES SOMOS, estoy usando estos codigos
/* Fondo de Quiénes somos */
.about-us {
background: #ffffff;
}
/* Título de Quiénes somos */
.abaut-us .white-text {
color: #158b5e;
}
el de fondo me sirve muy bien pero no si el de titulo, ademas si puedes ayudarme con el que necesito para poder cambiar el color del texto y del texto grande que va al lado izquierdo.
de ante mano mil gracias
descubrí mi error, mal escrito! 😀 , asique ya esta solucionado
si puedes me ayudas a como cambiar el color de los dos textos porfa,
mil gracias
Hola, Ale.
Fijate en esta respuesta.
Saludos.
Ana, muchas gracias, me funciono fantástico.
aprovecho de hacerte unas ultimas consultas, ya que todo el contenido que he encontrado en tu web me sirvió muchísimo.
1. cambie el color del boton del formulario de contacto con un codigo que encontre en las respuestas, me funciono bien para cambiar el color pero no logro cambiar el color al posar el puntero, sigue siendo rojo. use estos códigos:
/* Botón de formulario */
button.pirate-forms-submit-button {
background: #000;
}
/* Botón de formulario al posar el puntero */
button.pirate-forms-submit-button:hover {
background: #000;
}
2. cambie los colores de las líneas bajo las publicaciones de noticias, en la sección de ultimas noticias y funciono bien, pero al abril el post sigo teniendo la linea roja, como puedo cambiarla? esto mismo me pasa en dos paginas que cree que se abren a partir de los dos botones de la sección de título grande, bajo el título la linea es roja y necesito cambiarla.
3. cambie las lineas bajo los bonotes de nuestro enfoque y nuestro equipo con un solo código para cada sección, si quisiera hacerlas de colores variados, como podría hacerlo?
.focus-box .red-border-bottom:before{
background: #000000 !important;
}
.our-team .red-border-bottom:before{
background: #000000 !important;
}
la web en la que estoy trabajando es www.lacuy.cl
gracias por toda la info que das y por responder a mis consultas,
Hola, Ale.
Para el botón del formulario, agregale la declaración
!important. Y para lo segundo, fijate en esta respuesta.Saludos.
hola, estoy trabajando sobre el tema hijo y todo iba bien hasta que de la nada dejo de funcionar mi pagina y me da el siguiente error,
Fatal error: Call to a member function get() on a non-object in /home/lacuycl/public_html/wp-content/themes/zerif-lite/ti-about-page/class-ti-about-page.php on line 270
esa line tiene esta escritura: $this->theme_name = $theme->parent()->get( ‘Name’ );
realmente no veo el error, si alguien me pudiera ayudar lo agradecería muchisimo,
Gracias! 🙂
Hola, Ale.
El error pudo aparecer luego de alguna actualización, o instalación de un plugin nuevo, o edición en el tema hijo. La verdad, no tengo suficiente información como para decirte la causa. Intentá volviendo al tema predeterminado y desactivando todos los plugins (si no podés acceder al escritorio de WordPress, renombrá las carpetas de los plugins provisoriamente).
Saludos.
Hola, Martín.
Los botones de Zerif solo aceptan enlaces HTML. Una alternativa sería usar el símbolo
#en el campo del enlace, y agregar un eventoonClickvía jQuery.El código sería algo así:
<script> jQuery(document).ready(function($){ $(".buttons .btn.btn-primary.custom-button.red-btn").click(function(){ unaFuncion(); }); }); </script>La primera clase es para diferenciar la sección del botón.
Este código iría en el archivo
footer.phpdel tema hijo, antes del cierre de la etiqueta</body>, o como acción del hookzerif_bottom_body_trigger();enfunctions.php.Saludos.
Hola, Ana.
Muchisimas gracias por la respuesta tan rápida y acertada..
¡Solucionado! 🙂
Hola, muchas gracias por toda la ayuda tan increible de su blog, tengo una duda:
¿En la sección de personalización de los botones, hay alguna forma que en vez de ingresar un enlace pueda ingresar otra cosa? por ejemplo un script como el siguiente: javascript: algoFunció();
He notado que si no pones un enlace al guardar no muestra el boton, agradezco su ayuda…
ya cambie el color de mis botones, y cuando se seleccionan pero cuando hago click estos quedan de otro color
Hola, Spanish.
Fijate en esta respuesta.
Saludos.
Hola!, como siempre muy buenos concejos y disposición. La duda que tengo (tengo el tema ZERIF PRO, de pago) es que quisiera modificar el “ribbon bottom” de la parte inferior (que llama a la acción) y no quiero que sea linkeable sino más bien poner un numero de telefono. (tengo este código : “<a href=”tel://+56 9 42285374” rel=”nofollow”>+56 9 42285374/a>) pero al insertarlo en el area correspondiente en “personalización” no me queda bien.
agradecería tu guía…saludoS!
Hola, Víctor.
Para que el botón se muestre, el campo Enlace del botón tiene que tener contenido. Si no querés que apunte a ninguna parte, simplemente usá
#. Si querés que sea un enlace, el código correcto para el número de teléfono seríatel:+56942285374.Saludos.
Hola! Se me olvidaba también que me gustaría cambiar además de los 4 botones que te comentaba (2 botones seccion grande + los dos de llamada a la acción) el estilo del botón de enviar mail de pirate forms para que también tenga el efecto fantasma o hueco. Si puedes tener en cuenta tambíen como hacer para que al pasar el puntero se resalte en blanco con texto negro. Así ya quedaría toda la portada con el mismo estilo de botón. Muchisimas gracias!!!
Hola, Javier.
Usá los siguientes códigos:
/* Botones */ .green-btn, .red-btn, button.pirate-forms-submit-button { background: transparent !important; border: 2px solid #fff; } /* Botones al posar el puntero */ .green-btn:hover, .red-btn:hover, button.pirate-forms-submit-button:hover { background: #fff !important; border: 2px solid #000; color: #000 !important; }Saludos.
Gracias hecho!
Hola! Me gustaria cambiar el estilo de los dos botones de la seccion de titulo y los dos de las secciones de llamada ala accion de manera que aparezcan transparentes y con un marco para darle un toque mas elegante sin color. Como seria?? Muchas gracias
hola ya cambie el color de mis botones, y cuando se seleccionan pero cuando hago click estos quedan de otro color, cómo cambio esa propiedad gracias
Hola, Paola.
Respondido aquí.
Saludos.
Hola, Sandra.
Tendrías que usar el siguiente código (en la hoja de estilos del tema hijo, o CSS adicional del Personalizador):
.intro-text { margin-bottom: 70px; }Modificá el valor en píxeles por el que necesites.
Saludos.
hola muchas gracias, pero no me funciona estoy trabajando en el tema hijo, lo demás como cambio de color me funciona pero el tema de desplazar los botones un poco más abajo no, que estará mal
Hola, Sandra.
El código funciona, si existe el título grande. Si no, probá con valores mayores, o con:
.buttons { margin-top: 100px; }Saludos.
Hola buenas noches, quisiera saber como desplazar los botones del titulo grande , es decir quisiera que estuvieran un poco más abajo, muchas gracias
Me encanta el tutorial, gracias a ti he sido capaz de poner el tercer botón
Aún no he añadido el enlace (irá destinado a un foro que quiero crear)
No sé por qué pero el texto del botón azul, del tercer botón, sale en rojo.
Se puede arreglar?
Mi gracias
Hola, Jaime.
No debería aparecer en rojo si no hiciste ninguna modificación en el CSS. Se puede arreglar, por supuesto, pero tendría que verlo directamente.
Saludos.
buenas noches, primero que todo quiero darte las gracias por ayudar a todos con los problemas que te proponen y pues felicitarte, por todo el esfuerzo que hacer para dar solución.
tengo una duda, como hacer para poner un logo encima del texto grande, que funcione parecido al efecto de la plantilla responsive boat, osea que aparezca el logo en el área del titulo grande y cuando se suba la pagina aparezca automáticamente en el menú…
quiero hacerlo sin necesidad de utilizar esta plantilla responsiveboat, ya que me limita algunas cosas… muchas gracias por su respuesta.
Hola, Leo.
Gracias por tu comentario.
Me temo que el nivel de personalización para lograr ese efecto va más allá de la ayuda que te pueda dar por este medio. Contactame para más información sobre el servicio.
Saludos.
hola señorita buenos días tengo una inquietud como hago para que esa personalización de colores no sea de un solo tono por que cuando uso el .custom-btn
background: #1990a4; los botones solo toman un solo color y quiero una tonalidad de colores diferentes si quiero poner un azul pero tambien quiero un azul celo o un azul rey como pued hacer ay gracias por tu atención
Tenés que editar código hexadecimal del color por el que necesites (
#1990a4es un valor de ejemplo). Podés encontrar los códigos en esta web.Saludos.
Hola! No se me creo el botón y escribí el código justo donde se explica. Cuales pueden ser las razones? Otra cosa, el main page del tema(sobre la que estoy trabajando ahora – index), no aparece en wordpress dentro de la sección “paginas”. Por qué puede ser esto? No encontré al momento ninguna manera de solucionar el problema. Mi página aún está en localhost. Gracias!
Hola, Marcelo.
Si seguiste las instrucciones para crear un tema hijo (y lo activaste), no deberías tener problemas. Lo que Zerif usa como página de inicio no es una página de WordPress, es un archivo dentro del tema (
front-page.php), que a su vez incluye otros archivos de plantilla que son las distintas secciones (los que están en la carpeta/sections/).Saludos.
Hola!
he conseguido cambiar el color de los botones con el código
/* Botón rojo */
.red-btn {
background: #0000FF;
}
/* Botón verde */
.green-btn {
background: #0000FF;
}
Pero no consigo cambiar el color del fondo al pulsar en los botones de ninguna forma que comentas.
Saludos!
Mil gracias.
Hola, Ana.
Fijate en esta respuesta.
Saludos.
No entiendo yo pongo:
/* Botón rojo */
.red-btn {
background: #008F95;
}
/* Botón verde */
.green-btn {
background: #E9B000;
/* Botón rojo */
.red-btn:hover {
background: #008F95;
}
/* Botón Verde */
.green-btn:hover {
background: #E9B000;
}
Pero no puedo ver el fondo de ese color, qué estoy haciendo mal?
Mil gracias por todo,
Hola, Ana.
Te está faltando cerrar la
}de la clase.green-btn.Saludos.
hola buenas dias y se puede agregar dos botones ??
Hola, Jesús.
Sí, podés pegar el mismo código dos veces.
Saludos.
Hola!
¿Hay posibilidad de eliminar los botones?
Gracias
Hola, Edwing.
Tal como se indica en el tutorial de Zerif: “Puede elegir no mostrar ningún botón, dejando todos los campos en blanco, o mostrar uno u otro individualmente, completando los campos correspondientes.”
Saludos.
Buenas mira por favor quisiera que me ayudaras , es que quisiera saber como puedo agregar un filtro de categorias para los productos en mi tienda virtual.
Hola, Edward.
Eso depende de WooCommerce. Fijate que incluye varios widgets básicos de filtros. Para que se vean en la página de los productos y categorías de los productos, tenés que seguir este tutorial, que sirve para mostrar la barra lateral.
Saludos.
Hola! Soy nueva en esto y tu tutorial me está salvando MIL GRACIAS, de verdad. He seguido todos los pasos para añadir el Tercer Botón en mi Zerif Pro Child y aparece correctamente, solo me faltaría que el Botón diga el texto que yo quiero y que lleve a la URL correcta, pero no se cómo hacerlo correctamente ¿Me puedes ayudar?
Hola, María José.
Tal como se indica en este tutorial: “Tenga en cuenta que tendrá que reemplazar manualmente el enlace (
#) y la etiqueta del botón (Tercer botón) por los que correspondan.” Es decir, tenés que pegar el enlace y el texto que quieras en lugar de esos dos elementos.Saludos.
Buenas mira como puedo cambiar el color del footer.
Hola, Edward.
El código sería:
#footer, .copyright { background: #272727; }Cambiá el valor
#272727por el que necesites.Saludos.
Hola. Soy nueva en esto y he creado nuevas páginas para que al presionar cada botón los usuarios quieran dirigirse a cada sección. Pero ahora deseo que cada botón (rojo y azul), se dirijan a cada una de las diapositivas que anexé dentro de la misma página, es decir, que al apretar cada uno de los botones, se los redirija hacia abajo, en donde se encuentra cada diapositiva, respectivamente.
Espero haber sido clara. Gracias.
Hola, Juli.
Sí se entiende. Para eso deberías darle a la diapositiva una ID, por ejemplo
diapo1. Y luego el botón debería tener la ruta completa, en este formatohttp://urldelsitio.com/pagina-que-contiene-diapositiva/#diapo1.Saludos.
Gracias por los consejos y felicitaciones para ayudar al personal de usted.
Customizei el tema, pero me gustaría poner una imagen debajo de los botones y no puedo. ¿Qué debo hacer, qué archivo de acceso para insertar la imagen para que sea sensible como el diseño completo, pensé para insertar en php pero en mal estado. ¿Me podría ayudar?
Gracias!
Hola, Lilian.
Si tomás como referencia este tutorial, deberías insertar el código de la imagen a continuación de la línea
echo '</div>';y no antes.Sin embargo, desde que Zerif incluye hooks, la manera correcta sería manejarlo con una acción en el archivo
functions.php. Para insertar una imagen (o cualquier otro contenido) debajo de los botones, sería el siguiente código:function display_photo_below_buttons() { echo '<div class="foto-nueva"> <img src="http://urldelsitio.com/wp-content/uploads/imagen.jpg" alt="imagen" /> </div>'; }; add_action('zerif_big_title_buttons_bottom', 'display_photo_below_buttons' );De esta manera tenés control sobre los estilos del contenedor y de la imagen mediante la clase
foto-nueva.Espero que te sirva.
Saludos.
Quisiera que me ayuden con un problema. Yo quiero cambiar el color de los dos botones predeterminados que son el ”rojo” y el ”verde”. Quisiera saber en que parte puedo cambiar esos colores. Muchas gracias por los tutoriales.
Hola, Anthony.
El código que tendrías que usar (en la hoja de estilos del tema hijo, o en el recuadro CSS adicional del Personalizador) es:
/* Botón rojo */ .red-btn { background: #0000FF; } /* Botón verde */ .green-btn { background: #0000FF; }Cambiá
#0000FFpor el valor de color que necesites.Saludos.
Hola, muchas gracias por todo tu esfuerzo!
Tengo una consulta, me pasa que al apretar los otros botones el rojo y verde se quedan con fondo azul luego de ser activados, tenes alguna idea sobre como solucionarlo?
Hola, Mariano.
El código sería el siguiente:
.red-btn:focus, .green-btn:focus { background: #000; }Cambiá
#000por el valor de color que necesites.Saludos.
¿Se puede añadir un botón adicional a un call to action?
Sí, claro que se puede 🙂
Tendrías que copiar el archivo
ribbon_with_bottom_button.phpde la carpeta/sections/del tema padre a/sections/del tema hijo y a continuación de la líneaagregar
Reemplazá el símbolo
#por el enlace yTexto del botón nuevopor el texto que quieras mostrar.Con el segundo llamado a la acción se podría hacer algo similar, pero puede que tengas que ajustar los estilos, ya que el botón te quedaría justo debajo del que ya existe, alineado a la derecha.
Espero que te sirva.
Saludos.
Gracias por compartir!
Este trabajo nos está salvando el pellejo a los que como yo nos aventuramos a “jugar” con las plantillas… hasta que de repente algo tan básico como hacer un “text-transform” se convierte en una calle sin salida.
No soy capaz a modificar esa opción en el título grande ni en ningún otro widget de la portada y quiero quitar las mayúsculas que vienen por defecto.
¿Cómo se hace?
Hola, Patricia.
Gracias por tu comentario.
En este caso, tenés que usar cada clase en particular. Por ejemplo, para el título grande:
.intro-text { text-transform: none; }Para los títulos de Características:
.focus-box h3 { text-transform: none; }Para los títulos del Equipo:
.team-member h3 { text-transform: none; }Espero que te sirva.
Saludos.
Gracias!!! funciona a la perfección.
Sólo un detalle más y me salvas la vida:
¿Cómo modifico el line-height en los contenidos de las páginas y artículos del blog? Por más que lo intento no lo consigo.
Millones de gracias por tu trabajo 😉
.entry-content p { line-height: 1.5em; }Modificá el valor
1.5empor el que necesites.Feliz de salvar vidas 😉
Gracias de nuevo… vaya rapidez!!!
Así lo tengo y no logro separar más las líneas. No quiero abusar, ya encontraré la manera.
Gracias mil!!!
No problem. Si lo tenés en el archivo
custom.css, debería funcionar. Si no, probá con!important.Ya está. Lo logré. Tan básico como que no lo tenía en la carpeta de css….
Una cosa, en zerif lite ¿ al publicar un post no incluye la categoría a la que pertenece o soy yo que la he vuelto a liar?
Saludos 😉
Que yo sepa, sí la incluye. En la entrada, al final del contenido hay un texto que dice:
Esta entrada está publicada en Nombre de la categoría con la etiqueta etiqueta1, etiqueta2, etiqueta3. Guarde el enlace permanente.Salvo que hayas editado el archivosingle.php, debería aparecer.Pues conscientemente no he modificado nada de nada en ese archivo. De hecho lo estoy revisando y no localizo cambios. Si pudieses hacer un copia-pega del zerif-lite original te lo agradecería, no vaya a ser que tocase el tema padre y por eso no localizo el error.
Gracias!
Revisando la plantilla
content-single.phpme encuentro con esto:if ( ! zerif_categorized_blog() ) { // This blog only has 1 category so we just need to worry about tags in the meta text if ( '' != $tag_list ) { $meta_text = __( 'This entry was tagged %2$s. Bookmark the <a href="%3$s" rel="bookmark nofollow">permalink</a>.', 'zerif-lite' ); } else { $meta_text = __( 'Bookmark the <a href="%3$s" rel="bookmark nofollow">permalink</a>.', 'zerif-lite' ); } } else { // But this blog has loads of categories so we should probably display them here if ( '' != $tag_list ) { $meta_text = __( 'This entry was posted in %1$s and tagged %2$s. Bookmark the <a href="%3$s" rel="bookmark nofollow">permalink</a>.', 'zerif-lite' ); } else { $meta_text = __( 'This entry was posted in %1$s. Bookmark the <a href="%3$s" rel="bookmark nofollow">permalink</a>.', 'zerif-lite' ); } } // end check for categories on this blogEs decir, si tu blog tiene creada una sola categoría, la entrada nada más va a mostrar las etiquetas (de tenerlas). Si tu blog tiene más categorías, ahí sí las incluye en la sección de información meta.
Espero que te sirva.
Efectivamente. Eres una genia chica!
Los artículos tienen que estar en dos categorías o si no no las categoriza.
Pues listo entonces, ya funciona correctamente.
No se cómo voy a pagarte esta ayuda… pero me suscribo a tu lista ya mismo 😉
Besos mil y gracias!!!!
Puff… cuando algo se atraviesa … se atraviesa hasta el final…
¿Sabrías decirme porqué cuando pongo un enlace la letra se hace un poco más pequeña?
He probado a cambiarlo en el css de 1001 maneras, a subir directamente el tamaño en el editor visual (que aunque ponga valor 36px no cambia)… y nada de nada… no hay manera.
Y lo más curioso es que cuando miro los valores en “inspeccionar” aparece con valor 36px pero visulamente es un 11px
¿Cómo es esto? ¿Cómo se cambia?
Gracias
Hola, Patricia.
Supongo que te referirás a enlaces dentro de una entrada. El tamaño predeterminado es de 16px así que esos 11px de algún lado deben salir. Tendrías que revisar si algún plugin o algún estilo incorporado lo está redeclarando.
Probá con
.entry-content a { font-size: 36px !important; }Saludos.
Mil gracias por tu paciencia y saber hacer.
No lo solucioné del todo pero voy a trastear en esa línea, porque pasa con los enlaces pero también con cualquier tipo de transformación: negrita, cursiva etc
Gracias por todo 😉
Patri
Ah! por cierto.. por si sirve para alguien…
en el caso de la negrita (que la letra se me hace más pequeña también) lo soluciono desde el editor HTML y cambiando <strong> por <b>… chica no me digas, pero así me lo hace bien, eso sí es un tostón
Saludos
Perdón
quería decir cambiando “strong” por “b”
y ya veo que en tus comentarios funciona perfectamente la negrita jajajaja
Claro, ahí lo corregí 😉
De todas maneras, podrías probar desactivando plugins para ver si es alguno el que está aplicando los estilos (y mal, porque estos no deberían estar por encima de la hoja de estilos del tema).
Saludos.
Hola, una pregunta, cual es el archivo que se debe modificar para lograr quitar que sean mayusculas?
soy bastante nuevo y por eso no logro encontrarlo, se que debo hacer, pero no donde.
gracias
Hola, Julio César.
Si estás usando un tema hijo, en el archivo
custom.css.Si no estás usando un tema hijo, tenés que instalar el plugin Simple CSS para pegar el código en Apariencia > Personalizar > Simple CSS.
Saludos.
tengo una en esa parte de el titulo principal como puedo ponerlo un poco mas pequeño
.intro-text { font-size: 50px; /* o cambiar el valor en píxeles por el necesario */ }Bienvenido!
Vivo en Rusia. Yo uso Google translator. Lo siento.
Pido ayuda. Cómo cambiar el color o el uso de fondo ribbon_with_bottom_button.php y ribbon_with_right_button.php. No me gustan los colores verde y rojo.
Gracias por su blog en el que. Se está a la espera de su respuesta.
Hola, Leonid.
Gracias por comentar.
Los colores se pueden cambiar desde la hoja de estilos del tema hijo (
custom.css), o en el recuadro CSS adicional del Personalizador. El código para la sección de fondo verde es:.separator-one { background: rgba(0, 0, 0, 0.8); }Este es un color semitransparente, que se superpone a la imagen de fondo. Si quieres usar un color sólido, reemplaza
rgba(0, 0, 0, 0.8)por#000000(usa los valores de color que necesites).Para la sección de fondo rojo:
.purchase-now { background: #000000; }Espero que te sirva y se haya entendido.
Saludos.
Muchas gracias, me podrias indicar tambien como cambiarle el color al boton de esta seccion? Saludos!!
Hola!
Antes que nada nuevamente agradecer por el gran trabajo que hacen, que realmente nos sirve de mucho a todos. Por otro lado realice el proceso con exito, pude agregar el boton, cambiar el color y cambien “TERCER BOTON” por “PORTFOLIO” ahora bien, queria consultarles por el tema de la etiqueta para direccionar justamente el boton al portfolio, no se en que parte cambiar esto.
Desde ya muchas gracias!!!
Hola, Mariano.
El enlace sería el anclaje que elegiste para la sección Portfolio. En tu caso sería
/#nuevaseccion, pero quizá lo más conveniente sea editarlo en el archivophpde la nueva sección, para que coincida con el título:<section class="focus" id="nuevaseccion">por<section class="focus" id="portfolio">, y luego usar en el botón el enlace/#portfolio(también recordá actualizarlo en el menú de navegación).Espero que te sirva. Saludos. 🙂