Cómo crear una página de destino de Giving Tuesday con Divi y GiveWP

En caso de que no se haya enterado, nos estamos preparando para comenzar una campaña masiva de Black Friday y Cyber ​​Monday aquí en Elegant Themes. Pero hay otra cosa interesante sucediendo en esta época del año. Se llama Giving Tuesday (este año cae el 28 de noviembre) y es un esfuerzo de las organizaciones sin fines de lucro del mundo para recordarles a todos que si bien tienen sus billeteras para compras personales, es posible que quieran considerar donar a aquellos en Necesito también. ¡Qué idea tan genial! Y dado que estamos en el negocio de empoderar a nuestra comunidad, pensamos que sería una buena idea ayudar a aquellos que usan Divi (o Extra) y trabajan para organizaciones sin fines de lucro a hacer la mejor página de destino de donaciones de Giving Tuesday que están capaz de.

Aquí hay un vistazo rápido a lo que crearemos hoy.

Vista previa del resultado final

En la publicación de hoy crearemos una hermosa página de inicio de Giving Tuesday completa con un formulario de donación visualmente impresionante (y funcional, por supuesto).

Instale el complemento GiveWP y cree un nuevo formulario

El formulario de donación que usaremos en este tutorial es generado por el complemento GiveWP. Para instalarlo, navegue en su administrador de WordPress a Complementos> Agregar nuevo . Allí, use la función de búsqueda para encontrar el complemento Give. Haga clic en el botón "Instalar ahora" y luego actívelo.

A continuación, vaya a Donaciones> Agregar formulario . Ingrese un título de formulario. Elegí “Apoye a sus agricultores locales y agricultura sostenible”.

A continuación, verá las Opciones del formulario de donación. Repasemos pestaña por pestaña.

En la primera pestaña, llamada Opciones de donación, configure los siguientes ajustes en la sección superior.

Opción de donación: donación multinivel

Pantalla de donación: botones

Importe personalizado: habilitado

En la sección Nivel de donación, configure los siguientes niveles de donación: $ 1, $ 5, $ 10, $ 25, $ 50, $ 100. Asegúrese de establecer el nivel de donación de $ 5,00 como su nuevo valor predeterminado.

Ahora pase a la pestaña Visualización de formulario. Lo único que debe hacer aquí es cambiar la configuración de Opciones de visualización a Modal.

En la pestaña Donation Goal, primero habilite la opción Donation Goal. Una vez que haya hecho eso, establezca la cantidad de su objetivo. Puse el mío en $ 1,000. También configuré el formato de objetivo en porcentaje. Esto permitirá a los espectadores saber el porcentaje de nuestro objetivo que hemos cumplido, no la cantidad real de dinero que hemos recaudado. Y finalmente, cambié ligeramente el color de la barra de progreso para que coincida con el mismo verde que se usa en el resto de mi sitio web (# 07c907).

Por último, necesitamos agregar algún contenido de formulario. En la pestaña Contenido del formulario, habilite Mostrar contenido. Luego, agregue algo de texto al área de contenido.

Para los propósitos de este tutorial, esos son todos los ajustes del formulario Dar que necesitamos configurar. Haga clic en el botón Publicar y tome nota del hecho de que necesitará el código corto de este formulario de donación más adelante.

Al configurar este formulario de verdad, también deberá ir a Donaciones> Configuración y configurar cosas como sus pasarelas de pago, correos electrónicos, etc.

Prepare sus activos de imagen

También necesitaremos una imagen de fondo personalizada para nuestra sección de formulario. Por supuesto, esto es opcional, no afecta el funcionamiento del formulario. Pero se ve genial y agrega un bonito diseño vinculado a nuestro ejemplo de mercado de agricultores.

Para crear esta imagen usé Photoshop, pero probablemente también puedas usar un software gratuito llamado Gimp. Es una herramienta de código abierto que tiene muchas de las mismas características.

He aquí cómo crearlo.

Primero, búscate una imagen con elementos relacionados con tu organización sin fines de lucro. Dado que el ejemplo que estoy usando es para un mercado de agricultores, decidí usar verduras. Busqué en un sitio web de imágenes de archivo "vegetales aislados". Normalmente, el término "aislado" en un sitio web de imágenes de archivo se refiere a elementos sobre un fondo blanco. Esto los hace fáciles de aislar al eliminar el fondo. Que es exactamente lo que hice.

Aquí está la imagen que encontré.

Luego abrí esa imagen en Photoshop.

Debido a que la capa inicial está bloqueada de forma predeterminada, duplíquela haciendo clic derecho sobre ella y seleccionando "Duplicar capa". Luego, oculta la primera capa haciendo clic en el icono del ojo que se encuentra junto a ella.

A continuación, use la herramienta Varita mágica para seleccionar todo el espacio en blanco alrededor y dentro de los elementos vegetales. Presione la tecla de retroceso para eliminarlo.

A continuación, navegue en su menú superior a Imagen> Tamaño de lienzo y cambie el tamaño de su lienzo a 1920 × 1080. Cuando hagas esto, es probable que tus elementos sean muy grandes en comparación con tu nuevo lienzo más pequeño.

En su teclado presione comando + T o vaya a Editar> Transformar> Escalar . Cambie el tamaño de la capa de elementos aislados para que se ajuste al nuevo tamaño del lienzo.

Hasta aquí llegaremos en esta imagen por ahora. Simplemente asegúrese de haber guardado este nuevo archivo de Photoshop. Continuaremos hacia abajo una vez que tengamos nuestro nuevo formulario de donación como referencia de tamaño.

Creando el Diseño en Divi

Si aún no lo ha hecho, querrá descargar e instalar nuestro nuevo paquete de diseño de Farmers Market (gratuito). Siga las instrucciones en esa publicación para instalar el paquete de diseño. Una vez instalado, siga las instrucciones de esta publicación de blog para configurar su sitio para la siguiente etapa de personalización, que cubriremos aquí.

Cuando esté listo, navegue a su página Donar y use el botón en la parte superior de la página para habilitar el constructor visual. Lo llevaré sección por sección a lo largo de la página, haciendo personalizaciones a medida que avanzamos.

Dado que estamos preparando esta página para una campaña de Giving Tuesday, probablemente deberíamos mencionarlo en la parte superior. Así que pase el cursor sobre la sección de su héroe y abra la configuración del módulo haciendo clic en el icono de engranaje en los controles del módulo gris.

Luego, mientras todavía está en la pestaña Contenido, desplácese hacia abajo y abra la configuración del enlace. En el título del campo URL del botón # 1, coloque el texto “#donate”. Esto funcionará como un enlace de anclaje al formulario que crearemos a continuación.

Por último, navegue a la pestaña Diseño y abra la configuración de Texto del subtítulo. Establezca el Peso de la fuente del subtítulo en negrita.

La primera sección ahora está completa. Desplácese hacia abajo hasta la tercera sección (la que tiene una cita grande) y haga clic en el ícono de ajustes en los controles de la sección azul. Establezca el color de fondo en # F6F6F6.

A continuación, abra la configuración del módulo para el módulo de texto de cotización. Cambie el fondo de eso a # F6F6F6 también.

Esta sección ahora también está completa. Pase a la cuarta sección inmediatamente debajo de ella. Esta es nuestra sección de formulario de donación.

Como esta sección existe en el paquete de diseño, es más una sección de "compromiso" donde las personas pueden usar el formulario de contacto para enviarle un compromiso de cuánto pretenden dar. Pero lo convertiremos en un formulario de donación real en el que podamos aceptar dinero directamente.

Comencemos con la configuración de la sección y trabajemos en ella. Primero, necesitamos cambiar el color de fondo. Ajústelo al mismo # F6F6F6 que en la sección anterior.

Luego, en la sección Diseño pestaña, abra las opciones de Espaciado. Agregue el siguiente relleno personalizado:

Superior: 250 px

Derecha: 40px

Abajo: 250px

Izquierda: 40px

Por último, mientras aún se encuentra en la configuración de la sección, navegue a la pestaña Avanzado y abra los controles de ID y clases de CSS. Debajo de CSS ID escriba la palabra "donar".

Guarde su nueva configuración.

Ahora tenemos que deshacernos de nuestro formulario de compromiso. Se compone de dos módulos de texto y un módulo de formulario de contacto. Continúe y elimínelos. En su lugar, agregue un módulo de texto.

Dentro del nuevo módulo de prueba, coloque el código corto para el formulario de donación que creamos anteriormente. Establezca el fondo en blanco sólido (#ffffff).

Ahora, navegue a la pestaña Diseño. Un secreto poco conocido es que los elementos generados por códigos cortos de terceros se pueden personalizar hasta cierto punto utilizando la configuración de diseño del módulo de texto.

En las opciones de texto, configure los siguientes ajustes:

Tamaño del texto del texto: 18px

Altura de la línea de texto: 1.8em

En las opciones de texto de Encabezado para H2, configure los siguientes ajustes:

Tamaño del texto del encabezado 2: 36px

Altura de línea de rumbo 2: 1.5em

En las opciones de Espaciado, configure los siguientes ajustes:

Relleno personalizado: 50xp (para todos los campos)

Debajo de las opciones de Box Shadow, elija la última opción en la fila superior (en el extremo derecho). Luego configure esta opción:

Fuerza de propagación de la sombra de caja: -2px

Finalmente, en las opciones de Animación, configure estos ajustes:

Estilo de animación: rebote

Dirección de animación: Arriba

Duración de la animación: 800ms

Retraso de animación: 400 ms

Opacidad inicial de la animación: 100%

Cuando haya configurado todos estos ajustes de diseño, guárdelos. Su formulario de donación ahora debería verse así.

Por supuesto, esta es una forma perfectamente aceptable. Pero en mi opinión es un poco aburrido. Hay dos cosas que me gustaría hacer para darle vida. Primero, vamos a hacer coincidir el estilo del botón Donar ahora para que coincida con otros botones Donar en todo el sitio web.

Navegue a las opciones de su tema yendo a Divi> Biblioteca Divi> General Desplácese hacia abajo hasta el cuadro CSS personalizado y pegue los estilos de botón de seguimiento allí:

/*Give Plugin Styles*/

.give-btn.give-btn-modal {
    background: #07C907;
    border: none;
    border-radius: 0px;
    color: #fff;
    padding: 20px;
    cursor: pointer;
    line-height: 1.2em;
    font-size: 18px;
    font-weight: bold;
}

#give-purchase-button.give-submit.give-btn {
    background: #07C907;
    border: none;
    border-radius: 0px;
    color: #fff;
    padding: 20px;
    cursor: pointer;
    line-height: 1.2em;
    font-size: 18px;
    font-weight: bold;
}

Guarde sus cambios y regrese a su página de donaciones. Actualízalo y echa un vistazo a tu formulario. Ahora debería verse así.

¡Ahora estamos llegando a alguna parte! Agreguemos el toque final. La imagen de fondo de la sección que comenzamos a crear anteriormente.

Para completarlo, cambie el tamaño de la ventana de su navegador a 1920 × 1120. Puede utilizar un sitio web como whatsmybrowsersize.com.

Luego, tome una captura de pantalla de su página de donación con nuestro nuevo formulario centrado en ella. Debe tener un aspecto como este.

Abra esta nueva captura de pantalla en Photoshop junto con el archivo de Photoshop que creamos anteriormente.

Utilice la herramienta Marco de rectángulo para seleccionar su formulario. Luego, vaya a Seleccionar> Inverso para seleccionar todo menos su formulario. Elimina tu nueva selección. Ahora debería tener un lienzo con este aspecto.

Ahora tiene una "maqueta de formulario" del tamaño correcto que puede usar como referencia para su imagen de fondo. Con ambos archivos de Photoshop abiertos, arrastre la capa de Photoshop que contiene su forma aislada a su archivo de imagen de fondo.

En su panel de capas, ajuste la opacidad de su capa de formulario al 50%. Luego, con el formulario aún seleccionado, haga clic en el icono de candado y ciérrelo. Ahora debería verse así.

Ahora puede seleccionar su capa de verduras en el panel de capas. Utilice la herramienta Lazo para seleccionar elementos individuales y eliminarlos o reorganizarlos hasta que obtenga la configuración que desee. Mi configuración final se veía así.

Una vez que tengas tu propia configuración final, irás a Archivo> Exportar> Exportar como y elegirás PNG para mantener el fondo transparente.

Ahora podemos agregar esa imagen a la sección Formulario de donación de nuestra página de donación, nuevamente en nuestro sitio web Divi.

Abre la configuración de la sección. En Fondo, deje solo el color que configuramos anteriormente y elija la opción de imagen. Agregue su nueva imagen de fondo aquí. Luego configure los siguientes ajustes:

Tamaño de la imagen de fondo: tamaño real

Posición de la imagen de fondo: Centro

Guarde esta configuración. Su sección de formulario ahora debería estar completa.

Para finalizar completamente su diseño (para que coincida con nuestra vista previa de la página completa desde el principio de la publicación) simplemente cambie los colores de fondo de las secciones restantes de la página para que coincidan con los de la captura de pantalla. Utilizará gris (# F6F6F6) o blanco (#ffffff).

¡Feliz recaudación de fondos!

Con Divi y un complemento tan poderoso como Give, estamos seguros de que sus esfuerzos de Giving Tuesday seguramente serán un gran éxito. Gracias por seguirnos. Si aún desea ayuda con cualquier tema cubierto en este tutorial, realizaré una transmisión en vivo hoy a las 3 p.m. en nuestra página de Facebook y canal de YouTube, donde mostraré todo este proceso en una sola toma. También estaré respondiendo preguntas a medida que avancemos. ¡Espero verte allí!