Black Friday Sale! Save up to 50% off!
  1. Casa
  2. Caratteristiche
  3. Elementi della pagina Web
  4. Elemento ripetitore griglia
  5. Animazione Al Passaggio Del Mouse Per Elementi Del Ripetitore Griglia

Come animare l'elemento del ripetitore della griglia sulla casella o al passaggio del mouse sull'oggetto

Simile all'elemento gruppo, puoi animare gli elementi del ripetitore griglia al passaggio del mouse del gruppo (elemento). Inoltre, puoi anche aggiungere l'effetto di animazione al passaggio del mouse agli elementi e lavoreranno insieme. Vai al pannello delle proprietà, fino alla sezione Animazione attiva, imposta sia gli effetti di animazione al passaggio del mouse che quelli di gruppo al passaggio del mouse, se necessario.
Per saperne di più

Sfoglia per categorie di funzionalità

Elementi della pagina Web
Sistemi supportati
Editor di pagine visive
Elementi di design
Librerie multimediali
Proprietà dell'elemento
Reattivo
Effetti di animazione
Impostazioni tema
Modulo di Contatto
Intestazione e piè di pagina
Blog
Commercio elettronico
SEO
Codice personalizzato
Caratteristiche dell'applicazione
Proprietà del sito e della pagina
Widget WordPress

Tutto ciò di cui hai bisogno per creare il tuo sito web gratuito

Utilizza il nostro Website Builder per progettare e creare siti Web senza codifica. Trascina e rilascia tutto ciò che vuoi, dove vuoi. Il Website Creator adatta automaticamente il tuo sito web per dispositivi mobili per renderlo reattivo. Scegli tra più di 15,000 modelli di siti web personalizzabili.

Scarica per Windows Scarica per Mac

Funzionalità correlate

Aggiungi righe al ripetitore griglia

Simile all'aggiunta di colonne, puoi aumentare e diminuire il numero di righe facendo clic sull'icona blu Plus nella parte inferiore del Ripetitore griglia. Dopo aver visualizzato l'elenco a discesa, puoi selezionare il numero di righe richieste. Puoi scegliere sia numeri incrementali che decrescenti.
Spazio tra gli elementi del ripetitore della griglia

Utilizzando la proprietà Spazio tra elementi nel pannello delle proprietà, è possibile modificare la distanza tra gli elementi del ripetitore della griglia. Seleziona il Grid Repeater, vai al pannello delle proprietà, trova la proprietà Item Gap e trascina il suo cursore per cambiare la distanza tra gli elementi del Grid Repeater.
Ripetitore griglia a carosello

I Carousel Slider sono molto popolari nel web design moderno e, di solito, gli elementi Carousel hanno lo stesso layout e set di elementi. In Nicepage, puoi facilmente convertire qualsiasi Grid Repeater in un Carousel facendo clic sull'opzione switcher nel pannello delle proprietà.
Proprietà di colonne e righe

Il pannello delle proprietà consente di modificare le proprietà dell'elemento. Ad esempio, puoi modificare le colonne e le righe in un punto per il ripetitore griglia. Per modificare le colonne e le righe, vai ai pannelli delle proprietà e trascina i cursori corrispondenti per modificare i valori delle proprietà.
Multi-selezione al ripetitore di griglia

Puoi convertire più elementi selezionati in un ripetitore griglia. Accelera lo sviluppo di blocchi come funzionalità, team, testimonianze, ecc. Seleziona più elementi, quindi fai clic sull'icona blu Plus sul bordo sinistro. Quindi, seleziona il layout Ripetitore griglia.
Colori degli elementi del ripetitore della griglia

Utilizzando l'elemento Ripetitore griglia, puoi applicare colori diversi ai suoi elementi e agli elementi contenuti. Per questo, vai al pannello delle proprietà e cambia Tutti gli articoli in Articolo nella sezione "Applica stile a". Quindi imposta i colori richiesti per la tua idea di web design
Aggiungi colonne al ripetitore griglia

Puoi facilmente modificare il numero di colonne per il ripetitore griglia utilizzato in un blocco. Fare clic sull'icona blu Plus sul lato destro del Grid Repeater, quindi selezionare il numero di colonne dall'elenco a discesa. Puoi scegliere sia numeri incrementali che decrescenti.

Modelli gratuiti con Elemento ripetitore griglia

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 Animate Your Grid Repeater Items Using Box Hover Effects

Our page builder has an advanced Grid Repeater that provides many possibilities to improve your page layout. To make your Grid items more interactive, you can animate them using hover effects. You can apply the hover effect animation to the Grid Group and the certain Grid Box, and both of those hover effects will work simultaneously. Enter the Property Panel of our page builder, go to the Animation On section of the menu, and click the Hover Animation Effects, Group Hover Effects, or both to activate the hover effects animation settings. You can one-click to pick the Animation from our library or upload your custom animation and apply it.

Our page builder helps you quickly drag and drop elements into the Grid to create a new way to display your content. Add text and images into your Group box and manage the content. Using your interactive layout slider, add the text animation and the image gallery with beautiful transitions. Click to copy some unique animated text features to your text box that will correlate with the background image, video background, and the background color section. It will not affect the page load but will add some special effects and dynamics to your page layouts.

The most popular and advanced site builder will provide different approaches to your layout construction decisions. Our page builder will answer how to build a product display section with a unique product style using additional content and some menu techniques. Our page builder will make your best content available on all mobile devices and let your mobile menu content reach your potential customers. Sign up for our page builder news to discover how many new features you can use in your site construction.

Company
Product
Themes & Templates
Nicepage
Web Design