A todos nos encanta el tema de cabecera de Elegant Themes. Por eso estamos acá, ¿verdad? Divi hace maravillas con casi todas las opciones y herramientas que incluye, y convierte en tarea fácil e intuitiva la creación de estructuras complejas de diseño. Pero seamos honestos, al mismo tiempo falla en los aspectos más básicos. Por ejemplo, cambiar los consabidos créditos del pie de página:
La solución no es nada complicada: crear un tema hijo y guardar en la respectiva carpeta el archivo footer.php con el código modificado.
El código original del archivo footer.php de Divi
El archivo footer.php modificado, listo para guardar en la carpeta del tema hijo.
Los tutoriales para crear temas hijos en WordPress abundan, por lo tanto en esta oportunidad no nos vamos a dedicar a ese menester. Pero es cierto también que todavía hay quienes no se animan a escarbar en las profundidades del código y prefieren hacer todo mediante una interfaz visual.
Para ellos es que hoy les traigo este tema hijo de Divi ya creado, que incluye un panel adicional en el Personalizador para editar los créditos del pie de página a gusto.
Aclaración importante: este tema hijo está pensado para instalar directo sobre el Divi original (está probado en las versiones 2.6 y 2.5, pero debería funcionar sin problemas en la 2.4. No funciona con versiones anteriores. Comprobado: funciona también con la versión 2.3 🙂 ) Si ya está usando un tema hijo, perderá todas las personalizaciones que haya hecho (en los archivos .php y en la hoja de estilos, no así en el Personalizador de Tema o de Módulo).
Ahora sí, vamos paso por paso:
Descargamos el archivo ZIP del tema hijo aquí.
Vamos a Apariencia > Temas y abrimos la página de Temas. Le damos clic al botón Añadir nuevo de la parte superior de la pantalla.
En la siguiente página, hacemos clic en el botón Subir tema de la parte superior.
Veremos una nueva página con un enlace para cargar archivos. Hacemos clic en el botón Examinar… (si usamos Chrome, el botón dirá Seleccionar archivo) para abrir un cuadro de diálogo y seleccionar la ubicación del archivo ZIP que acabamos de descargar. Buscamos CaribdisWeb-Divi-Hijo.zip y lo seleccionamos.
Luego de seleccionar el archivo, el cuadro de diálogo se cerrará. Hacemos clic en el botón Instalar ahora para instalar el tema. La página se recargará y una vez subido el tema correctamente, veremos lo siguiente:
Le damos clic a Vista previa y esto es lo que tendremos en pantalla:
¿Por qué conviene hacer una vista previa y no activar el tema hijo directamente? Porque la misma vista previa nos permitirá personalizar el pie de página y al activar el tema ya tendremos los cambios hechos.
Además, nos permite volver a añadir a las ubicaciones correspondientes los menús y widgets que ya estaban asignados en el tema padre, antes de que el sitio esté visible y muestre las ubicaciones por defecto.
El resto del diseño y las configuraciones de estilo deberían permanecer intactos.
Como vimos en la imagen anterior, en el panel del Personalizador ahora tenemos un nuevo elemento: Créditos del pie de página, justo debajo de Esquemas de color. Al hacer clic, abriremos las opciones, que se verán de la siguiente manera:
Cada opción es bastante clara y se explica por sí sola, pero vamos a repasarlas y luego a ver sus respectivos ejemplos:
- No mostrar créditos – Al seleccionar esta casilla, se elimina por completo la sección de créditos del pie de página.
- No mostrar símbolo © – Al seleccionar esta casilla, se elimina el símbolo del copyright.
- Mostrar el año actual – Al seleccionar esta casilla, se mostrará el año en curso, el cual se actualiza automáticamente.
- Texto de los créditos – Este es el texto que se mostrará justo a continuación del símbolo © y del año (si está seleccionada la opción Mostrar el año actual), y que de manera predeterminada será un enlace a la página de inicio del sitio.
- Mostrar el año de inicio – Esta opción permite mostrar el año de inicio del copyright justo después del símbolo © y separado del año actual con un guión (-).
- Separador – Se puede optar por mostrar un símbolo separador entre el año y el texto. Se puede introducir en el campo cualquier carácter, tal como un guión, un asterisco, una barra vertical (|), entidades de carácter HTML, etc., etc. Si se deja el campo en blanco, simplemente habrá un espacio entre el año y el texto.
- Enlace personalizado – En caso de querer apuntar el texto a una URL distinta de la página de inicio del sitio, se puede especificar aquí. Solo recordar que hay que escribir la dirección completa, con el prefijo
http:// - Abrir en una nueva ventana – Si se usa un enlace personalizado, puede que quiera que se abra en una nueva ventana o pestaña del navegador (no así cuando el enlace apunta al mismo sitio). Para esto, hay que seleccionar esta casilla.
Vamos, entonces, a experimentar un poco. Seleccionamos que muestre el año actual, escribimos el texto, escribimos el año de inicio, elegimos un separador en formato entidad HTML, escribimos un enlace personalizado y seleccionamos que se abra en una nueva ventana:
Podemos ensayar todas las combinaciones posibles y visualizarlas en el Personalizador, sin que tengan efecto en el sitio en vivo hasta que quedemos totalmente conformes.
Una vez que tenemos el texto del pie de página tal como lo queremos, hacemos clic en el botón Guardar y activar. Voilà!
¿Dudas? ¿Preguntas? Serán bienvenidas en la sección de comentarios.
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
Antes de nada, darte las gracias por tu página web. La verdad es que sois de gran ayuda para muchos principiantes en el mundo del theme de extra. Necesito de vuestra ayuda porque la página de inicio de mi web la tengo realizada con el constructor de categorías pero no me deja modificar a través del Plugin Yoast la metadescripción ni el titulo. Me podrías indicar de que otra manera puedo realizar esos cambios?? He visto en un comentario que rediriges a la web de Elegant themes pero no puedo acceder porque ya no tengo acceso. Podrías indicarnos como se podría hacer a través de código??
Te agradecería enormemente tu ayuda.
Hola, David.
Gracias por tu comentario.
Tendrías que usar al menos la versión 1.3.5, en la cual se corrigió este problema.
Saludos.
Hola disculpa se puede añadir mediante código un logo alternativo al header de la pagina ya que el tema DIVI no lo permite, solo está la opción de 1 solo logo y desaparecer cuando el sticky header está activado.
Muchas Gracias, el aporte del footer me sirvió 🙂
Hola, José.
Es posible modificando el archivo
header.php. En esta web hay instrucciones detalladas.Saludos.
Hola. Este Blog me salva siempre… Estoy usando el tema Extra y noto q tengo algunas limitaciones en cuanto al diseño. Por ej, si quiero hace la pagina principal de ancho total. Si la realizo desde el Constructor de Categorías, no tengo muchos de los módulos q si hay en 1 pagina. Y si la realizo con 1 pagina estática, me ocurre a la inversa. No puedo insertar los módulos de Blog nuevos de extra, y ademas el titulo de la pagina esta presente y no puedo sacarlo…
Estoy realizando un diario on line.
Gracias
Hola, Yamile.
El Constructor de categoría tiene limitaciones, nos guste o no; podría decirse que incluye módulos con los componentes de mayor uso en una publicación en línea, pero es verdad que se queda un poco corto. En el foro de sugerencias ya se ha planteado en más de una oportunidad. Solo habrá que esperar a que algún día ET nos dé el gusto. 😉
Saludos.
Hola Ana, que tal, me encantan tus aportes.
Tengo una duda, en la parte superior del tema Divi, estan los iconos de las redes sociales, pero aun el de Instragram continuar siendo el anterior (version divi 3.0.38), como puedo hacer para sustituir ese icono por el nuevo de instragram.
Otra duda, en los modulos de “Anuncios” (blurb), igual hay una variedad de iconos que se pueden agregar, como puedo hacer para personalizar y colocar iconos propios, he revisado todas las carpetas pero no encuentro donde cargarlos.
Espero tus comentarios.
Saludos
Hola, Francisco.
Podrías usar Font Awesome. En Integración > Añadir código al <body> agregá lo siguiente:
Y en el CSS personalizado o en la hoja de estilos del tema hijo:
.et-social-instagram a:before { font-family: FontAwesome !important; content: "\f16d"; }En cuanto al módulo de anuncios, no es tan simple. Fijate en esta respuesta.
Saludos.
Hola! mil gracias por tus aportes. Cogí una web creada en Divi a medio terminar, y de repente no me deja entrar en el backoffice. El problema es del tema (en entrado por Ftp y no es de los plugins)Seleccioné todo el texto de updates_init.php y sin querer lo eliminé (en vez de copiarlo). Ahora no encuentro este documento para ponerle el texto tal como estaba cuando entro por Ftp..sabrías decirme donde puedo encontrarlo? por otra parte, el divi builder me estaba pidiendo que lo actualizase, así que el motivo de que no me deje entrar en el backoffice y me salga la página en blanco no sé si es del updates_init.php o del buider. Si le cambio el nombre a la carpeta del tema en ftp, puedo entrar (pero sin tema, claro). Si vuelvo a instalar el tema, perdería todo el estilo verdad?
Hola, Raquel.
El archivo
updates_init.phpestá en la carpeta/core/. De todas maneras, si reinstalás el tema (reemplazando los archivos vía FTP o el administrador de archivos del panel de control) no perderás las configuraciones ni los estilos que hayas aplicado en los ajustes del tema/módulos. Ahora, si editaste archivos del tema padre, obviamente esos cambios sí se perderán.Saludos.
Hola! yo estoy haciendo una página con divi y ya la tengo avanzada, encontre tu blog buscando como modificar y agregar widgets al footer. Puedo instalar el tema hijo si ya tengo avanzada mi pagina? o tendria que empezar todo de nuevo?
Hola, Mailén.
Podés instalar el tema hijo aunque tu página ya tenga contenido. Lo único que tendrás que hacer es volver a asignar el menú y los widgets (que pasarán a estar inactivos).
Saludos.
Un post de gran valor. Pero ahora, con la nueva actualización a Divi 3 todo ha cambiado. No consigo cambiar los créditos. ¿Qué puedo hacer?
Hola, Verónica.
Gracias por tu comentario.
Con la revisión 3.0.1 ET agregó una opción para editar o suprimir los créditos desde Personalizador de tema > Pie de página > Barra inferior (es un simple campo de entrada de texto, pero admite código HTML).
De todas maneras, el tema hijo de esta entrada sigue funcionando sin problemas con la versión 3.
Saludos.
Hola, buenisimos estos aportes, cada dia aprendo mas.
Sin embargo tengo una duda. Como puedo hacer para colocar el Logo mas grande? se que en Apariencia>Personalizacion>Cabecera se puede, pero aun asi queda muy pequeño, existe otra forma de hacerlo?
Gracias por la ayuda que puedas darme
Saludos
Hola, super bueno tu divi hijo. La verdad es q no entiendo muy bien todavia lo de los temas hijos, pero he descargado el tuyo y he podido personalizar el footer. Estoy haciendo una web yo solo y estoy aprendiendo esto de wordpress. Lo que no logro hacer es desaparecer ese espacio arriba del footer donde hay widgets, que vendria a ser el espacio del menu inferior. Como podria hacerlo?
Muchas gracias, eres una capa. Ojala hubiera más gente como tú dispuesta a ayudar a los novatos jeje
Hola, Josué.
Gracias por tu comentario.
Si ves un espacio entre el contenido y el pie de página es porque tenés asignado un menú a la ubicación Menú del pie de página o tenés algún widget en alguna de las 4 áreas del pie de página. Fijate vaciando todo.
Saludos.
Saludos , me gustaria saber porque no puedo importar algunos temas, ni psd files y me dice que tengo que tener archivos json y esos archivos que tengo son json que puedo hacer ? gracias
Hola, William.
Los archivos PSD son para abrir con Photoshop y nada tienen que ver con WordPress. En cuanto a los archivos JSON para importar, fijate que coincidan con el tipo de opción para el que fueron creados. Es decir, los diseños de la biblioteca solo se pueden importar desde Divi > Biblioteca de Divi y no desde dentro del Constructor, ni Opciones del tema, ni el Personalizador. Por último, tu servidor debe cumplir con los siguientes requisitos:
mod_rewriteY un
upload_max_filesizede al menos 128M enphp.ini.Saludos.
Hola, gracias por los contenidos expuestos.
He intentado cargar el tema hijo como bien especificas, pero me dice los siguiente:
Instalando tema desde el archivo: CaribdisWeb-Divi-Hijo.zip
Descomprimiendo…
Instalando el tema…
Este tema requiere un tema padre. Comprueba si está instalado…
No se encuentra el tema padre. Tienes que instalar el tema padre, Divi, antes de utilizar este tema hijo.
El tema se ha instalado correctamente.
Volver a la página de temas
Acabo de adquirir la licencia por un año de Elegant themes.
Como puedo solucionar esto?
Te agradezco si puedes aportar alguna solución o por que puede ser debido, ya que el Tema DIVI esta instalado correctamente.
Un saludo
Hola, Javier.
Gracias por tu comentario.
Fijate que el nombre de la carpeta en la cual está instalado Divi, coincida con el de
Templatedel archivostyle.cssdel tema hijo. El 99% de las veces la carpeta se llamaráDivi, pero de no ser el caso, o bien deberás renombrarla o deberás cambiar la línea del archivostyle.cssdel tema hijo porTemplate: nombre-de-carpeta-de-Divi.Espero que te sirva.
Saludos.
Hola de nuevo!:)
Gracias por contestar.
Acabo de acceder a mis hosting y la carpeta del theme es Divi.
No entiendo lo de cambiar la línea del archivo style.css, por que he abierto el archivo y corresponde con el nombre de la carpeta padre.
Tengo conocimentos basicos. Que tengo que añadir algo más?
Gracias por tu esfuerzo y tu aportación a la comunidad de wordpress.
Un saludo
No, no tenés que cambiar nada si el nombre de la carpeta coincide. Pero por alguna razón, el tema padre no debe estar correctamente instalado. Fijate si podés borrar la carpeta de Divi vía FTP, e instalar el tema tal como lo descargaste en formato ZIP de tu cuenta de ET vía el escritorio de WordPress (Apariencia > Temas > Añadir nuevo > Subir tema).
Hola otra vez!
Efectivamente lo tuve que subir a través de filezilla x q al realizar la instalación según tus indicaciones no me dejo x el siguiente motivo:
El archivo subido excede la directiva upload_max_filesize en php.ini.
No tengo ni idea, pero va a ser de aquí el no poder instalar el tema hijo.
Voy a mirar x internet a ver si puedo solucionar esto.
Se te ha dado el este caso alguna vez?
Mil y una gracias por tu dedicación
Resuelto!!! Tal como comentaste era error de subirlo a través vía FTP.
Muchas gracias por tus conocimientos tan extensos en esta materia.
Un saludo
Hola que tal. Genial el tema hijo que creaste. Lo probé en versión la 2,7 y anduvo. Crees que traería problemas más adelante? Por otro lado hay una forma de centrarlo (no uso la sección de redes sociales)-
Te felicito por tu sitio. es genial la información que brindas a nosotros, los novatos!
saludos y éxitos
Hola, Martín.
Gracias por tu comentario. Siempre que ET no haga en el futuro algún agregado específico en el archivo
footer.php, debería funcionar. Ante la duda, comparar los dos archivos.Y para centrarlo, usar el siguiente código CSS:
#footer-info { text-align: center; float: none; }Espero que te sirva.
Saludos.
Buenas noches,
Le hice una web a una amiga, cambié el footer con mi enlace, pero cada vez que actualizo DIVI lo pierdo. La única forma es haciendo un child theme?. No existe otra forma?. Sería complicado hacerle un child theme?. Soy novato y no sé como hacerlo.
Muchas Gracias.
Hola, José.
La práctica recomendada es crear un tema hijo. No es nada complicado y en la web abundan los tutoriales. Sin embargo, desde Divi Theme Examples aportaron un código para agregar en Opciones del tema > Integración > Añadir código al <body>, que quedaría más o menos así:
<script type="text/javascript"> jQuery(document).ready( function($) { $('#footer-info').html(' © ' + (new Date).getFullYear() + ' • <a href="http://urldelsitioweb.com/" target="_blank" rel="nofollow">SITIO WEB</a>'); }); </script>La parte editable es lo que está entre las comillas simples de
html(' '). Como dije antes, no es lo ideal, pero funciona y quedará guardado aunque se actualice el tema.Espero que te sirva.
Saludos.
Muchas gracias, lo probaré.
Buenas tardes,
He probado lo que me dijiste en varias webs con Divi y al guardar siempre se queda pensando y nunca se guarda. Será un problema de la versión nueva?.
Si descargo tu tema hijo se puede instalar en cualquier página?.
Es que sino pierdo el pie.
Gracias.
Hola, José.
El código debería funcionar en todas las versiones de Divi. Si no se guarda, el problema parece más bien del navegador, de la instalación de Divi o de algún plugin que genera un conflicto. Probá limpiando caché y cookies; desactivando plugins o reinstalando Divi 2.7.3.
El tema hijo se puede instalar en cualquier página con Divi desde la versión 2.3 en adelante. Pero tené en cuenta que vas a tener que asignar nuevamente los menús y widgets, y si tenías barras laterales personalizadas, hay que crearlas de nuevo.
Saludos.
Hola!
Esto se puede aplicar al tema “Extra de Elegant Themes?
Se puede aplicar el mismo código, pero lo que tenés que hacer es crear un tema hijo de Extra y usar el correspondiente archivo
footer.phpdel tema (que no es igual al de Divi).Buff… Tengo nociones básicas sobre ello.. No se crear un tema hijo, no se manejar es archivo footer.php…
Muchas gracias de todos modos!
Sos mi mentora. Mi salvación! Te amo!
Gracias, Mariano (se pone colorada)… Un placer ser de ayuda. Saludos 🙂
Hola. Acabo de descubrir tu blog ya que voy a comprar Divi. Todos tus tutoriales me vendrán genial, gracias por tu ayuda. No tengo ni idea de código. Mi pregunta es: ¿qué pasará cada vez que se actualice el tema, perderé las personalizaciones que haga?. ¿Necesito un tema hijo, qué es exactamente? Gracias, Ana.
Hola, Rocío.
Gracias por tu comentario. Con Divi la gran mayoría de las personalizaciones se llevan a cabo dentro mismo del tema. Decidir usar un tema hijo o no queda a criterio del usuario si este considera que en algún momento va a necesitar algún cambio que no se pueda lograr desde las opciones de Divi.
Exactamente, un tema hijo es una plantilla que hereda la estructura, los estilos y las funciones del “tema padre”, pero que te da la libertad de modificarlas o añadir nuevas a tu conveniencia, sin interferir con la plantilla principal.
Ya sea que uses un tema hijo o hagas todas las personalizaciones desde Divi, cuando se actualice el tema no perderás ningún cambio.
Espero que esto te haya aclarado la duda, y si no, aquí estamos para ayudar. 🙂
Saludos.
Ok, entonces para no liarme no utilizo tema hijo.
¡Muchas gracias por aclarar mis dudas!
Saludos 🙂
Me sirvio mucho, pero hay un detalle que no puedo resolver. Me gustaria un footer que funcione de forma similar al de caribdis!
Y la mia en este caso cuando el contenido es largo y se supone no deberia verse el footer en pantalla si no hasta que con scroll llegue hasta el fin del contenido, se ve siempre, solapando el contenido.
En otras palabras el footer se ve siempre en todas las paginas a la misma altura sin importar si hay mucho o poco contenido. Cuando el contenido es poco es perfecto pero cuando es mucho resulta molesto que el footer se superponga al contenido.
No se si se entendio, lamentablemente estoy trabajando en un localhost.
Luciano, disculpá, yo entendí mal y pensé que querías hacer el pie de página fijo en todas las páginas. Este es el código que tenés que usar para que vaya abajo en páginas con poco contenido:
#page-container { margin-bottom: 54px !important; /* el valor en píxeles depende de la altura que tenga el pie de página, 54px es el alto predeterminado /* } #main-footer { bottom: 0px; position: fixed !important; width: 100%; z-index: -10; }Casi me olvido.
Para la versión responsive necesitás cambiar el margen del
#page-container:@media screen and ( max-width: 980px ) { #page-container { margin-bottom: 88px !important; } } /* este valor también depende de la altura del pie de página, 88px es el alto predeterminado en la media query /*Este código debo agregarlo al style.css como el anterior ¿no?
¿Lo hago debajo del codigo anterior o como quedaria todo junto?
Exacto, va todo en la hoja de estilos y quedaría así:
#page-container { margin-bottom: 54px !important; } #main-footer { bottom: 0px; position: fixed !important; width: 100%; z-index: -10; } @media screen and ( max-width: 980px ) { #page-container { margin-bottom: 88px !important; } }Genial! Muchisimas gracias ahora quedo perfecto.
Saludos
Excelente aporte Anita, muchas gracias nuevamente. Te cuento que gracias a tus constantes aportes, por primera vez en mucho tiempo estoy comenzando a disfrutar de las capacidades del tema Divi.
Saludos desde Chile
¡Gracias, Ricardo! Divi es genial, pero si conocemos los truquitos para sacarle el máximo provecho, es mucho mejor aún. Saludos. 🙂
Hola, muchas gracias por el excelente aporte. Es poco o nada lo que existe en español acerca de Divi tan bien elaborado en serio gracias!
Solo quiero hacer una pequeña consulta relacionada, yo quiero que mi footer se quede siempre abajo sin depender del contenido de cada página, ¿tienes idea de cómo hacerlo o alguna forma de orientarme? Busque bastante en google pero no tuve éxito.
Hola, Luciano.
Gracias por tu comentario. Para fijar el pie de página tenés que agregar el siguiente código en la hoja de estilos del tema hijo (lo más recomendable), o en el recuadro CSS personalizado de las opciones de Divi:
#main-footer { position: fixed; right: 0px; left: 0px; bottom: 0px; }Espero que te sirva. Saludos 🙂
Genial! Muchas gracias me sirvio muchisimo!
Saludos y de nuevo muchas gracias!