> ## 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.
# Estilizar Elementos de Mellowtel
Aquí verás cómo personalizar la apariencia de los Elementos de Mellowtel usando opciones de estilización integradas y posicionamiento de contenedores CSS. La estilización de contenedores te da control total sobre el diseño y el posicionamiento, mientras que las opciones de estilización del paquete controlan la apariencia del elemento.
## Opciones de Estilización del Paquete
El paquete de Elementos de Mellowtel proporciona opciones de estilización integradas que te permiten personalizar la apariencia de tus elementos sin escribir CSS personalizado. Puedes controlar colores, dimensiones y propiedades visuales directamente a través del objeto de configuración.
```javascript theme={null}
const styles = {
textColor: '#FFFFFF', // Color del texto (formato hex)
backgroundColor: '#4CAF50', // Color de fondo (formato hex)
radius: 8, // Radio del borde en píxeles
width: 200, // Ancho en píxeles (rango 50-300)
height: 50 // Altura en píxeles (rango 20-200)
};
```
### Ejemplo
```javascript theme={null}
// Crear un botón de suscripción verde
await mellowtel.createElement('opt-in-container', {
type: 'opt-in',
styles: {
textColor: '#FFFFFF',
backgroundColor: '#10B981',
radius: 12,
width: 180,
height: 45
}
});
```
## Posicionamiento de Contenedores
Estiliza los divs contenedores para posicionar elementos:
```css theme={null}
/* Posicionamiento básico */
.mellowtel-container {
display: flex;
gap: 10px;
margin: 20px 0;
}
/* Posicionamiento fijo */
#opt-in-container {
position: fixed;
top: 20px;
right: 20px;
z-index: 1000;
}
/* Diseño responsivo */
.mellowtel-elements {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
padding: 20px;
}
/* Responsivo para móviles */
@media (max-width: 768px) {
.mellowtel-container {
flex-direction: column;
align-items: center;
}
}
```
### Ejemplo Completo de Estilización
```html theme={null}
```