Há alguns meses, ajustei meu código de blockquote do WordPress para criar uma pequena caixa verde. Não é nada incrível, mas desde então a usei em vários lugares com bastante sucesso.
Aumentou minha taxa de cliques para alguns afiliados em 2-3%.
Trouxe atenção para posts antigos que quero destacar.
O melhor de tudo, no entanto, é que aumentou drasticamente minhas inscrições por e-mail quando a usei em um post para promover minha lista de e-mails.
Neste post, vou mostrar como fazer uma em apenas cinco minutos e, em seguida, falarei sobre como tirar o máximo proveito dela em seu blog.
Coisas práticas, cara!
Como é essa caixinha?
Ok, então é assim que a caixinha está configurada para aparecer neste site.
Aqui está um exemplo. É uma ótima maneira de chamar a atenção para um link ou simplesmente fazer um anúncio sobre algo que está acontecendo em seu blog. Tenho certeza de que há muitas maneiras de usá-la.
Agora, o legal disso é que podemos usar a Folha de Estilos no WordPress para alterar vários elementos, como:
- a cor de fundo
- a borda (tracejada, pontilhada, linha sólida)
- a cor da linha
- a largura e o espaçamento
- etc.
Então, como fazer uma? Estou chegando lá!
Como fazer uma caixa de blockquote alternativa
Ok, como mencionei no início do post, essa belezinha é uma blockquote alternativa feita usando sua Folha de Estilos do WordPress.
Envolve um pouco de ajuste de código, mas é realmente apenas uma questão de copiar e colar, então não deve causar muitos problemas.
Se alguém souber de uma maneira melhor, por favor, me avise. Sempre ansioso para aprender.
1. Faça backup da sua Folha de Estilos original
Antes de fazer qualquer alteração em sua Folha de Estilos, você deve *sempre* copiar o original e salvá-lo em um local seguro. Às vezes, você comete erros e, se não tiver muita experiência com codificação, terá dificuldade em recuperá-lo corretamente.
Basta fazer login no WordPress e ir em Aparência > Editor > Folha de Estilos e, em seguida, copiar o código para um documento do Bloco de Notas ou algo assim.
2. Encontre seu código de blockquote
O próximo passo é encontrar seu código de blockquote atual. Fique na Folha de Estilos e pressione Control F (Command F para Mac) e digite “blockquote”. Ele encontrará o código para que você não precise rolar.
Veja como o meu se parece:
Esta é a blockquote regular que aparece no meu blog quando quero citar alguém. Ela tem as aspas e não se parece em nada com a caixa verde acima. Então, o próximo passo é ajustar esse código para que ele fique como você deseja.
3. Copie o código e cole-o abaixo para fazer um segundo
O próximo passo é copiar seu código de blockquote e colar o novo diretamente abaixo do antigo. Em seguida, você renomeia a parte do título para algo novo. Dê uma olhada abaixo, onde renomeei o meu para “blockquote.new”.
Então, agora seu código tem duas citações para você escolher.
4. Mude o design da nova
Agora você precisa codificar e mudar o design da sua nova citação. Isso é muito mais fácil do que parece. Basicamente, você tem um número limitado de coisas que pode mudar quando se trata de codificação CSS. As principais são: borda, margem, preenchimento, cor de fundo e fonte.
Aqui estão algumas que você pode experimentar abaixo:
As possibilidades são infinitas aqui, então use um site como W3 Schools para ver o que funciona e o que não funciona. Além disso, um gráfico de cores HTML como este é muito útil.
5. Use a citação em uma postagem
Agora que você codificou seu novo "bebê", pode usá-lo em suas postagens e páginas, apenas usando as mesmas tags de citação, mas referenciando o pequeno novo nome que você deu a ela. Neste exemplo, você faria:
Como aproveitar ao máximo a caixa de citação
Aqui estão algumas pequenas coisas a considerar ao usar essa belezinha em seu blog.
1. Não exagere
Por favor, não use esta caixinha em todas as postagens e o tempo todo. Parte do motivo pelo qual ela é tão eficaz é porque seus leitores não a veem com frequência e ela se destaca do restante do seu conteúdo. Se você a usar regularmente, as pessoas desenvolverão "cegueira" em relação a ela.
2. Não copie a minha
Agora, queremos que essa coisa se destaque, mas não queremos que seja tão diferente a ponto de parecer um anúncio ou algo que não faz parte do seu site. Mantenha as fontes iguais e certifique-se de que as cores combinem bem, mesmo que sejam diferentes do resto da sua marca. Não copie a minha - não combinará com o seu site.
3. Teste
Como sempre, não assuma que a primeira coisa que você faz está funcionando. Experimente cores diferentes e meça não apenas quantos cliques ela recebe, mas também quantos desses cliques estão se convertendo em cadastros e vendas.
4. Lembre-se da cópia
Não assuma apenas que, por ter uma caixinha colorida e bonita, você terá cliques. Certifique-se de criar uma cópia atraente que inclua coisas como prova social, escassez e assim por diante. Teste isso também!
5. Descarte se não funcionar
Esses tipos de pequenos truques são maravilhosamente empolgantes quando você encontra novos. Eu sinto um verdadeiro entusiasmo ao implementar coisas como essa em meus blogs. Mas você também tem que estar preparado para deixá-la ir se não funcionar ou se você receber muitas reclamações.
Você vai tentar?
Eu adoraria saber se você acha esse tipo de coisa interessante. Estou sempre experimentando ideias como essas e pensei que talvez pudesse compartilhar mais - talvez todo fim de semana - se for algo que lhe interessa.
Você vai tentar? Por favor, me diga nos comentários abaixo.
Oi Ramsay,
Eu não sabia que você estava na Austrália, eu estou na Tasmânia... Launceston. Esta sua caixa verde é legal, é incrível como variar o layout de uma página pode alcançar resultados. Eu tenho usado um plugin chamado J-shortcodes para adicionar uma variedade de recursos como este, até colunas para alcançar esse efeito de layout de "revista". Mas caixas coloridas são muito úteis http://www.jshortcodes.com/ vale a pena dar uma olhada. Abraços
Ah, não ouvi falar disso. Parece legal. Vou conferir.
Todo mundo que conheço ama a Tasmânia. Ainda não fui para lá, mas está na lista!
Obrigado por passar no seu domingo!
A Austrália está acordada! Eu, um canadense, estou pronto para ir dormir. Isso parece legal. Vou tentar no novo site que acabei de criar graças a você, Ramsay. mphocus.com. Obrigado pela inspiração! Você tem que, quero dizer, você deve visitar a Tasmânia! Estive lá há cerca de um ano e é fabuloso. Minha melhor amiga mora no subúrbio de Hobart. Este é o dela https://www.pjpaintings.com/ Me avise se você visitar
Obrigado, Averil.
Ramsay, isso parece semelhante ao recurso da caixa ET em muitos temas (eu uso o Personal Press no meu blog e meu editor tem esse recurso). É fácil de usar – eu apenas clico na caixa, escolho a cor preferida e coloco texto ou html e estou pronto.
Preciso testar a cor verde, no entanto 😀
Obrigado por esta dica.
Boa sorte!
Eu gosto da sua caixinha e gosto do novo cabeçalho azul e da barra lateral azul. É muito menos chocante do que o laranja. Você sabia que eles usam laranja em restaurantes de fast-food para impedir que as pessoas fiquem muito tempo? Tenho certeza de que há um teste A/B em algum lugar.
Além disso, você encontrou alguma informação sobre o blog dentro de um blog?
Barra lateral azul?
Acho que Rachelle está falando da sua barra "Olá", Ramsay – você está testando as cores laranja e azul, certo?
A caixa da barra lateral "junte-se a 10.000 blogueiros".
Isso é cinza. A menos que pareça muito diferente no seu monitor...?
Código assustador. Não, obrigado, até mais 🙂
Greg, Greg, Greg.
Codificação maravilhosa. Acho que não se deve depender de plugins para pequenas necessidades de inovação. Esta pequena caixa pode fazer um trabalho tão grande se for bem explorada. O importante não é como você faz, mas como você usa.
Obrigado Ramsay por compartilhar uma ideia tão legal.
Seu ponto sobre ser 'dependente de plugins' é uma daquelas atitudes piedosas que os pedantes adoram expressar em tons de repreensão – no entanto, o plugin em questão é particularmente versátil – o que de forma alguma diminui a solução codificada oferecida por Ramsay, acho que é elegante e muito útil.
Concordo com ambos.
A única razão para não usar o plugin é se a solução de codificação for simples e o plugin apenas causar inchaço ou lentidão.
Fora isso, realmente não há razão para não usar o plugin se ele estiver atualizado.
Agora se comportem. 🙂
E desde que você avalie regularmente todos os seus plugins para garantir que eles ainda estejam atualizados.
Boa dica, Ramsey, adiciona um pequeno extra à postagem. Não sou fã de muitos plugins no meu site e gosto de código. No entanto, meu último blog usa o Optimize Press, que tem muitas opções de shortcode personalizadas feitas para você, então estou trapaceando :)
Sim, parece que muitas pessoas estão usando isso... Bom trabalho.
Bom dia de Dublin, Ramsay
Dica adorável.
Algo que tenho usado em minhas postagens para quebrar o texto é a "Caixa de Citação". É ótimo para enfatizar um ponto ou uma lista de coisas.
Eu gosto da ideia de outra caixa colorida aparecendo de vez em quando para promover algo.
Excelente como sempre.
Liz
Excelente comentário como sempre. 🙂
Eu também uso caixas como esta no blog, por exemplo, na minha página inicial. Não mexi no código original, no entanto. Usei CSS personalizado.
Meu tema tem um 'local' de CSS personalizado onde posso, por exemplo, criar novos divs e depois definir como eles se parecem.
Por exemplo, a caixa azul que você vê na minha página inicial é criada como .my-featurebox.
Então, no meu local de CSS personalizado, eu coloco
.my-featurebox {float:none; border-radius:7px;background:#dde9fd;color:#3366bb;font-size: 120%;padding: 30px 70px 20px 70px;}
e então na minha página inicial eu coloco tudo o que quero que esteja na caixa
As pessoas no fórum de suporte do meu tema me ensinaram isso. Dessa forma, você não precisa mexer no código original.
PS Definitivamente interessado em mais dicas desse tipo
Na verdade, essa não é uma má ideia. Bom trabalho, Sofie.
Obrigado!
Truque legal – aumentou o CTR em 2-3%, você diz? Vou tentar isso agora mesmo!
Estou com você! Tenho muitos sites de afiliados que podem usar um pouco de despertar. A cegueira se instalou, então isso fará as coisas saltarem.
Outra ótima dica de um colega australiano. 😉
Espero que ajude. Me avise.
Obrigado pela sua ótima ideia, vou tentar este truque para a minha página
Espero que ajude.
Oi Ramsay,
Que coincidência! Comecei a implementar isso no meu blog na semana passada.
Eu costumava ter um formulário de inscrição genérico no final de cada post, mas o removi, pois não estava tendo um bom desempenho e, em vez disso, adiciono um formulário de inscrição no meio de certos posts, oferecendo um brinde relacionado ao tópico daquele post em particular.
No meu último post sobre como consegui mais de 140 +1s em um único post no Google+, disse que criar uma imagem envolvente para meu post fez toda a diferença. Em seguida, usei a estratégia da "caixa verde" e ofereci um webinar gratuito para ajudar as pessoas a criar suas próprias imagens incríveis.
Obrigado por compartilhar! Acho que esta é uma ótima dica que espero que muitas pessoas usem, apesar do código assustador 😉
Galen
ops! Eu estraguei meu link no meu último comentário, então caso alguém queira ver o exemplo que eu estava falando no meu blog, pode vê-lo em
SuccessMeasured.com
Incrível! Muito bom trabalho mesmo. Obrigado por compartilhar.
Oi Ramsay!
Este é o meu primeiro comentário no seu blog. Ainda estou me chutando por não ter passado mais cedo. **face palm**
Então, estou me perguntando se você recomenda alterar o código em uma folha de estilo (ou em um tema filho) em vez de usar um plugin como Shortcodes Ultimate para criar as caixas legais como você descreveu.
Eu sei, plugins têm uma tendência a deixar sites WP lentos, mas, caramba, eles são tão úteis e fáceis de usar e você não precisa mexer no código.
Suas opiniões?
Colleen Conger @ DigiPD.com
Sim, eu não tinha visto este plugin, mas ele parece muito bom. Muitas pessoas aqui o recomendaram, então acho que vou dar uma olhada.
Estou executando multi-site junto com pelo menos 40 plugins para um dos meus projetos, então tento codificar recursos como este para evitar conflitos e problemas de desempenho.
Obrigado pelo tutorial!
40 plugins!!!! Para quê, afinal?
Tão simples, mas acho que não vi isso ser usado com tanta frequência. Terei que experimentar isso alguma hora. Dica excelente!
Obrigado Brian.
Estou usando algo assim no final dos meus posts com um plugin chamado “What Would Seth Godin Do”. Farei algumas alterações — deixarei verde — e avisarei como ficou 🙂
Plugin clássico.
Eu também uso o WWSGD. Nunca pensei em alterar o código CSS para isso, no entanto. Ótima ideia, Ramsay!
Oi Obrigado por esta ótima dica, vou tentar, obrigado por compartilhar
[…] que ele recebe. Se a sua promoção não se encaixar bem no contexto do artigo, você pode usar um "callout" para destacá-la do texto da postagem, o que a marca claramente como uma promoção ou um anúncio. Você pode mencionar brevemente o […]