Grade essencial: uma visão geral detalhada e uma revisão

ThemePunch faz alguns dos plug-ins mais populares do WordPress. Essential Grid é um dos maiores ganhadores de sua biblioteca, ao lado do Slider Revolution . Com o tempo, o Essential Grid se tornou um dos plug-ins mais procurados e bem-sucedidos do CodeCanyon. Por isso, gostaríamos de destacar o plug-in e permitir que vocês decidam se é algo que pode melhorar seus sites.

Grade Essencial

Plugins de grade não são incomuns. Na verdade, nosso próprio construtor Divi tem um módulo de portfólio que atende a esse propósito. Mas o Essential Grid vai muito além do que a maioria dos outros plug-ins de grade fez, e é por isso que mesmo depois que muitos temas estão incluindo seus próprios modelos de grade personalizados, as pessoas ainda estão comprando licenças EG todos os dias.

O simples uso da sinopse de vendas original dirá o que você pode fazer com a EG:

Essential Grid Gallery é um plugin premium para WordPress que permite exibir vários formatos de conteúdo em uma grade de galeria altamente personalizável. As aplicações possíveis variam de portfólios, blogs, galerias, lojas WooCommerce, tabelas de preços, serviços, controles deslizantes de produtos, Instagram, YouTube, depoimentos e qualquer outra coisa que você possa imaginar.

Mas o que sua sinopse não diz é exatamente em que consiste toda essa personalização. Esse é o nosso trabalho e pretendemos cumpri-lo. Então, vamos nos aprofundar e ver do que se trata tanto alarido.

Começando

Em primeiro lugar, lembre-se de que este é um plugin premium. Você precisará acessar o CodeCanyon e obter o download por $ 27 USD. Em seguida, passe pelo processo de instalação manual ( Plugins - Adicionar Novo - Carregar ). Neste ponto, você terá 3 novos itens em seu painel de administração do WordPress: Ess. Grid , Punch Fonts e Ess. Postagens de exemplo de grade . Para começar, vamos examinar o Ess simples . Grid .

O primeiro item de menu é onde você insere seu código de ativação, verifica se há atualizações, changelogs, esse tipo de coisa. Eles fornecem algumas instruções simples sobre como usar o plugin que se resumem a: usar um shortcode ou arrastar o widget para uma barra lateral.

Esta página também será onde você poderá criar quaisquer novas grades que deseja usar, então se acostume a clicar nesse botão.

Editor de tema de item

No Item Skin Editor , você tem todos os modelos básicos que acompanham o Essential Grid. Você pode editá-los pele a pele, mudando o que quiser sobre isso. Ou usando-o como está. Você pode até criar o seu próprio do zero.

Aqui, o EG oferece a opção de classificar por meio de guia para diferentes tipos de itens de grade. (Espaçamento uniforme, design de alvenaria, postes ou grades de produtos WooCommerce.) Conforme você passa o mouse sobre cada um, ele anima e exibe títulos, trechos, sobreposições de cores etc. que você pode personalizar clicando no ícone de engrenagem verde .

Dentro deste painel de opções, cada elemento pode ser editado. Desde o espaçamento entre os elementos, os ícones que aparecem, o estilo e duração da animação, links, sombras, tipos de mídia e fit, tudo.

Gostaria de chamar sua atenção para o fato de que o Essential Grid tem as classes CSS à vista para você manipular da maneira que quiser. Se por algum motivo você não conseguir encontrar a opção de design perfeita entre as opções aqui, você mesmo pode adicioná-la por meio de CSS personalizado.

Na parte inferior da página, você tem uma visão geral de cada camada a que tem acesso e como está estilizada no momento.

Meta dados e configurações de pesquisa

O editor de skins é provavelmente a parte individual mais robusta do Essential Grid, mas o EG não foge dessas opções em outros lugares. Você pode criar metacaixas personalizadas em Manipulação de metadados, o que lhe dá a opção de colocar caixas para funcionalidades personalizadas que você pode precisar fora do plug-in.

Você pode fazer praticamente a mesma coisa em Configurações de pesquisa , mas para (adivinhou) pesquisas. EG funciona como uma página de resultados de pesquisa também, então se você não está satisfeito com a aparência de seus arquivos normais e tal, esta é uma ótima maneira de corrigi-los rapidamente.

Configurações globais

Assim como parece, as configurações globais cobrem todas as suas bases. Você pode definir permissões para quem pode alterar e editar grades, como as fontes e o JavaScript são carregados, o que você faz para armazenar em cache, de onde obtém os ícones, definir uma imagem padrão para os elementos da grade e assim por diante. Se ele se aplica a todo o plugin em vez de um único elemento, como apenas skins, você poderá encontrá-lo aqui. A parte impressionante é o controle que você obtém - muitos plug-ins não oferecem a opção de escolher que tipo de consulta usar, mas EG permite que você escolha se get_posts () ou WP_Query () funciona melhor para o seu site (e se você não não sei o que isso significa, apenas deixe como padrão. É bom como é.

Importar / Exportar

Ao configurar o plugin pela primeira vez, você definitivamente deve verificar a página Importar / Exportar . Se você clicar em Import Full Demo Data e Import Social Media Demo Grids , terá uma grande variedade de modelos iniciais com os quais pode começar. Eles também são bons, então basta clicar no botão e a importação / download é quase instantânea.

As grades importadas aparecerão na parte inferior da lista quando você navegar de volta para Ess. Grid . Sua nova biblioteca de grades o encontrará lá.

Ess. Postagens de exemplo de grade

A segunda das novas opções de menu do administrador é o Ess. Postagens de exemplo de grade . É uma escolha estranha para um título de menu, pois é aqui que seus itens de grade de modelo provavelmente ficarão. Veja, todas as postagens listadas nesta página são, na verdade, o conteúdo das caixas contidas nas grades sob o Ess. Visão geral da grade .

Quando você usa os códigos de acesso obtidos na página de visão geral em qualquer postagem ou página que deseja exibir na grade, esses são os itens individuais que aparecem.

Criar uma postagem para uma nova grade também é fácil. Funciona como adicionar uma nova postagem de qualquer outro tipo. Basta clicar no botão Adicionar novo sob este título e definir seus parâmetros.

Usando uma grade essencial salva

Esteja você usando os modelos ou fazendo o seu próprio, você precisa saber como usá-los. Tudo gira em torno de códigos de acesso com o Essential Grid. Se você tiver uma grade específica que deseja usar repetidamente, clique em Criar nova grade Ess em Ess. A página de visão geral da grade em seu painel de administração. Dentro, você escolhe tudo, desde como você pode classificar os itens na grade, que animação de carregamento ela tem, de onde seus elementos realmente vêm e você pode dar um nome a ela.

Ao nomeá-lo, você também pode escolher seu apelido de shortcode. Esse alias é usado apenas para chamar esta grade específica usando o código de acesso Essential Grid. Eu também escolhi usar o mesmo ID para o ID CSS apenas no caso de, no futuro, eu querer fazer ajustes externos.

Basta colocar o shortcode em um editor de texto de postagem ou página, a seguir.

E voila!

Usando uma grade essencial única

Se você sabe que precisa apenas exibir algo em uma página ou em uma postagem, pode não haver nenhuma razão para se dar ao trabalho de configurar uma grade totalmente nova, fazer novas postagens para seu conteúdo como modelos e criar aliases e tudo naquela. Em vez disso, você pode simplesmente gerar um shortcode dinâmico de dentro do próprio editor de postagem. Basta pressionar o botão Essential Grid Shortcode Creator na barra de ferramentas.

Em seguida, você precisará seguir as etapas para informar a este shortcode qual conteúdo deseja que ele renderize. Você pode escolher um dos predefinidos no menu de visão geral (sem precisar copiar / colar seu código de acesso manualmente) ou pode fazer o seu próprio com base nas opções apresentadas.

Você percorrerá as páginas para escolher todas as mesmas opções que possui em outros lugares (animações, layout, etc.) e, quando estiver pronto para prosseguir, pressione o botão Gerar código de acesso .

Como você pode ver, o shortcode gerado dinamicamente é muito mais complexo porque contém todas as informações sobre a própria grade.

Mas quando é renderizado, não há diferença. Especialmente se você escolheu aplicar uma pele durante a criação.

Widget de grade essencial

Finalmente, você tem a opção de colocar qualquer Grade Essencial que você criou em um widget. Este é mais fácil do que qualquer outro de configurar porque é literalmente arrastar e soltar. Vá para Aparência - Widgets , selecione o widget Essential Grid e arraste-o para onde deseja renderizá-lo. Se você quiser apenas na página inicial, pode definir isso ou pode escolher qualquer uma de suas grades predefinidas. No entanto, você não pode criar uma grade dinâmica desta forma, como fez acima. Eles devem ser pré-gerados.

Uma coisa a ter em mente, entretanto, é que nem todos os layouts ficam bem em uma barra lateral. Você pode ter parte do seu conteúdo renderizado de forma muito estranha, mas não surte. Se isso acontecer, basta ir alterar as configurações para que seja exibido de forma diferente - em caixa ao invés de tela cheia talvez ou Mesmo em vez de Maçonaria, talvez. Experimente até que fique do jeito que você deseja. É provavelmente uma boa ideia fazer uma grade específica da barra lateral para isso. (Você pode simplesmente duplicar o que deseja lá e ajustá-lo em vez do original.)

Punch Fonts

E, finalmente, há a última parte de personalização que você obtém com o Essential Grid. Punch Fonts é uma interface simples para usar o Google Fonts no EG. É isso.

Você pode escolher quais fontes deseja instalar pressionando o botão Adicionar nova fonte . Se você seguir o link no modal para o Google Fonts, encontrará os parâmetros de que precisa e o plug-in puxará a fonte para o seu site.

E quando diz que o tp- moniker é apenas para uso interno, isso significa que é basicamente o mesmo que o apelido anterior. Você verá isso quando estiver aplicando as fontes às coisas. Portanto, nomeie-os apropriadamente.

Pensamentos finais

No geral, o Essential Grid é um dos plug-ins de grade mais robustos e poderosos que existem. Se você já usou o Slider Revolution, então os layouts e camadas funcionam de forma muito semelhante a isso, e você deve se sentir em casa. Caso contrário, pode haver uma pequena curva de aprendizado enquanto você descobre quais peças se encaixam. Mas, depois de fazer isso, você será capaz de criar algumas páginas verdadeiramente bonitas.

Se você não precisa desse nível de personalização, pode não querer pagar o preço premium. Existem muitos outros plug-ins de grade por aí que podem atender às suas necessidades. Além disso, dependendo do peso das grades, a velocidade do site pode se tornar um problema. Quer dizer, você pode personalizar sua animação de carregamento por um motivo.

No entanto, se for necessário e feito corretamente, o plugin realmente brilha. Há uma razão pela qual o Essential Grid é o vendedor número 1 em sua categoria. E se você verificar as classificações e os tópicos de suporte, ThemePunch é rápido para responder e ajudar.

Portanto, por US $ 27, provavelmente vale o preço da admissão. Além disso, se você for um designer de temas, poderá adquirir a licença estendida e incluí-la como um pacote para seus próprios temas. O que é muito legal.

Você usa o Essential Grid? Deixe-nos ver algumas das suas criações nos comentários!

Imagem de destaque do artigo por Bloomicon / shutterstock.com