En la última entrada reanudamos los tutoriales dedicados al tema gratuito de una sola página de ThemeIsle que recomendamos con mucho entusiasmo: Hestia, el sucesor de Zerif Lite, que cada vez crece más en popularidad y en características.
Antes de continuar con los tutoriales oficiales, publico este que he dejado pendiente desde hace bastante tiempo, pero no por lo complicado sino simplemente porque de tan sencillo lo había olvidado por completo. 😆
Paso 1: usar un hook de Hestia para insertar un código abreviado
Vamos a partir de la base de que el plugin ya está instalado y activado, y que el slider que queremos incluir ya está creado.
Cualquier plugin que genere códigos abreviados sirve. Desde MetaSlider hasta Smart Slider 3, pasando por Master Slider, los premium Revolution y Layer, y la gran mayoría de los que están disponibles en el repositorio.
También suponemos que el tema hijo ya está creado y activado. De no ser así, las instrucciones se encuentran en esta entrada anterior.
Ahora sí, en el archivo functions.php, a continuación del código presente, pegamos esta función:
function hestia_child_slider() {
?>
<div class="carousel-inner">
<?php echo do_shortcode('[código-plugin]'); ?>
</div>
<?php
}
add_action( 'hestia_after_big_title_section_hook', 'hestia_child_slider' );Donde [código-plugin] será el código corto (shortcode) del slider.
Paso 2: Ocultar la sección de título grande con CSS
El código anterior no hace más que agregar el slider debajo de la sección de título grande. En versiones anteriores de Hestia, esta sección entera se “imprimía” mediante una función que se podía modificar desde el tema hijo. A partir de la versión 1.1.78 esa función ya no está presente, por lo que se debe recurrir al hook para añadir el código del slider y a unas líneas de CSS para ocultar la sección.
Vamos a ir primero al Personalizador > Secciones de la página de inicio > Sección de título grande, eliminamos la imagen de fondo y dejamos todos los campos en blanco. Publicamos los cambios.
Luego, en el archivo style.css del tema hijo (o en el recuadro CSS adicional del Personalizador) pegaremos el siguiente código:
#carousel-hestia-generic {
display: none;
}
Y para que las imágenes no queden debajo de la barra del menú en dispositivos móviles, agregaremos lo siguiente:
@media (max-width: 768px) {
.carousel-inner {
padding-top: 70px;
}
}
Eso es todo.
Veamos un ejemplo con Smart Slider 3, que ya incluye un slider de demo. Vamos a Smart Slider y le damos clic a Sample Slider. En la pestaña Publicar buscamos el código abreviado y lo copiamos.
Lo pegamos dentro de la función, que quedaría de la siguiente manera:
function hestia_child_slider() {
?>
<div class="carousel-inner">
<?php echo do_shortcode('[smartslider3 slider=1]'); ?>
</div>
<?php
}
add_action( 'hestia_after_big_title_section_hook', 'hestia_child_slider' );
¿Qué tal se ve? Hete aquí una demo en funcionamiento: https://demos.caribdisweb.com/hestia/
En este ejemplo, Smart Slider no añade comillas en el código, pero recordemos que si un plugin distinto lo genera con comillas dobles, tendremos que envolverlo en comillas simples:
<?php echo do_shortcode('[metaslider id="42"]'); ?>
Si el plugin genera un código abreviado con comillas simples, envolverlo en comillas dobles.
<?php echo do_shortcode("[whatev-slider id='77']"); ?>
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.6 disponible - 22 de septiembre de 2024
- Guía para WordPress 6.5 disponible - 13 de junio de 2024
- Guía para WordPress 6.4 disponible - 5 de diciembre de 2023
Hola disculpá que no es exactamente del tema que tratás, pero quería saber si se puede poner un buscador dentro de la sección de título grande y si ese buscador se puede ubicar sobre la imagen de fondo que hay en titulo grande. Gracias.
Hola, Gabriel.
Gracias por tu comentario. Fijate en esta respuesta.
Saludos.
Hola excelente trabajo con estas guias siempre me sacan de apuros, tengo una pregunta.
Es posible usar este método de slider en la seccion de clientes y como se haría?
Desearia poder hacerlo en automático y sin controles creo que eso dependeria del plugin del slider.
De antemano muchas gracias por la ayuda 😃
Hola, Héctor.
Disculpas por la demora.
Podrías usar un hook para insertar contenido en la sección de clientes. Fijate en esta entrada para más información.
Saludos.
Hola, funciono de maravilla muchas gracias por la ayuda!!!
Muchas gracias por tu ayuda. Excelente.
¿Quiero saber si en futuras actualizaciones de hestia. Este código y todos los cambio realizados pueden ser afectados?
Hola, Luis.
Gracias por tu comentario.
Los códigos personalizados que uses mediante hooks en el tema hijo funcionarán correctamente con las actualizaciones futuras.
Saludos.
Hola! Muchas gracias por tus aportes.
Sabes cómo puedo hacer para que el tamaño del metaslider en la versión móvil sea uniforme con el resto de las sesiones?
Por otro lado ¿cómo puedo hacer para cambiar el menu hamburguesa de la versión móvil para que quede abajo de la pantalla a la derecha y que baje a medida que el usuario hace scroll?
Muchas gracias.
Hola, Pablo.
Gracias por tu comentario.
El tamaño del slider va a depender de la proporción de las imágenes que uses como diapositivas. Y en cuanto al menú, me temo que requiere un nivel muy alto de edición. Quizás podrías probar con algún plugin.
Saludos.
Hola, inmensamente agradecido por el blog, lo del slider me funciono a la perfección.
Agradezco si me puede ayudar con el siguiente tema: en la sección que trae hestia por defecto en la sección titulo grande, viene un titulo grande y uno pequeño y un boton, al colocar el slider esto se esconde, como hago para que me aparezca.
Gracias
Hola, Mois.
Gracias por tu comentario.
Al usar el slider se desactiva por completo la sección de título grande, así que no es posible usar sus opciones del personalizador. Tendrías que usar las opciones del slider (si es que tiene posibilidad de insertar texto y botones; con Smart Slider, que es el del ejemplo, se pueden usar capas de texto y botones).
Saludos.
Hola excelente trabajo con estas guias siempre me sacan de apuros, tengo una pregunta.
Es posible usar este método de slider en la seccion de clientes y como se haría?
Desearia poder hacerlo en automático y sin controles creo que eso dependeria del plugin del slider.
De antemano muchas gracias por la ayuda 😃
Hola, agregue mi archivo functions.php y style.css en la carpeta wp-content/themes/hestia-child
Elimine la imagen de titulo grande y la imagen de fondo, pero no se visualiza mi slider.
Agradecería la ayuda
Estos son mis archivos:
/*functions.php*/ $hestia_mod_v ) { set_theme_mod( $hestia_mod_k, $hestia_mod_v ); } } } add_action( 'after_switch_theme', 'hestia_child_get_parent_options' ); function hestia_child_slider() { ?> <?php } add_action( 'hestia_after_big_title_section_hook', 'hestia_child_slider' ); /*style.css*/ /* Theme Name: Hestia - Hijo Theme URI: https://themeisle.com/themes/hestia Description: Tema hijo de Hestia, por ThemeIsle. Author: Caribdis.Net Author URI: https://caribdis.net Template: hestia Version: 1.0 License: GNU General Public License v2 License URI: http://www.gnu.org/licenses/gpl-2.0.html */ /* ESTILOS PERSONALIZADOS ---------------------------------- */ #carousel-hestia-generic { display: none; } @media (max-width: 768px) { .carousel-inner { padding-top: 70px; } }Hola, Diosalina.
Asegurate de que esté activado el tema hijo, desde Apariencia > Temas.
Saludos.
Tenía el mismo problema, y claro! No estaba activado el tema hijo!! Buenisimo tutorial, muchas gracias!!
Hola, estoy utilizando el tema hestia y he seguido los pasos que has indicado en este tutorial para cambiar la sección por un slider.
Mi problema es que me he dado cuenta que al ver la página desde el navegador Firefox el slider no se ajusta al tamaño de la pantalla.
Hola, Mafe.
Gracias por tu comentario.
Si es la web de tu firma, se ve perfecto en Firefox. Lo importante siempre es usar un plugin que sea 100% responsive.
Saludos.
Hola, estoy intentando modificar la sección de titulo grande como has indicado en el tutorial. pero no se si estoy haciendo algo mal porque no lo he podido modificar.
yo he creado las carpetas a través de siteground, no sé si eso tenga algo que ver.
gracias.
Hola, Fernanda.
Gracias por tu comentario.
La carpeta se puede crear desde el gestor de archivos del hosting, no hay problema con eso. Fijate que no estés olvidando activar el tema hijo desde Apariencia > Temas.
Saludos.
Muy buen día, soy yo de nuevo, disculpa de verdad pero tengo 2 dudas
*¿existe alguna forma de ocultar todo el pie de pagina?
*Mi pagina carga de manera extraña, he hecho algunas ediciones y no se por que razón ahora al cargar la pagina carga primero la sección de contacto, quisiera corregir eso para que cargara primero el slider..
Muchísimas gracias por todo, tu blog me ha sido de muchísima ayuda de verdad.
Hola, Luis.
No hay problema, estoy para ayudar 🙂
Para ocultar el pie de página por completo, tendrías que usar el siguiente código:
footer { display: none; }En cuanto a la carga de la página, es normal, y es porque los elementos más “pesados” están en el slider (las imágenes). Una alternativa es usar un preloader, que muestra la página en blanco con un icono animado de espera, hasta que todos los elementos de la página carguen y se puedan mostrar en el orden correcto. Hay bastantes plugins que sirven para eso.
Saludos.
Buenas, tengo problemas con el responsive de mi pagina, no se adapta bien a pantallas mas grandes, los elementos se posicionan en lugares incorrectos y quisiera saber si hay algún tipo de solución de ante mano, gracias.
Hola, Luis.
Por lo que veo, es un tema de los módulos de Elementor. Tendrías que usar los ajustes correspondientes a cada vista para comprobar que se adapten bien. Si no, fijate que no sea algún estilo que se aplica mediante uno de los complementos (Addons y/o Powerpack; la verdad no los conozco, así que no sabría decirte con exactitud si tienen algo que ver).
Saludos.
Hola, buen día, espero se encuentre muy bien, tengo un problema, hice todo al pie de la letra, pero el slider queda debajo del menú y no me permite visualizarlo correctamente
Hola, Luis.
Para que el slider quede debajo del menú, tendrías que usar el siguiente código:
@media (min-width: 769px) { .carousel-inner { margin-top: 70px; } }Saludos.
Muchísimas gracias, fue demasiado útil para mi, estuve semanas buscando la solución jejeje, muy bueno tu blog, de verdad eternamente agradecido.
Hola Ana,
después de un tiempo sin actualizar mi web, estos días me he puesto a actualizarla con nuevas fotos. Tenía también pendiente lo del slider y todo ha funcionado perfecto, gracias!
Lo que hace un tiempo que deseo alinear los “features” del menú general en la versión móvil y no encuentro como hacerlo. Te explico, en la barra de menú general, tengo los iconos de fontawesome y luego el título de los “features” (animación infantil, bodas, etc.). En la versión móvil, al desplegar el menú, los “features” de dicho menú (animación infantil, bodas, etc.) no me salen alineados del todo. Estan a la izquierda, pero si te fijas bien, hay pequeñas diferencias de alineado entre uno y otro. Lo que me gustaría es que saliera el icono, y poner como una espécie de “tabulador” para que hubiera un poco de espacio entre icono y título, y que todos los títulos de los “features” del menú que empezaran en la misma alineación (no encuentro ningún sitio para adjuntar captura de pantalla, espero haberme explicado bien! 😉
Y por otro lado, en el “footer” tengo MENORCA FESTA © 2018. No encuentro en ningún sitio donde cambiar este “footer” para ponerlo a 2019!
¡Muchas gracias por tu inagotable ayuda! ¡Saludos!
Hola, Joan.
Para los iconos del menú, probá con el siguiente código:
@media (max-width: 768px) { .obfx-menu-icon { padding-right: 30px; } }En cuanto al texto del copyright, fijate si no está en un archivo
footer.phpdel tema hijo.Saludos.
¡Muchas gracias, eres un sol!
Lo del padding ha funcionado perfectamente, lo que tengo un “language translator” que no me lo ha hecho. Supongo porque no está englobado dentro de los @media. Por otra parte, no tengo ningún footer.php en el directorio hestia-child, pero si en el “madre”. Lo que no he visto en ningún lado de los códigos el MENORCA FESTA © 2018. También he hecho un “buscar” en otros archivos.php y en otros directorios pero sin suerte..no se de donde sale este copyright! 🙂 Si sabes de donde puede salir o si a traves de un código CSS en CSS adicional se puede cambiar lo puedo probar.
¡Saludos desde España!
Hola, Joan Pau.
El icono de las banderas no pertenece a OrbitFox. Tendrías que agregar, dentro de la media query, el siguiente código:
.trp-ls-language-name { padding-left: 10px; } .trp-flag-image { margin-left: 1px !important; }Ni idea dónde podrá estar el copyright si no es en el archivo
footer.php(o quizás enfunctions.phpmediante una función). Podrías hacer una búsqueda en la base de datos para ver si salta en algún otro lado.Saludos.
Gracias de nuevo Ana. Ahora estan todos los iconos alineados! 🙂 Ya había pensado en la opción de buscar. De hecho hice una búsqueda en varios archivos php del directorio web por si aparecía el copyright en alguno de ellos y nada..De momento he hecho un “parche” que es que en la traducción al español, he cambiado 2018 por 2019, al menos en la versión en español aparece bien..jejeje Pero en la versión “main” en catalán me sigue apareciendo 2018. Indagaré un poco más a ver que encuentro. De todas formas, yo no recuerdo haber introducido este MENORCA FESTA © 2018 en ningún sitio… y la web la hice en 2016, o sea que de alguna manera se ha ido actualizando el año..jejeje No sé. Muchas gracias por tu tiempo
Hola Ana, espero que todo bien. Estoy aprendiendo mucho de tu blog, la verdad es que eres de una ayuda estupenda para los más novatos..
Desde hace un tiempo, otra vez los iconos de los “features” vuelven a estar descolocados en la versión móvil…he indagado un poco cambiando algun parámetro dentro de CSS:
@media (max-width: 768px) {
.obfx-menu-icon {
padding-right: 30px;
pero no se porque estan descolocados. Esto ha sido despues de alguna actualización de wordpress, porque no había tocado nada y “solos” se han descolocado otra vez. Sabes a que es debido? Tengo que añadir alguna línea? He probado a poner 20px, 10 px..pero algunos se colocan pero otros no.
Si eres tan amable me podrias decir que debo hacer, muchísimas gracias.
Hola, Joan Pau.
Probá borrando por completo el código. Aparentemente en alguna de las actualizaciones del plugin corrigieron esa diferencia de alineación.
Saludos.
Hola Ana,
ya lo he quitado, y se ha ajustado más bien. No queda del todo alineado pero esta mejor que antes. Esperaremos a alguna actualización a ver si lo acaban de ajustar. Gracias infinitas!
Hola amiga gran trabajo una pregunta como puedo colocar una barra de búsqueda grande en la seccion de titulo? gracias de ante mano
Hola, Darwin.
Tendrías que crear un tema hijo y usar los siguientes códigos:
En
functions.php:function hestia_child_search() { echo '<div class="row"><div style="width: 100%;">'. get_search_form( false ) . '</div></div>'; } add_action( 'hestia_bottom_big_title_section_content_hook', 'hestia_child_search' );En
style.css:.hestia-big-title-content { display: none !important; } .carousel form { text-align: left; }Solo verás la barra de búsqueda. Si necesitás un título o texto, tendrá que estar dentro del código. Ejemplo para el título:
function hestia_child_search() { echo '<div class="row"><div style="width: 100%;"><h1 class="hestia-title">Título</h1>'. get_search_form( false ) . '</div></div>'; } add_action( 'hestia_bottom_big_title_section_content_hook', 'hestia_child_search' );Saludos.
Hola! Cómo estás ? Gracias x la info. No encontré la entrada donde hables d esto. Pero estoy usando Hestia pro para un proyecto y me sucede que en la página que enlazo para Blog me aparece como título de la página (en el Header, sobre la imagen) el subtítulo de la web. Y lo que deseo es que aparezca el título que le pongo a esa página puntual, por ejemplo. “Noticias” hay posibilidad de modificarlo de alguna forma? Desde ya muchas gracias !! ?
Hola, Valeria.
Supongo que lo resolviste, si es la URL del comentario.
Saludos y buen comienzo de año. 🙂
Hola! No, en realidad lo “simule” poniendo en el subtitulo de la web la palabra Noticias. Para que me apareca asi en la pagina del Blog, pero la idea seria que como corresponde en el subtitulo de la web aparezca el slogan de la empresa y que me reconozca el tiutlo de la pagina del blog. Pero no logre resolverlo. Es posible hacerlo? Desde ya mil gracias!
Hola, Valeria.
Ahí vi que estás usando la versión 1.1.43. Aparentemente, corrigieron esto en la 1.1.45. Fijate actualizando al menos a esta versión.
Saludos.
Hola el metaslider no encuentro para ponder el shorcode en hestia la ultima version
El código no funciona? Tengo un error en el archivo functions.php
Estoy en la última versión de hestia.
Hola, Fabio.
El código funciona en la última versión de Hestia.
Fijate que no haya ningún error de sintaxis.
Saludos.
Hola, excelente tutorial, de antemano muchas gracias, pero hice todo tal cual el manual pero la sección de página de inicio queda montada sobre el slider, ¿Sabe como ampliar el espacio entre ellos?
Hola, ML Systems.
Esa es la apariencia predeterminada cuando está configurado el diseño en recuadro (o diseño en caja, dentro de Configuración de la apariencia > Ajustes Generales). Podés desactivarlo, o bien usar el siguiente código CSS para mostrar un margen de separación (usá el valor en píxeles que necesites):
.main-raised { margin-top: 30px; }Saludos.
Excelente, muchas gracias por su colaboración. Ya quedó perfecto. Los felicito por este foro!
Hola Buenas, hice la modificación y funciona todo correctamente, a excepción de que la sección de inicio (los demás elementos sin el de título grande) queda sobre el slider pero solo una parte pequeña al final del mismo, ¿Habrá una manera de ampliar la distancia entre ellos?
Hola, ML Systems.
¿Cuál sería la URL del sitio?
www.origenvenezzia.com
Excelente Ana, muchas gracias. Me salvaste nuevamente.
Hola, seguí este tutorial y funcionó perfectamente durante dos semanas, pero con la última actualización de Hestia ya no me funciona.
¿Hay forma de solucionarlo?
Hola, Sila.
En efecto, a partir de la versión 1.1.78 cambiaron el código que corresponde a la sección de título grande.
El tutorial ya está actualizado.
Saludos.
No sé cúal será el problema, pero sigue sin funcionarme, al meter el código en el archivo css me desaparece toda la web.
Hola, Sila.
¿Tendrás la URL para verlo? Fijate que no haya ningún error de sintaxis.
En esta demo está aplicado el código tal cual y la versión de Hestia es la 1.1.80.
Saludos.
Hola otra vez, creo que el problema está en que la actualización que tengo es la 1.1.80. y ya me está pidiendo la 1.1.81. pienso que por eso no funciona el tutorial, hecho para la 1.1.78
Hola, Sila.
Está funcionando con la versión 1.1.81 aquí.
Revisá lo que te comenté en el mensaje anterior, y limpiá caché del navegador y del plugin, si estuviera instalado.
Saludos.
Hola!, buenas tardes, existe alguna forma de mantener la sección de título grande y además el slider?
Hola, Adrián.
Podés usar el hook
'hestia_bottom_big_title_section_content_hook'para mostrar el slider a continuación de la sección. El código sería algo así:function hestia_child_slider() { ?> <div id="carousel-hestia-generic" class="carousel slide" data-ride="carousel"> <div class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <?php echo do_shortcode('[codigo-plugin]'); ?> </div> </div> </div>Saludos.
Hola! muchas gracias por responder. He colocado el código, pero me marca un error de sintaxis en la última línea de add_action, por qué será?
Hola, Adrián.
Fijate que no hayas borrado por accidente alguna comilla o punto y coma. El código debe ir dentro de las etiquetas
<?phpy?>(el cierre a veces no está presente enfunctions.php).Saludos.
Hola! listo, ya no me ha marcado ningún error, ahora el detalle es que el slider se encimó en la sección del título grande, esta es la página www.garciaindustrias.com, podrás ayudarme? gracias
Hola, Adrián.
Probá con el hook
'hestia_after_big_title_section_hook'(en lugar de'hestia_bottom_big_title_section_content_hook'). El slider debería quedar abajo de la sección de título grande.Saludos.
Buen día. Cómo estás?
De antemano agradezco tu trabajo y tu ayuda para tantos usuarios que como yo, que sin tener formación trabajamos mucho poder tener presencia en la web.
Armé mi sitio web con Hestia (gratuito). Necesito consultarte dos cosas:
1- El sitio tarda mucho en cargar, (contiene muchas imágenes pero la mayoría de ellas han sido trabajadas para que no pesen). Esto puede ser problema del servicio de Hosting? Mas allá de las imágenes?
2- Tengo un problema con la entrada de comentarios, dado que varias veces en el día me avisan que hay pendiente una moderación que además no tiene que ver con el sitio sino que ofrecen préstamos. Ya la puse como span y la mandé a la papelera pero vuelve a aparecer de manera recurrente. Puedo bloquearla? No encuentro la forma de hacerlo.
Espero tu respuesta.
Mil gracias nuevamente. Saludos!
Isabel
Hola, Isabel.
En cuanto al punto 1, en efecto son las imágenes las que hacen lenta la página. Entre las tres más pesadas tenés casi 3.5 MB. Deberías optimizarlas, en especial la imagen de fondo.
Y en cuanto al punto 2, se soluciona con un plugin antispam. Antispam Bee es el que uso en varios sitios, pero la mayoría de los de la lista sirve.
Saludos.
Buen día! Como siempre mil gracias por tu ayuda.
Respecto de tu respuesta, aprovecho a preguntarte cual es “el peso” máximo aconsejable para las imágenes.
Gracias de antemano y que tengas un buen día.
Saludos
Hola, Isabel.
Obviamente va a depender del tipo de imagen, porque algunas no se pueden reducir sin que pierdan calidad, pero algo estándar sería: no más de 20 KB para los iconos y no más de 300 KB para las imágenes de fondo.
Saludos.
Gracias! Ya me puse a trabajar en eso. Que tengas un buen día y mil gracias nuevamente.
Tengo un error con las demas secciones no me las muestra
Hola, Frank.
¿Podrías detallar un poco más el error? ¿Estás usando el tema hijo? ¿Editaste los contenidos desde el Personalizador?
Saludos.