En esta lección, aprenderemos cómo mostrar los formularios de GiveWP en el frontend para añadirlos al dashboard personalizado que estamos creando para nuestra plataforma de donaciones construida con WordPress.

Esta es la primera página que añadiremos a nuestro sitio Dashboard, y permitirá a los usuarios de nuestra plataforma:

• Crear nuevos formularios de donación en el frontend
• Editar formularios de donación en el frontend
• Eliminar formularios de donación desde el frontend

Para mostrar los formularios de donación de GiveWP en el escritorio personalizado, sigue estos pasos:

1- ABRE EL SITIO DEL DASHBOARD PERSONALIZADO EN TU RED

Ve a Administrador de la red > WP Ultimo > Sitios.

Haz clic en Gestionar en el sitio del Dashboard.

Ahora haz clic en Escritorio para abrir el panel wp-admin del sitio Dashboard.

2- AÑADE UNA NUEVA PÁGINA EN EL SITIO DEL DASHBOARD PERSONALIZADO

En la lección anterior, editamos la plantilla que usaremos para construir un hermoso escritorio personalizado para WordPress. Ahora tenemos que añadir una nueva página e importar esa plantilla a esa nueva página.

Ve a Páginas > Añadir nueva.

Una vez que estés en el formulario de Añadir Nueva Página:

1. Añade el título de la página
2. Selecciona Elementor Canvas como plantilla de la página
3. Haz clic en Editar con Elementor

En el editor de Elementor, haz clic en el botón Añadir plantilla para abrir la biblioteca.

Ve a Mis plantillas, busca la plantilla que usarás para construir el dashboard personalizado (Plantilla 13 en este caso), y haz clic en Insertar.

3- MUESTRA LOS FORMULARIOS DE GIVEWP EN EL FRONTEND

WP Frontend Admin te permite mostrar cualquier página de wp-admin en el frontend usando el siguiente shortcode:

[vg_display_admin_page page_url="insertar url de wp-admin aquí"]

Solo tienes que insertar la URL de la página de wp-admin que quieres mostrar en el frontend, entre las comillas del shortcode. El shortcode acepta URLs completas o URLs relativas.

En este caso, puedes utilizar el siguiente shortcode para mostrar los formularios de GiveWP en el frontend.

[vg_display_admin_page page_url="edit.php?post_type=give_forms&page=give-forms"]

En este caso, nosotros le agregamos también el título de la página antes del shortcode para que la página se vea aún mejor en el frontend.

Una vez introducidos el nombre de la página y el shortcode, haz clic en Previsualizar cambios para mostrar la página de formularios de GiveWP en el frontend.

Nota. En todas las lecciones futuras, te daremos los shortcodes exactos que necesitas para ahorrarte algo de tiempo.

4- EDITA LA PÁGINA DE FORMULARIOS DE GIVEWP EN EL FRONTEND

WP Frontend Admin mostrará los formularios de GiveWP en el frontend una vez que hagas clic en Previsualizar cambios.

Verás un panel de Configuración rápida en la parte izquierda de la pantalla. Este panel te permitirá editar las páginas del frontend ocultando cualquier elemento innecesario, editando cualquier texto, seleccionando el Plan de WP Ultimo para el cual esta página está disponible, etc.

Primero, puedes seleccionar la información básica de la página.

Introduce la información necesaria en los siguientes campos:

• Título de la página: Puedes llamar a esto algo como “formularios”, “campañas”, etc. Tú decides.
• URL slug: Aquí introduciremos algo como “campañas”.
• Plantilla: Elementor canvas.
• Añadir a menú: Selecciona el menú que creaste en el paso 3 de la lección anterior.

En segundo lugar, puedes ocultar cualquier elemento innecesario.

El botón Ocultar elemento te permite eliminar cualquier elemento que tus usuarios no necesiten para utilizar esta página en el frontend.

Por ejemplo, para tu plataforma de recaudación de fondos, te recomendamos que elimines la columna Shortcode de la página porque los usuarios no crearán páginas para mostrar sus formularios de donación.

En su lugar, los usuarios tendrán que copiar el enlace al formulario de donación y compartir ese enlace en las redes sociales o en cualquier otro lugar para empezar a recaudar donaciones, al igual que harían en otras plataformas como GoFundMe, Fundly, etc.

Para eliminar cualquier elemento en el frontend:

1. Haz clic en Ocultar elemento.
2. Haz clic en el elemento que quieras ocultar.

Repite estos dos pasos para cada elemento que quieras ocultar y haz clic en Guardar para aplicar los cambios.

En tercer lugar, puedes editar cualquier texto de la página del frontend.

El botón Editar textos te permite cambiar el nombre de los campos, botones y metaboxes de tus páginas frontend:

1. Haz clic en Editar textos.
2. Edita todos los textos que desees.
3. Haz clic en “Edición terminada“.

Una vez que selecciones la información de la página, oculta los elementos innecesarios y cambia los textos, puedes marcar la casilla Ocultar avisos añadidos por otros plugins o temas para evitar que aparezcan avisos del administrador en esta página.

Si quieres restringir las páginas del frontend basándote en el plan de WP Ultimo, puedes marcar los planes para los que la página está disponible en la sección Planes de WP Ultimo requeridos.

Una vez que hayas terminado, haz clic en Guardar para aplicar los cambios.

5- EDITA LA PÁGINA “AÑADIR UN FORMULARIO” EN EL FRONTEND

Una vez que hayas editado la página de Campañas de Donación, puedes hacer clic en Añadir un Formulario para editar la página de Añadir Nuevo Formulario.

Por ejemplo, puedes ocultar cualquier elemento que llame a los usuarios a instalar add-ons pro, cualquier enlace a la documentación de GiveWP, etc.

Nota. Debes revisar cada elemento de la página y decidir si quieres quitarlo o mantenerlo. Te recomendamos que simplifiques el formulario tanto como puedas; solo asegúrate de no eliminar ningún elemento esencial.

Este es el aspecto que tendrá la página de Campañas de Donación en el frontend una vez que se haya completado el tablero:

Y este es el aspecto que tendrá la página del nuevo formulario en el frontend:

Como ves, nuestra página está completamente simplificada porque hemos eliminado de ella cualquier elemento innecesario. Así es como podemos mostrar los formularios de GiveWP en el frontend.

Nota. Añadiremos iconos a los elementos del menú en futuras lecciones.

En la próxima lección, aprenderemos cómo añadir los informes de donaciones al escritorio personalizado.