¿Le gustaría aprender a crear un formulario de carga de archivos en Elementor?
Como probablemente sepa, la versión pro de Elementor viene con un widget de formulario que puede usar para crear formularios en su sitio web de WordPress. Con este widget, puede crear casi todos los tipos de formularios. Hay aproximadamente 19 tipos de campos que ofrece este widget, incluido un campo para cargar un archivo.
En este artículo, le mostraremos cómo crear un formulario que consta de un campo de carga de archivos.
Pero antes de comenzar, asegúrese de haber actualizado su versión de Elementor a la versión Pro ya que, nuevamente, el widget Form solo está disponible en Elementor Pro.
Primero, cree una nueva página o publíquela y edítela con Elementor.
Antes de comenzar a crear la página para agregar su formulario, primero configure el diseño. Para hacerlo, haga clic en el ícono de ajustes en la esquina inferior izquierda del panel izquierdo. Establezca su diseño preferido en el menú desplegable Disposición.
Agregue una nueva sección haciendo clic en el ícono más en el cuadro de edición de Elementor. Puede seleccionar cualquier estructura en función del concepto de diseño que desee crear. Elegimos una estructura de columna única en este ejemplo.
Agregue el widget Formulario arrastrándolo desde el panel izquierdo al área del lienzo.
De forma predeterminada, tiene un formulario compuesto por tres campos: Nombre, Correo electrónico y Mensaje. Elimine un campo que no necesita haciendo clic en el icono x del campo.
En este artículo, crearemos un formulario compuesto por 4 campos: Nombre, Correo electrónico, Mensaje y Carga de archivo. Dado que el formulario tiene solo 3 campos de forma predeterminada, debe agregar un nuevo formulario para el campo Carga de archivos.
Haga clic en el botón AÑADIR UN ARTÍCULO para agregar un nuevo campo. Definir el tipo de campo al cargar archivo. Si quieres definirlo como campo obligatorio, activa la opción Necesario. Establezca el tamaño máximo de archivo en el menú desplegable para Tamaño máximo de archivo.
Para definir los tipos de archivo permitidos, ingrese las extensiones de archivo Tipos de archivos permitidos. Puede aceptar varios tipos de archivos separando las extensiones de archivo con una coma. Si desea permitir que sus visitantes envíen varios archivos, active la opción Varios archivos y establezca el número máximo de archivos que pueden descargar.
Si desea cambiar el orden de los campos, simplemente arrastre cada campo hacia arriba o hacia abajo. En este ejemplo, colocamos el campo Carga de archivo encima del campo Mensaje.
Definición de acción
Sería genial si pudiera conectar su formulario Elementor con servicios de backend de formulario tal como Obtener formulario ou llevar formulario. Desafortunadamente, Elementor no admite la integración con ningún servicio de backend de formulario.
Entonces, en este artículo, vamos a definir la acción en el correo electrónico. Esto significa que los envíos enviados a través de su formulario se enviarán a través del correo electrónico especificado.
De forma predeterminada, la acción del formulario se estableció en correo electrónico. Puedes asegurarte desde la opción Acciones después de enviar.
Entonces abre la opción Correo y establezca la dirección de correo electrónico a la que se enviarán los envíos de formularios. También defina el asunto del correo electrónico.
Siempre bajo la opción Email, establecer el cuerpo del correo electrónico en la opción Mensaje.
Para personalizar el cuerpo del correo electrónico, puede pegar los códigos cortos de los campos que desea agregar al cuerpo. Puedes encontrarlos en la pestaña AVANZADO de cada campo.
También puede personalizar los metadatos del cuerpo de su correo electrónico en la sección Meta Data. Elimina los metadatos que no quieras incluir.
Los metadatos en sí aparecerán debajo del cuerpo del correo electrónico.
En los campos de Email, De nombre y respuesta a, puede dejarlos en blanco.
Personalizando el formulario
Hasta ahora, su formulario está listo para ser publicado. Antes de publicarlo, puede personalizar el formulario para hacerlo más atractivo. De forma predeterminada, cada campo de su formulario contiene una etiqueta. Si quieres apagarlo, puedes hacerlo desde Opción Campos de formulario sous la pestaña Contenido.
Para crear opciones de estilo más avanzadas, puede acceder a la pestaña Estilo. Aquí hay algunas opciones de estilo que puede configurar.
Definir el espacio entre las líneas y la tipografía de las etiquetas.
Para definir el espacio entre las líneas (campos) así como la tipografía de las etiquetas, puede abrir la opción Formulario.
Establecer el espacio de línea en la sección Separación de filas. Para definir la tipografía de las etiquetas (tamaño de fuente, estilo de fuente y familia de fuentes), puede hacer clic en el icono de lápiz de tipografía en la sección Etiqueta.
Defina la tipografía del campo, el color de fondo, el color del borde, el ancho del borde y el radio del borde
Puedes abrir la opción Campo para definir la tipografía del control, el color de fondo del control, el color del borde, el ancho del borde y el radio del borde.
Botón personalizar
Para personalizar el botón, puede abrir la opción Botones. Desde allí, puede establecer el color de fondo, el color del texto, la tipografía, el color del borde, el radio del borde, etc. Cambiar a la pestaña LIBRACIÓN para personalizar el botón que apunta.
Hay varias otras opciones de personalización que puede configurar. Puede jugar con el panel izquierdo hasta que esté satisfecho con el aspecto de su formulario. Una vez hecho esto, puede hacer clic en el botón PUBLICAR para publicar su formulario.
Error potencial
Cuando prueba su formulario, pueden aparecer mensajes de error. A continuación se muestra un ejemplo de un error.
El error anterior suele ocurrir si está utilizando un servicio de alojamiento web compartido. La mayoría de los proveedores de alojamiento web compartido deshabilitan la función php enviar_correo, que es utilizado por la funcionalidad de WordPress wp_mail para enviar correos electrónicos.
Listo ! Eso es todo por este artículo que le muestra cómo crear un formulario de carga de archivos en Elementor.Si tiene alguna duda sobre cómo llegar favísanos en el comentarios.
¿Te gustaría aprender a crear una tarjeta con efecto cartera? En este nuevo tutorial, le mostraremos cómo hacerlo con Elementor.
Si no tienes idea de lo que queremos hablarte hoy, te invitamos a ver el siguiente video:
Entonces volvamos a por qué estamos aquí.
Para completar este tutorial, necesitará la versión Pro de Elementorporque usaremos un código CSS personalizado que solo es compatible con esta versión de Elementor.
Creemos una nueva sección con una estructura de 3 columnas, luego en el panel, definamos el hauteur en Altura mínimay luego Altura mínima hagamos clic en VH y coloque el control deslizante en 100.
Seleccionemos la columna del medio y sueltemos en esta columna el Widget de sección interna. El widget de Sección Interna está configurado con 2 columnas por defecto. Debajo de las 2 columnas, sueltemos el widget Título con el titulo Restaurante, Seleccione H4 para la etiqueta HTML, y Centrar para la alineación.
En la pestaña Avanzado del widget Título, entremos 30 para el Margen superior
Seleccionemos una vez más nuestra Sección Interna. En el panel, modifiquemos su hauteur en Altura mínima y Altura mínima pongamos el cursor en 380. Luego, eliminemos la columna derecha o izquierda de la sección Interna
Dejemoslo Widget de imagen en la Sección Interna e inserta una imagen de nuestra biblioteca. seleccionemos Entero para Tamaño de la imagen et Centrar para Alineación.
NB: si desea tener páginas completas como la nuestra, lo invitamos a capturar las páginas con la ayuda de la extensión de Chrome GoFullPage, pero también puede usar otra.
Luego en la pestaña Style, haga clic en PX de Manga, ajustemos el control deslizante a 260 y los rayos de borde en 10
A continuación, modifiquemos Box Shadow cambiando el Blur a 40 y Diffuse a -10.
En la pestaña Avanzado, en la sección posicionamiento, Seleccione absoluto para el Posición
, Orientación Horizontal en Desmañado, décalage en 0, laOrientación Vertical en Bas.
Dupliquemos nuestro widget Imagen dos veces. Inevitablemente, todos se superpondrán. Abramos el Navegador para que podamos acceder a los otros widgets ocultos por el primero.
Reemplacemos la imagen del segundo Widget y en su Tab Avanzado, vamos a modificarlos márgenes inferiores et Desmañado por entrar 30 para cada. Ahora verá un ligero retraso,
Haga lo mismo para el tercer widget de imagen, pero aplique márgenes 60 para los márgenes inferior e izquierdo. Ahora debería tener una descripción general de los 3 widgets de imagen.
Seleccionemos nuestro widget de Sección Interna, vayamos a su Pestaña Avanzado y en la sección CSS personalizado, copie y pegue el siguiente fragmento de código:
Al pasar el cursor sobre nuestra columna ahora veremos una hermosa animación del contenido de nuestra Sección Interna.
Vamos a mostrar nuestra página en modo tableta. Veremos que las imágenes no se mostrarán correctamente.
Seleccione el primer widget de imagen, en su pestaña Estilo, modifiquemos el ancho haciendo clic en PC y luego ingresando 150 como ancho. Hagamos lo mismo con los otros 2 widgets de imagen.
Seleccionemos nuestra Sección Interna, en su sección de Contenido, modifiquemos el Altura mínima en 225.
Vamos a mostrar también nuestra página en modo Smartphone a priori no presenta ningún problema. Pero, si lo tiene, seleccionemos nuestra Sección Interna, en su sección Contenido, modifiquemos la Altura Mínima.
Ahora dupliquemos nuestra columna del medio 2 veces, luego eliminemos las otras 2 columnas vacías.
Modifiquemos los títulos de estas columnas y luego cambiemos las imágenes.
Tendrás que tener un apartado magnífico del que aquí están los resultados:
Ahí tienes, acabas de hacer esta tarea fácilmente.
Listo ! Eso es todo por este artículo que le muestra cómo crear una tarjeta con el efecto de una cartera. Si tiene alguna inquietud sobre cómo llegar, háganoslo saber dentro de comentarios.
Para completar este tutorial, necesitará la versión Pro de Elementorporque usaremos un código CSS personalizado que solo es compatible con esta versión de Elementor.
Vamos a crear una sección con 2 columnas, luego en el panel lateral, vamos a definir el hauteur en Altura mínimay luego Altura mínima hagamos clic en VH y coloque el control deslizante en 100.
En la pestaña Style vamos a seleccionarlo tipo de fondo en cliquant sur clásico, luego modifique el los colores en# F9F9F9
En la pestaña Avanzado, modificar todos los Márgenes internos en 25
Ahora vamos a cambiar el ancho de la columna a 40% para la columna de la izquierda y 60% para la columna de la derecha.
En la columna de la izquierda, dejemos caer un Widget de edición de texto, luego pegue un Texto en él y modifique el Tamaño del título texto en Titulo 3.
En la pestaña Avanzado, ingresa como Márgenes internos 10-25-10-30 respectivamente para el márgenes internos superior, derecho, inferior e izquierdo
En la sección Fondo pestaña Avanzado, haga clic en INFORMACIÓN GENERAL, luego seleccione el tipo de fondo en clásico, entremos color #DFF5FF et Duración de la transición en 0.5.
Si pasamos el cursor sobre el texto, tendremos la oportunidad de descubrir un magnífico color de fondo al pasar el mouse por encima.
Ahora vamos a la sección fronterasy haga clic en INFORMACIÓN GENERAL, luego seleccione Continúe para tipo de borde et desactivemos el enlace entre borde entrar 4 para el borde izquierdo. Seleccionemos el color #002FA7 y agregue una duración de transición a 0.5
Si pasamos el cursor sobre nuestro cuadro de texto una vez más, veremos una animación más prominente con un borde a la izquierda.
En la sección frontera, volvamos a la pestaña NORMAL, seleccionemos el tipo de borde en Continúe, apaguemos el enlace entre bordes, agarre 4 para el borde izquierdo y hacerlo muy transparente.
Si pasamos el cursor sobre el texto una vez más, veremos una transición muy suave.
Dupliquemos este texto dos veces y cambiemos los textos de cada contenido así.
En la columna de la derecha, arrastre un Widget de imagene inserte una imagen de nuestra biblioteca.
Vamos a crear algo de espacio alrededor de esta imagen yendo a Lengüeta avanzada de la columna e ingrese 10 – 10 – 10 – 50 para todos los márgenes internos de Superior, Derecha, Inferior e Izquierda.
Seleccionemos la imagen y en la pestaña Avanzado de este último, vamos a la sección Efectos de movimiento entonces Animación de entrada, Seleccione Fundido En
Vamos a la sección Avanzado desde la pestaña Avanzado y agregue algunos nombres de clase en el campo Clases CSS. Así que vamos a conseguir todo-img img-1
Dupliquemos nuestra imagen 2 veces.
Seleccionemos la segunda imagen y cambiemos img-1 a img-2, luego cambiemos la imagen a una nueva imagen.
(Si no tiene esta sección, entonces no tiene la versión Pro, si desea continuar, debe actualizar su versión).
Seleccionemos nuestro primer editor de texto y vayamos a la pestaña Avanzado y al Sección de atributos. En el campo Atributos, copie y pegue el siguiente fragmento de código:
data-showme|img-1
Haga esto para otros editores de texto mientras cambia img-1 a img-2 o a img-3
Ahora agreguemos un widget HTML a nuestra página. Copie y pegue el siguiente script:
Listo ! Eso es todo por este artículo que le muestra cómo cambiar una imagen al pasar el cursor sobre un texto. Si tiene alguna inquietud sobre cómo llegar, háganoslo saber dentro de comentarios.
¿Le gustaría aprender a corregir errores comunes en Elementor?
Elementor es la opción principal para los usuarios de WordPress que se enfocan en el diseño. Le permite crear un hermoso sitio web de forma visual sin tener que lidiar con CSS o HTML. Cuando trabaje con Elementor, puede encontrar errores como que el Panel de widgets no funciona o el Editor no se puede cargar.
Hemos resumido los errores de Elementor más comunes, y para cada uno de estos errores hemos proporcionado una solución.
Errores comunes de Elementor
1. El panel de widgets no carga
Elementor viene con un panel que se encuentra en el lado izquierdo del editor. Puede usar el panel para agregar un widget, definir configuraciones básicas (por ejemplo, configurar el diseño), personalizar un widget, etc.
A veces, es posible que no pueda agregar un nuevo widget porque los widgets no se pueden cargar.
Este error generalmente ocurre cuando tiene demasiados complementos de Elementor habilitados. Otra posible causa de error es que sus especificaciones de alojamiento no cumplan con los requisitos mínimos de Elementor.
Cómo corregir el error:
Hay al menos dos formas de corregir el tipo de error anterior. Primero, puede deshabilitar temporalmente los complementos de WordPress instalados (excepto Elementor) para encontrar qué complemento está causando el error.
En particular, puede deshabilitar los complementos activos de Elementor. En segundo lugar, puede pasar a otro tema. Cambiar temporalmente a un tema predeterminado de WordPress sería genial.
2. Formulario no enviado
Elementor Pro viene con un widget, el widget de formulario, que le permite crear un formulario. Puede usar el widget Formulario para crear cualquier tipo de formulario, incluido un formulario de contacto.
El error común al crear un formulario de contacto en Elementor es que no se envían los datos del formulario. El error generalmente ocurre cuando configura la acción del formulario para enviar un correo electrónico.
Cómo corregir el error:
Al igual que otros complementos de creación de formularios, Elementor también usa la función wp_mail como servicio de mensajería. La funcion wp_mail en sí mismo depende por enviar_correo que pertenece a PHP para funcionar. El problema es que no todos los proveedores de alojamiento permiten esta función.
Por lo tanto, debe pedirle a su proveedor de alojamiento que habilite la función enviar correo para operar la función wp_mail. Alternativamente, puede utilizar un servicio SMTP personalizado en su sitio web de WordPress.
3. La longitud del extracto no funciona
El widget de publicaciones de Elementor le permite mostrar publicaciones de blog de su sitio web de WordPress en cualquier página. Viene con algunas opciones de ajuste, incluida la longitud del fragmento.
En algunos casos, la longitud del fragmento no aparece tal como la configuró cuando obtiene una vista previa o publica la página. El error generalmente ocurre cuando se usa Elementor en temas de WordPress que tienen una opción de ajuste incorporada para establecer la longitud del fragmento.
Cómo corregir el error:
En lugar de configurar la longitud del fragmento a través del panel de configuración de Elementor, puede configurar la longitud del fragmento a través del Personalizador de temas(Apariencia -> Personalizar).
4. Error al cargar el editor
Este tipo de error es similar al error número uno anterior, pero un poco más fatal. Todo lo que ve es un precargador en una página gris. Hay algunas causas que desencadenan este error. Uno de ellos es un recurso de servidor insuficiente causado por demasiadas cargas.
Hay algunas alternativas que puede probar para corregir el error.
Deshabilitar complementos
Una de las causas de este tipo de error es un conflicto entre Elementor y otro complemento. Por lo tanto, puede deshabilitar complementos, excepto Elementor, por supuesto, para averiguar qué complemento está causando el conflicto.
Desactivar precargador de temas
Algunos temas de WordPress vienen con un precargador predeterminado. Si está utilizando un tema que tiene un precargador predeterminado, es posible que deba desactivarlo para que se abra el editor de Elementor.
Deshabilitar extensiones del navegador
A veces, el tipo de error es causado por una extensión instalada en su navegador web. Para resolverlo, puede usar otro navegador web. Si Elementor Editor normalmente se abre en un navegador diferente, puede desactivar las extensiones de su navegador principal para determinar cuál está causando el error.
Asegúrate de que las versiones de Elementor sean compatibles
Si está utilizando Elementor Free y Elementor Proc(leer :Elementor Gratis vs Elementor Pro), asegúrese de que sean compatibles. Si está utilizando uno más antiguo que el otro, puede causar la incompatibilidad. Al actualizar Elementor Free, también asegúrese de actualizar la versión de Elementor Pro cuando esté disponible y viceversa.
5. Error interno del servidor 500
Otro error común que puede encontrar mientras trabaja con Elementor es el error interno del servidor 500. Cuando encuentra este error, el error está en su lado del servidor en lugar de Elementor.
Varias causas desencadenan este tipo de error. Podría ser el límite de memoria de PHP, permisos de archivo incorrectos, archivo .htaccess corrupto, de un caché de navegador, una base de datos corrupta, etc...
Como se mencionó anteriormente, existe una amplia gama de escenarios que causarán el error interno del servidor 500. Por lo tanto, puede corregir el error según la causa del error. Si la causa es el límite de memoria de PHP, puede pedirle a su proveedor de alojamiento que aumente el límite de memoria de PHP.
6. Cambios no aplicados en la página en vivo
Elementor tiene un editor visual que viene con un editor en vivo. Lo que significa que lo que ve en el editor será exactamente lo mismo en la página en vivo. Sin embargo, hay un escenario en el que los estilos que aplicó en el editor no se aplican en la página activa. Este error generalmente es causado por un problema de almacenamiento en caché.
Cómo corregir el error:
Borrar caché
Ha aprendido la causa del error: el almacenamiento en caché. Por lo tanto, puede corregir el error borrando el caché de su navegador web. Si tiene un complemento de almacenamiento en caché en su sitio web de WordPress, también puede desactivarlo temporalmente.
Regenerar CSS
Si el método anterior no funciona, puede regenerar CSS. Para hacer esto, ve a Elementor -> Herramientas en su tablero de WordPress. Haga clic en el botón Regenerar archivos y datos.
También puede combinar los dos métodos anteriores.
7. El botón Publicar/Actualizar no funciona
Una vez que haya terminado de editar una página con Elementor, puede hacer clic en el botón Publicar/Actualizar en la parte inferior del panel de configuración para publicar/actualizar su página. ¿Qué pasa si el botón no funciona?
Hay dos razones principales por las que el botón publicar/actualizar no funciona en Elementor. Primero, puede ser un límite de memoria. En segundo lugar, puede ser una cuestión de seguridad.
Cómo corregir el error:
Aumentar el límite de memoria PHP
Para ejecutar Elementor correctamente en su sitio de WordPress, su servidor debe tener al menos 128 MB de límite de memoria PHP, se recomiendan 256 MB o más. Si su proveedor de alojamiento solo ofrece 128 MB de límite de memoria PHP, puede solicitar aumentarlo.
Instale SSL en su sitio web
Hoy en día, la mayoría de los sitios web utilizan SSL (HTTPS). Si no ha usado uno, puede instalarlo en su sitio de WordPress. La mayoría de los proveedores de hosting ofrecen SSL como característica predeterminada. Si su proveedor de alojamiento usa cPanel, puede instalar SSL a través de cPanel.
8.El CSS personalizado no funciona
La función CSS personalizada que ofrece Elementor Pro le permite obtener algunos estilos que no se ofrecen de forma predeterminada en Elementor. Normalmente, después de agregar CSS personalizado, el cambio se aplica a la página activa una vez que publica/actualiza la página. De lo contrario, puede haber un problema de almacenamiento en caché en su sitio web.
Cómo corregir el error:
Igual que el error número seis anterior, puede borrar el caché para corregir este tipo de error. Puede borrar su navegador web y el caché del sitio web. Antes de hacer eso, puede regenerar CSS como se muestra en el número seis arriba.
9. El color del texto no cambia
En Elementor, hay dos widgets para agregar elementos de texto a una página: el widget Editor de texto y el widget Título. Cuando trabaje con estos widgets (y otros widgets que tienen opciones para personalizar el texto), puede establecer el color del texto. En algunos casos, el color del texto no funciona en la página activa.
Cómo corregir el error:
Si configuró el color del texto, pero no se aplica en la página en vivo, es probable que haya un conflicto entre Elementor y el tema que está utilizando. Algunos temas de WordPress vienen con opciones de configuración avanzadas para controlar los colores de los elementos de su sitio, incluido el texto.
Para resolver el conflicto, puede restablecer la configuración de color de su tema para que los estilos de Elementor surtan efecto. Puedes hacerlo desde el personalizador de temas.(Apariencia -> Personalizar)o desde el panel de configuración de tu tema si lo tiene.
10. Conflicto del generador de temas
Si está utilizando Elementor Pro, puede personalizar visualmente cada parte de su sitio de WordPress con la función de creación de temas. Desde encabezado, pie de página, páginas de archivo, publicación única, página única, página 404, página de resultados de búsqueda, etc.
Algunos complementos de Elementor (por ejemplo, JetThemeCore) también tienen una funcionalidad similar. Si ha creado una determinada plantilla personalizada con el generador de temas de Elementor (por ejemplo, una plantilla de encabezado personalizada) y está instalando JetThemeCore, es muy probable que su plantilla personalizada no funcione.
Cómo corregir el error:
Si utiliza JetThemeCore, puede instalar el kit de compatibilidad de JetThemeCore. Este es un complemento de WordPress desarrollado por Crocoblock para superar el problema de incompatibilidad entre el generador de temas de Elementor y JetThemeCore.
11. Los campos personalizados no aparecen en el cuadro de edición de Elementor
Otra característica que ofrece Elementor Pro es la capacidad de agregar campos personalizados. Puede utilizar esta función para crear un sitio web dinámico complejo. El propio Elementor admite complementos de campos personalizados populares como ACF, Pods, Meta Box, Toolset, JetEngine.
Al intentar agregar un campo personalizado en Elementor, es posible que encuentre un problema por el cual los datos del campo personalizado no aparecen en el área del lienzo del editor de Elementor.
Cómo corregir el error:
Una cosa que debes saber primero. Los campos personalizados solo se pueden agregar a una plantilla personalizada (por ejemplo, una plantilla de publicación única personalizada). No puede agregar un campo personalizado a una página normal.
Si agregó un campo personalizado a una plantilla personalizada pero el campo personalizado asociado no aparece, puede cambiar la configuración de vista previa. Haga clic en el ícono de ajustes en la esquina inferior izquierda y abra el bloque Configuración de vista previa. Seleccione el tipo de contenido asociado con la plantilla personalizada en la que está trabajando y seleccione el contenido existente. Haga clic en el botón APLICAR Y PREVISUALIZAR.
resumen
Elementor es el complemento de creación de páginas más popular para WordPress. Hay algunos errores comunes que enfrentan los usuarios de Elementor como mencionamos anteriormente.
Antes de instalar Elementor en su sitio web de WordPress, puede asegurarse de que sus especificaciones de alojamiento cumplan con los requisitos mínimos requeridos por Elementor para minimizar los errores al trabajar con él.
Estos son los requisitos del sistema para Elementor:
Versión de WordPress: 5.2 o superior
Versión PHP: 7 o superior
Versión MySQL: 5.6 o superior
Límite de memoria PHP: 128 MB o más
Aunque Elementor admite complementos para ampliar su funcionalidad, es mejor que instale un complemento solo cuando realmente lo necesite. También puede reducir el riesgo de error, ya que cada complemento que instala consume recursos del servidor.
Otra cosa a tener en cuenta. Asegúrese de instalar un complemento de creación de páginas en su sitio web de WordPress, ya que la instalación de dos o más complementos de creación de páginas puede causar un conflicto.
Conclusión
Listo ! Eso será todo por esta lista de errores comunes de Elementor y cómo solucionarlos. Esperamos que con esta lista de complementos de WordPress, encuentre el que se ajuste a sus expectativas.
¿Quieres saber cómo crear una página de inicio de sesión con Elementor?
En WordPress, puedes ir en tudominio.com/wp-login.php para ir a la página de inicio de sesión de su sitio web. Si tiene un sitio web grande con varios autores / usuarios, es posible que desee crear una página de inicio de sesión personalizada con su propio diseño para reforzar la identidad de marca de su sitio web.
Con Elementor, puede crear una página de inicio de sesión personalizada para su sitio web de WordPress sin esfuerzo, sin codificar ni instalar complementos adicionales.
Elementortiene un widget, el widget de inicio de sesión, que puede utilizar para crear una página de inicio de sesión personalizada. Elementor incluso ofrece plantillas de página de inicio de sesión para que pueda configurar una página de inicio de sesión en poco tiempo.
Cómo crear una página de inicio de sesión personalizada de WordPress con Elementor
Tenga en cuenta que el widget de inicio de sesión solo está disponible en Elementor Pro. Por lo tanto, antes de poder crear una página de inicio de sesión personalizada, debe actualizar Elementor a la versión pro.
1. Cómo crear una página de inicio de sesión a partir de una plantilla
Como se mencionó anteriormente, Elementor ofrece plantillas que le permiten crear una página de inicio de sesión personalizada en poco tiempo. Para usar uno, comience creando una nueva página (Páginas -> Agregar) Y modificarlo con Elementor.
En el editor de Elementor, haga clic en el icono de la carpeta para abrir la biblioteca de modelos.
Busque una plantilla de página de inicio de sesión personalizada. Puede utilizar el cuadro de búsqueda para facilitar su trabajo. Una vez que encuentre el modelo que le gusta, coloque el mouse sobre él y haga clic en el botón INSERTAR.
Espere un momento hasta que Elementor haya terminado de cargar el modelo. Una vez cargado el modelo, puede hacer clic en publicar para publicarlo.
Voilà.
Para ver la página, puede hacer clic en el icono de tres líneas en la esquina superior del panel izquierdo y seleccionar Mostrar página.
Y aquí está el resultado final si elige el mismo modelo que nosotros.
2. Cómo crear una página de inicio de sesión personalizada desde cero
Si desea tener su propio diseño de página de inicio de sesión, también puede crear su página de inicio de sesión personalizada desde cero. Para comenzar, cree una nueva página y edítela con Elementor.
En el editor de Elementor, agregue una nueva sección haciendo clic en el ícono más. Puede seleccionar una estructura de columna según el diseño que desee crear.
Una vez que su sección esté lista, agregue el widget Conexión arrastrándolo desde el panel izquierdo al área del lienzo.
Ir a la pestaña Contenido en el panel izquierdo para configurar las opciones básicas. Hay 3 bloques de opciones que puede manipular:
1. Campos de formulario
Puede abrir este bloque para habilitar / deshabilitar la etiqueta y establecer el tamaño de entrada.
2. Botón
Puede abrir este bloque para configurar el texto del botón, el tamaño del botón y la alineación del botón.
3. Opciones adicionales
Puede abrir este bloque para habilitar / deshabilitar elementos de su página de inicio de sesión, como el enlace MContraseña perdida y la opcion Recuérdame. Dado que desea crear una página de inicio de sesión, activar la opción Redirigir después de iniciar sesión y pegue la URL del panel de WordPress (tudominio.com/wp-admin) en el campo disponible. También puedes activar la opción Redirigir después de cerrar sesión si lo desea.
Puedes activar la opción Etiqueta personalizada si desea utilizar etiquetas personalizadas y marcadores de posición personalizados en su formulario de inicio de sesión.
Una vez que haya terminado de configurar las opciones básicas, navegue hasta la pestaña Estilo para personalizar el formulario de inicio de sesión. Hay 5 bloques de opciones de estilo disponibles:
1. Formar
Puede abrir este bloque para definir el espacio entre las líneas, el color de los enlaces y el color del apuntado de los enlaces.
2. Etiqueta
Solo puede ver este bloque si activa la etiqueta del formulario. Puede abrir este bloque para establecer el espacio entre las etiquetas de los formularios, el color del texto y la tipografía (familia de fuentes, tamaño de fuente, estilo de fuente, etc.).
3. Campos
Puede abrir este bloque para definir el color de los campos de texto, la tipografía (familia de fuentes, tamaño de fuente, estilo de fuente, etc.), el fondo del control, el color del borde del control, el ancho del borde del campo y el radio del borde del campo.
4. Botón
Puede abrir este bloque para personalizar el botón de inicio de sesión. Puede configurar cosas como el color del texto del botón, el color del texto al pasar el cursor, la tipografía, el color de fondo del botón, el radio del borde y el relleno del texto del botón.
5. Mensaje de inicio de sesión
Puede abrir este bloque para personalizar el mensaje una vez que sus usuarios hayan iniciado sesión. Aquí está el mensaje:
Puede establecer el color del texto y la tipografía del mensaje.
Una vez que haya terminado de diseñar el widget de inicio de sesión, puede personalizar otros widgets en su página. Una vez que se complete la edición de la página, publique / actualice su página y habrá creado correctamente la página de inicio de sesión personalizada.
Una cosa crucial a tener en cuenta. Después de crear la página de inicio de sesión personalizada, no elimine el archivo wp-login.php en su sitio web de WordPress. Su sitio de WordPress todavía necesita este archivo para manejar el proceso de inicio de sesión.
Listo ! Eso es todo por este artículo que le muestra cómo crear una página de inicio de sesión con Elementor. Si tiene alguna duda sobre cómo llegar favísanos en el comentarios.
Quieres saber: ¿Cómo exportar e importar modelos de Elementor?
Hay dos formas de crear una página web en Elementor. En primer lugar, puede crear una página desde cero. También puede crear una página a partir de una plantilla. La segunda opción le permite crear una hermosa página web en cuestión de minutos. Esta también es una gran opción si no tienes idea de cuál es el diseño de una página que vas a crear.
Elementor en sí tiene docenas de plantillas entre las que puede elegir de la biblioteca de plantillas. También puede utilizar una plantilla de creadores externos.
Si bien puede usar una plantilla de Elementor creada por creadores externos o aquellos en el equipo de Elementor, también puede compartir las plantillas que ha creado. Elementor te permite almacenar tus modelos en un archivo externo en formato JSON. Puede exportar una plantilla de página o una plantilla de bloque.
Cómo crear y exportar una plantilla Elementor
Para comenzar a crear una plantilla de Elementor, cree una nueva página / publicación y edítela con Elementor haciendo clic en el botón Editar con Elementor encima del editor de WordPress.
Serás llevado al editor de Elementor. Crea tu plantilla. Cuando haya terminado, haga clic en el ícono de flecha pequeña al lado del botón PUBLICARen la parte inferior del panel izquierdo y seleccione Guardar como plantilla.
Una -popup- pop-upaparecerá, pidiéndole que ingrese el nombre de su modelo. Simplemente ingrese el nombre que prefiera y haga clic en el botón REGISTRO.
En el siguiente paso, busque la plantilla que acaba de crear. Una vez encontrado, haga clic en el botón de tres puntos en el extremo derecho y seleccione Exportar.
Su modelo se exportará al almacenamiento local de su computadora. Si no cambia la ubicación de descarga predeterminada de su navegador web, puede encontrarla en la carpeta Téléchargements desde tu computadora.
También puede exportar su modelo desde el Administrador de modelos de Elementor. Para hacerlo, ve a Plantillas -> Plantillas guardadas.
Pase el mouse sobre el modelo que desea exportar y haga clic en Exportar.
Cómo importar una plantilla de Elementor
Como se mencionó anteriormente, puede exportar sus modelos de Elementor a un archivo JSON.
Para importar un archivo JSON desde una plantilla de Elementor, vaya a Plantillas -> Plantillas guardadas.
Haga clic en el botón Importar modelos,puis Escoge un archivo y seleccione el archivo JSON que desea importar. Haga clic en el botón Importar ahorapara iniciar la importación.
Una vez que su modelo haya sido importado, estará disponible en la pestaña Modelos registradosdel administrador de plantillas de Elementor. Para usarlo, simplemente coloque el mouse y haga clic Editar con Elementor.
También puede importar su plantilla haciendo clic en el icono de carpeta en el editor de Elementor.
Haga clic en el icono de flecha en el encabezado de la biblioteca de plantillas para seleccionar un archivo JSON de su computadora.
Ultimas palabras
No solo puede importar la plantilla de Elementor individualmente por archivo. También puede importar varios modelos al mismo tiempo.
Para importar varios modelos, puede crear un archivo ZIP de los archivos de modelo que desea importar. Puede usar el mismo método que cubrimos anteriormente para importar un conjunto de plantillas de Elementor desde un archivo ZIP.
Listo ! Eso es todo por este artículo que le muestra cómo exportar e importar plantillas de Elementor. Si tiene alguna inquietud sobre cómo llegar, háganoslo saber dentro de comentarios.
Confidencialidad y cookies: este sitio utiliza cookies. Si continúa navegando por este sitio, acepta nuestro uso.
Para obtener más información, incluido cómo controlar las cookies, consulte lo siguiente:
Política de Cookies
