En caso de que no te hayas 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 que sucede 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 de todo el mundo para recordarles a todos que, si bien tienen sus billeteras para compras personales, es posible que deseen considerar donar a aquellos en necesita también ¡Qué buena idea! 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 para hacer la mejor página de inicio de donaciones de Giving Tuesday. capaz de.
Aquí hay un vistazo rápido a lo que vamos a crear hoy.
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
Usaremos GiveWP , un complemento de donación popular , para crear el formulario de donación que usaremos en este tutorial. 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 . Introduzca un título de formulario. Elegí «Apoyar a los agricultores locales y la agricultura sostenible».
A continuación, verá las opciones del formulario de donación. Vamos a repasarlos 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
Monto 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 Objetivo de donación, primero habilite la opción Objetivo de donación. Una vez que haya hecho eso, establezca la cantidad de su meta. He puesto el mío en $ 1,000. También configuré el formato de objetivo en porcentaje. Esto les permitirá a los espectadores saber el porcentaje de nuestra meta que hemos alcanzado, no la cantidad real de dinero que hemos recaudado. Y finalmente, he cambiado 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 algo de 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 de formulario de Give que necesitamos configurar. Haga clic en el botón Publicar y tome nota del hecho de que necesitará el código abreviado 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 vínculo de diseño con nuestro ejemplo del 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.
Aquí se explica 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 vegetales. Busqué en un sitio web de imágenes de stock «verduras aisladas». Por lo general, el término «aislado» en un sitio web de imágenes de stock se refiere a elementos sobre un fondo blanco. Esto los hace fáciles de aislar eliminando 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 ícono del ojo al lado.
Luego, use la herramienta de varita mágica para seleccionar todo el espacio en blanco alrededor y dentro de los elementos vegetales. Presione la tecla de retroceso para eliminarlo.
Luego, navegue en su menú superior a Imagen> Tamaño de lienzo y cambie el tamaño de su lienzo a 1920 × 1080. Cuando haga esto, sus elementos probablemente serán muy grandes en comparación con su lienzo nuevo y más pequeño.
En su teclado, presione comando + T o vaya a Editar> Transformar> Escala . Cambie el tamaño de su capa de elementos aislados para que se ajuste al nuevo tamaño del lienzo.
Hasta aquí llegaremos con esta imagen por ahora. Simplemente asegúrese de haber guardado este nuevo archivo de Photoshop. Continuaremos 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, le recomendamos que descargue e instale nuestro nuevo paquete de diseño de Farmers Market (gratis) . Siga las instrucciones en esa publicación para instalar el paquete de diseño. Después de instalarlo, siga las instrucciones de esta publicación de blog para configurar su sitio para la siguiente etapa de personalización, que trataremos 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 generador visual. Te llevaré sección por sección hacia abajo 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. Pase el cursor sobre la sección de su héroe y abra la configuración del módulo haciendo clic en el ícono de ajustes en los controles grises del módulo.
Luego, mientras aún está en la pestaña Contenido, desplácese hacia abajo y abra la configuración del enlace. En el título del campo Botón #1 URL coloque el texto «#donar». Esto funcionará como un enlace ancla al formulario que crearemos a continuación.
Por último, navegue a la pestaña Diseño y abra la configuración de Texto de subtítulo. Establezca el peso de la fuente del subtítulo en negrita.
La primera sección ya está completa. Desplácese hacia abajo hasta la tercera sección (la que presenta 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. Cambia 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 formularios 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 tienen la intención de dar. Pero vamos a convertirlo 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. Primero, debemos cambiar el color de fondo. Ajústelo al mismo #F6F6F6 que en la sección anterior.
Luego, en la pestaña Diseño de la sección, abra las opciones de Espaciado. Agregue el siguiente relleno personalizado:
Superior: 250px
Derecha: 40px
Abajo: 250px
Izquierda: 40px
Por último, mientras aún está 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 abreviado 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:
Texto Tamaño del texto: 18px
Altura de la línea de texto: 1,8 em
En las opciones de texto de encabezado para H2, configure los siguientes ajustes:
Encabezado 2 Tamaño del texto: 36px
Encabezado 2 Altura de línea: 1,5 em
En las opciones de Espaciado, configure los siguientes ajustes:
Relleno personalizado: 50xp (para todos los campos)
En 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 del cuadro: -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
Retardo de animación: 400ms
Opacidad inicial de 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 condimentarlo. 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 > Opciones de tema > General. Desplácese hacia abajo hasta el cuadro CSS personalizado y pegue los siguientes estilos de botones allí:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
|
/*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 donación. 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, cambia el tamaño de la ventana de tu navegador a 1920×1120. Puede usar 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 rectangular para seleccionar su formulario. Luego, ve a Seleccionar > Inverso para seleccionar todo menos tu formulario. Elimina tu nueva selección. Ahora debería tener un lienzo que se vea así.
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 más tarde aún seleccionado, haga clic en el icono de candado y bloquéelo. Ahora debería verse así.
Ahora puede seleccionar su capa de vegetales 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 tenga su propia configuración final, irá a Archivo > Exportar > Exportar como y elija 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, en nuestro sitio web de 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. Agrega tu 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 estos ajustes. Su sección de formulario ahora debería estar completa.
Para finalizar completamente su diseño (para que coincida con nuestra vista previa de página completa desde el principio de la publicación), simplemente cambie los colores de fondo de las secciones de página restantes para que coincidan con los de la captura de pantalla. Usará 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 serán un gran éxito. Gracias por seguirnos. Si todavía necesita ayuda con cualquier cosa cubierta en este tutorial, realizaré una transmisión en vivo hoy a las 3:00 p. m. en nuestra página de Facebook y canal de YouTube , donde mostraré todo este proceso en una sola toma. También responderé preguntas a medida que avancemos. ¡Espero verte allí!