No Easy Digital Downloads (EDD), o shortcode [downloads] é a maneira padrão de exibir todos os seus produtos em uma única página. Se você não está familiarizado com o shortcode e suas capacidades, pode ler sobre ele aqui.
Por padrão, seus produtos serão exibidos em um layout de grade com três colunas, nove produtos e paginação se você tiver mais de nove produtos em sua loja. Na maioria dos temas, essa exibição atende ao seu propósito sem nenhum CSS (estilos de design) adicional do próprio tema. No entanto, pode não ter exatamente a aparência que você deseja em todos os temas. Pior ainda, a exibição pode ficar distorcida em telas menores.
Isso geralmente leva à pergunta: “o shortcode [downloads] é responsivo?” Em outras palavras, as pessoas costumam se perguntar por que a exibição não fica tão boa em telas pequenas. Explicarei o porquê e o que você pode fazer a respeito abaixo.
Por que o shortcode [downloads] não é responsivo?
A primeira coisa a notar é que a responsividade não é um comportamento único para todos. A responsividade de um elemento depende inteiramente do ambiente em que ele está contido.
Por exemplo, digamos que haja uma seção em seu site com duas colunas lado a lado preenchidas com texto, ambas ocupando 50% da largura de sua área de conteúdo principal. Vamos também dizer que a área de conteúdo principal que "segura" essas colunas gêmeas tem 1000px de largura. Isso significa que cada coluna tem 500px de largura. À medida que a largura da tela se torna mais estreita em dispositivos menores, em algum lugar em torno de uma largura de área de conteúdo de 600px, as colunas agora com 300px começam a ficar um pouco finas demais. Isso é indesejável, então o CSS responsivo usa regras para dizer: "com 600px de largura de tela, altere a largura dessas duas colunas de 50% para 100%, e empilhe a esquerda sobre a direita." E com isso, ambas se tornam legíveis novamente.
É exatamente assim que o CSS responsivo funciona, e é feito com intenção.
Com essa compreensão, fica claro que, para escrever o CSS responsivo para fazer essas colunas gêmeas "responderem" à largura da tela, também devemos conhecer as dimensões dos elementos ao redor das colunas. No contexto do WordPress, isso significa que precisamos conhecer o design e as dimensões do seu tema.
Claro, não podemos conhecer os detalhes de todos os temas que nossos clientes podem usar. Enquanto seu tema pode exibir o shortcode [downloads] em um elemento que tem apenas 500px de largura, o tema da próxima pessoa pode exibir o mesmo shortcode em um elemento que tem 900px de largura. Seu CSS responsivo precisaria ser muito diferente do CSS responsivo da outra pessoa. E se você mudar de tema, seu CSS responsivo precisaria mudar novamente.
Em outras palavras, simplesmente não podemos prever quando e como o shortcode [downloads] deve responder a cada tema de uma vez.
Existem temas que incluem CSS responsivo para o shortcode [downloads]?
Sim, de fato! Na maioria dos temas que são criados para aproveitar o EDD, isso já é feito para você. Por exemplo, o tema Vendd projeta totalmente a saída do shortcode [downloads] para todos os tamanhos de tela. Você pode vê-lo na demonstração aqui: https://easydigitaldownloads.com/vendd/ O Vendd não apenas torna o shortcode [downloads] responsivo, mas também aprimora o layout.
Se um tema não foi aprimorado com o EDD em mente, a saída do shortcode não será responsiva. Ele será exibido conforme especificado pelos parâmetros do shortcode e nada mais. Se você precisar que ele "responda" ao tamanho da tela, isso deve ser escrito especificamente da perspectiva do seu tema.
Além disso, observe que alguns temas que são aprimorados para o EDD ainda podem não tornar o shortcode [downloads] responsivo. Em vez disso, ele incluirá seu próprio modelo para exibir produtos e sugere que você use o modelo personalizado em vez do shortcode.
Há uma grande seleção de temas prontos para EDD disponíveis aqui: https://easydigitaldownloads.com/themes/
O que devo fazer se não estiver usando um tema pronto para EDD?
Se você deseja continuar usando seu tema que não é aprimorado para EDD, mas também deseja que a saída do seu shortcode [downloads] seja responsiva, você tem duas opções:
1. Se você é um autor de CSS, pode simplesmente escrever CSS responsivo para fazer a saída do shortcode fazer o que você deseja em seu tema. Você não precisará se preocupar com o EDD fazendo alterações que quebrem seu CSS.
2. Contrate um designer para tornar a saída responsiva para você. Não é uma tarefa incrivelmente difícil, então o designer não precisaria estar familiarizado com o próprio EDD. CSS responsivo é um estilo de design amplamente compreendido e praticamente qualquer autor de CSS poderá visualizar a saída e torná-la responsiva para o seu tema. Se você deseja se ater a um profissional que já esteja familiarizado com o ecossistema EDD, recomendamos nosso parceiro confiável, Codeable.
