Hace unos meses modifiqué mi código de blockquote de WordPress para hacer una pequeña caja verde. No es nada espectacular, pero desde entonces la he usado en varios lugares con bastante éxito.
Ha aumentado mi tasa de clics a algunos afiliados en un 2-3%.
Ha llamado la atención sobre publicaciones antiguas que quiero destacar.
Lo mejor de todo, sin embargo, es que ha aumentado drásticamente mis suscripciones por correo electrónico cuando lo he usado en una publicación para promocionar mi lista de correo.
En esta publicación te mostraré cómo hacer una en solo cinco minutos y luego hablaré sobre cómo sacarle el máximo provecho en tu blog.
¡Cosas prácticas, eh!
¿Cómo se ve esta pequeña caja?
Bien, así es como está configurada la pequeña caja para que se vea en este sitio.
Aquí tienes un ejemplo. Es una forma agradable de llamar la atención sobre un enlace o simplemente hacer un anuncio sobre algo que sucede en tu blog. Estoy seguro de que hay muchas maneras en que se puede usar.
Ahora, lo genial de esto es que podemos usar la Hoja de Estilos en WordPress para cambiar un montón de elementos como:
- el color de fondo
- el borde (línea discontinua, punteada, sólida)
- el color de la línea
- el ancho y el espaciado
- etc.
Entonces, ¿cómo haces una? ¡Ya voy a eso!
Cómo hacer una caja de cita alternativa
Bien, como mencioné al principio de la publicación, esta pequeña maravilla es una cita alternativa que se hace usando tu Hoja de Estilos de WordPress.
Implica un poco de modificación de código, pero en realidad es solo cuestión de copiar y pegar, así que no debería causarte demasiados problemas.
Si alguien conoce una mejor manera, por favor hágamelo saber. Siempre estoy dispuesto a aprender.
1. Haz una copia de seguridad de tu Hoja de Estilos original
Antes de hacer cualquier cambio en tu Hoja de Estilos, siempre debes copiar la original y guardarla en un lugar seguro. A veces cometes errores y si no tienes mucha experiencia con la codificación, te costará trabajo recuperarla correctamente.
Simplemente inicia sesión en WordPress y ve a Apariencia > Editor > Hoja de estilos y luego copia el código en un documento de Bloc de notas o algo similar.
2. Encuentra el código de tu blockquote
El siguiente paso es encontrar tu código de blockquote actual. Quédate en la Hoja de Estilos y presiona Control F (Comando F en Mac) y escribe "blockquote". Encontrará el código para que no tengas que desplazarte.
Así es como se ve el mío:
Este es el blockquote regular que aparece en mi blog cuando quiero citar a alguien. Tiene las comillas y no se parece en nada a la caja verde de arriba. Entonces, el siguiente paso es ajustar ese código para que se vea como tú quieres.
3. Copia el código y pégalo abajo para hacer uno segundo
El siguiente paso es copiar tu código de blockquote y pegar el nuevo directamente debajo del antiguo. Luego, cambia el nombre de la parte del título por algo nuevo. Mira abajo donde he renombrado el mío como "blockquote.new".
Así que ahora tu código tiene dos blockquotes para que elijas.
4. Cambia el diseño del nuevo
Ahora necesitas hacer algo de codificación y cambiar el diseño de tu nuevo blockquote. Esto es mucho más fácil de lo que suena. Básicamente, tienes un número determinado de cosas que puedes cambiar cuando se trata de codificación CSS. Las principales son borde, margen, relleno, color de fondo y fuente.
Aquí tienes algunas que puedes probar a continuación:
Las posibilidades son infinitas aquí, así que usa un sitio como W3 Schools para ver qué funcionará y qué no. Además, una tabla de colores HTML como esta es muy útil.
5. Usa la etiqueta blockquote en una publicación
Ahora que has codificado tu nuevo bebé, puedes usarlo en tus publicaciones y páginas simplemente usando las mismas etiquetas blockquote pero haciendo referencia al pequeño nombre nuevo que le diste. En este ejemplo, harías:
Cómo sacar el máximo provecho de la caja de cita
Aquí hay algunas cositas a considerar al usar este pequeño chico malo en tu blog.
1. No te excedas
Por favor, no uses esta pequeña caja en cada publicación y todo el tiempo. Parte de la razón por la que es tan efectiva es porque tus lectores no la ven a menudo y destaca del resto de tu contenido. Si la usas regularmente, la gente desarrollará "ceguera" hacia ella.
2. No copies la mía
Ahora, queremos que esta cosa destaque, pero no queremos hacerla tan diferente que parezca un anuncio o algo que no sea parte de tu sitio. Mantén las fuentes iguales y asegúrate de que los colores encajen bien, incluso si son diferentes al resto de tu marca. No copies la mía, no encajará con tu sitio.
3. Pruébalo
Como siempre, no asumas que lo primero que haces está funcionando. Prueba diferentes colores y mide no solo cuántos clics obtiene, sino también cuántos de esos clics se están convirtiendo en registros y ventas.
4. Recuerda el texto
No asumas que solo porque tienes una bonita y colorida cajita obtendrás clics. Asegúrate de crear un texto atractivo que incluya cosas como prueba social, escasez, etc. ¡Prueba eso también!
5. Deséchalo si no funciona
Estos tipos de pequeños trucos son maravillosamente emocionantes cuando encuentras unos nuevos. Me da un verdadero subidón implementar cosas como esta en mis blogs. Pero, también tienes que estar preparado para dejarlo ir si no funciona o si recibes muchas quejas.
¿Le darás una oportunidad?
Me encantaría saber si encuentras interesante este tipo de cosas. Siempre estoy jugando con ideas como estas y pensé que tal vez podría compartir más, quizás cada fin de semana, si es algo que te interesa.
¿Le darás una oportunidad? Por favor, házmelo saber en los comentarios de abajo.
Hola Ramsay,
No me di cuenta de que estabas en Australia, yo estoy en Tasmania… Launceston. Esta caja verde tuya es genial, es asombroso cómo variar el diseño de una página puede lograr resultados. He estado usando un plugin llamado J-shortcodes para agregar una variedad de funciones como esta, incluso columnas para lograr ese efecto de diseño de 'revista'. Pero las cajas de colores son muy útiles http://www.jshortcodes.com/ vale la pena echarle un vistazo. Saludos
Ah, no he oído hablar de eso. Suena genial. Lo revisaré.
Todos los que conozco aman Tasmania. Todavía no he llegado hasta allá, ¡pero está en la lista!
¡Gracias por pasar el domingo!
¡Australia está despierta! Yo, un canadiense, listo para ir a dormir. Esto suena genial. Lo probaré en el nuevo sitio web que acabo de crear gracias a ti, Ramsay. mphocus.com. ¡Gracias por la inspiración! ¡Tienes que, quiero decir, debes visitar Tasmania! Estuve allí hace aproximadamente un año y es fabuloso. Mi mejor amiga vive en el suburbio de Hobart. Este es su https://www.pjpaintings.com/ Avísame si visitas
Gracias Averil.
Ramsay, esto se parece a la función de caja ET en muchos temas (uso Personal Press en mi blog y mi editor tiene esta función). Es fácil de usar: solo hago clic en la caja, elijo el color preferido y pongo texto o html y estoy listo para empezar.
Debo probar el color verde de todos modos 😀
Gracias por este consejo.
¡Buena suerte!
Me gusta tu cajita y me gusta el nuevo encabezado azul y la barra lateral azul. Es mucho menos molesto que el naranja. ¿Sabías que usan naranja en los restaurantes de comida rápida para evitar que la gente se quede mucho tiempo? Estoy seguro de que hay una prueba dividida en alguna parte.
¿También encontraste alguna información sobre el blog dentro de un blog?
¿Barra lateral azul?
Creo que Rachelle se refiere a tu barra de saludo, Ramsay. Estás haciendo pruebas divididas de colores naranja y azul, ¿verdad?
El cuadro lateral "Únete a 10,000 registradores".
Eso es gris. ¿A menos que se vea muy diferente en tu monitor...?
Código espeluznante. No, gracias, adiós 🙂
Greg, Greg, Greg.
Maravilloso código. Creo que uno no debería depender de plugins para pequeñas necesidades de innovación. Esta pequeña caja puede hacer un trabajo tan grande si se explota bien. Lo importante no es cómo lo haces, sino cómo lo usas.
Gracias Ramsay por compartir una idea tan genial.
Tu punto sobre "depender de los plugins" es una de esas actitudes piadosas que a la gente pedante le encanta expresar en tonos de regaño; sin embargo, el plugin en cuestión es particularmente versátil, lo que de ninguna manera resta valor a la solución codificada ofrecida por Ramsay, creo que es elegante y muy útil.
Estoy de acuerdo con ambos.
La única razón para no usar el plugin es si la solución de codificación es simple y el plugin solo causaría hinchazón o ralentización.
Aparte de eso, realmente no hay razón para no usar el plugin si está actualizado.
Ahora compórtense. 🙂
Y siempre que evalúes regularmente todos tus plugins para asegurarte de que sigan actualizados.
Buen consejo Ramsey, le da un pequeño extra a la publicación. No soy fanático de demasiados plugins en mi sitio y me gusta el código. Sin embargo, en mi último blog uso Optimize Press, que tiene muchas opciones de código corto personalizadas hechas para ti, ¡así que estoy haciendo trampa! :)
Sí, parece que mucha gente lo está usando... Bien hecho.
Buenos días desde Dublín, Ramsay
Encantador consejo.
Algo que he estado usando en mis publicaciones para romper el texto si el Cuadro de Cita. Es genial para enfatizar un punto o una lista de cosas.
Me gusta la idea de que aparezca otra caja de color de vez en cuando para promocionar algo.
Excelente como siempre.
Liz
Excelente comentario como siempre. 🙂
Yo también uso cajas como esta en el blog, por ejemplo en mi página de inicio. Sin embargo, no toqué el código original. He usado CSS personalizado.
Mi tema tiene un 'lugar' de CSS personalizado donde puedo, por ejemplo, crear nuevos div y luego definir cómo se ven.
Por ejemplo, la caja azul que ves en mi página de inicio se crea como .my-featurebox.
Así que en mi lugar de CSS personalizado puse
.my-featurebox {float:none; border-radius:7px;background:#dde9fd;color:#3366bb;font-size: 120%;padding: 30px 70px 20px 70px;}
y luego en mi página de inicio simplemente pongo todo lo que quiero que esté en el cuadro
La gente del foro de soporte de mi tema me enseñó esto. De esa manera no tienes que meterte en el código original.
PD Definitivamente interesado en más de este tipo de consejos
Esa no es una mala idea, en realidad. Bien hecho, Sofie.
¡Gracias!
Truco genial – ¿aumentó el CTR en un 2-3% dices? ¡Me voy a probar esto ahora mismo!
¡Estoy contigo! Tengo muchos sitios de afiliados que pueden usar un pequeño despertar. La ceguera se ha apoderado, así que esto debería hacer que las cosas salten.
Otro gran consejo de un compañero australiano. 😉
Espero que ayude. Hazmelo saber.
Gracias por tu gran idea, probaré este truco para mi página
Espero que ayude.
Hola Ramsay,
¡Qué coincidencia! Acabo de empezar a implementar esto en mi blog la semana pasada.
Solía tener un formulario de registro genérico al final de cada publicación, pero lo eliminé ya que no ha estado funcionando bien y en su lugar agrego un formulario de registro en medio de ciertas publicaciones ofreciendo un regalo relacionado con el tema de esa publicación en particular.
En mi última publicación sobre cómo obtuve más de 140 +1 en una sola publicación de blog en Google+, dije que crear una imagen atractiva para mi publicación marcó la diferencia. Luego usé la estrategia de la "caja verde" y ofrecí un seminario web gratuito para ayudar a las personas a crear sus propias imágenes geniales.
¡Gracias por compartir! Creo que este es un gran consejo que espero que mucha gente use a pesar del código intimidante 😉
Galen
¡Uy! Me equivoqué con mi enlace en mi último comentario, así que en caso de que alguien quiera ver el ejemplo del que hablaba en mi blog, puede verlo en
SuccessMeasured.com
¡Increíble! Muy buen trabajo, de verdad. Gracias por compartir.
¡Hola Ramsay!
Este es mi primer comentario en tu blog. Todavía me estoy lamentando por no haber pasado antes. **me doy de topes**
Entonces, me pregunto si recomiendas cambiar el código en una hoja de estilos (o en un tema hijo) en lugar de usar un plugin como Shortcodes Ultimate para hacer las cajas geniales como las has descrito.
Sé que los plugins tienden a ralentizar los sitios de WP, pero vaya, son tan útiles y fáciles de usar y no tienes que tocar el código.
¿Tus pensamientos?
Colleen Conger @ DigiPD.com
Sí, no había visto este plugin, pero se ve muy bien. Mucha gente aquí lo ha recomendado, así que creo que lo revisaré.
Estoy ejecutando multisitio junto con al menos 40 plugins para uno de mis proyectos, así que intento codificar funciones como esta para evitar conflictos y problemas de rendimiento.
¡Gracias por el tutorial!
¡¡¡¡40 plugins!!!! ¿Para qué en el mundo?
Tan simple, pero creo que no lo he visto usado tan a menudo. Tendré que probar esto alguna vez. ¡Excelente consejo!
Gracias Brian.
Estoy usando algo como esto al final de mis publicaciones usando un plugin llamado "What Would Seth Godin Do". Haré algunos cambios, lo pondré verde, y te haré saber cómo va 🙂
Plugin clásico.
Yo también uso WWSGD. Nunca se me había ocurrido cambiar el código CSS para eso. ¡Gran idea, Ramsay!
Hola, gracias por este gran consejo, lo intentaré, ¡gracias por compartir!
[…] que recibe. Si tu promoción no encaja bien dentro del contexto del artículo, puedes usar un aviso para separarla del texto de la publicación, lo que la marca claramente como una promoción o un anuncio. Puedes mencionar brevemente el […]