Este tutorial rápido le mostrará cómo usar CSS para personalizar su Sorteo de Facebook y cómo integrarlo perfectamente con su sitio web.
CSS significa Hojas de estilo en cascada, que define cómo se muestra el sitio web (o el Sorteo de Facebook) en HTML. Wishpond te permite crear tu propio CSS para tu campaña.
En este ejemplo, Alessandros (una pizzería de lujo) realizó un Sorteo exclusivamente en su sitio web.
Aquí está el Sorteo con el CSS estándar:
El Sorteo no se ve tan bien, vamos a hacer algunos cambios para que podamos tener un sitio web de Alessandos de sorteos limpio y agradable.
Deberá conocer los conceptos básicos de HTML porque el CSS se controla en función de las etiquetas HTML. Los conceptos básicos de HTML se pueden aprender en W3Schools.
El primer paso es simple: debe descargar Google Chrome. Google Chrome tiene la función de “inspeccionar elemento” que le permite cambiar el CSS en el navegador.
Haciendo clic derecho puedes ver todos los efectos. Por ejemplo, si hago clic derecho en la prueba (etiqueta del encabezado 1), a la derecha puedo ver el CSS:
.social_campaign h1 {
font-size: 30px;
line-height: 35px;
color: #1c2a47;
margin-bottom: 20px;
word-wrap: break-word;
}
Lo primero que debemos hacer es cambiar las etiquetas h1. Vamos a ocultar el título del concurso porque ya hay uno.
.social_campaign h1 {
font-size: 30px;
line-height: 35px;
color: #1c2a47;
margin-bottom: 20px;
word-wrap: break-word;
}
No se preocupe, somos conscientes de que el concurso no se ve de lo mejor. Vamos a hacer un truco genial para que todo el sorteo sea transparente y la fuente blanca.
html body {background-color: transparent; color:white;
}
Se ve mucho mejor, ¿verdad? Ahora solo tenemos que arreglar algunos detalles.
Podemos cambiar la posición y el tamaño del pie de página con el siguiente código:
La etiqueta “Posición” hace que la posición sea relativa a la esquina de la competencia. Irá 280 px hacia la derecha y 270 px hacia la parte superior.
.footer {
width: 520px;
position: absolute;
right: 280px;
top: 270px;
}
Para darle un poco de estilo al cuadro de entrada, debemos hacer que el fondo sea transparente. Aunque hemos usado este código anteriormente, lo proporcionaremos una vez más para su comodidad:
.social_campaign .controls{
color:black;
background-color: transparent;
}
#subscribe_box {
visibility:hidden;
}
También ocultamos el cuadro de suscripción. Aquí están los resultados:
.social_campaign .controls .action{
background-color: transparent;
}
.social_campaign .controls .disclaimer {
visibility:hidden;
}
¡Oh, no! ¡El clic es negro ahora! No hay problema, solo tenemos que agregar algo de CSS y listo.
.social_campaign .controls .timer {
color:white;
}
Y aquí está el resultado final:
Definitivamente una mejora.
Si desea crear un Sorteo de Facebook para su sitio web, puede comenzar aquí:
Además, si actualmente está realizando un Sorteo y desea obtener ayuda con el CSS, envíenos un correo electrónico a [email protected].
