Blog

  • Afinal de contas, o que são shortcodes?

    What-Are-Shortcodes-AnywaySe você reparou, uma das regras práticas do WordPress é sempre, sempre facilitar um pouco as coisas para todos – tanto iniciantes quanto desenvolvedores experientes. Uma das maneiras pelas quais eles alcançam esse objetivo é por meio do uso de shortcodes.

    A página de suporte do WordPress.com os define da seguinte forma:

    shtParece bem simples. Agora, se você não tinha ouvido falar de shortcodes antes deste artigo e não sabe como eles se parecem, eles são aqueles textos arcaicos parecidos com código envolvidos por colchetes.

    Em comparação com o código normal, que normalmente se parece com isto:

    HTML5-video-tag-sample-code
    (Hum. O quê?)

    Shortcodes em geral se parecem mais ou menos com isto:

    embed_shortcode
    (Moleza.)

    …e se você for um desenvolvedor (ou, caramba, até mesmo alguém que já usou um computador pelo menos duas vezes), provavelmente concordará que o simples ato de digitar e clicar para concluir uma mísera tarefa pode consumir muito do seu tempo. Pela mesma razão que temos atalhos de teclado, os shortcodes existem para facilitar as coisas para todos nós, economizando tempo para que possamos fazer e criar coisas melhores; eles são muito parecidos com teclas de atalho por terem exatamente esse mesmo propósito.

    Agora vamos voltar a este shortcode específico, o mesmo mostrado acima:

    embed-shortcode Este em específico é chamado de shortcode embed e vem integrado por padrão no WordPress. Ele incorpora o vídeo da URL no seu conteúdo. Se você estiver no WordPress agora, pode copiar e colar o shortcode acima no seu site se quiser testá-lo.

    No entanto, os shortcodes não são a solução perfeita para economizar tempo. Em nosso artigo anterior, nós nos aprofundamos nos motivos pelos quais os shortcodes têm sua parcela de desvantagens e o que a equipe do Sandwich está preparando para corrigi-las.

    Por enquanto, sinta-se à vontade para mexer nos shortcodes e ver o que eles podem fazer por você.

    Boa criação de sites!

  • O problema não dito dos shortcodes

    The-Unspoken-Problem-of-Shortcodes

    Os shortcodes são um dos pontos altos do WordPress. Eles são a ponte entre desenvolvedores e criadores de sites, permitindo que as pessoas insiram partes elaboradas de conteúdo em quase qualquer lugar que desejarem. Os criadores de plugins adoram os shortcodes, pois isso oferece mais flexibilidade sobre como e onde seus usuários exibem o conteúdo.

    Se você não sabe o que são shortcodes e como eles se parecem, eles são aqueles textos arcaicos semelhantes a código envolvidos em colchetes. Eles se parecem com isto:

    Este em específico é chamado de shortcode de incorporação (embed) e vem integrado por padrão no WordPress. Ele incorpora o vídeo da URL no seu conteúdo. Basta copiar e colar o shortcode acima no seu site se quiser fazer um teste.

    Nos bastidores, o que acontece é que, quando o WordPress encontra um shortcode no seu conteúdo, ele é processado e convertido em outra coisa. No nosso caso acima, sempre que um

    shortcode é detectado, o WordPress pega a URL dentro do shortcode e a compara com vários provedores de conteúdo compatíveis. Quando encontra um, ele obtém o código de incorporação iframe apropriado e o exibe no lugar.

    Então, qual é o problema aqui? Parece bastante simples: você só precisa inserir um texto curto com colchetes e pronto.

    É aí que entra a Shortcode API..

    Shortcodes em abundância

    A Shortcode API disponibiliza a criação de shortcodes para desenvolvedores. Por causa disso, os desenvolvedores podem adicionar seus próprios shortcodes dentro de seus plugins.

    Isso é ótimo: agora, com apenas um pequeno trecho semelhante a código (daí o nome “shortcode”), tanto iniciantes quanto usuários avançados podem colocar praticamente qualquer tipo de conteúdo onde quiserem.

    Por padrão, o WordPress possui apenas alguns shortcodes. É fácil digitá-los de cabeça porque são poucos. Mas, se você instalar alguns plugins, o número de shortcodes sobe rapidamente para uma dúzia ou mais, e em alguns casos mais de uma centena. Cada shortcode tem seu próprio conjunto de atributos e instruções de uso. A maioria dos plugins provavelmente conta com algum tipo de documentação explicando o funcionamento de todos os seus shortcodes e listando todos os parâmetros disponíveis em cada um. Mas você enlouqueceria se tentasse memorizar todos os shortcodes e seus atributos.

    O problema é que não existe uma área centralizada na qual você possa consultar todos os shortcodes disponíveis no seu site e saber como usá-los.

    Alguns tentam resolver o problema

    Alguns plugins tentam resolver esse problema apresentando todos os seus próprios shortcodes em um menu suspenso de fácil acesso. Ao clicar em um deles, o shortcode é inserido, completo com todos os atributos possíveis para ele. Não há mais necessidade de memorizá-lo, o que é ótimo.

    Screen-Shot-2016-06-22-at-11.27.09-AM

    Alguns vão além e adicionam um formulário popup de configurações que inclui caixas de seleção e seletores de cores para preencher os atributos do shortcode.

    Screen-Shot-2016-06-22-at-11.28.54-AM

    Essa solução até que funciona. No entanto, cada plugin apenas lista seus próprios shortcodes. Portanto, se cada plugin criar sua própria forma de seletor de shortcodes, você certamente se deparará com momentos em que terá múltiplos seletores de shortcode na tela (isso já aconteceu comigo antes).

    Screen-Shot-2016-06-22-at-11.28.41-AM

    Em outras palavras, cada plugin faz o que quer e implementa sua própria solução para os seus próprios shortcodes. Alguns plugins adicionam um novo botão ao lado do botão “Adicionar Mídia” ou um novo botão dentro do TinyMCE.

    Agora você pode estar pensando: “Por que não reunir também os shortcodes de outros plugins e incluir isso no seu menu suspenso / seletor de shortcodes também?” Bem, foi exatamente isso que pensei. Mas falar é fácil, fazer é outra história. Vou explicar o motivo daqui a pouco, mas antes vamos ver como seria uma solução ideal.

    A solução ideal

    O plano perfeito seria criar um plugin que reunisse todos os shortcodes disponíveis no seu site, apresentasse a lista e também ajudasse a preencher todos os atributos. E, a cada novo plugin instalado, todos esses novos shortcodes também seriam apresentados a você.

    Imagine um local central onde todos os seus shortcodes ficassem reunidos para fácil acesso. Cada shortcode descreveria o que faz e a qual plugin pertence. Então, para cada atributo disponível, imagine que cada um tivesse um rótulo, uma maneira adequada de selecionar um valor para ele e uma descrição. Você veria menus suspensos, seletores de cores, botões de opção, botões de alternância e tudo mais.

    Algo assim tornaria a nossa vida de criadores de sites e de conteúdo muito mais fácil. Chega de consultar diferentes documentações ou navegar por várias partes do painel de administração só para copiar o shortcode gerado para um slider que você quer usar.

    A ressalva

    Infelizmente, é bastante difícil fazer algo assim hoje. Não há uma maneira infalível de conhecer todos os detalhes de um shortcode. É possível obter uma lista de todos os shortcodes, mas apenas suas tags/nomes propriamente ditos; você não consegue obter nenhum detalhe adicional sobre eles, como uma lista de atributos, o que fazem e seus tipos – como uma string, uma cor ou um número. Tampouco é possível obter qualquer indício de descrição para cada atributo.

    Nota para os desenvolvedores: sim, existe um terceiro argumento adicionado recentemente para a função shortcode_atts, mas ele não é um argumento obrigatório. Portanto, a menos que todos os desenvolvedores de plugins do mundo o implementem, ainda não teremos uma forma garantida de determinar todos os atributos de um shortcode.

    A Shortcode API não oferece nenhum recurso para adicionar descrições de shortcodes, definição de tipos para atributos ou descrições de atributos. E, a menos que o próprio WordPress adicione uma área central para acessar shortcodes, duvido que esse recurso seja criado.

    Conclusão

    No momento, a tarefa de organizar os shortcodes fica a cargo de cada desenvolvedor. A menos que um método central seja desenvolvido no WordPress, espere continuar vendo vários botões de “Adicionar Shortcode” no seu painel. Se algo assim deveria ou não ser adicionado ao núcleo do WordPress é outra grande discussão por si só.

    Uma alternativa

    Existem plugins de construtores de páginas que lidam com isso de maneira diferente. Em vez de detectar shortcodes programaticamente, eles contam com mapeadores de shortcodes onde os usuários podem inserir manualmente cada detalhe de um shortcode. Uma vez concluído, ele fica disponível no construtor de páginas. Embora  isso funcione, esses recursos só ficam disponíveis no seu próprio site.

    Nós aqui do Page Builder Sandwich estamos criando algo que esperamos que resolva esse enigma dos shortcodes. Assine nossa newsletter abaixo para receber notificações sobre nosso progresso.

  • Adicionar mapas estilosos à sua página é uma experiência interativa

    Adding-Stylish-Maps-to-your-Page-is-an-Interactive-Experience-2Agora você pode inserir mapas nos designs das suas páginas usando o Page Builder Sandwich!

    É estranho ficar empolgado com mapas. Você pega a URL do Google Maps e a incorpora. Ou talvez pegue um plugin de mapa na internet e insira um shortcode. Ou talvez o seu outro construtor de páginas já tenha um e você possa adicionar a qualquer momento que quiser. Mas a razão pela qual estamos empolgados é que elevamos a adição de mapas a um nível totalmente novo.

    Aqui está uma prévia:

    A maneira antiga e sem graça de adicionar um mapa

    Veja como você adiciona um mapa com o seu construtor de páginas típico:

    1. Você arrasta um novo elemento de mapa,
    2. Você insere a latitude e a longitude nos campos,
    3. Você insere outros valores nos campos como altura do mapa, largura do mapa, marca a caixa de seleção do estilo de estrada, etc.,
    4. Clica em visualizar e confere como ficou, decidindo que precisa mudar algo para deixá-lo mais legal,
    5. Volta para o construtor de páginas e altera os valores, repetindo então o passo 4 acima.

    A maneira do Page Builder Sandwich de adicionar um mapa

    Mapas em sites são interativos – você pode navegar por eles, aproximar e afastar o zoom. Então pensamos: por que não eliminar todas as adivinhações e simplesmente permitir que as pessoas interajam com o mapa diretamente enquanto constroem a página?

    Veja como você adiciona um mapa com o Page Builder Sandwich:

    1. Você adiciona um elemento de mapa,
    2. Você digita a latitude e a longitude ou o endereço no qual deseja centralizar o mapa,
    3. Você move o mapa e aproxima ou afasta o zoom para obter o visual desejado,
    4. Adicione cores legais aos seus mapas para combinar com seu estilo,
    5. Clica em salvar.

    A nossa maneira é muito mais divertida e intuitiva. Você basicamente interage com o mapa da mesma forma que faria em um Google Maps normal.

    Mapas coloridos ou estilizados com o SnazzyMaps

    Um recurso incrível que adicionamos é a capacidade de tingir e colorir seus mapas, e é superfácil de fazer. (Isso está disponível apenas na versão premium). Se quiser colorir seu mapa, basta clicar em nosso seletor de cores e escolher uma cor, e o seu mapa mudará imediatamente.

    Aqui está um que tingimos de rosa:

    O Page Builder Sandwich também oferece suporte a esquemas de cores mais elaborados por meio do SnazzyMaps. Eles têm uma lista enorme de esquemas de cores enviados por usuários e permitem que você crie o seu próprio caso queira mais controle sobre as cores.

    Basta encontrar o esquema de cores de que você gosta, copiar o código e colar no Page Builder Sandwich. O esquema de cores será aplicado ao seu mapa imediatamente.

    Aqui está um esquema de cores muito legal chamado papuportal dark do SnazzyMaps:

    Coloque mapas onde quiser

    Há muito mais coisas legais que você pode fazer com mapas – como adicioná-los em linhas de largura total para um efeito mais marcante. Você também pode adicioná-los dentro de um carrossel, se desejar, ou dentro de abas (um recurso em breve).

    Se você ainda não tem o Page Builder Sandwich, pode experimentar a versão premium clicando no link “Live Demo” acima.

  • WordPress.com VS WordPress.org

    Wordpress-Com-VS-Wordpress-OrgSe você é relativamente novo na criação de sites, é bem provável que não esteja familiarizado com o grande debate WordPress.com vs WordPress.org. Você pode até nem saber da existência de um ou de outro, e os diferentes prós e contras de cada um. Então, afinal, o que é esse grande debate entre usar o WordPress.com e o WordPress.org? Será que um deles é apenas uma cópia barata esperando para ser processada?

    Bem, não.

    O debate, em poucas palavras, é sobre qual desses dois serviços WordPress se adapta melhor ao site que você está tentando criar. Nenhum é uma cópia do outro, e ambos os sites pertencem ao WordPress; a questão é que um (.com) é uma versão mais amigável para quem não é desenvolvedor do que o outro, e o .org tem muito menos limitações na criação de sites, em comparação com o .com.

    “Mas como sei de qual deles eu preciso?”

    A resposta para essa pergunta depende inteiramente das necessidades do seu futuro site. Não existe uma entidade do WordPress que seja objetivamente a “melhor” ou até mesmo a versão “perfeita” para usar. Os dois têm seus próprios recursos exclusivos e uma quantidade equivalente de prós e contras.

    WordPress.com: Por que e quando devo escolher?

    O WordPress.com cuida do essencial para você, o que permite que você se concentre mais no conteúdo do seu site. É um criador de sites totalmente gerenciado e hospedado por um grupo empresarial chamado Automattic. Você conta com hospedagem premium, backups, segurança e afins. Isso significa que você pode se concentrar no conteúdo do seu site com muito mais facilidade, em comparação a ter que passar horas a fio construindo-o do zero.

    Vale ressaltar, porém, que o WordPress.com também tem suas próprias limitações. Embora você não precise se preocupar tanto com a manutenção dos mecanismos internos do seu site, deve ter em mente que provavelmente não terá tanta liberdade com ele quanto gostaria. Embora personalizar a interface do seu site possa não ser um problema (o WordPress.com vem com inúmeros temas, por exemplo), adicionar certos recursos e elementos por meio de plugins pode se tornar um problema, especialmente se o seu site precisar de funcionalidades específicas que não estão disponíveis no WordPress.com.

    Como manter um site é uma história totalmente diferente. Depende muito de: 1.) você não ser um desenvolvedor WordPress 2.) não ter intenção de aprender a programar, ou 3.) ter pouco ou nenhum tempo para isso.

    WordPress.org: Quando é hora de considerar?

    Uma boa regra prática quando se trata de considerar o WordPress.org é quando você tem pelo menos um pouco de familiaridade com código, ou está disposto a investir algum tempo para aprender. Como o WordPress.org é uma versão auto-hospedada do WordPress, você pode botar a mão na massa o quanto quiser. Além disso, tem a liberdade de fazer ajustes tanto quanto desejar. Você será responsável por encontrar sua própria hospedagem, configurar seus próprios backups de segurança e, de modo geral, manter o site por conta própria – e, o mais importante, nos seus próprios termos.

    “Mas espere, por que eu iria querer isso? O objetivo do WordPress não é facilitar a criação de sites?”

    …Não exatamente. Pense da seguinte forma: o The Daily Post faz uma excelente analogia entre o WordPress.org e o WordPress.com, de um jeito que até o mais novato dos novatos (como eu) entende a ideia na hora.

    Segundo eles, você tem que pensar no WordPress.com como algo do qual você não tem a propriedade total. Pense, por exemplo, em quando você tinha 15 anos e ainda morava com seus pais. Se quisesse pintar o seu quarto, teria que pedir permissão a eles primeiro (que, claro, são os donos da casa, incluindo o seu quarto). Tecnicamente, o quarto é seu, mas no fim das contas, bem… na verdade não é.

    Portanto, se você precisasse ou quisesse fazer alterações drásticas (como pintar as paredes ou ampliar o quarto), ainda teria que conversar e/ou chegar a um acordo com os verdadeiros donos da casa, ou seja, mamãe e papai. O lado bom disso, no entanto, é que quando o fusível no porão queima ou o ar-condicionado para de funcionar, seus pais cuidam disso e você não precisa se preocupar com nada.

    O WordPress.org, por outro lado, é algo que você pode personalizar e ajustar livremente por conta própria. Isso pode ser comparado a quando você finalmente sai de casa aos 18 anos e consegue um apartamento próprio. Como você tem a posse total da sua residência, não precisa entrar em acordo com ninguém para pintar as paredes daquela cor que sua mãe sempre odiou; você tem a liberdade de tomar a decisão e/ou contratar alguém que atenda aos seus padrões para fazer isso por você. Além disso, você também tem a liberdade de escolher exatamente qual modelo de ar-condicionado quer para a sua sala de estar. A única questão é que, se ele pifar, você terá que contratar um técnico para consertar, ou descobrir qual é o problema e como consertá-lo sozinho (o que não é tão ruim, afinal, vivendo e aprendendo, e aprender é sempre bom).

    A essa altura, esperamos que você tenha uma visão mais clara de quais são as nítidas diferenças entre o WordPress.com e o WordPress.org. Mas, em resumo:

    instale o quanto ou o quão pouco quiser os temas são limitados apenas aos temas do WordPress, você tem que pagar uma taxa para se livrar dos anúncios.Você tem controle quase total do seu site; você pode adicionar, personalizar ou até criar seus próprios temas.

    O controle do conteúdo é limitado;

    WordPress.com WordPress.org
    Totalmente hospedado pelo WordPress; tudo o que é essencial está coberto. Auto-hospedado; escolha seus próprios recursos essenciais ou escolha opções melhores.
    Os recursos são limitados ao que o WordPress.com oferece Milhares de recursos na forma de plugins;

    Estas são algumas das comparações ao pesar as diferenças entre os dois. Escolher entre eles se resume, em última análise, à quantidade de liberdade que você deseja ao criar seu site e a quantos recursos (tempo, esforço, dinheiro, etc.) você está disposto a dedicar para isso. Lembre-se de que ambas são opções fundamentais a serem ponderadas antes de decidir qual plataforma WordPress é mais adequada para você. Portanto, não se precipite na tomada de decisão!

    Boa criação de sites!

  • 5 motivos pelos quais o espaço em branco importa

    Reasons-Why-Whitespace-MattersBasicamente, o espaço em branco, em sua definição mais simples, é o espaço ao redor e entre todos os elementos de uma composição que é deixado vazio. Não é apenas um desperdício de espaço na tela, como a maioria dos proprietários de sites pensa. Quando bem utilizado, o espaço em branco pode, na verdade, trazer benefícios para promover melhor um produto. É uma peça fundamental para a criação de um bom design e torna um site melhor em todos os aspectos.

    Embora o termo espaço em branco dê a entender que o espaço seja branco, ele nem sempre precisa ser literalmente branco. Na verdade, o espaço em branco pode ter qualquer cor — pode até conter uma textura ou padrão sutil. É uma área na qual você não quer que os olhos se concentrem. Também é conhecido como espaço negativo.

    Então, por que o espaço em branco é importante?

    newsfeed
    Fonte da imagem: News Feed

    Motivo nº 1: Melhora a legibilidade

    O espaço em branco entre linhas de base e parágrafos realmente ajuda as pessoas a lerem confortavelmente todo o conteúdo do site. Ajustar pequenos detalhes do seu site (como o espaçamento entrelinhas ou o espaçamento entre letras) pode fazer uma enorme diferença para facilitar a leitura.

    O objetivo é fazer com que as pessoas queiram continuar lendo, criando layouts agradáveis aos olhos.

    hpmagicwords
    Fonte da imagem: HP Magic Words

    Motivo nº 2: Agiliza a interação

    Sejamos sinceros: a maioria dos seus visitantes não terá paciência suficiente para olhar atentamente ao navegar pelos sites. Quando um site parece desordenado, isso distrai os usuários de encontrarem o que estão procurando.

    Os espaços em branco devem ajudar a guiar o visitante pela página. Menos elementos competindo por atenção, aliados ao uso adequado de espaços em branco, podem evitar distrações que desaceleram os visitantes.

    google
    Fonte da imagem: Google

    Motivo nº 3: Direciona a atenção para os elementos certos

    O espaço em branco pode dar aos usuários pistas visuais de para onde devem olhar. Quando usados corretamente, os espaços em branco ajudam a enfatizar informações e a chamar a atenção para uma área específica no seu site.

    Lembre-se: se tudo se destaca, nada se destaca.

    Fonte da imagem: Pocket Penguins

    Motivo nº 4: As primeiras impressões importam

    O aspecto visual e a experiência de um site são a chave principal para causar uma boa primeira impressão. Boas primeiras impressões costumam levar a um tempo de visitação maior. Pouco espaço em branco pode fazer com que seu site pareça amador e pouco confiável. Os visitantes não considerarão o site ou a marca confiáveis a menos que tenham uma boa aparência. Ter uma quantidade adequada de espaços em branco ajuda a definir o tom certo para o seu site. O espaço em branco pode ser uma forma de transmitir engenhosidade, frescor e, às vezes, elegância.

    Dica: Aqui está uma ideia de como tornar o design do seu site simples e familiar.

    flockknitwear
    Fonte da imagem: Flock Knitwear

    Motivo nº 5: Ajuda a criar respiro e equilíbrio

    Um design equilibrado não significa necessariamente simétrico. Um elemento de design grande pode ser equilibrado por alguns menores. Adicionar espaço em branco é uma excelente forma de balancear elementos de design de diferentes tamanhos em sua página. Crie um fluxo para que os olhos dos usuários não fiquem vagando desordenadamente. Um bom design deve ser capaz de guiar o usuário de um ponto a outro sem confundi-lo.

    Conclusão

    Na próxima vez em que visitar um site e perceber que permaneceu nele por algum tempo, pense no que fez você ficar e ler. Acha que o espaçamento entre linhas tornou o artigo mais fácil de ler? A experiência faz você querer voltar mais vezes? Foi difícil encontrar os menus de navegação?

    Repare na boa aplicação do espaço em branco no site. Se você acha que isso também pode funcionar no seu site, aprenda a aplicar e dosar quanto espaço deve destinar aos seus elementos até atingir o tom e a legibilidade ideais sem abrir mão do “fluxo” desejado para o seu site.

    O grande objetivo de qualquer site é a comunicação. O apelo visual caminha lado a lado com o sucesso do seu site.

  • Por que o WordPress?

    Why-WordpressUma questão importante a considerar ao criar seu primeiro site – seja você uma empresa, profissional autônomo ou qualquer pessoa, de verdade – é que nem todo mundo domina a linguagem da programação e do desenvolvimento de software. Você pode ser, por exemplo, alguém da área de gastronomia querendo publicar receitas na internet. Também pode ser estudante de Artes Visuais que precisa de um portfólio com visual profissional, ou uma startup precisando de um site próprio. Seja um caso ou outro, ou algo intermediário, o fato é que, embora algumas pessoas conheçam o básico de código, nem todo mundo é desenvolvedor em tempo integral, e nem todo mundo que precisa ou quer um site sabe como criar um do zero. É aqui que o WordPress pode ser muito útil. Daí a pergunta: “Por que o WordPress?”

    MOTIVO N.º 1

    O WordPress é um sistema de gerenciamento de conteúdo, o que o torna totalmente intuitivo.

    A primeira coisa que você precisa saber é que o WordPress é um sistema de gerenciamento de conteúdo (ou CMS). Em termos mais simples, isso significa que o WordPress permite criar sites sem precisar escrever código do zero. Ele tem uma interface sistemática e organizada que permite manter tudo sob controle sem ter que mexer no código o tempo todo.

    Em comparação com criar um site do zero, que normalmente começaria assim:

    screenshot-1 Com um sistema de gerenciamento de conteúdo, você começa com algo assim:

    WordPress
    Interface do painel de controle do WordPress. Gerenciar e criar sites se torna mais fácil com um CMS.

    Você pode se perguntar, no entanto: “O WordPress parece ótimo, mas e se não tiver os recursos que eu quero para o meu site?”, ou “e se eu quiser um mapa, um reprodutor de música, um mecanismo de cache ou um sistema de segurança mais confiável?”

    …Tecnicamente falando, o WordPress provavelmente tem o recurso que você quer, e ele virá na forma de um plugin do WordPress.

    MOTIVO N.º 2

    Plugins: a cereja do bolo do WordPress

    Se você tem receio de que o WordPress não tenha aquele recurso específico que gostaria de ter no seu site, não se preocupe: ele provavelmente tem.

    Plugins são “recursos de extensão” criados para expandir a funcionalidade do seu site WordPress. Se você empreende e precisa de um formulário de contato para seu site, vale notar que o WordPress por si só não inclui esse recurso, mas existem inúmeros plugins que oferecem isso. E como o WordPress é de código aberto — ou seja, qualquer pessoa pode contribuir para o seu desenvolvimento — novos plugins são criados com frequência. Você pode ter o formulário de contato desejado e muito mais. Você tem a liberdade de adicionar outros plugins que vão desde botões de compartilhamento em redes sociais até mapas e até mesmo camadas extras de segurança para seu site, entre muitos outros recursos e extensões. Fala se não parece excelente?

    Atualmente, o WordPress tem milhares desses plugins — e alguns deles estão disponíveis gratuitamente e/ou têm versões gratuitas, incluindo o PBS.

    MOTIVO N.º 3

    Código aberto: a comunidade WordPress

    O WordPress é de código aberto. Isso significa que qualquer pessoa pode contribuir livremente para seu desenvolvimento e estudar a estrutura do seu código para aprender mais sobre desenvolvimento de software e até mesmo sobre o próprio WordPress. Existem inclusive empresas totalmente dedicadas a criar e desenvolver produtos relacionados ao WordPress, como plugins e temas (como nós!).

    Como o WordPress é de código aberto, há uma quantidade enorme de usuários, desenvolvedores e designers que colaboram ativamente e se ajudam com problemas do WordPress. Dessa forma, você recebe suporte real de pessoas reais e, ao mesmo tempo, aprende em conjunto. Isso é algo que o suporte tradicional ao cliente raramente consegue proporcionar.

    MOTIVO N.º 4

    O WordPress é consolidado.

    CNN, o blog oficial de Star Wars, Time Magazine e até (uau!) Beyoncé têm sites que usam WordPress, entre muitos outros. Esses nomes de peso não são a única coisa que comprova a credibilidade do WordPress: de acordo com o Treehouse.com, cerca de 25% de todos os sites da web usam WordPress. Considerando quantos milhões de sites existem… bem, 25% é um número expressivo.

    MOTIVO N.º 5

    Personalizações para todos os gostos!

    O WordPress tem uma infinidade de temas disponíveis para você e seu site. Você tem a liberdade de escolher entre versões gratuitas, opções premium ou até mesmo criar um tema personalizado (ou contratar alguém para desenvolver para você!).

    MOTIVO N.º 6:

    É gratuito.

    Sim, você leu certo. Com o desenvolvimento local, o WordPress é totalmente gratuito e você pode instalar no seu computador com apenas um clique. Além disso, em vez de contratar uma pessoa desenvolvedora, você pode usar qualquer conhecimento prévio de código para aprender mais sobre o funcionamento do WordPress (e aprender é sempre bom).

    …sem falar que, se você não tiver tempo para se aprofundar muito no WordPress e na criação de sites, é sempre possível usar um plugin prático de construtor de páginas e testar o nosso.

    Lembre-se de que as possibilidades com o WordPress são infinitas e não é preciso ser um gênio para entender como tudo funciona!

    Usar o WordPress economiza muito tempo, dinheiro e esforço. E numa época em que esses recursos são tão escassos, lembre-se de que os sites WordPress, seus plugins (como o PBS!), seus temas e, principalmente, a comunidade, podem ajudar muito e tornar tudo bem mais fácil.

    Boa criação de sites!

  • 3 coisas a considerar antes de mergulhar nos construtores de páginas

    3-Things-to-Consider-Before-Diving-Into-Page-BuildersExiste uma pequena chance de você estar aqui porque ouviu dizer que o PBS é muito provavelmente um dos atalhos mais rápidos para a criação de sites. Embora os construtores de páginas, em geral, existam para facilitar as coisas, ainda há algumas coisas que você pode querer levar em consideração antes de mergulhar mais fundo neste universo específico do desenvolvimento em WordPress.

    Aprender WordPress: Um Pré-requisito Crucial para Construtores de Páginas

    Este é provavelmente o item mais óbvio desta lista, mas ainda assim o mais importante. Infelizmente, os construtores de páginas não podem ser adquiridos isoladamente. Eles vêm na forma de plugins no WordPress, que você precisará instalar e aprender para conseguir manipular. Tenha certeza de que o WordPress é uma das maneiras mais fáceis e legítimas de criar um site. Você não vai se arrepender de aprender algo técnico, considerando a era em que vivemos hoje. Existe uma diferença entre WordPress.com e WordPress.org, e saber qual deles atende às suas necessidades também economiza tempo!

    Se você estiver um pouco intimidado com a abundância de alguns dos termos técnicos deste artigo, não se preocupe. Existem alguns sites úteis que você pode visitar para ajudá-lo a começar. Alguns deles são o WordPress Codex e o Treehouse. Eles reúnem dicas de WordPress e criação de sites, dependendo da sua necessidade e nível de conhecimento.

    Pode ser uma boa ideia testar as águas primeiro, só para ter certeza

    É sempre uma boa ideia testar versões gratuitas e/ou de avaliação antes de fazer grandes compras das quais você possa acabar se arrependendo no futuro. Felizmente, a maioria dos construtores de páginas vem com versões gratuitas/de demonstração. Claro, também podemos consultar uma infinidade de avaliações confiáveis sobre construtores de páginas enquanto outros comparam e contrastam construtores de páginas.  Certifique-se de avaliar bem as suas opções!

    Além de conferir artigos e avaliações, uma das coisas que gostamos no WordPress é que há uma comunidade enorme por trás dele. Existem indivíduos, equipes e até empresas dispostas a estender a mão para outros usuários do WordPress, especialmente novatos como você! A comunidade funciona basicamente no princípio de passar a ajuda adiante em vez de um toma lá, dá cá.

    O design faz uma enorme diferença

    A entusiasta do WordPress Donna Fontenot Cavalier aponta algo muito pertinente em relação aos construtores de páginas no estilo arrastar e soltar e à importância do design básico. Embora construtores de arrastar e soltar como o PBS possam economizar muito tempo, noções básicas e pelo menos alguma familiaridade com estética são outros fatores cruciais a serem considerados ao criar sites. Imagine um cenário: digamos que você coloque as mãos em um ótimo construtor de páginas à sua escolha: isso é ótimo! Mas então digamos que você seja uma pessoa que não tem exatamente o melhor olhar para arte, design e funcionalidade: hum, problema.

    Não se preocupe, no entanto. O Page Builder Sandwich não é apenas um construtor de páginas; nossa equipe também se dedica a ajudar outros usuários do WordPress. Portanto, se você estiver enfrentando dificuldades com o design, não se preocupe: temos vários artigos aqui no blog do PBS com muitas dicas úteis para ajudá-lo a começar. Dessa forma, você faz mais, aprende mais e se preocupa menos.

    Lembre-se: se tiver alguma dúvida ou preocupação em relação aos construtores de páginas, ou a qualquer item mencionado acima, sinta-se à vontade para deixar um comentário na seção abaixo. Ficamos sempre felizes em ajudar nossos clientes.

    Boa criação de sites!

  • Mapeamento de Shortcodes: Como o PBS Oferecerá Suporte a 800+ Plugins e 2.000+ Shortcodes

    How-PBS-Supports-800-Plugins-2000-ShortcodesWhen I started getting further into software development and WordPress, I noticed that not a lot of page builders I come across with have that “page builder standard” I was looking for: fast, easy, convenient.

    Page Builder Sandwich, then, was created with the goal of having a builder meet these same standards.

    I wanted- and still want it– to be the best page builder out there, and the best way I could accomplish that, I figured, was to add in features in a way in which page building becomes helpful and accessible to everyone –developers and noobs alike.

    I’d like to note though, that I didn’t simply create PBS with the intent of merely bombarding it with features just for the sake of it.

    I want to add in features that people would want to work with; features that hopefully, would make the experience of page building feel a little bit more like magic.

    Nestas últimas semanas, a equipe do PBS adicionou um elemento de mapa e também um elemento de abas.

    Agora, pareceria uma rotina bem fácil e simples continuarmos apenas adicionando um novo elemento a cada dois dias.

    But I think it’d be better if we take it to the next level; to take a bigger leap, do something more drastic, something drizzled with a little more awesomesauce.

    And so we came up with an idea: “How about we start supporting 800+ plugins along with their 2000+ shortcodes?!?!”

    I know what you’re thinking: “How the heck can you support that much shortcodes? Is that even possible?”

    Well, the simple answer is yes. Yes it is.

    And we’ve managed to achieve this feat through shortcode mapping.

    What is Shortcode Mapping?

    Shortcode mapping
    Shortcode mapping makes building shortcodes more friendly.

    Put more simply, shortcode mapping is like letting Page Builder Sandwich memorize all the shortcodes available on your site: their names, descriptions, their attributes, and what each of these attributes do.

    Os benefícios de um sistema como este são bastante expressivos:

    1.) Since PBS already knows what your shortcodes are, you get to spend less time going through the documentation of each plugin you use, and check how to use their shortcodes.

    2. ) In other words: Say goodbye to the grueling task of manually typing in your shortcodes!

    3.) With shortcode mapping, you can also say goodbye to manually checking post type ID’s. How? PBS can give you a list of all your contact forms through a drop-down list, so instead of looking for ID’s while on admin mode, you can pick from the list we made instead.

    4.) You’ll get to use dropdowns, colorpickers, image uploaders, and even number sliders when adjusting shortcode attributes.

    5.) Overall faster page building time!

    O mapeamento de shortcodes não é novidade, e vários construtores de páginas já contam com isso. Mas o que torna o nosso diferente?

    Como funciona o mapeamento de shortcodes em outros construtores de páginas

    Lonely times
    Each person/site does their own shortcode mapping.

    Other page builders have a dedicated admin page for shortcode mapping. You go inside your admin page, and then their admin page. You put in your shortcode, edit a number of text fields, then hit save. Finally, when you go to your page builder editor, the shortcode is now there in element list.

    Neste cenário, o fardo de mapear os shortcodes fica com você, o usuário. Se você quiser todos os seus shortcodes completamente mapeados com todos os atributos (e com os belos seletores de cores e outras coisas), terá que garantir a inserção de cada detalhe de cada um dos shortcodes.

    What’s more, all your mappings only reside on your site. So when the times comes that you need to work on another site, you’ll have to copy your mappings all over again. Additionally, if and when you install a new plugin that has shortcodes, then you’re going to have to map those too.

    Como funciona o mapeamento de shortcodes no Page Builder Sandwich

    Shortcode mapping is centralized
    Shortcode mappings are shared across all users.

    Unlike the norm, shortcode mapping in Page Builder Sandwich is done on a global scale. The most used and popular plugins are gathered first, and all their shortcode mappings are created and updated in a central area. These will then spread out to all users depending on what they have installed. In other words, PBS studies and reviews all the shortcodes you have, including your activated plugins. Afterwards, it gives you the mapping of basically everything you need.

    Isso nos traz muitos ótimos benefícios:

    1. Maximum coverage. Since we’ll be mapping out the shortcodes of the popular plugins, PBS will be able to support a majority of the shortcodes available on your site.
    2. Constant and frequent additions, updates and corrections. And since it’s in a central area, changes can be made quickly, and can be disseminated to all users.
    3. It basically works like magic. Let’s say you just installed a new plugin. Then you activate it, all mappings for its shortcodes will automatically get sent to you right away.
    4. Gone are the days when you have to personally map shortcodes yourself. PBS will do that for you.
    5. Your site remains lean and fast, and will only contain shortcode mappings that are relevant to you.
    6. Plugin zip size remains small. Even though PBS supports thousands of shortcodes, the plugin file size is still small. Your site and your backups remain small too!

    In case you’re interested in reading into how we made all of this possible,  we actually have a second part to this article in which things might start sounding a little more technical (if that’s your drift).

    Assine a nossa newsletter!

    You can also opt to sign up to our mailing list, which will automatically notify you when we officially release this feature, (you can get future updates from us too, if you want). The shortcode mapping functionality will be out for our customers tentatively on August 12 August 15 2016. Not all shortcodes will be mapped by this time (our estimate is maybe 100 plugins), but mapping will be continuously done and customers will get them as soon as new ones roll out.

    So sign up to our newsletter to get news on shortcode mapping, when we’ll release it, and when we open shortcode mapping to the public! Until then, we hope you enjoy this new feature of ours, and that you have fun exploring it!

  • 5 Dicas Simples para Deixar Seu Site Mais Bonito

    5-Simple-Ways-To-Make-Your-Website-Look-GoodIn general, one thing that most people tend to overlook is today’s demand for functional design and aesthetics. While not all of us may be aware of the extent of just how much it matters, the fact remains that design is a very crucial factor towards success—any kind of success– including your website’s. Yes, your content is an important key towards reeling your audience in, but how your site looks will definitely be a determining factor as well.

    Aqui estão algumas dicas básicas sobre o que você pode fazer para melhorar o design do seu site.

    Add high-quality images

    You want to add the best quality images on your website that reflect your brand style, but if you don’t have a high-resolution camera or the money to pay a photographer, you can get free stock photos from sources like Pexels and Pixabay. Images should pertain directly to the content of your site. Including images is always better than no images at all.

    Escolha as cores certas

    booneselections
    Lawrence Boone Selections uses black to add a sense of luxury and value to their website
    juicebox
    Juicebox used this zesty combination for people to get that organic and fresh that the brand represents

    O esquema de cores de um site desempenha um papel importante na criação do tom e do clima adequados para a sua marca. Escolher uma cor bonita não significa necessariamente que ela seja a certa. Cada cor transmite uma mensagem e uma resposta diferentes. As cores são uma das primeiras coisas que os visitantes do site notam e podem realmente impactar o sucesso do seu site.

    Escolha no máximo duas ou três cores base para o seu design. Se sentir necessidade de adicionar mais cores, você pode utilizar os tons claros (tints) e escuros (shades) das suas cores base. Na teoria das cores, uma tonalidade clara (tint) é a mistura de uma cor com o branco, o que aumenta a luminosidade, enquanto uma tonalidade escura (shade) é a mistura de uma cor com o preto, o que reduz a luminosidade.

    Additional Tip: There are great tools such as Adobe Colour CC and Coolors to make picking colors easier.

    Use tipografias contrastantes

    Font Pairing There are more fonts other than Arial, Georgia and Times New Roman. Google Web Fonts offer a variety of typefaces you can use for free on your site. Just like with choosing colors you can easily over do fonts, so I suggest you do not use more than two typefaces on your website. Most well-designed websites use two typefaces only, one for the headlines and one for the body text.

    Combinar duas tipografias pode ser difícil até mesmo para designers. Você pode simplificar brincando com duas fontes diferentes da mesma família tipográfica. Se uma segunda família for necessária, escolha algo que contraste bem com a primeira. Normalmente, combinar uma fonte com serifa e uma sem serifa funciona muito bem. Outra dica importante é escolher tipografias que combinem com o estilo da sua empresa. Você pode ter a fonte mais bonita do mundo, mas quando usada no contexto errado, ela ainda pode parecer terrível.

    Mantenha-o limpo usando espaços em branco

    Whitespace is one of the easiest and most effective ways to create a visually effective website. Your website should look well organized and clutter free, directing users exactly where they need to go. Make sure elements stand out and are grouped together by using whitespace properly.

    Torne-o compatível com dispositivos móveis

    People are probably going to visit your site at different times using different devices and screen sizes. While content is important, consistency across devices provides a better user-experience for anyone who visits your site. It makes it easier for users to share and link contents on your website to social media platforms on mobile. On top of that, Google prioritizes responsive websites on search results.

    Dica adicional: Usar o Page Builder Sandwich no seu site ativará automaticamente a visualização móvel e o ajustará ao tamanho da tela do celular.

    Conclusão

    Lembre-se: subestimar o poder do design é um dos piores erros que você pode cometer ao criar o seu site. Você não precisa se esforçar excessivamente ao projetar seu site, é claro, mas, enquanto isso, simplesmente seguir essas dicas pode garantir que seu site não cause sentimentos de desaprovação em seu público.

  • Como criar cabeçalhos hero básicos em 3 passos fáceis

    How-to-Create-Basic-Hero-Headers-2

    061716_PBS_Jihan_How to Create Basic Hero Headers_Done

    When your dream website finally becomes a reality, the first thing you want your audience to know is what your site’s all about. The trick to reel them in is to give them a good but quick summary of your site’s content – and the easiest way to do that is by creating a Hero Header for your page.

    O que são Hero Headers?

    The purpose of the Hero Header is to visually communicate with your target audience in the fastest and most efficient way possible. You need to grab their attention quickly, in a way that it says: “Hey, this is my website, and here are the reasons it may be worth your time.”

    Typically, hero headers take up most of the space on the page, usually with large text and an equally large background image in order to give your readers a quick but firm-enough grasp as to what your website can offer them.

    Para começar a criar seu primeiríssimo hero header com o PBS, siga estes passos rápidos abaixo:

    Passo 1: Inserir coluna e ajustar a largura da linha

    061716_PBS_Jihan_How-to-Create-Basic-Hero-HeadersClick 1 Column below the Insert Content tab on the inspector (that thing on the left/sidebar). Make sure your caret (the blinking cursor on the text box) is inside the text box.

    061716_PBS_Jihan_How to Create Basic Hero Headers_Step-1-b_Revised-1Under the Row Properties tab, you may change the background color in order to use it as a guide for the next steps. Change Row Width from Normal to Full-Width: Retained Content Width using the toggle button shown above.

    What’s the difference between Normal, Full-Width and Full-Width: Retained Content Width?

    Row Width-Normal

    Normal – Background, text and other elements are contained within the bounds of your current theme’s row width

    Row Width-Full-Width

    Full-Width – Background, text and other elements fill the entire width of your browser window

    Row Width-Full-Width Retain

    Full Width: Retained Content Width – Only the background fills the entire width of your browser window. Text and other elements are contained within the bounds of your current theme’s row width

    In this layout, Full Width: Retained Content Width is used because the text that will be applied is centered; not full-width.

    Passo 2: Ajustar a margem para criar espaço em branco

    061716_PBS_Jihan_How to Create Basic Hero Headers_Step-2-revisedIncrease the top and bottom margin by hovering the cursor on the arrow pointing to the margin you want to adjust. When the cursor turns into a double-headed arrow, click and drag down to your desired margin height. Its important to put Whitespace (also called Negative Space) between elements in a composition to create flow and help draw focus to the content on the page.

    Passo 3: Adicionar plano de fundo com sobreposições de texto e elementos

    061716_PBS_Jihan_How to Create Basic Hero Headers_Step-3-aTo add a background image with text and element overlays, simply click the Background Image icon under the Row Properties tab, upload your desired background image, and select to apply.

    061716_PBS_Jihan_How to Create Basic Hero HeadersTip #1: For Premium users, using the Background Image Tint option, helps to provide more contrast for text, buttons or other elements. You can select a tint color and adjust its value by clicking on the Background Color icon. Both icons can be found under Background on the Row Properties tab.

    061716_PBS_Jihan_How-to-Create-Basic-Hero-Headers_Step-3-cType in the message for your header. See Text Formatting tab to adjust the style. Choose typefaces that are easy to read and goes well with the background image. Remember to show contrast from the background image.

    Dica nº 2: Para elementos de branding, considere usar um logotipo branco ou preto para que ele não entre em conflito com uma imagem de fundo colorida.

    061716_PBS_Jihan_How to Create Basic Hero Headers_Step-3-dYou can also add buttons by clicking on Button below the Insert Content tab.

    Não se esqueça de salvar seu trabalho e pronto!

    Parabéns por criar seu primeiro hero header com o PBS! Mas, se não conseguir, não se preocupe; começar do zero é comprovadamente mais fácil com o PBS, então não deve dar tanto trabalho.

    Boa criação de sites!