Contrutor de Página para Frontend e Backend

Tamanho: px

Começar a partir da página:

Download "Contrutor de Página para Frontend e Backend"

Sebastiana Tomé Castelhano
6 Há anos
Visualizações:

Destaques Visual Composer é um plugin pago que não está disponível no diretório de plugins do Wordpress, mas todos os modelos de sites de nosso site já vêm com

Contrutor de Página para Frontend e Backend O mais poderoso destaque do Visual Composer é que ele te da um fácil construtor de páginas arrastar e soltar que pode ser

1 Destaques Visual Composer é um plugin pago que não está disponível no diretório de plugins do Wordpress, mas todos os modelos de sites de nosso site já vêm com visual composer para você. Contrutor de Página para Frontend e Backend O mais poderoso destaque do Visual Composer é que ele te da um fácil construtor de páginas arrastar e soltar que pode ser usado na área de páginas/postagens padrão do Wordpress ou diretamente do frontend. Compatibilidade Universal com Temas, os modelos de sites disponíveis em nosso site já vêm com o visual composer mas você pode usar em qualquer tema para Wordpress sem pecisar de fazer qualquer ajustes em seu código existente.

2 Layout Altamente Customizável Os elementos do arrastar e soltar do Visual Composer tem um layout e tema padrão. Portanto, você pode modificar isso de acordo com o esquema de cores e aparência do seu site. Mais de 40 Elementos de Design Prontos para Usar A interface arrastar e soltar do Visual Composer tem mais de 40 elementos prontos para serem usados dos quais também podem ser utilizados para criar layouts únicos para seu site em poucos minutos.

Composer é cheio de elementos arrastar e soltar.

3 Elementos e completamentos responsivos Os elementos de página e design criados com o Visual Composer são completamente responsivos Amigável ao Desenvolvedor O Visual Composer é cheio de elementos arrastar e soltar. Se você desejar adicionar mais elementos, você pode fazer isso facilmente graças à sua estrutura amigável para o desenvolvedor.

Instalação do Plugin e Configuração caso você tenha um modelo de site que ainda não possui o visual composer Passo 1 O processo de instalação é o mesmo de qualquer outro plugin para

4 Instalação do Plugin e Configuração caso você tenha um modelo de site que ainda não possui o visual composer Passo 1 O processo de instalação é o mesmo de qualquer outro plugin para Wordpress. Uma vez ativado, o plugin vai aparecer na opção de Configurações no menu esquerdo principal no painel do Wordpress. Passo 2 Aqui, você pode ajustar algumas configurações básicas do plugin.

5 Passo 3 Você pode habilitar o Visual Composer para Páginas e Postagens, ou um dos dois. Você também pode definir permissões de acesso específicos para os tipos de usuários individualmente. Para cada tipo de usuário, você pode escolher exibir o Visual Composer na área de edição de postagem e no editor padrão do Wordpress, ou você pode exibir apenas o Visual Composer. Você também pode habilitar ou desabilitar elementos do Visual Composer individualmente para os usuários. Passo 4 Na aba Design Options, você pode modificar o visual e alguns dos elementos do Visual Composer de acordo com o tema do seu site. A aba Custom CSS permite você modificar o CSS sem modificar qualquer arquivo, enquanto a aba Product License permite você integrar sua conta da Envato para habilitar o suporte e atualizações automáticas. Na aba My Shortcodes, você pode inserir qualquer shortcodes adicional manualmente desenvolvido para a lista de shortcodes existente no Visual Composer.

Agora vamos partir para o uso real do plugin! Usando o VC nas Páginas e Postagens Como eu mencionei acima, você pode habilitar o Visual Composer para Postagens, Páginas ou um deles.

6 Agora vamos partir para o uso real do plugin! Usando o VC nas Páginas e Postagens Como eu mencionei acima, você pode habilitar o Visual Composer para Postagens, Páginas ou um deles. Depois de ativar o plugin, você vai ver as abas do Visual Editor no topo do seu editor de texto padrão do Wordpress. As duas abas que aparecem no topo do editor de texto são Backend Editor e Frontend Editor. Essas são as opções que fazem desse plugin tão legal de se usar. Daqui, você pode criar qualquer estrutura de página que quiser. vamos começar com o backend editor. Backend Editor

Passo 1 Quando você clica na aba Backend editor, sua área de edição de texto vai virar uma caixa drag in droponde você poderá adicionar elementos simplesmente selecionando-os da lista.

7 Passo 1 Quando você clica na aba Backend editor, sua área de edição de texto vai virar uma caixa drag in droponde você poderá adicionar elementos simplesmente selecionando-os da lista. Mas primeiro, você vai precisar adicionar uma row (linha). Daqui, a única coisa que vai limitar o seu design vai ser sua imaginação. Passo 2 Você pode adicionar diferentes elementos dentro da row e também escolher diferentes formatos de coluna para cada linha passando a seta do mouse no botão acima do editor de conteúdo. Você pode adicionar diferentes elementos para o design de sua página na aba Add element. A caixa Add elementscontém tudo que você precisa para o design de seu site.

Os elementos estão divididos nas categorias Content, Social, Site Structure, New Elements e WordPress Widgets, mas você pode ver todas elas juntas também.

8 Os elementos estão divididos nas categorias Content, Social, Site Structure, New Elements e WordPress Widgets, mas você pode ver todas elas juntas também. Seja qual for a opção desejada, basta clicar e arrastar ela para o conteúdo de sua caixa. Sua página será basicamente dividida em duas rows diferentes, Você pode continuar adicionando novas rows e novos elementos nessas rows. Passo 3 Para editar, deletar ou duplicar qualquer row em particular, basta usar os ícones no topo de cada caixa da row Passo 4

Você pode salvar um grupo de conteúdo como um template pronto para ser usado que poderá ser carregado da lista a qualquer momento que você precisar dele.

9 Você pode salvar um grupo de conteúdo como um template pronto para ser usado que poderá ser carregado da lista a qualquer momento que você precisar dele. Passo 5 O Visual Composer também permite você adicionar um CSS customizado para páginas e postagens individuais. Os efeitos desses CSS customizados vão estar limitados apenas para essa página ou postagem em particular.

10 Visual Composer também suporta vários plugins famosos como Contact Form 7, Layer Slider, Revolution Slider e Gravity Forms. Se você tem qualquer um desses plugins instalados, eles serão adicionados automaticamente à caixa Add element. Quando você selecionar qualquer um deles da lista de elementos, ele será inserido diretamente na sua página, sem a necessidade da adição de quaisquer shortcodes. O backend editor lhe dará muita flexibilidade e opções que lher permitirá criar qualquer tipo de design até mesmo se você for um usuário amador. Advertisement Frontend Editor O frontend editor permite você arrastar e soltar os elementos instantaneamente na página. Ele torna mais fácil de ver o impacto de suas alterações imediatamente enquanto tem todas as opções do backend editor também. Passo 1 Começando da esquerda, você pode adicionar novos elementos clicando no sinal de + e editar o formato da coluna com o botão column próximo a ele. Passo 2 Você também pode adicionar novas rows ou colunas pelo sinal de + dentro do conteúdo da página.

Passo 3 Todos os elementos do Visual Composer são completamente responsivos e mobile ready. Você pode obter uma prévia ao vivo em diferentes dispositivos no frontend editor pelos ícones abaixo.

11 Passo 3 Todos os elementos do Visual Composer são completamente responsivos e mobile ready. Você pode obter uma prévia ao vivo em diferentes dispositivos no frontend editor pelos ícones abaixo. Passo 4 Apesar de todas estas características e a vasta gama de elementos, Visual Composer permite você adicionar seus próprios shortcodes e elementos de design também. Você pode criar os elementos você mesmo ou importar dos serviços de terceiros.

Documentos relacionados

MICROSOFT OFFICE POWERPOINT 2007

MICROSOFT OFFICE POWERPOINT 2007 ÍNDICE CAPÍTULO 1 INICIANDO O POWERPOINT 2007...7 CONHECENDO A TELA...7 USANDO MODELOS...13 CAPÍTULO 2 DESIGN DO SLIDE...19 INICIAR COM UM DESIGN DO SLIDE...21 INICIAR