Hace mucho tiempo, no teníamos estos sofisticados sistemas de arrastrar y soltar . Si quería mover algo de un lado de la pantalla a otro, tenía que ir a FrontPage, Dreamweaver o lo que sea que estuviera usando para crear su sitio web y crear un lugar para que existiera en la pantalla. Luego, tenía que cortar el contenido (texto, imagen, etc.) de su ubicación y pegarlo en la nueva ubicación. Luego tenías que cambiar el tamaño de todo hasta que se viera como querías. Cada cambio afectaba a todo lo demás.
No había «simplemente agárralo con el mouse y colócalo donde quieras». Incluso si estaba usando un tema de sitio web, aún tenía que cortar y pegar los elementos manualmente. Además, nuestros teléfonos celulares tenían antenas. Eso fue hace 10 años.
Guau. ¡Mira lo lejos que hemos llegado! Ahora tenemos la capacidad de crear una página arrastrando un objeto y soltándolo donde queramos. Hecho. No se requiere codificación.
Incluso en el mundo de WordPress hemos pasado de la capacidad de arrastrar y soltar widgets, a arrastrar y soltar páginas, a arrastrar y soltar temas.
Antes, si quería que su diseño de WordPress se viera diferente, simplemente encontraba o desarrollaba un nuevo tema. Si te gustaba el tema que tenías y querías cambiar algo con tu diseño, tenías que profundizar en el código y programar los cambios que querías. Su otra opción era contratar a un desarrollador para que lo hiciera por usted.
Los sistemas de arrastrar y soltar actuales son más sofisticados. Ahora podemos diseñar y construir una página, o incluso completarlas, con sistemas de arrastrar y soltar que son intuitivos y potentes.
La especificación HTML 5 contiene soporte para una API de arrastrar y soltar. Las funciones incluyen arrastrar y soltar texto, código HTML, elementos HTML y archivos.
Los CMS como Weebly usan arrastrar y soltar como parte de la forma en que maneja su contenido. De hecho, está tan integrado en el sistema que no puede crear contenido sin arrastrar y soltar los elementos de ese contenido en el área de contenido.
Arrastrar y soltar e integración de WordPress
Arrastrar y soltar ha funcionado detrás de escena en WordPress por un tiempo, brindándonos la capacidad de arrastrar y soltar widgets en las áreas de widgets. Comenzó en 2008:
- WordPress 2.7, lanzado el 11 de diciembre de 2008, permitía a los usuarios arrastrar y soltar widgets en el tablero.
- WordPress 3.3, lanzado el 12 de diciembre de 2011, agregó un cargador de arrastrar y soltar para que los medios se pudieran arrastrar a la pantalla de carga.
- WordPress 3.9 , lanzado el 16 de abril de 2014, agregó la capacidad de arrastrar y soltar medios directamente en el editor de publicaciones. Ahora podemos cargar medios arrastrándolos a la pantalla.
Arrastra y suelta para construir tu página de WordPress
Los desarrolladores externos han agregado mucho más a WordPress a través de sistemas de arrastrar y soltar para uso tanto en el back-end como en el front-end. Estos sistemas, ya sea como complementos o como temas, les han dado a los usuarios mucho más poder de diseño y desarrollo sobre sus sitios web de WordPress. He aquí un vistazo rápido a algunos de estos sistemas.
Complementos
Hay dos tipos de complementos que usan arrastrar y soltar de WordPress: los que crean páginas dentro de su tema y los que crean temas completos.
Generador de páginas de arrastrar y soltar
El complemento Arrastrar y soltar de Elegant Themes proporciona herramientas para que pueda arrastrar y soltar contenido en sus páginas y publicaciones. Funciona con cualquier tema y literalmente crea un lienzo donde puede colocar elementos en cualquier lugar que desee en su página. También puede guardarlo como plantilla para poder reutilizarlo fácilmente. Puede crear columnas, cuadros, interruptores, botones, pestañas, controles deslizantes, etc. Esto se hace sin tener que usar HTML o códigos abreviados. Echemos un vistazo más de cerca a este complemento.
Lienzo
Puede colocar módulos con o sin columnas. Sin columnas, los módulos ocuparán todo el ancho de la página. Con las columnas, controlas el tamaño de los módulos. Primero agrega columnas a su lienzo. Puede elegir entre varios anchos que incluyen 1/2, 1/3, 1/4, 2/3, 3/4 y anchos redimensionables. Las columnas serán los marcadores de posición y determinarán el diseño de su página. Puede establecer un diseño de página extremadamente rápido. Si desea algo en una ubicación diferente, simplemente arrástrelo y suéltelo donde lo desee. Fácil.
A continuación, agrega módulos a las columnas. Puede agregar un logotipo, papel, video, testimonio, eslogan, control deslizante de imagen, botón, barra horizontal, lista, alternar, pestañas, control deslizante simple, tabla de precios, cuadro, bloque de texto, área de widget o imagen. Simplemente arrástrelos a sus columnas. Puedes reorganizarlos como quieras. Cada elemento tiene una lista de características y un editor donde puedes agregar contenido.
A continuación, agrega su contenido a cada elemento individualmente.
Esta es una excelente manera de crear rápidamente diseños avanzados sin tener que programar. Puede anidar elementos y arrastrarlos a cualquier lugar para crear un diseño de calidad profesional en cuestión de minutos.
Precio
Arrastrar y soltar es parte del paquete Developer de Elegant Themes. Cuesta $ 89 por año e incluye acceso a todos los complementos y temas, actualizaciones perpetuas de temas, soporte técnico premium y archivos de Photoshop en capas.
VelocityPage
Este complemento funciona con la mayoría de los temas de WordPress y le permite desarrollar páginas en la interfaz. Su reclamo a la fama es que no tiene que usar el panel de administración para la creación de contenido. Todavía necesita su panel de administración, pero puede hacer mucho con el editor WYSIWYG de la interfaz para diseñar sus páginas de la forma que desee. Es rápido y fácil. Incluye algunas buenas herramientas de diseño para crear columnas y filas, y puede insertar y editar contenido simplemente haciendo clic en el elemento que desea editar. Puede crear el diseño de la página y agregar contenido, incluidos formularios de registro, imágenes, videos y redes sociales, todo desde el frente. Es intuitivo de usar y los temas se ven muy bien.
Este es un complemento premium con tres opciones de precios diferentes: Básico cuesta $ 97 para usar en 1 sitio e incluye plantillas de página básicas, Plus cuesta $ 167 para usar en hasta 3 sitios e incluye plantillas de página premium exclusivas, y Professional cuesta $ 247 para sitios ilimitados y incluye las plantillas de página premium.
Compositor visual
Este complemento viene con editores de front-end y back-end. Funciona con cualquier tema y funcionará con su contenido existente. Tiene acceso a 45 elementos de contenido para diseñar sus páginas. Puede agregar fácilmente texto, imágenes, botones, filas, separadores, pestañas, cuadrículas, un carrusel de imágenes, galería de imágenes, una sola imagen, control deslizante, llamada a la acción, cuadro de mensaje, botones de redes sociales, gráfico circular y mucho más. El back-end le permite crear páginas con arrastrar y soltar desde el panel de administración. Soporta multisitios. Todos los diseños son responsivos.
Este es un complemento premium con varias opciones de licencia. La licencia regular cuesta $ 28 y es para uso de un solo cliente y un solo producto por el que no se cobra a los usuarios. La licencia extendida cuesta $ 140 y es para uso de un solo cliente y un solo producto por el que se cobra a los usuarios finales.
La plataforma en sí se puede expandir aún más con complementos premium de desarrolladores externos. Los complementos incluyen plantillas, códigos abreviados, cuadrículas, tablas, WooCommerce, widgets, CSS, íconos, redes sociales, mosaicos isométricos, tablas de precios, logotipos y mucho más. Los precios de los complementos promedian alrededor de $ 15.
Creador de páginas
Page Builder es un complemento gratuito extremadamente popular de SiteOrigin . Funciona en el back-end para crear columnas receptivas para sus widgets, lo que le permite usar widgets como bloques de construcción de sus páginas. Los elementos de la página incluyen botones, llamadas a la acción, listas, cuadros de precios, imágenes animadas y testimonios. Incluye un widget de galería para que pueda insertar imágenes, un widget de imagen normal, un widget de video y un bucle de publicación para mostrar una lista de publicaciones (siempre que su tema lo admita). También tienen una colección de temas gratuitos que puedes usar. No está mal para un complemento gratuito.
Temas
Los complementos no son su única opción para diseñar páginas personalizadas con arrastrar y soltar. Hoy en día, cada vez más temas tienen esta función incorporada. Aquí hay un vistazo rápido a algunos temas con elementos de arrastrar y soltar. Algunos tienen funciones de arrastrar y soltar integradas para que pueda reorganizar algunos elementos en el orden que desee, mientras que otros le permiten crear completamente su diseño arrastrando y soltando módulos en cualquier lugar que desee.
Convertible
El convertible de Elegant Themes le permite crear sus páginas con arrastrar y soltar usando el constructor incluido. Puede colocar módulos en el lienzo y cambiar su tamaño y reorganizarlos de la forma que desee. Puede crear diseños avanzados usando columnas y elementos anidados sin tener que usar códigos abreviados. Los módulos incluyen botones, controles deslizantes de imágenes, listas, encabezados de cintas, citas, testimonios, llamadas en papel, controles deslizantes de contenido, estilos de cuadro, incrustación de video, alternar contenido, contenido con pestañas, cajas de luz para imágenes, logotipo, tablas y más.
Creador de páginas de aterrizaje
El sistema de arrastrar y soltar funciona exactamente igual que el complemento Arrastrar y soltar Page Builder. Agrega columnas y coloca módulos en las columnas. Puede arrastrar y soltar los módulos y las columnas para crear el diseño que desee. Cuando haya terminado, obtendrá un diseño que parece profesional sin tener que usar una sola línea de código.
Convertible es parte del paquete de $69 que incluye 87 temas, actualizaciones perpetuas de temas y soporte técnico premium.
Nexo
Otro tema de Elegant Themes que cuenta con arrastrar y soltar es Nexus. Puede crear su página de inicio arrastrando y soltando elementos en la cuadrícula. Puede agregar, eliminar y reorganizar módulos en el orden que desee.
Constructor de página de inicio
Los módulos aparecen en la pestaña Nexus Homepage Builder. Los módulos incluyen Publicaciones recientes, Publicaciones populares, Reseñas recientes y Publicaciones recientes de varias categorías. Simplemente arrástrelos y suéltelos en el orden que desee. También puede eliminarlos. También hay 5 áreas de widgets de Layout Builder en las que puede colocar widgets.
Nexus es parte del paquete de $69 que incluye 87 temas, actualizaciones perpetuas de temas y soporte técnico premium.
divide
El último tema de arrastrar y soltar de Elegant Themes es Divi. En esencia, Divi es un creador de páginas. Puede optar por no crear su propio diseño personalizado con Divi y, en su lugar, utilizar una de las plantillas integradas. Puede mantener la plantilla tal como está o personalizarla a su gusto.
Divi le brinda las herramientas para diseñar sus páginas desde el back-end completamente arrastrando y soltando. Puede arrastrar y soltar filas, columnas y módulos en cualquier lugar de la pantalla que desee. Simplemente arrastre las filas y columnas donde desee y luego coloque los módulos sobre ellas. Las filas y columnas se usan para diseñar el diseño y los módulos se usan para agregar su contenido. Puede usar los módulos con o sin las columnas, pero al igual que el complemento, las columnas le permiten controlar su tamaño.
Los módulos son los bloques de construcción que construyen páginas en Divi, y hay muchos de ellos. Incluyen encabezado, menú, control deslizante, cartera, mapa, blog, inicio de sesión, texto, tabla de precios, llamado a la acción, contadores de barras, barra lateral, formulario de contacto, alternar, divisor, tienda, temporizador de cuenta regresiva, acordeón, testimonio, video, propaganda, pestañas, galería y mucho más.
Echemos un vistazo a cómo funciona.
Crear una página personalizada en Divi
Crear páginas personalizadas es simple. En su página, seleccione Usar Page Builder. Luego puede comenzar a insertar columnas o elegir entre plantillas.
A continuación, haga clic en Insertar módulos y elija lo que desee.
Ahora puede arrastrar los módulos a cualquier lugar que desee.
También puede elegir uno de los 32 diseños predefinidos y luego comenzar a insertar módulos. Puede arrastrar y soltar cada elemento y módulo para hacer que la página sea lo que quiera que sea. Puede guardar su diseño como plantilla para poder utilizarlo de nuevo. Usar Divi es fácil e intuitivo. No toma mucho tiempo acostumbrarse a diseñar sus páginas y hacer cambios.
Divi es actualmente el tema más potente y avanzado de Elegant Themes. También es parte del paquete de $69 que ofrecemos.
Ultimátum
Ultimatum hace su magia en el back-end, permitiéndole arrastrar y soltar elementos para crear su página. Construye el diseño de la página con filas y columnas y luego suelta los widgets de WordPress en esas áreas. Te permitirá usar cualquier widget en cualquier ubicación. La lista de características es extensa. Le permite realizar una edición extensa de CSS al hacer selecciones en los formularios.
Simplemente elija estilos de fuente, colores, tamaños, etc. de las listas desplegables y podrá ver los resultados de sus selecciones en la pantalla de inmediato. Puede configurar diseños integrados mediante el uso de códigos abreviados y viene con muchos widgets personalizados que incluyen barras laterales, menús, migas de pan , búsqueda, bucle personalizado, comentarios, etiquetas, formularios, controles deslizantes, contenido personalizado y mucho más. También puede importar y exportar sus diseños. También es compatible con WooCommerce, BuddyPress y bbPress . Ah, y también responde.
Hay dos licencias de por vida. La licencia de inicio cuesta $ 65 y se puede usar en dominios ilimitados. Incluye soporte para un solo dominio, acceso a la sección de miembros y 10 complementos premium. La licencia profesional le ofrece mucho más por su dinero. Cuesta $ 125 e incluye todas las funciones de la licencia de inicio, además de soporte para dominios ilimitados, exportador de temas/plantillas, generador de bucles, BuddyPress , bbPress, WooCommerce y un generador de aplicaciones web móviles.
Terminando
El mundo del desarrollo y diseño web es más fácil e intuitivo gracias a los sistemas de arrastrar y soltar. Estos sistemas simplifican enormemente el desarrollo web y lo ponen en manos de las masas. Al mismo tiempo, crean sistemas de diseño más intuitivos para los desarrolladores, ahorrándoles tiempo, simplificando el diseño y mejorando el resultado final.
Arrastrar y soltar ha recorrido un largo camino desde que se integró por primera vez en la estructura de diseño de widgets de WordPress. Se ha pasado de reorganizar unos pocos módulos a diseñar maquetaciones completas. Se está volviendo más popular y seguramente mejorará la forma en que creamos sitios web.
Arrastrar y soltar llegó para quedarse y esto es solo el comienzo. Ya hemos visto que WordPress agrega arrastrar y soltar para widgets en la barra lateral. En los próximos años, es posible que veamos que incluso más elementos se vuelven nativos de la interfaz de usuario de WordPress. Pero realmente no tenemos que esperar hasta entonces, porque hoy tenemos varios complementos y temas que nos brindan la simplicidad del diseño de arrastrar y soltar.
¿Has probado un complemento o tema de arrastrar y soltar? ¿Cómo ha sido tu experiencia? ¿Dejé fuera tu favorito? ¡Me gustaría saberlo en los comentarios a continuación!
Imagen en miniatura del artículo por Jovanovic Dejan / shutterstock.com