Arrastrar y Soltar

NetzBuilder soporta arrastrar y soltar para los elementos web dentro del lienzo del editor. Con el ratón, puede seleccionar bloques enteros o componentes individuales y soltarlos directamente en una página. También puede reorganizar y mover elementos en una página existente. El aprendizaje de esta característica es esencial para ganar habilidades mientras construye contenido en sus páginas y es una poderosa herramienta para ser más productivo.

No se preocupes si aún no entiende la diferencia entre bloques o componentes. Esto se explicará en otros capítulos. Para mantener las cosas simples por el momento, vamos a aprender primeramente como arrastrar y soltar.

Empezamos con un lienzo en blanco. El lienzo es donde editamos visualmente nuestras páginas web. Primero vamos a intentar insertar un encabezado completo en nuestra nueva página. Varios elementos HTML comprenden un encabezado, por lo cual los tenemos organizados bajo un bloque completo de códigos llamado Encabezados.

Un bloque es un compuesto completo de código preelaborado que incluye un contenedor, una cuadrícula y algunos elementos HTML en el interior. Puede aprender más sobre esto en otros capítulos. Vamos a llamar a esto una sección de encabezado que es lo que la mayoría de los sitios web tienen en la parte superior de sus páginas.

Vaya al menú y seleccione BLOQUES > Encabezados

Ahora podemos arrastrar y soltar cualquier encabezado al lienzo. Primero, posicionamos el cursor del ratón sobre el encabezado deseado. Vamos a elegir este hermoso encabezado con una imagen de fondo de algunas montañas.

1. Clic izquierdo en el elemento para seleccionarlo. Mantenga pulsado el botón izquierdo y no lo suelte. Esto activa la función de arrastrar. Todavía con el botón izquierdo pulsado en el elemento comience lentamente moviendo el cursor hacia el lienzo.

Debe ver una caja con 3 líneas verdes que indica que tiene un elemento seleccionado mientras lo hace.

2. Mueva el cursor (siempre con el botón izquierdo presionado hacia abajo) a cualquier lugar que desea en el lienzo del editor. El lienzo muestra automáticamente una línea punteada gris en cualquier lugar válido en el cual puede insertar el elemento como se muestra en la siguiente imagen.

3. Ahora, con la caja dentro de las líneas punteadas, suelte el botón izquierdo del ratón.

¡Eso es todo! Bastante simple, ¿verdad?

Para resumir, clic izquierdo para seleccionar un elemento, mantenga presionado el botón. Arrástrelo al lienzo y suéltelo en la posición deseada. No se preocupe si no consigue esto inicialmente de forma precisa o si inserta algo en el lugar incorrecto, podrá luego moverlo a la posición correcta.

Ahora vamos a intentar el mismo procedimiento, pero en el lienzo del editor con un elemento individual dentro de nuestro encabezado recientemente insertado. Vamos a mover el botón Learn More sobre el párrafo de texto. Clic izquierdo en el botón Learn More y mientras mantiene pulsado el botón, mueva el cursor por encima del texto. A medida que va moviendo el elemento, verá una línea azul. Esta línea muestra visualmente dónde aparecerá el elemento una vez que lo suelte. Puesto que queremos ponerlo por encima del párrafo de texto, la línea azul debe tener la apariencia de la siguiente imagen:

También se dará cuenta de un borde rojo con un título alrededor mientras arrastra el elemento. Esto indica el contenedor en el que estamos trabajando actualmente que se llama un DIV. Para soltar el elemento suelte el botón izquierdo del ratón. ¡Eso es todo! Si no le gusta la posición del elemento, puede moverlo de nuevo con el mismo procedimiento. Tenga en cuenta que sólo puede arrastrar y soltar elementos dentro del Editor en un contenedor de bloque con un DIV válido. Esto es muy fácil de reconocer porque cualquier sección válida está marcada con una línea de puntos rojos llamada DIV y la posición donde se puede soltar un elemento con una línea azul.