Plugins y algunos trucos para WP
Viendo actualmente:divi

Divi: Mostrar iconos de redes sociales en Movil-Responsive

Como ya sabreís en DIVI nos permite habilitar un header secundario donde mostrar el teléfono y el mail, además de los iconos de las redes sociales. A la derecha también se mostraría nuestro menú secundario. Es muy útil cuando nuestra web tiene muchos apartados y nos ayuda a mostrar toda la información.

¿Pero qué ocurre en responsive? cuando lo vemos en nuestro terminal móvil, sólo vemos el teléfono y el mai, pero desaparecen los iconos de las redes sociales.

¿Cómo mostrar los iconos de redes sociales en DIVI en versión móvil? Como casi siempre recurriremos al CSS:

 

@media only screen and (max-width: 767px) {
    div#et-secondary-menu { 
		display: block !important; 
		margin-top: 0px !important;
		padding-top: .75em;
	} 
	#et-secondary-menu>div.et_duplicate_social_icons>ul>li a {
		display: block;
		padding-bottom: .75em;
	}
}

@media only screen and (min-width: 768px) and (max-width: 980px) {
	div#et-secondary-menu { 
		display: block !important; 
		padding-top: .75em; 
    } 
}

Con esas lineas tendremos justo debajo ese menú que ha desaparecido, además si es tienda online aparecerá el carrito de woocomerce.

Un ejemplo del resultado:

 

Extraido de https://divibooster.com/show-divi-header-social-icons-on-mobiles-divi-2-4/

 

—————–ACTUALIZACIÓN—————

Trasteando un poco, he visto que es mucho más fácil hacer esto otro:

@media only screen and (max-width: 767px) {
   #et-info .et-social-icons {
    display: initial;
}
  }

Sobre todo si por ejemplo no tenéis puesto el teléfono, ya que queda más integrado en solo una linea. El ejemplo de arriba es para repartir más la información, creando dos filas. Todo depende de la cantidad de información que queráis mostrar.

 


Error al entrar en admin de WordPress theme-builder.php on line 38

Como cada més hago mis mantenimientos en las webs de WordPress que gestiono. Pero esta vez hay una que me ha dado un buen susto. Al entrar al administrador, me ha dado este error tan «contundente»:

ET_THEME_BUILDER_HEADER_LAYOUT_POST_TYPE – assumed ‘ET_THEME_BUILDER_HEADER_LAYOUT_POST_TYPE … wp-content/plugins/sitepress-multilingual-cms/compatibility/divi/theme-builder.php on line 38

Más que un error, es una advertencia, pero suficiente para que no me deje acceder a mi panel de WordPress de administración para hacer ninguna acción. La página funcionaba pero la parte de administración totalmente inoperativa.

Por suerte este error es muy descriptivo y como se desprende de su lectura, se trata de una incompatibilidad entre nuestro plugin de traducción WPML y nuestra plantilla DIVI.

Así que nos ponemos a darle una solución que ha sido más rápida de lo esperado:

1-Entramos por FTP a nuestra web y buscamos la carpeta de plugins, renombramos las carpeta principal del pluguin de WPML. (De esta manera buscamos deshabilitar este plugin)

2-Con este paso ya podremos entrar a nuestro panel de control de Wordpres, eso si, veremos que el plugin de idiomas está desactivado. Actualizamos todos los pluguins pero sobre todo el TEMA DIVI a la última versión.

3-Volvemos a renombrar la carpeta del servidor, y activamos en nuestro panel el plugin.

¡SOLUCIONADO! ¿Te ha pasado esto mismo a ti? déjame un comentario….:)

 


Cómo forzar a DIVI a mantener 2 columnas en modo responsive

Ya estamos aquí de nuevo para solucionar una limitación de DIVI, que como ya sabemos todos, es una gran plantilla para wordpres, pero que tiene sus pequeños inconvenientes.

Cuando por ejemplo, tenemos una sección con 4 columnas, en versión responsive, una vez llegado a la resolución más pequeña, la de móvil, todo se transforma en una columna. Pero esto a veces no es práctico, por ejemplo cuando tenemos una sección con 4 columnas que son iconos. En móvil es muy incómodo tener los 4 iconos uno debajo de otros. ¿Cómo lo solucionamos? pues como casi siempre, con CSS.

Paso 1. Generamos el siguiente CSS en nuestra plantilla general:

@media only screen and (max-width: 479px) {
.dos-columnas .et_pb_column { width: 50%!important; }
}

Y luego aplicamos esta Clase CSS en nuestra FILA de esta manera:.


Como veis en este caso, las columnas quedan ajustadas de dos en dos, que es lo que queremos en este caso.

 

 


Transformar Contact Form 7 al estilo DIVI

Contact Form 7 es un plugin fantástico para gestionar todo tipo de formularios de contacto, pero francamente, es muy feo estéticamente hablando. Hay multitud de plugins que retocan los css necesarios para darle un estilo más bonito pero en nuestro caso buscamos algo más concreto.

Estamos usando el tema DIVI para maquetar, y queremos hacer que el formulario de contacto generado con el plugin Contact Form 7 tenga un aspecto lo más similar posible a los formularios generados por el tema DIVI.

Simplemente añadiremos este código CSS:

.wpcf7-text, .wpcf7-textarea, .wpcf7-captchar {
    background-color: #eee!important;
    border: none!important;
    width: 100%!important;
    -moz-border-radius: 0!important;
    -webkit-border-radius: 0!important;
    border-radius: 0!important;
    font-size: 14px;
    color: #999!important;
    padding: 16px!important;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.wpcf7-submit {
    color: #2d81eb!important;
    margin: 8px auto 0;
    cursor: pointer;
    font-size: 20px;
    font-weight: 500;
    border-radius: 3px;
    padding: 6px 20px;
    line-height: 1.7em;
    background: transparent;
    border: 2px solid;
    -webkit-font-smoothing: antialiased;
    transition: all 0.2s;
}
.wpcf7-submit {
    float: right;
}
span.wpcf7-list-item {
    line-height: 20px;
  	font-size: 13px;
}

Este código lo podemos poner en las propiedades de la propia página donde esté puesto el formulario de contacto, o bien en el CSS general de la web.

El resultado es sin duda espectacular 🙂


Añadir icono de Instagram a plantilla DIVI

¿Qué bonita es nuestra plantilla DIVI verdad? Aunque siempre tiene cosas que mejorar. ¿Cómo añadir arriba en el header y el footer el icono de Instagram? Lo haremos muy fácil, como no usaremos el de Google +, haremos un cambiazo 🙂

(más…)


Cómo traducir el texto «To view this protected post, enter the password below»

Esta vez me he encontrado en que no sabía cómo traducir el téxto que aparece en las páginas protegidas con contraseña, la frase que sale arriba es:

«To view this protected post, enter the password below»

Si el wordpress está en castellano sale la frase en castallano, pero en mi caso al estar en catalán, seguía saliendo en inglés.

¿Cómo cambio la frase «To view this protected post, enter the password below» ya sea para traducirla o para poner otro texto?

Gracias al foto de Elegant Themes, sólo he tenido que añadir el siguiente código en el header de mi web. (Como uso la plantilla DIVI he accedido desde el panel de control a Divi > Theme Options > Integration > «<head>»

<script type="text/javascript">
(function($) {
	$(document).ready(function() {
		$('.post-password-required .et_password_protected_form > p:first-of-type').html('Introdueix la contrasenya');
		$('.post-password-required .et_password_protected_form form .et_submit_button').html('Envia');
	});
})(jQuery);
</script>

El resultado es instáneo! funcionando de maravilla!


Cuándo mostrar menú responsive en Plantilla DIVI

La plantilla DIVI tiene muchas opciones para poder montar la web a nuestro gusto, pero a veces las cosas más sencillas son las más complejas.

Hace muy poco me pasó con un cliente que tenía el logo muy grande (muy alargado horizontalmente) y el menú era también bastante largo, con lo que habia un momento que según la resolución, el menú se doblaba en dos lineas, haciendo que quedase muy feo:

(más…)


Logo flotante en plantilla DIVI de WordPress

¿Cómo hacer para que el logo de nuestra plantilla DIVI sea flotante?

con este simple truco haremos que nuestro logo se comporte de una manera increible, flotando en la parte superior de nuestra web, sin tener que estar pendientes de que se ajuste a alto del header.

 

Ejemplo de Logo flotante en plantilla Divi de WordPress

Ejemplo de Logo flotante en plantilla Divi de WordPress

Sólo tenemos que ir a personalizar nuestro CSS con la siguientes lineas:
@media only screen and (max-width: 980px) {
#logo {
min-height: 100px;
}
}
@media only screen and (min-width: 981px) {
#logo {
min-height: 120px;
}
}

////Los 100px y 120px los podeís modificar en función del tipo de logo que tengáis y el fondo de la web.

Truco extraido de :

How to Create a Divi Overlapping Logo


¿Cómo traducir las cadenas de texto en el tema DIVI de WordPress?

Como muchos ya sabréis, el tema DIVI de Elegant Themes para WordPress está muy de moda y permite personalizar mucho nuestra web de WordPress. Pero me he encontrado con un pequeño problema que me ha dado algun dolor de cabeza.

¿Cómo traducir las cadenas de texto que vienen en ingles del tipo «read more» o bien «next o previus» de la plantilla DIVI para WordPress?

Como casi siempre mirando en el código fuente por FTP. En concreto en el archivo Divi/includes/builder/main-modules.php

Allí buscaremos las cadenas de texto tipo ( ‘read more’, ‘et_builder’ )  y cambiaremos el read more por lo que sea.

La opción más practica es descargar el archivo main-modules.php, con un editor de texto buscar todas las cadenas para traducir y luego subirlo al servidor de nuevo. Un consejo, antes de subirlo, renombraremos el que viejo por si diese algun error poder volver a restaurarlo.

 


Enlaces de redes sociales en nueva ventana con plantilla Divi

Usando esta gran plantilla DIVI para WordPress me he encontrado con que por defecto, los enlaces a las redes sociales, se abren en la misma ventana, algo que no creo que sea bueno. ¿Cómo se pueden cambiar estos enlaces para que se abran en una nueva ventana?

//////EDICIÓN 2019//////
Mucho más fácil añadiendo este código en vuestra plantilla DIVI – Integración – Añadir al head:

<script type="text/javascript">
    jQuery(document).ready(function($) {
        $(".et-social-icon a").attr('target', '_blank');
    });
</script>

//////EDICIÓN 2019//////

Apariencia -> Editor -> editar el archivo social_icons.php en todas las lineas donde veais:

…class=»icon»>

añadir la etiqueta: target=»_blank»

de forma que quede:

class=»icon» target=»_blank»>

Con esto estará todo solucionado!

De esta manera los enlaces a redesde sociales se abrirán en nueva ventana usando la plantilla DIVI para wordpress.

 

 


Powered by WordPress | Designed by Elegant ThemesPolítica de privacidad