Como usar o SiteOrigin Page Builder com WordPress

Como outros criadores de páginas do WordPress, o SiteOrigin está aqui para ajudá-lo a construir um site poderoso e responsivo com algum CSS e nenhum conhecimento de codificação. Existem alguns temas de sua extremidade que você pode usar (gratuitos e premium), bem como plug-ins gratuitos e de criação de páginas Pro.

Testei a versão Pro do SiteOrigin e construí uma página de destino. Ele vem com a funcionalidade de arrastar e soltar e funciona com qualquer tema e você pode usar todos os widgets Free, Pro e WordPress ao mesmo tempo. Vamos ler este artigo para saber mais sobre a instalação e configuração do SiteOrigin com o WordPress.

Por que escolher o SiteOrigin Page Builder?

A construção do site começa na barra de ferramentas do Editor WordPress, com o qual todos estamos familiarizados, tanto Classic quanto Gutenberg. Ele gera uma pequena quantidade de código de saída e não é inchado, mas cada linha do código de saída é otimizada tanto quanto possível para um construtor de uma página.

Ele tem uma visualização ao vivo de todas as alterações feitas, já que não tem um construtor de front-end.

Você também pode verificar facilmente o histórico e reverter para um design anterior se não estiver satisfeito com o que fez. Além disso, ele usa Linhas e Widgets, como de costume, como outros construtores de página.

Recursos do SiteOrigin Page Builder

A versão gratuita do SiteOrigin vem com opções bastante limitadas de “widgets”, mas com a versão Pro, você tem um monte de widgets complementares úteis para construir seu site com facilidade.

Construtor de tipo de postagem personalizado

Um dos recursos mais populares e úteis do SiteOrigin é o Custom Post Type Builder com layouts reutilizáveis ​​do Page Builder e modelos WooCommerce. É um pouco diferente das outras ferramentas e darei uma explicação um pouco mais profunda sobre como usá-lo.

Existem etapas importantes a seguir para que você crie um modelo de pós-tipo personalizado no SiteOrigin.

Passo 1

Você precisaria adicionar um novo tipo de postagem personalizado, construir o layout do tipo de postagem usando o Construtor de páginas e escolher as configurações de exibição do tipo de postagem.

No painel do WordPress, navegue até Ferramentas → Tipos de postagem e clique no botão Adicionar novo, denomine Portfólio, por exemplo. Agora, clique na guia Construtor de Páginas próximo às guias Texto e Visual, use os botões Incluir Widget e Incluir Linha do Construtor de Páginas para construir seu layout de tipo de postagem customizado de portfólio.

Observe que qualquer conteúdo que você adicionar ao modelo será exibido em cada postagem de portfólio publicada no futuro. Portanto, é bastante útil se você deseja exibir um bloco específico de conteúdo em cada uma dessas páginas, como Call to Action, Assine nosso boletim informativo, Sobre mim, Depoimentos, etc.

Passo 2

Você precisa saber como adicionar conteúdo a um tipo de postagem personalizada que criou.

Depois de criar o portfólio do tipo de postagem personalizada, você poderá ver o item do portfólio na barra lateral esquerda do painel do WordPress. Clique nele e depois em Adicionar novo.

Quando você nomear seu item do Portfólio, ele permitirá que você adicione conteúdo a ele. Lembre-se de que você só pode editar widgets que não fazem parte do modelo global e esses widgets serão marcados com leia-me um texto. E por último, mas não menos importante, como adicionar essas postagens em um carrossel de postagens ou em um widget de loop de postagens.

Widget Post Loop

SiteOrigin tem o widget Post Loop incluído, mas depende de modelos de loop dentro do tema ativo.

Para inserir o widget Post Loop, basta adicionar uma linha em uma página ou post onde deseja que seja exibido, selecionar o blog ou layout de grade e pronto. Em seguida, você precisa escolher qual widget será exibido clicando no botão Build post query.

Na última etapa, clique em seu tipo de postagem customizada na lista suspensa Tipo de postagem na parte superior do widget do construtor de consulta.

Se você quiser fazer isso no carrossel de postagens, a única diferença é escolher o widget de carrossel de postagens em vez de Post Loop, o resto do procedimento é o mesmo.

WooCommerce Template Builder

Os modelos do WooCommerce permitem a criação de belas páginas específicas do WooCommerce e uma única aparência do produto. A interface do WooCommerce Template Builder é separada em sete guias:

1. produtos
2. Arquivo de produto
3. Comprar
4. Carrinho
5. Carrinho Vazio
6. Confira
7. Minha conta

Para WooCommerce, todos os itens individuais reais de que você precisa para construir o único produto são distribuídos como um widget, o que permite a fácil criação de produtos. Você pode criar um layout e usar widgets WooCommerce como preço, SKU, Adicionar ao carrinho, Descrição curta / longa, imagem do produto, título, etc.

Há também um widget muito útil para um upsell de produto, que está dando a você a liberdade de usar a funcionalidade Upsell do WooCommerce. No entanto, observe que o design desses widgets e páginas WooCommerce é definido pelo CSS do seu tema e pode ser editado usando CSS.

Outros widgets são comuns, como Mapas, Acordeões, CTAs, Guias, Widgets Sociais, Carrosséis, etc.

Com o Pro Subscription, você não obtém apenas o Pro Page Builder, mas também tem acesso a todos os recursos do Pro, Temas Premium, CSS e widgets.

Preços e planos do SiteOrigin Page Builder

SiteOrigin está oferecendo dois modelos de preços. O primeiro e mais útil é a Assinatura Anual, que vem em 3 pacotes.

• Único para um site ao preço de US $ 29
• Negócios para até 5 locais ao preço de US $ 49
• Desenvolvedor para sites ilimitados ao preço de $ 99

Além disso, há uma Licença de Ano Único em que você tem tudo igual, exceto que não é a assinatura, mas um ano de atualizações e suporte.

• Único para um site ao preço de $ 38
• Negócios para até 5 locais ao preço de US $ 64
• Desenvolvedor para sites ilimitados ao preço de $ 128

Requisitos de sistema / hospedagem do SiteOrigin

Mesmo que seja um pouco difícil encontrar os requisitos de sistema do SiteOrigin. De alguns fóruns de suporte e comentários online, parece que o PHP 7.4 com pelo menos 512 MB de memória PHP fará o truque. No entanto, usei o VultrHF com 2 GB de memória PHP para fins de teste.

Claro, você precisaria da versão mais recente do WordPress e de todos os outros plug-ins atualizados.

Instalar e configurar o construtor de páginas SiteOrigin

Quando se trata de instalação e configuração, o SiteOrigin oferece algo interessante que a maioria dos criadores de páginas não oferece.

Quanto a tudo no WordPress, você deve instalar o SiteOrigin gratuito diretamente do Repositório e, em seguida, fazer o upload da versão Pro baixada de sua conta do SiteOrigin. Depois de concluir a instalação, siga as etapas e instale / ative os plug-ins recomendados.

Depois de instalar com sucesso o pacote de plug-ins, você deve ativar a licença e os widgets de que precisa. Quanto à licença, ela precisa ser ativada imediatamente e para os widgets, você pode ativá-los agora ou mais tarde, quando precisar de alguns deles.

O que é ótimo no SiteOrigin é que você não precisa ativar widgets desnecessários e, ao fazer isso, pode economizar alguns recursos e ter funcionais apenas as opções de que precisa. Os azuis são ativos e os cinzas são widgets inativos.

Quando terminar, você pode começar a construir seu site usando o construtor de páginas SiteOrigin. Navegue até Páginas → Adicionar novo e clicando na seta suspensa, você será oferecido para Adicionar nova página com SiteOrigin Page Builder e Editor de bloco → selecione SiteOrigin Page Builder.

Pessoalmente, não é o maior fã de criadores de páginas de backend na era dos criadores de front-end. Porém, isso significa que consumirá menos recursos e é mais leve para o seu servidor. Não tão faminto como construtores em geral.

É assim que o construtor de páginas realmente se parece no modo de edição ao vivo, que é o mais útil. O editor de back-end é muito difícil e demorado, já que você precisa tocar em visualização todas as vezes para ver as alterações feitas.

Quando você clica na página Editar, você vai parar dentro do editor de back-end, a partir daí basta clicar em Live Editor na barra de ferramentas e você vai parar nele.

No lado esquerdo, você tem uma barra lateral semelhante ao Customizador, a partir da qual você está realmente construindo o site e no lado direito ele recarregará a visualização para exibir as alterações após qualquer alteração ser feita.

Não suporta nenhum tipo de arrastar e soltar diretamente no site, mas tudo deve ser feito através do personalizador da barra lateral esquerda.

No canto superior esquerdo, você verá a barra de ferramentas com 4 itens. Da esquerda para a direita, eles fariam o seguinte.

O Gear Icon abrirá os widgets disponíveis que você pode inserir nas linhas que criou. Você pode ver os widgets do WordPress e os do SiteOrigin no mesmo lugar. No entanto, você também pode escolher no lado esquerdo para ver apenas WordPress ou apenas SiteOrigin.

O próximo ícone é um hambúrguer, que irá adicionar uma nova linha e esse é o momento em que você está escolhendo o layout da linha. Não se preocupe se precisar alterar o layout, isso pode ser feito a qualquer momento depois.

Após clicar no ícone Layout, ele realmente abriria a opção de importar / exportar o Layout existente. O que percebi é que o SiteOrigin está sem mais layouts e designs mais modernos. Além disso, a partir desta ferramenta, você pode clonar páginas existentes que você já criou ou espelhar seções / blocos.

O último ícone é Histórico, o lugar onde você pode reverter o que fez se não gostar dos resultados ou simplesmente se cometer um erro.

Desempenho do SiteOrigin Page Builder em Cloudways

Como era de se esperar, o SiteOrigin tem um desempenho muito bom, pois não tem muitos inchaços no código e é bastante simples, o que é ao mesmo tempo uma vantagem e uma desvantagem. Precisamos mencionar que não fizemos nenhuma otimização de imagem.

- Resultados do SiteOrigin no GTMetrix

- Resultados do SiteOrigin nas ferramentas Pingdom

- Resultados de SiteOrigin em WebPageTest

Críticas do usuário do SiteOrigin Page Builder

E o que é sempre uma das coisas que você deve verificar antes de instalar qualquer plug-in são as avaliações e classificações no repositório de plug-ins do WordPress.org. Para SiteOrigin, existem 922 classificações de 5 estrelas até agora e as avaliações recentes são fantásticas.

Resumo

Se você precisa de uma ferramenta leve para construir um site simples ou uma página de destino, o SiteOrigin pode ser a escolha perfeita para você. A desvantagem é que ele não oferece um criador de cabeçalho e rodapé, então você precisa de algum tema que permita a edição do cabeçalho e rodapé do seu site.

A curva de aprendizado é íngreme e você precisa de alguma experiência anterior com WordPress e um entendimento de widgets e elementos. A falta de um editor de front-end também é um fator limitante para iniciantes e definitivamente requer algum conhecimento e habilidades em CSS para tornar seu resultado final incrível. No entanto, por outro lado, como um desenvolvedor, a maioria dos recursos são bastante convenientes, embora não muito intuitivos para iniciantes.

O ecossistema em torno do SiteOrigin não é tão grande quanto para alguns outros criadores de páginas, mas precisamos levar em consideração que ele tem 1 milhão de instalações ativas para a versão gratuita e 900.000 para o widget Bundle e alguns dos autores de add-ons externos têm mais de 30.000 instalações ativas.