Novo no Pinegrow? Este guia interativo é o melhor lugar para começar. Nós vamos ver como todos os painéis do Pinegrow funcionam.
Para começar esse guia, vamos precisar de uma página para testes. Para abrir a página de exemplo utilizadas neste manual, abra a ajuda interna do Pinegrow clicando no na barra de ferramentas superior. Lá, vá para o “Getting started with Pinegrow” e clique no botão “Abrir a página de exemplo”. Ou você pode abrir as suas próprias páginas e experimentar com elas.
Note Sinta-se livre para bagunçar a página de exemplo o quanto quiser pra este tutorial. Você sempre pode fechá-la e abrir uma versão nova clicando no botão novamente.
A visualização de página
A maioria das operações de edição no Pinegrow acontecem no modo de visualização de página.
Faça testes nas visualizações de página:
- Mova o mouse sobre a visualização de página. Observe que elementos que o mouse passa em cima ficam destacados com uma borda verde.
Elemento realçado. - Clique uma vez sobre um elemento na página para selecioná-lo. O elemento selecionado tem uma borda e um menu da cor azul.
Elemento selecionado. - Tente clicar no ícone Duplicar ou pressione CTRL + D para fazer uma cópia do elemento selecionado.
- Clique no ícone Excluir ou pressione a tecla DELETE para apagar o elemento duplicado. Use desfazer se as coisas deram errado.
Enquanto você está trabalhando com sua página, o Painel de árvore permite manter um olho sobre a estrutura da página.
A estrutura de página
Abra o Painel de árvore.
O Painel de árvore exibe a estrutura HTML em níveis da página selecionada. O elemento selecionado fica na cor azul.
Vamos dar uma olhada rápida na árvore:
- Clique em qualquer elemento na árvore para selecioná-lo. Este elemento também será selecionado no modo de visualização de página. Um menu 1 vai aparecer perto do elemento selecionado na árvore.
- Elementos que têm filhos (outros elementos dentro de si) podem ser recolhidos e expandidos. Clique nos ícones e e veja o que acontece. Use recolher para ocultar detalhes que não são relevantes para a tarefa em questão.
- O Painel de árvore também permite que você use arrastar e soltar de maneira precisa.
Adicionando elementos na página
Abra o Painel de biblioteca.
O Painel de biblioteca contém elementos HTML e componentes (grupos de elementos HTML) que podemos acrescentar a página.
Vamos adicionar um novo elemento na página:
- Pegue um h3 da Biblioteca e arraste-o para a página. A linha laranja vai mostrar onde o elemento vai ser colocado.
Arrastando h3 a partir da Biblioteca para a página. - Escolha outro elemento do Painel de biblioteca e arraste-o para o Painel de árvore. Como sempre, use desfazer se as coisas ficarem erradas.
Arrastando h3 da Biblioteca para a árvore. - Digite “p Hello” na caixa Insert code (que é uma sintaxe simplificada para <p>Hello</p>. Um novo item “p | Hello” irá aparecer logo abaixo do editor de código. Arraste-o para a página.
Inserindo o código.
Propriedades de elemento
Abra o Painel de propriedades do elemento.
Use o Painel de propriedades do elemento para editar atributos do elemento. Por exemplo, para alterar a origem e atributos de texto alt de uma imagem. As classes são gerenciadas por lá também. E o painel contém controles para propriedades definidas por frameworks, como o Bootstrap.
Vamos tentar editar algumas propriedades:
- Selecione o título h1 na página ou na árvore. Use o controle de nível de Título (na seção Título) para alterá-lo para Título 2.
- Adicione uma classe ao clicar no botão Adicionar classe 1 na seção de Classes. Uma ferramenta flutuante 2 vai aparecer. Digite um nome para a classe (por exemplo, titulo) no campo de entrada e clique no botão Adicionar classe 3. Feche a ferramenta flutuante.
Adicione uma classe no Painel de propriedades. - Experimente usar os controles Bootstrap na seção Texto & Contexto.
Estilo – Pintura com CSS
Abra o Painel de estilo.
A estilização visual de elementos da página é feita com regras de CSS. Cada regra tem um seletor que especifica quais os elementos são afetados por ela, e propriedades que definem o estilo visual, como cor, tipo de letra e etc.
Vamos gastar um pouco mais de tempo neste painel, pois é uma ferramenta muito poderosa se você souber como usá-la efetivamente.
Explorando a edição de regras CSS existentes
Selecione a imagem do pinheiro grande na página de exemplo e dê uma olhada na aba Ativa no Painel de estilo: a aba Ativa 1 apresenta todas as regras CSS que afetam o elemento selecionado.
A aba Ativa também apresenta o conjunto de estilo diretamente no elemento HTML com o atributo de estilo 2. Vamos explorar isso um pouco mais tarde. Regras de folhas de estilo do framework, como bootstrap.css, são ocultos por padrão. Clique em Mostrar mais links 3 para exibi-los. O Editor Visual 4 contém controles visuais para a edição de propriedades da regras CSS.
Vamos criar um estilo!
- No Editor Visual experimente com as propriedades de texto na seção Fonte / Texto 1.
Criando novas regras CSS
Até agora estávamos modificando um regra CSS existente. Vamos criar uma nova regra CSS agora:
Crie uma nova regra CSS:
- Selecione o elemento cabeçalho h1 na página. Insira um seletor de classe na caixa de entrada do Criar regra 1, por exemplo, “.grande”.
Adicionado nova regra CSS para o elemento selecionado. - Já que o h1 selecionado não tem a classe .grande atribuída, o Pinegrow vai oferecer para adicionar a classe para o elemento 2. Deixe essa caixa de seleção marcada.
- Clique no botão Criar 3. Uma vez que esta é a primeira regra CSS que nós estamos adicionando, o Pinegrow vai nos pedir para confirmar que folha de estilos deve ser selecionado como padrão para a adição de novas regras CSS. Vamos escolher pinheiro.css. Depois de definirmos a folha de estilos padrão, todas as novas regras criadas com o botão Criar vão para lá.
Confirmando a folha de estilos padrão para novas regras CSS. - A regra CSS .grande esta criada 1 e exibida no Editor Visual. Use o controle de seletor (ou rolagem do mouse) para ir para baixo para a seção do Texto. Experimente os diferentes controles.
Utilizando controles de texto no Editor Visual.
Estilos rápidos com o atributo de Estilo
Cada elemento HTML pode ter o atributo estilo para definir suas propriedades visuais. Por exemplo:
<h1 style="color:red>eu sou vermelho!</h1>
Embora o atributo de estilo ser uma maneira rápida e fácil de estilizar elementos, a sua utilização não é recomendada. Por quê? Porque em vez de utilizar uma regra CSS para dizer ao navegador que todos os elementos H1 devem ser vermelhos, você tem que especificar a cor de cada elemento H1 em seu site. Agora, imagine que você tem 20 páginas e deseja alterar a cor para verde. Ainda bem que o Pinegrow sabe tem forma inteligente de se usar o atributo estilo:
Vamos pintar com o atributo estilo:
- Selecione um parágrafo P na página. No Painel de Estilo Ativo, selecione o atributo de Estilo 1 se já não estiver já selecionado.
- Defina algumas propriedades no Editor Visual, por exemplo, a cor do texto, tamanho, cor de fundo, etc. Se você verificar o Painel de código do elemento você verá as propriedades visuais armazenados no atributo de estilo.
- Uma vez que satisfeito com o estilo, clique no ícone “Salvar como uma regra CSS” no atributo Estilo. A caixa de diálogo Criar regra CSS será aberta:
Escolha o seletor e destino para a nova regra. - Digite o nome da nova regra 1 e selecione o destino da folha de estilos. O Pinegrow irá transferir as propriedades visuais do atributo de estilo para a nova regra, e excluir o atributo de estilo do elemento.
O fluxo de trabalho “atributo de estilo -> Salvar como regra CSS” é muito conveniente. Ele nos permite ir direto para o estilo do elemento sem primeiro ter que descobrir qual o tipo de regra CSS precisamos criar. O Painel de estilo tem muito mais a oferecer, mas por hora vamos deixá-lo e continuar a explorar o Pinegrow.
Edição de texto
Clique em na barra de ferramentas ou clique duplo em qualquer texto na página para ativar o modo de edição de texto.
O elemento em edição terá uma borda amarela pontilhada e um menu de edição de texto azul :
Vamos mudar um texto:
- faça duplo clique no parágrafo descrevendo os mais antigos pinheiros. A barra de ferramentas de edição irá aparecer acima do elemento.
- Edite o texto. Selecione uma palavra e clique no ícone B ou pressione CTRL + B.
- Clique no cabeçalho da página. O modo de edição de texto ainda está ativo. Agora você pode editar o texto do título.
- Clique no botão Concluído na barra de ferramentas de texto azul, pressione ESC ou clique na barra de ferramentas superior para sair do modo de edição de texto.
Note Para obter melhores resultados, selecione apenas o elemento que você deseja editar. Por exemplo, se pretender alterar o rótulo do botão, basta selecionar o botão, e não o contêiner pai do botão.
Note Use o Painel de código do elemento (descrito a seguir) em situações onde a edição de texto não faz exatamente o que você quer.
Edição de código
O Pinegrow não é apenas um construtor visual de sites – você pode usá-lo para trabalhar com HTML e CSS também.
Note Não sabe HTML? O Painel de código do elemento é um ótimo lugar para aprender código. Não se assuste com uma sopa de letrinhas, em vez disso, dê uma olhada em diferentes elementos um de cada vez e observe como as diferentes operações de edição alteram o código.
Edite o código de um elemento por vez
Editar no Painel de código do elemento permite que você edite o código de elementos individuais. Em vez de lidar com a página inteira você se concentrar apenas nas partes relevantes do código.
Abra o Painel de código do elemento.
Vamos programar!
- Selecione um parágrafo ou qualquer outro elemento na página. Seu código será exibido no editor de código. Tente alterar o texto. A alteração é imediatamente vista na página.
Edite o código do elemento selecionado. - Alterne para a sintaxe de código simplificado , clicando no ícone . A sintaxe simplificada, às vezes, é mais fácil de editar e é menos propensa a erros. Note que esta sintaxe é usada apenas para edição. Código HTML normal será usado na página.
Sintaxe de código simplificada.
Editor de código da página
Use o editor de código da página para editar o código da página toda.
Abra o Painel de código da página.
Note que o modo de sintaxe simplificada não está disponível no editor de código da página.
Vamos editar o código da página inteira:
- Selecione um elemento (h1, por exemplo) na página. Observe que o elemento também fica em destaque na editor de código da página.
- Alterar o texto de h1 no editor de código. A mudança aparece na visualização de página também.
- Clique com o botão direito do mouse em um elemento no editor de código. O elemento será selecionado na visualização de página.
Note O editor também é usado para editar código CSS e arquivos Javascript.
Acelere seu trabalho
Selecionar vários elementos
A maioria das operações de edição no Pinegrow pode ser feita em mais de um elemento selecionado ao mesmo tempo. Esta é uma grande economia de tempo.
Para selecionar vários elementos:
- CTRL + clique em elementos na página ou na árvore.
- SHIFT + clique para selecionar um intervalo de elementos no mesmo nível.
Efetue operações de edição em vários elementos:
- Selecione um par de elementos na página usando CTRL e clicando sobre eles.
- Agora você pode duplicar ou excluir todos os elementos selecionados com apenas uma operação. Você também pode alterar as suas propriedades e assim por diante.
- Pressione ESC para cancelar a seleção de todos os elementos.
Trabalhe com várias visualizações de página
Cada página pode ter várias visualizações de página, mostrando a página em diferentes tamanhos e em diferentes dispositivos.
Faça testes nas visualizações de página:
- Abra outra visualização de página clicando no ícone Adicionar visualização de página.
- Mova o mouse sobre as duas visualizações de página. Observe que elementos abaixo do ponteiro do mouse ficam destacados (com borda verde) em ambas as visualizações.
- Clique em qualquer elemento na página. O elemento será selecionado em ambas as visualizações de página.
Use o Repetidor
O Repetidor é um recurso útil que permite a você repetir um único comando várias vezes.
Vamos repetir algumas coisas:
- Selecione um elemento na página.
- Certifique-se de que você não está no modo de edição de texto . O Repetidor não funciona aí.
- Digite um número, por exemplo 10. Note que não há nenhuma caixa de entrada para digitar “1” e “0”.
- Clique em Duplicar no elemento selecionado. 10 cópias do elemento serão criadas.
Pinegrow Pro e WordPress
Até agora temos explorado os recursos disponíveis em todas as edições do Pinegrow. Vamos dar uma olhada rápida no que podemos fazer com o Pinegrow PRO e com o WordPress Theme Builder.
Painel de projeto
Abra o Painel de projeto.
Note Projetos são uma parte da edição do Pinegrow PRO.
Os projetos no Pinegrow projetos são pastas de arquivo no seu computador. Basta abrir uma pasta como um projeto, e você verá uma lista de todos os arquivos e subpastas aqui.
Vamos criar um projeto:
- Selecione Arquivo -> Salvar no menu superior ou pressione CTRL + S e salve a página de exemplo em uma nova pasta no seu computador.
- Depois que a página é salva, o Pinegrow vai se oferecer para abrir a pasta como um projeto. Escolha Sim e dê uma olhada no Painel de projeto.
Páginas-mestre, componentes inteligente e áreas editáveis
Abra o Painel de ações.
Nota Estes recursos estão disponíveis na edição do Pinegrow PRO.
O Painel de ações permite que você crie componentes Inteligentes, Páginas-mestre, Áreas editáveis e muito mais. Selecione um ou mais elementos na página e atribua uma ação (comportamento). Esses recursos estão disponíveis no Pinegrow PRO edition.
Criando temas para o WordPress
Abra o Painel de WordPress.
Note o WordPress Theme Builder está disponível na edição do Pinegrow WordPress Theme Builder.
Uso o Painel de WordPress para converter o HTML do projeto em um tema WordPress com base em PHP. Este recurso está disponível no Pinegrow com WordPress theme builder.
Pronto!
Parabéns! Agora você sabe do que o Pinegrow é capaz e como usá-lo. Existem ainda muitas funcionalidades que não mencionamos aqui. Quase todos os painéis e ferramentas tem um monte de truques na manga que podem ajudar você a ser mais produtivo. Comece a usar o Pinegrow e confira o restante da documentação para saber mais.