Veamos cómo importar y usar las plantillas de dashboard de Elementor.
1- Pasos preliminares
Hay algunas cosas que debes hacer antes de importar las plantillas:
- Descargar, instalar y activar el plugin Elementor Header & Footer Builder en tu red multisitio. Te permite usar menús y otros elementos en Elementor gratis que de otra manera solo podrías usar en Elementor Pro.
- Descarga, instala y activa el plugin JetSticky For Elementor, el cual te permite añadir estilo fijo a secciones enteras en la versión gratuita de Elementor. Esto será útil para los menús del dashboard frontend.
- Descargar, instalar y activar el plugin WP Menu Icons en tu red multisitio. Te permite añadir iconos a los elementos de tus menús de navegación.
- Descargar, instalar y activar el plugin Shortcode in Menus en tu red multisitio. Te permite añadir shortcodes a los elementos de tus menús de navegación que funcionan como links; esto será útil para mostrar los botones “Ver mi sitio” y “Cerrar sesión” en algunas plantillas. Además, hará que los shortcodes funcionen como enlaces de botones en Elementor.
Después de instalar los plugins necesarios, tienes que configurar el logotipo y el título del sitio del dashboard porque nuestras plantillas de Elementor heredan el logotipo de la configuración del personalizador:
- Abre el sitio del dashboard en tu red multisitio.
- Ve a Apariencia > Personalizar para abrir el personalizador de tu tema.
- Selecciona el logotipo del sitio usando el personalizador de tu tema. Normalmente, la configuración del logotipo del sitio se encuentra en Identidad del sitio o en Cabecera.
2- Importa la plantilla de Elementor que vas a usar
IMPORTANTE: Antes de importar las plantillas de Elementor, tienes que tener todos los plugins instalados y activados en tu WordPress.
Tienes que descargar la plantilla que vas a usar para crear las páginas del dashboard, e importarlas a tu sitio del dashboard:
- Abre el sitio de tu dashboard frontend.
- Ir a Plantillas > Plantillas guardadas en wp-admin.
- Haz clic en Importar plantillas.
- Elige el archivo de tu computadora y haz clic en Importar ahora.
3- Configura la plantilla y crea las páginas del escritorio frontend
Una vez que hayas importado la plantilla del dashboard, tendrás que crear las páginas del dashboard una por una usando la plantilla que has importado.
Aquí te mostramos cómo crear una página como ejemplo para configurar la plantilla:
- En tu sitio del dashboard, ir a Páginas > Añadir nueva.
- Ingresa el título de la página.
- Haz clic en Editar con Elementor.
Una vez que estés en el editor de Elementor, tienes que cambiar la plantilla de la página:
- Haz clic en Ajustes.
- Selecciona Elementor Canvas en Estructura de página
Después de cambiar el diseño de la página, tienes que añadir la plantilla que has importado. Para ello, basta con hacer clic en Añadir plantilla.
La biblioteca de Elementor te mostrará Bloques, Páginas y Plantillas:
- Ve a Mis plantillas.
- Selecciona la plantilla que vas a importar.
- Haz clic en Insertar.
- Haz clic en Sí para importar la configuración de la plantilla a la página.
Una vez añadida la plantilla a la nueva página, puedes empezar a configurar la página. En este ejemplo, estamos usando la Plantilla 1.
a) Configura el logo del sitio
Hemos añadido el Logo del sitio usando el plugin Header, Footer & Blocks Template. Si ya has seleccionado el logo del sitio en el personalizador del tema, el logo se cargará automáticamente.
Sin embargo, puedes cargar tu propia imagen personalizada. Solo tienes que hacer clic en los ajustes del elemento Logotipo del sitio, selecciona la Imagen personalizada = Sí y cargar la imagen.
Nota. Si usas la opción de imagen personalizada, tendrás que cargar manualmente la imagen en cada página del tablero, mientras que si utiliza el personalizador solo tendrás que configurarla una vez globalmente.
Importante: Estas plantillas no utilizan el elemento Logotipo del Sitio.
- Plantilla 2
- Plantilla 8
- Plantilla 14
- Plantilla 16
b) Configura el menú del dashboard
También se ha añadido el elemento Menú a las plantillas mediante el plugin Header, Footer, & Blocks Template.
Primero debes crear un menú en Apariencia > Menús para que el elemento menú lo cargue automáticamente. Puedes hacer clic en los ajustes del elemento Menú para seleccionar el menú que quieres mostrar en este elemento.
Importante:
- Si esta es tu primera página, no verás ningún elemento en el menú.
- Una vez que termines de crear todas las páginas, necesitas añadir iconos a los elementos del menú usando el plugin WP Menu Icons en wp-admin > Apariencia > Menús. Así es como puedes añadir iconos de menú y establecer elementos de submenú.
- Si estás usando Plantilla 4 o Plantilla 10, no es necesario añadir iconos de menú.
- Si estás usando Plantilla 8, debes seleccionar Ocultar etiqueta = Si para todos los elementos del menú porque solo incluye íconos sin etiquetas.
- En el modo Editor, Elementor no muestra los iconos del menú, pero puedes ver su aspecto al hacer clic en Vista previa.
Optional
En este punto, podrías guardar esta página como una plantilla de Elementor para que todas las páginas futuras tengan el mismo logo y menú automáticamente:
- Haz clic en Guardar opciones.
- Haz clic en Guardar como plantilla.
c) Configura el contenido de la página del dashboard frontend
En el área de contenido de la plantilla, debes ingresar el siguiente shortcode WP Frontend Admin:
[vg_display_admin_page page_url="wp-admin URL"]
Solo tienes que sustituir el texto de la wp-admin URL por la URL de la página de wp-admin que vas a mostrar en el frontend. Por ejemplo, podemos crear la página del frontend de los productos de WooCommerce usando este shortcode:
[vg_display_admin_page page_url="edit.php?post_type=product"]
Una vez que ingreses el shortcode WP Frontend Admin, debes hacer clic en Vista Previa para ver la página en el frontend y configurarla en vivo usando la configuración rápida de WP Frontend Admin.
Nota. Mientras editas la página en el frontend, el panel de configuración rápida se mostrará en la parte izquierda de la pantalla sobre el menú vertical de las plantillas que contienen el menú lateral. Esto no ocurrirá con las plantillas con menú superior.
Puedes seleccionar la información general de la página del dashboard mediante los siguientes campos:
- Título de la página: El título será heredado de la página aunque puedes cambiarlo.
- URL slug: Ingresa aquí un slug de URL amigable que incluya solo palabras clave.
- Plantilla: Elementor Canvas
- Añadir a menú: Selecciona el menú del dashboard que creó en las secciones anteriores.
Además, puedes ocultar cualquier elemento innecesario de la página para simplificarla y darle un aspecto elegante:
- Haz clic en Ocultar elemento.
- Haz clic en el elemento que quieras ocultar.
- Repite ambos pasos con cada elemento que quieras ocultar de tu página.
Además, puedes ocultar elementos que puedan aparecer en el futuro en tu pantalla:
- Marca la casilla Ocultar notificaciones añadidas por otros plugins o temas.
WP Frontend Admin te permite editar los textos de tus páginas de administración para personalizarlas aún más:
- Haz clic en Editar textos.
- Edita todos los textos que quieras.
- Haz clic en Edición terminada.
Si tu página frontend es una lista de publicaciones, productos o cualquier tipo de publicación, puedes desactivar las columnas innecesarias. Solo tienes que marcar las columnas que quieras ocultar en la sección Columnas deshabilitadas del panel de configuración rápida.
Si estás usando WP Ultimo para gestionar las membresías en tu red de sitios múltiples, puedes restringir las características del dashboard en función del plan de WP Ultimo. Simplemente selecciona los planes que tendrán acceso a la página actual en la sección Planes de WP Ultimo requeridos.
Los usuarios de las páginas que enumeran productos, publicaciones, páginas o cualquier tipo de publicación en el frontend pueden ver solo sus propias publicaciones o pueden ver las publicaciones de otros usuarios en el mismo sitio.
Por último, puedes Guardar para publicar la página.
Importante:
- El botón Ocultar elemento te permite simplificar cualquier página. Por ejemplo, si estás mostrando la página de administración de Entradas en el frontend, puedes abrir el formulario Añadir nueva y eliminar todos los campos y metaboxes no esenciales.
- También puedes editar textos en otras páginas. Por ejemplo, puedes editar textos en el formulario de Añadir nueva entrada.
- Debes repetir los mismos pasos para crear las otras páginas de administración del frontend.
4- Opcional. Muestra múltiple contenido wp-admin en el dashboard frontend
Si quieres mostrar más de una página de administración en el frontend, puedes hacerlo fácilmente usando un elemento Pestañas en lugar de un elemento Editor de Texto en Elementor.
- Ingresa el título de la pestaña.
- Ingresa el shortcode WP Frontend Admin en la descripción de la pestaña.
- Hazlo en todas las pestañas que vayas creando.
- Haz clic en Vista previa para ver el aspecto de la página en el frontend y configurala mediante el panel de Configuración rápida.
5- Añade iconos al menú de tu escritorio frontend
Después de crear todas las páginas del dashboard usando tu plantilla de Elementor favorita, puedes añadir iconos a tu menú del dashboard para hacerlo más bonito e intuitivo.
- Ir a Apariencia > Menús en tu dashboard.
- Selecciona un elemento del menú y abre la configuración de los iconos.
Ahora solo tienes que seleccionar el icono y Guardar.
Importante:
- Hay algunas plantillas del dashboard que no requieren iconos de menú.
- Hay algunas plantillas del dashboard que necesitan tener las etiquetas de los elementos de menú ocultas. En este caso, puedes seleccionar el logotipo del elemento de menú y seleccionar Ocultar etiqueta = Sí.
- También puedes editar el tamaño de los iconos del menú usando el campo Tamaño en la configuración de los iconos del menú.
6- Cómo añadir los botones “Ver mi sitio” y “Cerrar sesión” al menú del dashboard
WP Frontend Admin te permite añadir fácilmente los botones Ver mi sitio y Cerrar Sesión a los menús de tu dashboard.
- Ir a Apariencia > Menús.
- Añadir un nuevo enlace personalizado.
- Ingresa el shortcode en el campo URL.
- Ingresa la etiqueta del elemento de menú en Texto del enlace.
- Haz clic en Añadir al menú.
- Hazlo tanto con el botón de Ver mi sitio como con el de Cerra sesión.
Aquí están los dos shortcodes que necesitas usar:
- Ver mi sitio: [wp_frontend_admin_my_site_url]
- Cerra sesión: [vg_display_logout_url]
Este es el aspecto de nuestro dashboard una vez configurado:
7- Cómo crear una página de inicio de sesión personalizada con Elementor y redirigir a los usuarios a ella
Además de configurar un hermoso dashboard frontend con Elementor, también puedes crear páginas de inicio de sesión personalizadas fácilmente en Elementor. WP Frontend Admin te permite mostrar el formulario de inicio de sesión en cualquier elemento con un simple shortcode.
Simplemente crea una página con tu propio diseño y colores. A continuación, añade un elemento Shortcode en la sección o columna en la que quieras mostrar el formulario de acceso.
Pega este shortcode para mostrar el formulario de acceso:
[wp_frontend_admin_login_form]
Nota. No verás el formulario de acceso mientras estés conectado, pero este es el aspecto que tendria tu página.
Ahora tienes que asegurarte de que los usuarios serán redirigidos a esta página cada vez que intenten ver las páginas del dashboard frontend:
- Ve a tu administrador de la red.
- Ir a WP Frontend Admin > Ajustes > Inicio de sesión.
- Pega la URL de la página de inicio de sesión en el campo URL de la Página de Inicio de Sesión .
- Desplázate hacia abajo y Guarda.
Así es como puedes configurar las plantillas del dashboard frontend con Elementor. De hecho, puedes crear un dashboard completo con los pasos explicados en este tutorial.
