> ## Documentation Index
> Fetch the complete documentation index at: https://www.mellowtel.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Stilizzare gli Elementi Mellowtel
Qui vedrai come personalizzare l'aspetto degli Elementi Mellowtel utilizzando le opzioni di stile integrate e il posizionamento CSS del contenitore.
Lo stile del contenitore ti dà il pieno controllo sul layout e sul posizionamento, mentre le opzioni di stile del pacchetto controllano l'aspetto dell'elemento.
## Opzioni di Stile del Pacchetto
Il pacchetto degli Elementi Mellowtel fornisce opzioni di stile integrate che ti permettono di personalizzare l'aspetto dei tuoi elementi senza scrivere CSS personalizzato. Puoi controllare colori, dimensioni e proprietà visive direttamente attraverso l'oggetto di configurazione.
```javascript theme={null}
const styles = {
textColor: '#FFFFFF', // Colore del testo (formato hex)
backgroundColor: '#4CAF50', // Colore di sfondo (formato hex)
radius: 8, // Raggio del bordo in pixel
width: 200, // Larghezza in pixel (intervallo 50-300)
height: 50 // Altezza in pixel (intervallo 20-200)
};
```
### Esempio
```javascript theme={null}
// Crea un pulsante di opt-in verde
await mellowtel.createElement('opt-in-container', {
type: 'opt-in',
styles: {
textColor: '#FFFFFF',
backgroundColor: '#10B981',
radius: 12,
width: 180,
height: 45
}
});
```
## Posizionamento del Contenitore
Stilizza i div del contenitore per posizionare gli elementi:
```css theme={null}
/* Posizionamento di base */
.mellowtel-container {
display: flex;
gap: 10px;
margin: 20px 0;
}
/* Posizionamento fisso */
#opt-in-container {
position: fixed;
top: 20px;
right: 20px;
z-index: 1000;
}
/* Layout reattivo */
.mellowtel-elements {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
padding: 20px;
}
/* Reattivo per dispositivi mobili */
@media (max-width: 768px) {
.mellowtel-container {
flex-direction: column;
align-items: center;
}
}
```
### Esempio Completo di Stile
```html theme={null}
```