Plugins y algunos trucos para WP

Añadir un botón de volver atrás – WordPress

¿Cómo añadir un botón o enlace de volver atrás en nuestra web? No hará falta ningún plugin para eso, ya que es mucho más sencillo de hacer.

En este caso no importa si es un WordPress o Joomla, o simplemente un HTML.

Usaremos una función de Javascript llamada javascript:history.back() con lo que haremos un enlace que nos vuelva a la página anterior que estábamos navegando.

Código para poner como enlace:

<a href="javascript:history.back()"> Volver Atrás</a>

Código para generar un botón por defecto:

<input type="button" onclick="history.back()" name="Texto volver atrás" value="Texto volver atrás">

El resultado sería algo como esto:

 
Como se ve, al ser HTML se puede poner donde queramos, aumentando la navegabilidad de nuestra web.


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 🙂


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