Come utilizzare l'elemento Box nei progetti di siti web

A differenza del raggruppamento, puoi utilizzare l'elemento Box per aggiungere lo Sfondo e il Bordo sotto gli elementi raggruppati. Puoi anche spostare, ridimensionare e aggiungere sfondo, bordo ed effetti intorno all'elemento Box nei pannelli Contesto e Proprietà.
Elemento scatola Come utilizzare l'elemento Box nei progetti di siti web

Sfoglia per categorie di funzionalità

Trascina insieme gli elementi della scatola

Nell'Editor, puoi selezionare più elementi e spostarli insieme. Tuttavia, si consiglia di raggruppare gli Elementi come parte integrante del web design, che li conserva e il loro posizionamento. Puoi trascinare e rilasciare il gruppo e i suoi elementi insieme, il che è conveniente e consente di risparmiare tempo.

Converti casella in ripetitore griglia

Se hai bisogno di più colonne di elementi dall'aspetto simile, puoi convertire un gruppo nel ripetitore griglia. Ti consente di stilizzare gli elementi raggruppati in colonne in modo simile, il che significa che quando modifichi un elemento posizionato in un elemento di un ripetitore griglia, tutti gli altri elementi posizionati in altri elementi ottengono automaticamente lo stesso stile.

Tipi di sfondo della scatola

Uno dei principali vantaggi dell'Elemento Gruppo è che puoi stilizzarlo come un singolo Elemento. Ha dei limiti e per riempire l'area isolata, puoi impostare lo Sfondo, che può essere Riempimento continuo, Sfumatura, Immagine e Video, oppure puoi non avere Sfondo, che è applicabile se applichi il Bordo, ad esempio.

Animazione al passaggio del mouse sulla scatola

Utilizzando Gruppi, puoi animare elementi raggruppati. In questo modo, puoi animare il gruppo stesso. Ad esempio, puoi modificare lo sfondo e il bordo per un gruppo. Per gli elementi interni, mentre passi il mouse su un gruppo, puoi applicare altri effetti di animazione, come ridimensiona, ruota, sposta, ecc., creando un'interazione straordinaria per attirare il tuo visitatore a rimanere più a lungo sul sito web.

Animazione al passaggio del mouse di sfondo dell'immagine della scatola

Simile alle celle della griglia, puoi applicare l'effetto di animazione al passaggio del mouse allo sfondo dell'immagine di un gruppo. Puoi utilizzare diversi predefiniti pronti all'uso, come Zoom, Ridimensiona e Diapositiva. Inoltre, puoi perfezionare l'animazione al passaggio del mouse per adattarla alle esigenze dell'idea del tuo sito web.

Casella per passare il cursore

Puoi utilizzare il dispositivo di scorrimento al passaggio del mouse quando è necessario mostrare un diverso insieme di elementi per un gruppo al passaggio del mouse. Per questo, seleziona un gruppo e abilita il cursore al passaggio del mouse nella sezione corrispondente del pannello delle proprietà.

Casella di proprietà di confine

The Outline è un effetto molto popolare utilizzato nel web design moderno. I designer utilizzano Outline per icone, pulsanti e rettangoli dietro gli elementi. In Nicepage, non sono necessari rettangoli aggiuntivi, poiché puoi creare il contorno attorno agli elementi impostando la proprietà Border per un Box.

Modelli gratuiti con Elemento scatola

Inizia con i nostri migliori modelli, ideali per qualsiasi attività commerciale. Creali e personalizzali con il nostro generatore di siti Web potente e gratuito senza codice. Tutti i modelli sono ottimizzati per i dispositivi mobili e hanno un aspetto eccellente su qualsiasi dispositivo.

How To Use The Group Element In Website Designs

Design is always based on the main content and on the elements that will set up this content to provide the best exclusive experience to the visitors. Every inexperienced creator wants to learn how designers create responsive websites that you can quickly and efficiently change. Some web designers use one set of elements they developed themselves, and others use the program or application they are used to. A great example of how can Nicepage help designers, especially new ones, is the group container element.

Group container element is an example of setting websites and improving the process optimization for the layout design that can work well on all platforms. Using containers, you can build a responsive design to quickly adjust container layouts to the screen sizes, using CSS presets, change color and style, and skip to main content without the fear of damaging the responsive web design. Skip to the main menu of your dashboard and click on the element tab to create a new container. Make sure to check the container element presets like bordered, circle, etc., which will suit all screen sizes. After deciding how the final layout container will look, you can start filling the container with a content element you desire.

Group container as an element can show one column or be transformed into a slider element with repeated column design inside. Using different container preferences, you can make an image-based container for different screen sizes to quickly adjust how you like. Using our example preset can help you get acquainted with the possibilities of the container, screen sizes applied, how to set containers according to your layout, and how using a combination of elements can develop websites to become the most popular on the internet.