Todas las Noticias en Pel√≠culas, Avances de Pel√≠culas y Rese√Īas.

Cómo personalizar un sorteo en su sitio web usando CSS

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:

imagen

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;
}

imagen

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.

Recomendado:  Los 15 mejores ejemplos de sitios web de portafolios de artistas [Get Inspired!]

imagen

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;
}

imagen

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:

imagen

.social_campaign .controls .action{
background-color: transparent;


}


.social_campaign .controls .disclaimer {
visibility:hidden;
}

imagen

¬°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:

imagen

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].