En este post vamos a ver cómo hacer que se muestren o no los iconos de redes sociales en el header y en el footer con la plantilla Divi. Así como la manera de añadir iconos de redes sociales diferentes a Facebook, Twitter y Google +
COMPRAR DIVI BOOSTER
Veremos como añadir nuevos iconos de redes sociales con un plugin y añadiendo código. La ventaja del plugin es que lo instalas configuras y te olvidas, mientras que con el código tendrás que volverlo a añadir cada vez que actualices Divi.
Además con el plugin podrás añadir hasta 160 iconos de redes sociales diferentes, mientras que con el código nos tendremos que limitar a las más conocidas.
Ahora 20% de descuento Plantilla DIVI
->PLAN YEARLY ACCESS: El plan Yearly Access incluye la plantilla Divi + Plantilla Extra +3 plugins.
Este es un plan de renovación anual. Es decir, para seguir disfrutando de las novedades de Elegant Themes debes renovar el plan de año en año. La licencia te permite usar cualquier plantilla o plugin de Elegant Themes en todas las páginas web que quieras. El precio de este plan es de 89$ + IVA, pero con el descuento del 20% se te quedará en 70 $ + IVA
NOTA: Si al final de un año no renuevas el plan Yearly Access, podrás seguir utilizando perfectamente tu plantilla en las webs que la hayas instalado. Pero, no podrás actualizarlas.
Nota: Si compras desde América (México, Colombia, Argentina, etc) no se te aplicará IVA. Es decir, el precio final será de $70 con el descuento ya aplicado.
DESCUENTO 20% PLAN YEARLY ACCESS
->PLAN LIFE TIME ACCESS: El plan Yearly Access incluye la plantilla Divi + Plantilla Extra + 3 plugins.
Este plan se paga una única vez. Es decir, NO hay que renovarlo de manera anual. Podrás disfrutar de los recursos de Elegant Themes de por vida. La licencia te permite usar cualquier plantilla o plugin de Elegant Themes en todas las páginas web que quieras. El precio de este plan es de 249$ + IVA, pero con el descuento del 20% se te quedará en 199$ + IVA
NOTA: Si contratas el plan Life Time Access, en 3 años habrías amortizado el coste de renovaciones del plan Yearly Access
Nota: Si compras desde América (México, Colombia, Argentina, etc) no se te aplicará IVA. Es decir, el precio final será de $199 con el descuento ya aplicado.
DESCUENTO 20% PLAN LIFE TIME ACCESS
DISFRUTA DE TODOS MIS CURSOS PREMIUM POR SOLO 10€/MES
ÍNDICE DEL POST
- 1.- MOSTRAR ICONOS DE REDES SOCIALES EN LA PLANTILLA DIVI
- 2.- AÑADIR NUEVAS ICONOS DE NUEVAS REDES SOCIALES EN DIVI
- 2.0.- Añadir redes sociales utilizando el plugin Divi Booster
- 2.1.- Añadir los iconos de redes sociales a Divi a través de Código
- 3.- COMO PONER LOS ENLACES DE LOS ICONOS DE REDES SOCIALES COMO NOFOLLOW
- 4.- COMO PONER LOS ENLACES DE LOS ICONOS DE REDES SOCIALES PARA QUE SE ABRAN EN UNA NUEVA PESTAÑA
La plantilla Divi por defecto nos permitirá mostrar las redes sociales de Twitter, Facebook y Google +. Para añadir otras redes sociales tendremos que modificar un archivo de la plantilla que veremos en el punto 2.
En primer lugar vamos a ver cómo configurar estas tres redes sociales desde el panel de administración de WordPress.
CURSO ONLINE WORDPRESS + DIVI 3.0
Para configurar las redes sociales en la plantilla Divi iremos a: “panel de administración > Divi > Opciones del tema”.
De las diferentes pestañas que aparecen nos quedamos en la pestaña: “general” y haremos scroll hasta llegar a la etiqueta: “Mostrar icono de Facebook”.
Opciones de configuración de Redes Sociales en la plantilla Divi
Las opciones que tenemos son las siguientes:
- Mostrar icono de Facebook: con este selector activamos o desactivamos la visualización del icono de Facebook en la plantilla wordpress Divi.
- Mostrar icono de twitter: con este selector activamos o desactivamos la visualización del icono de Twitter en la plantilla.
- Mostrar iconos de Google +: con este activamos o desactivamos la visualización el icono de la red social Google +
- Mostrar iconos de RSS: con este selector activamos o desactivamos el icono RSS.
- Dirección perfil de Facebook: Aquí debemos poner la URL de nuestra página de Facebook.
- Dirección perfil de twitter: Aquí pondremos la URL de nuestro perfil de twitter.
- Dirección perfil de Google +: En este campo pondremos la URL de nuestra página de Google +
- Dirección de RSS: Aquí pondremos la URL de los RSS de nuestro blog. Normalmente será http://midominio.com/feed
Para mostrar los iconos de redes sociales en el encabezamiento o header de Divi debemos haber activado y configurado previamente dichos perfiles como he indicado en el apartado 1.1
Ahora iremos a: “panel de administración > Divi > Personalizador de temas > Cabecera y navegación > Elementos de cabecera”. Aquí marcaremos el checkbox con el texto: “Mostrar iconos sociales”. A continuación pulsa el botón “Guardar y publicar”.
Mostrar iconos de redes sociales en el header de la web
Los iconos de redes sociales aparecerán en lo que se conoce como barra de menú secundario. Dicha barra de menú aparecerá situada por encima de la barra de menú principal.
Para mostrar las redes sociales en el footer de la plantilla Divi debemos haber activado y configurado previamente dichos perfiles como he indicado en el apartado 1.1
Ahora iremos a: “panel de administración > Divi > Personalizador de temas > pie > Elementos del pie”. Aquí marcaremos el checkbox con el texto: “Mostrar iconos sociales”. A continuación pulsa el botón “Guardar y publicar”.
Para configurar el color de los iconos de redes sociales iremos a: “panel de administración > Divi > Personalizador de temas > pie > barra inferior”. Aquí tenemos la opción: “Color de icono social” para seleccionar el color de los iconos.
Mostrar redes sociales en el footer de Divi
SUPER DESCUENTO DIVI
Como ya habrás visto desde el panel de administración de WordPress y Divi solo puedes configurar las redes sociales: Facebook, Twitter, Google + y RSS.
Para añadir nuevas redes sociales añadiremos un código en el archivo: social_icons.php o utilizaremos un plugin de pago (19$) Divi Booster, que nos permite añadir más redes sociales sin introducir ningún tipo de código entre otras muchísimas opciones.
Las redes sociales que podrás añadir a tu web realizada con la plantilla Divi modificando dicho archivo de manera directa o utilizando el plugin son:
Pinterest, Linkedin, Tumblr, Instagram, Skype, Flikr, Myspace, Dribble, Youtube y Vimeo
Ya que en el archivo style.css existen los códigos para estos iconos. En caso de querer añadir una red social diferente a estas, habría que añadir también su código en el archivo CSS.
Si hacemos la modificación de código de manera manual, cada vez que actualicemos la plantilla Divi tendremos que volver a hacer la módificación de código. Por el contrario, si utilizamos el plugin para añadir redes sociales a Divi nos olvidaremos ya que no tendremos que hacer nada más aunque actualicemos Divi.
El plugin Divi Booster sirve para añadir muchas nuevas funcionalidades a la plantilla Divi. Entre estas muchas nuevas funcionalidades está la de añadir nuevas redes sociales.
El plugin tiene un coste de 29$ (aproximadamente 25 €).
COMPRAR DIVI BOOSTER
Una vez instalado y activado el plugin iremos a su configuración. Esto lo puedes hacer desde el menú lateral en: «Divi > Divi Booster» o ir a «Plugins > Plugins instalados» y en Divi Booster hacer clic en «Settings»
En el primer apartado de la configuración del plugin «Site-wide Setting» y en el sub apartado «Icons» se desplegarán las opciones para añadir nuevos iconos de redes sociales a Divi.
Marca la opción: «Add more social media icons (enter URL)» y añade las urls de las redes sociales que quieras añadir a la web.
Si quieres que los enlaces de los iconos de redes sociales se abran en una nueva pestaña marca la opción: «Open social media icons links in a new tab»
Baja a la parte inferior de la página y guarda la configuración (Guardar cambios).
Plugin Divi Booster para añadir iconos de redes sociales a Divi
Si quieres añadir una red social diferente a las anteriores, no hay problema con Divi booster tienes 160 iconos más de redes sociales. En este post puedes ver el proceso para añadir alguna de esos 160 iconos de redes sociales
Éstos los puedes añadir desde aquí: «Divi > Personalizador de temas > Divi Booster > Social Media Icons”
SUPER DESCUENTO DIVI
2.1.1- ¿Qué código hay que añadir?
Te pongo el ejemplo para Linkedin:
<li class="et-social-icon et-social-linkedin"> <a href="http://in.linkedin.com/in/yourusername" class="icon"> <span><?php esc_html_e( 'LinkedIn', 'Divi' ); ?></span> </a> </li>
Te pongo otro ejemplo para Youtube:
<li class="et-social-icon et-social-youtube"> <a href="http://youtube.com/u/yourusername" class="icon"> <span><?php esc_html_e( 'YouTube', 'Divi' ); ?></span> </a> </li>
Otro ejemplo para Pinterest:
<li class="et-social-icon et-social-pinterest"> <a href="http://pinterest.com/yourusername" class="icon"> <span><?php esc_html_e( 'Pinterest', 'Divi' ); ?></span> </a> </li>
Otro ejemplo para Instagram:
<li class="et-social-icon et-social-instagram"> <a href="http://www.instagram.com/yourusername" class="icon"> <span><?php esc_html_e( 'Instagram', 'Divi' ); ?></span> </a> </li>
Como puedes ver hay un patrón entre los diferentes códigos:
a.- Primera línea: en la primera línea de código siempre aparece la clase: et-social-icon y debemos añadir una clase específica para cada red social:
Pinterest: et-social-pinterest
Linkedin: et-social-linkedin
Tumblr: et-social-tumblr
Instagram: et-social-instagram
Skype: et-social-skype
Flikr: et-social-flikr
Myspace: et-social-myspace
Dribbble: et-social-dribbble
Youtube: et-social-youtube
Vimeo: et-social-vimeo
b.- Segunda línea: en la segunda línea de código debemos añadir la URL de la red social. Irá entre comillas. href=”URL de la red social”
c.- Tercera línea: en la tercera línea hay que introducir el nombre de la red social en mayúscula. Por ejemplo:
php esc_html_e( ‘Pinterest’, ‘Divi’ );
2.1.2.- ¿Dónde hay que añadir el código?
Ya hemos visto el código que tenemos que añadir dependiendo de la red social que queramos añadir a la web.
Ahora vamos a ver dónde tenemos que introducir dicho código.
Podemos acceder a los archivos de nuestro WordPress a través del CPanel o panel de administración del hosting en caso de estar alojado con Webempresa que es el hosting que recomiendo. También podemos acceder a los archivos de la web vía FTP. También puedes utilizar el editor de código de WordPress que lo tienes en: «panel de administración > Apariencia > Editor»
El archivos a modificar se denomina: “social_icons.php” y para acceder a el debemos seguir la ruta: “public_html > wp-content > themes > Divi > includes > social_icons.php”
Una vez localizado el archivo debemos editarlo con un editor de código y añadir el código de la red social al final del archivo. Ojo, al final pero antes de la etiqueta </ul>.
Modificando el archivo social_icons.php
Una vez realizado los cambios recuerda guardarlos.
SUPER DESCUENTO DIVI
Para que los enlaces de las redes sociales sean de tipo nofollow debemos añadir el atributo rel=”nofollow” en el código. El atributo se añade a la etiqueta <a> que es donde se establece el enlace.
Por ejemplo:
<a href="https://www.youtube.com/channel/UCYdEAbC7JrC8fBt8OoDwoJQ" class="icon" rel="nofollow">
DESCUENTO DIVI + REGALO CURSO
Para que los enlaces de los iconos de las redes sociales se abran en una nueva pestaña debemos añadir el atributo target=»_blank». El atributo se añade a la etiqueta <a> que es donde se establece el enlace.
Por ejemplo:
<a href="https://www.youtube.com/channel/UCYdEAbC7JrC8fBt8OoDwoJQ" class="icon" target="_blank">
Soy Blogger y formador profesional. Me gustaría que este blog te sirviera para conocer más de cerca el mundo del diseño web y de WordPress. Mi proyecto online es una plataforma de formación online tipo membership site, denominada cursotiendaonline.com donde podrás acceder a todos los cursos por solo 10 €/mes
Hola!!
He conseguido hacer aparecer el icono de LinkedIn copiando el código pero no sé como vincular ese icono a mi perfil.
Grácias!!
Buenas Marc,
En el código para el icono de Linkedin, la parte:
"http://in.linkedin.com/in/yourusername"es la que tienes que sustituir por la url de tu página de linkedinMe gustaría también invitarte a que eches un vistazo a mi plataforma de formación https://cursotiendaonline.com/ desde donde puedes Acceder a TODOS mis cursos online por solo 10 €/mes (Incluye ¡¡SOPORTE!!). En la plataforma tienes cursos sobre WordPress, Curso diseñador web Freelance, Cursos sobre Divi, Curso Woocommerce, Curso como crear una tienda online de éxito, Astra Pro, Elementor, Curso sobre idexación web y alta en google, Flatsome, Cursos sobre SEO, sobre Mailchimp, blog WordPress, etc. etc.
Muchas gracias Joaquín!!
Master lo hice exactamente como ponías y me funcionó a la primera. Agregué el trozo de código y sin problema, mil gracias por tu post! muy util!
Perfecto Sandra.
Por si te interesa y quieres echar un vistazo, aquí te dejo un enlace a mi plataforma de formación: https://cursotiendaonline.com/
Excelente aporte, todo muy bien,
Hola, estoy haciendo un tema divi-child porque cada vez que actualizo pierdo los cambios del social_icons.php pero ahora no se muy bien si debería cargar el archivo en la ruta wp-content/themes/Divi-child/ o si tengo que crear la respectiva carpeta para que sea wp-content/themes/Divi-child/includes y meter el archivo ahí.
Hola Jorge.
En principio debería estar el archivo en el tema hijo con la misma ruta que tiene en el tema principal
Aquí tienes más info sobre los temas hijo o child theme por si te es de interés
Hola amigo gracias por tu post de verdad es muy bueno, todos mis blogs actualmente poseen como tema padre Genesis Framework pero pienso abrir uno e implementare divi en él, tendre en cuenta tu post para añadir los iconos de redes sociales en ese blog 🙂 nuevamente gracias.
Buenas noche.
¿como logro ver los iconos sociales en el encabezado o header en responsive? se pierden en el celular, ademas de la raya azul del menu secundario.
Buenas.
Por defecto no se puede. Habría que hacerlo con el plugin Divi Booster.
En el apartado 4 del siguiente post lo tienes: DIVI BOOSTER PARTE 1: Opciones con Iconos en WordPress y plantilla Divi
También te dejo por aquí un enlace a la página de venta del plugin:
Comprar Divi Booster
Nota: Tras hacer clic en el enlace, haz clic en el botón azul del lateral derecho “$19 – Buy now”
Muchas gracias por la aportación, mas o menos sabía como hacerlo, pero me gusta tener cuidado cuando toco algo de php.
Muy útil el post, bien estructurado y explicado.
gracias Joaquin
En primer lugar agradecerte el post. Está todo muy claro para ponerlo en práctica.
Sólo una duda:
Cuando se hacen los cambios de código en el tema hijo no surten efecto, en cambio si que surten efecto en el tema padre. ¿A qué es debido esto?.
Muchas gracias
Buenas,
En el tema hijo no tienes eses archivo que modificas en el tema padre.
En teoría, si ese archivo estuviera situado en el tema hijo, en la misma ruta de carpetas que en el tema padre, debería funcionar.
Hace ya bastante tiempo estuve probando, pero no di con la tecla.
Buenas, me funcionó la forma manual para el tema hijo. Lo que debes hacer es en el tema hijo q en mi caso se llama Divi Child, crear una carpeta llamada includes y dentro de esa carpeta subir el archivo social_icons.php.
Mi ruta creada queda así: public_html > wp-content > themes > Divi-Child > includes > social_icons.php
Gracias por tu aporte Enoc
un saludo
Hola Joaquin, muchas gracias por toda la valiosa información que compartes. He añadido los íconos y en principio todo bien, pero el de Instagram desaparece cada cierto tiempo y tengo que volverlo a colorcar, de la misma forma pasa con la orden target=»_blank», desaparece cada cierto tiempo. En un principio pensé que era por la actualización constante del tema Divi, pero aún sin actualizarlo pasa lo mismo. ¿A qué crees que se deba?. Muchas gracias de antemano.
Hola Sandra,
Con la actualización de Divi, desaprece cualquier modificación realizada en la plantilla. No sé, porque te puede desaparecer si no realizas una actualización. Es el primer caso del que tengo constancia
Hola Joaquín, gracias por tu artículo! Me ha sido de gran ayuda pero al activar Facebook y meter la url no me guarda los cambios y no sé por qué….Gracias y un saludo! Leire
Hola Leire,
Imagino que te refieres que no se te guarda la configuración de facebook en «Divi > Opciones del tema». Supongo que si pones otra red social tampoco se te guardará.
Eso tiene pinta de ser un problema de hosting o de algún tipo de incompatibilidad entre plugins o plantilla. ¿Tienes actualizada la plantilla?
Estimado Joaquín.
Primero agradecerte por este buen aporte. He realizado los pasos y he logrado instalar el ícono de LINKEDIN. Solo un detalle, que estoy haciendo mal? Lo digo porque mientras estoy con el Panel de Administración de mi Web abierto (de WordPress), al abrir mi web en otra pestaña del navegador se visualiza el icono de LINKEDIN, pero cuando cierro mi sesión y vuelvo a cargar mi página Web entonces el icono ya no aparece. Volví a ingresar a mi sesión (panel de administración) y sin tocar nada, vuelvo abrir mi web en otra pestaña, entonces si se ve el icono. Podrías ayudarme.
Saludos desde Lima, Perú.
Hola Fidel,
Lo que me comentas es raro de narices. Supongo que será algo relacionado con la caché de algún plugin que tengas, caché de navegador o algo por el estilo. Veo que ahora si se muestra el icono ¿verdad?
Ya sabes también que existe un plugin para añadir cualquier red social y al actualizar la plantilla no habrá que volver a añadirlo: Plugin Divi Booster para añadir iconos redes sociales
En Booster se puede poner nuevas redes con iconos que tu mismo subas o solo se añaden con los iconos predefinidos de DIVI.
Muy buenas,
No se pueden añadir iconos personalizados, pero tienes hasta 160 iconos de redes sociales predefinidas a parte de las habituales (Apartado 1.1.2 de la entrada de blog)
HOLA , RECIEN COMPRE EL PLUGIN, Y TODO OK , SOLO QUE NO PUEDO CAMBIAR LOS ICONOS DE REDES SOCIALES EN LA CABEZERA DE LA WEB , PUES NO ESTA PUESTO CON ANUNCIO , SIMPLEMENETE OCUPE DIVI PARA DEJARLOS ARRIBA , ME DAS ALGUN LINK DONDE SE EXPLIQUE COMO CAMBIARLOS , PUES AHORA ESTAN AMBOS DE COLO BLANCO , MIL GRACIAS Y MUY BUEN PLUGIN FELICITACION
NOTA: NO TE AGREGO LA WEB PUES LA ESTOY CONFECCIONANDO EN LOCAL PRIMERO
Buenas,
me imagino que te refieres al plugin Divi Booster.
En este post puedes ver como añadir nuevos iconos de redes sociales con Divi Booster: iconos redes Divi booster
Para cambiar algún aspecto de diseño, lo debes hacer desde «Divi > Personalizador de temas > Cabecera y navegación > Barra de menú secundario»
si que funciona, y super agradecido, pero….
necesito agregar un icono de Tripadvisor, y no se como se podria cambiar el icono??? hay alguna manera? muchas gracias por todo.
Buenas,
yo utilizaría el plugin Divi Booster (que tiene la posibilidad de añadir ese icono): iconos divi booster
Hola Joaquín,
Cómo podría cambiar el orden de los iconos?, me gustaría poner el de rss al final y las redes sociales juntas.
Saludos
Buenas,
no hay ninguna opción para cambiar el orden en que se muestran las redes sociales,
ni utilizando Divi Booster
y por código se podría?, si es así, sabes de algún sitio donde lo expliquen?
Puedes a intentar cambiar el orden en el archivo
includes/social_icons.php
Pero, eso creo solo te valdrá para los iconos que vienen por defecto en Divi, no para los que se añadan con Divi Booster.
No he encontrado documentación al respecto ni en español ni inglés
Muchas GRACIAS Joaquín
Hola Joaquin!
Excelente post, llevaba tiempo buscando algo como esto para poder añadir más icono en mi plantilla divi. Lo he realizado a través de código y el problema es que instagram no me funciona. Me redirige a instagram y me indica página no encontrada. He probado con otros usuarios a ver si era problema del perfil pero siempre da fallo. ¿Hay que poner el usuario de alguna forma especifica?
Espero que puedas ayudarme. Muchas gracias 🙂
Buenas,
cuando copias una url y la pegas a veces se añade una coletilla a la url (compruebalo), es necesario que escribas todo el código (no copies y pegues).
O puedes usar el plugin Divi Booster y olvidarte,
ya que recuerda que cada vez que actualices Divi tendrás que volver a añadir el código mientras que con Divi Booster quedará para siempre.
Un saludo
Antes de nada felicitarte por tan buen contenido. Tengo la siguiente duda, hay la posibilidad de poner El icono de de la red social y un texto.
1- «Icono Facebook» + «Somos Únicos»
2- «Icono Twitter» + «Síguenos»
Quiero hacer esto en el modulo de redes sociales pero solo me sale el texto «SEGUIR» ese texto quiero modificar por uno propio.
Saludos,
Hola Grover,
No, no hay ninguna opción en el módulo «medios sociales» para modificar el texto del botón «Seguir» por otro texto diferente,
lo que podrías hacer es utilizar el módulo anuncio y poner los iconos de las redes sociales que quieras con el texto que quieras, recuerda elegir en «Ubicación de la imagen o el icono: aquí seleccionaremos si queremos que el icono aparezca encima del título o lateralmente (debes seleccionar lateralmente)».
Si quieres añadir algún icono que no esté entre los que hay en la biblioteca puedes usar el plugin Divi Booster: Post Divi Booster iconos
En este post se habla sobre este módulo: módulo anuncio divi
buen dia tengo una duda como puedo vincular mi cuenta de skype con el botón de de la red social
Buenas,
mira a ver si este enlace de skype para botones te sirve de ayuda
Hola Joaquin,
Gracias por el articulo, esta muy bueno. Que plugin utilizas para personalizar tu box de newsletter? Colocando la imagen de la guía descargable y eso?
Saludos!
Hola Daniela,
utilizo un plugin que se llama Magic Action Box, pero lo cierto es que es un plugin que está ya muy desfasado. Llevo mucho tiempo con el pensamiento de pasarme a Boom el plugin de Elegant Themes, lo que pasa es que no he tenido tiempo para hacerlo. Bloom tiene muchísimas más posibilidades de diseño, es más fácil de configurar, tienes más modelos de caja, etc. Pero aun no me he puesto con ello.
Claro, directo y conciso. Tres ingredientes para la receta de los iconos en el Divi Theme. Muchas gracias!!
Gracias Laura
Muchas gracias por tu post. Explicado fácil y al grano.
Enhorabuena!!
Hola de nuevo: He añadido el icono de Instagram. Lo que no sé es dónde poner la url para enlazarlo a mi red social…Muchas gracias de nuevo!!
Vale, ya lo he encontrado ( no lo había leído bien) pero no encuentra la página. La he copiado tal cual del navegador…
Buenas,
si copias la url directamente del navegador se copiará una coletilla en el enlace,
tienes que escribir la url y yo te recomiendo que lo hagas con todo el código sin copiar y pegar.
Puedes ver esto en otros comentarios en este post
Un saludo
Buenas,
en cualquiera de los códigos, como por ejemplo este:
a href="http://in.linkedin.com/in/yourusername" class="icon" target="_blank">tienes que sustituir el contenido del atributo href
Hola.
Muchas Gracias por compartir tu trabajo.
El código funciona perfectamente.
Un saludo
Muchas gracias Joaquin.
Me ha resultado tremendamente útil tu artículo y no podía estar mejor explicado.
Hola Marta,
muchas gracias, me alegro te haya sido de utilidad el post para añadir redes sociales a web con Divi
Joaquín.
Quería preguntarte algo. ¿Cómo sería posible que la red en cuestión se abriera en otra pantalla? Para que el usuario no tenga que salirse…
¡Muchas gracias!
Hola Marta,
para que el enlace de la red social añadida se abra en una nueva pestaña, tendrás que añadir el código (al enlace):
target="_blank"Por ejemplo, en el icono red social de linkedin, la linea de código del enlace tendría que quedar así:
a href="http://in.linkedin.com/in/yourusername" class="icon" target="_blank">Un saludo
Hola!! Mil gracias por este artículo, me ha salvado la vida!! He añadido target=»_blank»> donde has indicado pero se me continúan abriendo en la misma ventana…
Hola Laia,
no estará bien copiado o en lugar correcto,
ese es el atributo que hay que añadir a un enlace para que se abra en una nueva pestaña como puedes ver en este enlace sobre html
Hola Joaquin.
Tu pagina si que tiene mucha información de ayuda. primeramente felicitarle por estas publicaciones de gran ayuda.
Ahora. Como poner los enlaces de los iconos de redes sociales para que se abran en una nueva pestaña pero para el Tema EXTRA de ElegantThemes.
Saludos y Gracias por tu ayuda de antemano.
Hola Jhas,
La única opción es modificando el código de la plantilla EXTRA, pero no he encontrado nada en la red para hacer que los enlaces de iconos de redes sociales se abran en una nueva pestaña.
También he estado echando un vistazo en los archivos de la plantilla EXTRA y no he dado con la tecla. Seguramente será el archivo et-social-followers.php, pero no he encontrado el lugar donde modificar el código.
Si encuentro alguna solución lo publicaré.
Un saludo
Hola! No sabes cómo me ayuda tu blog…gracias!! He añadido el código para instagram y ya me aparece el icono, pero no sé cómo introducir el link para que al clicar aparezca mi página de instagram…Gracias!!
Hola Laila,
en la línea de código tienes que cambiar la url estándar
http://www.instagram.com/yourusernamepor tu url de instagram
Un saludo
Hola Joaquín
Yo tampoco `puedo incluir el el fichero de social_icons en el tema hijo y es engorroso tener que copiarlo cada vez que se actualiza el tema.
Una consulta, Tengo un menú vertical y quiero añadir los iconos sociales como un elemento de menú y no veo como hacerlo. ¿Alguna idea?
Gracias y un saludo.
Hola Manel,
Si, lo de añdir el código de los iconos cada vez que se actualiza el tema es un follón, estoy estudiando una manera de solucionarlo. Cuando lo tenga lo publicaré modificando esta página. Si estás suscrito al blog, serás avisado.
En cuanto a añadir iconos a un menú, mira a ver este enlace a ver si te sirve: añadir iconos
Un saludo
Muchas gracias me a servido tu tutorial
Gracias Funseg,
un saludo
Hola, muchas gracias por tu artículo, me ha ayudado muchísimo.
He probado de mil formas, incluida copiar a mano en el editor de wordpress, el código para enlazar con instagram, pero al pinchar me redirecciona, como comentaban, con el final %E2%80%8E/
¿Hay alguna otra forma de solucionarlo?
Muchas gracias!
Hola Belén,
A mi me pasó el otro día que aunque ponía la url directamente me añadía la coletilla. Decidí añadir directamente todo el código correspondiente a la red social que quería añadir y ya no me salía la coletilla.
Existe un plugin que se llama Divi Booster y que según tengo entendido permite añadir nuevas redes sociales a Divi, pero lo cierto es que nunca lo he usado.
Te dejo el enlace por si te interesa:
https://divibooster.com/divi-booster-plugin-features/
Un saludo
Enhorabuena.
Estupenda tu píldora de conocimiento.
Muchas gracias.
Ole! funciona!
ole ole!!!
Muy bueno!
Gracias
Hola!!
Gracias por el artículo, ya tengo el icono de Instagram (aunque el antiguo) pero me pasa igual que a algún otro lector. Aunque lo he escrito manualmente, me añade una coletilla en el enlace y da error la URL…
Lo que añade es : %E2%80%8E
Gracias!!
Hola Lydia,
Que raro, es cierto que cuando copio la url desde el navegador y la pego en el editor me agrega la coletilla que dices a la Url. Pero cuando escribo la url directamente en el editor no me pone coletilla ninguna y me funcionan los enlace perfectamente. ¿Qué editor de código estás utilizando para hacer las modificaciones de código? a mí con el Notepad++ (vía FTP) me funciona fenomenal ¿o estás usando el editor de wordpress?
Un saludo
Hola! primero que nada: feliz año!
2do: que maravilla haber encontrado tu página
3ero: me pasa lo mismo que a Lydia, lo hice directamente en wordpress. Le coloqué al final un /, pero me sigue arrojando hacia instagram pero con este enlace:
https://www.instagram.com/marcacraft%E2%80%8E/De antemano gracias por tu respuesta
En vez de:
https://www.instagram.com/tunombre/Copia:
https://www.instagram.com/tunombreLo he solucionado quitando la barra final
Ana,
muchas gracias por tu apunte.
Un saludo
Listo!!! he encontrado en el forum de DIVI la respuesta, lo probé y me sirvió así que por supuesto, la dejo por aquí para quien le sirva, en que cambia? no se porque estos temas me cuestan un mundo. Uds. los expertos sabrán la razón 🙂
el código vendría a ser:
https://instagram.com/username/
Hola Caribay,
mi recomendación es copiar el código completo directamente a mano (no copiar y pegar). Ya que cuando se copia y se pega es cuando aparecen esa coletilla.
Un saludo
Gracias!
Buenas Joaquin, mi pregunta, es necesario hacer algo mas para que funcione? por que copio el codigo exactamente igual en el archivo social_icons.php y me cambia unos valores en la url por lo que no me permite acceder
Hola Miguel,
La url de la red social no la copies y pegues. Escribe la url directamente en el archivo social_icons.php
Un saludo
Hola Joaquin, excelente articulo. Dime una cosa un cliente me dice que ese no es el icono actual de Instagram y efectivamente no es. De que manera podemos cambiar la img del icono para que sea la correcta?
Muchas gracias por tu respuesta.
Saludos desde Lima, Perú.
Hola Adrián,
Ve al archivo style.css del tema Divi y verás que hay una serie de lineas que hacen referencia a cada icono, por ejemplo el de facebook es:
.et_pb_facebook_icon:before {content: "\e093";
}
Creo que el código que hay en content, en este caso \e093 es el icono que corresponde a facebook. Mira en internet a ver si encuentras el código actualizado de la red social que estás buscando y haz una prueba
Un saludo
Muchas gracias Joaquin, voy a probar lo que me explicas y te cuento como me va.
Saludos.
Adrián
Hola Joaquín:
¿Cómo puedo cambiar los créditos del footer con la nueva plantilla (3.0)?.. Cuando accedo al pie de página (editor) no lo veo como en plantillas anteriores.
Gracias,
Hola Alfredo,
En Divi 3.0 no hace falta modificar el código de la plantilla para modificar los créditos. Se pueden personalizar desde el panel de administración de WordPress. Para ello solo debes ir a: Divi > Personalizador de temas > Pie > Barra inferior
Un saludo
Hola Joaquin hay alguna forma de colocar el icono de Behance? por que con cambiarle solo el nombre no resulta
Hola Luis,
el icono de Behance no está disponible.
Yo lo que haría es poner un item de menu con el texto «Behance» con un enlace a la página de la red social en la barra de menú secundario. Lo mismo que tengo yo en mi web con un texto: «¡DESCUENTO PLANTILLA DIVI!» pero con «Behance»
Un saludo
Hola Joaquín. Antes de nada gracias por tu blog.
Me gustaría poder añadir también nuevos iconos al módulo «persona» pues sólo trae por defecto los cuatro que venían en social-icons.php.
¿Sabrías cómo se hace?
Saludos
Hola Jesús,
Aquí te dejo un post donde da instrucciones para añadir el icono de Instagram en el módulo «persona» del Divi builder.
Un saludo
Gracias Joaquín.
Hola de nuevo Joaquin lo realice el cambio del código como lo indicas copio la dirección de mis perfiles en las redes tal cual … pero al dar clic sobre el botón este cambia algunos de los caracteres de la URL de la red social , lo que provoca que no pueda acceder a mi perfil. Tienes alguna idea de como se pueda solventar el inconveniente?
Hola Jesús,
Sucede que si copias del navegador la url de la red social y luego la pegas, al guardar aparecen unos caracteres adicionales que hacen que el enlace no funcione correctamente. Para solucionarlo debes escribir directamente en el editor de código la url de la red social (no copiar y pegar).
Un saludo
Hola, para añadir a un tema hijo de divi es el mismo procedimiento? o se debe copiar la carpeta «includes» en la carpeta del tema hijo?
Hola Jesús,
Lo suyo sería añadir la carpeta «includes» pero hace tiempo lo probé y no me funcionó correctamente. Por lo que a día de hoy sigo el mismo procedimiento a pesar de trabajar con temas hijo o child themes. El inconveniente es que cada vez que se actualice la plantilla Divi hay que volver a realizar la operación para añadir iconos de redes sociales específicos.
Un saludo
hola intente agregar el icono de instagram como lo explicas pero al guardar y actualizar la página no me realiza el cambio, estoy usando este código
saludos
Hola Yoselin,
Imagino que no estarás poniendo el código de Instagram correctamente. Un poco más arriba, en el apartado 2.1 he puesto el código que has de añadir para que aparezca la red social Instagram en la plantilla Divi.
Un saludo
Hola, he utilizado tu código con los enlaces personalizado pero al hacer click en lo iconos me cambia algunos caracteres de la url del link y me dice que el canal o perfil no existe. A que se puede deber? Un saludo
Hola Ana,
No se muy bien a que te refieres. Pero la url de destino del enlace de cada icono lo debes configurar en el módulo «Anuncio» y no en el código CSS. El código CSS solo es para la parte estética.
Un saludo
El código pongo el mismo, pero al clickar para que se abra, añade al final de la url esto: %E2%80%8E y por tanto sale como que no existe el usuario. Supongo que se refiere a esto. Un saludo
Hola Jorge,
no copies y pegues la url, intenta escribirla directamente.
Un saludo