Construir e modificar as páginas do seu front-end utilizando o builder

Construir e modificar as páginas do seu front-end utilizando o builder O builder é uma ferramenta simples e intuitiva para criar as suas páginas sem necessitar de conhecimentos específicos em desenvolvimento ou integração. Neste artigo, explicamos como utilizá-lo.

Aceda ao menu Administração - Front-end Clique no separador "Páginas". Procure a página que pretende construir ou modificar. Pode efetuar uma pesquisa através do campo de pesquisa e/ou utilizar os filtros por tipo de página e estado, ou ainda encontrá-la diretamente na lista de páginas criadas.

Quando encontrar a sua página, clique no ícone do builder no final da linha. Está agora no builder. Eis o aspeto de uma página vazia. Raramente se deparará com este caso; este ecrã indica que a página que está a configurar não tem nenhum componente, e também não tem cabeçalho nem rodapé. Se for o caso, convidamo-lo antes de mais a configurar os componentes do seu cabeçalho e do seu rodapé, após os ter criado. Encontre mais informações sobre a criação deste tipo de página aqui. Adicione componentes às suas páginas Para adicionar um componente à sua página, clique no componente da sua escolha na barra da direita, e arraste-o e largue-o no local desejado. Uma linha verde deverá aparecer para indicar que o componente vai ser largado corretamente.

Para modificar um componente da sua página, clique no componente em questão Um pequeno menu é então apresentado à direita, em cima ou em baixo, consoante o tamanho do componente. Neste menu, encontrará pela seguinte ordem: • A seta para cima: ao clicar neste ícone, sobe um nível na seleção do seu componente. Por exemplo, se selecionar o logótipo no ecrã abaixo, um pequeno menu será apresentado mesmo acima do logótipo (o logótipo é um subcomponente do componente "menu compacto"); se clicar na seta, isso terá como efeito selecionar o componente "menu compacto" e, portanto, apresentar o menu que se vê na captura de ecrã abaixo. • A seta multidirecional: se clicar neste ícone sem soltar, pode mover o componente entre os outros componentes. • A duplicação: ao clicar neste ícone, cria uma cópia do componente. • O caixote do lixo: ao clicar neste ícone, remove o componente da sua página. • A roda dentada: ao clicar neste ícone, acede às definições do componente ou do subcomponente. Configure as definições de cada componente. Cada componente ou subcomponente tem as suas próprias definições. Convidamo-lo a experimentar as diversas definições para testar o seu resultado.

Pode, por exemplo, modificar qual o menu do seu front-end que pretende apresentar no componente "menu compacto" Para aprender a criar e configurar os seus menus, clique aqui@. Para modificar uma imagem num componente, faça duplo clique nela. Aparece então uma janela de carregamento de imagem.

Depois de carregar a sua nova imagem, pode selecioná-la clicando nela. É aplicada automaticamente. Pode depois sair da janela clicando no X no canto superior direito da janela, ou clicando no builder visível em fundo. Para modificar um ícone neste tipo de componente, abra as definições do componente Em "Tipo de ícone", selecione o tipo de ícone a utilizar Pode utilizar imagens ou ícones. Se escolher o tipo "Imagem", basta fazer duplo clique em cada ícone para o modificar.

Se escolher o tipo "Ícone", modifique cada ícone apresentando as suas definições da seguinte forma: Nas definições do ícone, indique o nome do ícone a apresentar O nome é composto da seguinte forma: • Começa por "bi-" (prefixo padrão) • Termina com o atalho do ícone bootstrap. Para o ajudar, encontrará uma lista de ícones bootstrap neste site: icons.getbootstrap.com Exemplos de ícones: bi-box, bi-circle, bi-arrow-down-left-square... Para editar as cores do seu front-end, clique no ícone "paleta". A paleta de cores está configurada para o conjunto do seu front-end. Será a mesma para todas as páginas.

Modifique as cores da paleta do seu front-end. Defina as cores principais do seu tema. Estas poderão ser utilizadas na configuração de cada componente do seu front-end. Para modificar uma cor, clique no quadrado de cor. Defina as suas cores com a ajuda de um conta-gotas, ou preenchendo diretamente os campos RGB. Clique no botão "Guardar" sempre que terminar de configurar um componente ou a sua paleta.

É possível editar o CSS mas... ... desaconselhamos vivamente a utilização desta funcionalidade se não tiver experiência em integração CSS. Nota: o CSS está configurado para o conjunto do builder. Será o mesmo para todas as páginas. Qualquer modificação efetuada neste editor poderá alterar o bom funcionamento do seu front-end. Qualquer intervenção das nossas equipas relacionada com a utilização deste editor será faturada. A barra de acesso rápido. A partir desta barra, pode : • Alterar o estado da sua página clicando no estado atual: passar de rascunho para publicada, ou de publicada para rascunho (offline). • Editar as definições da página clicando no ícone "página". • Mudar de página clicando no ícone "setas invertidas".

A barra de publicação A partir desta barra de ícones, pode (pela seguinte ordem): • Visualizar a sua página antes da publicação. • Guardar o rascunho das suas últimas modificações. • Cancelar as suas modificações. • Publicar as suas últimas modificações. Não se esqueça de configurar todos os seus componentes em cada idioma apresentado no seu front-end Atenção, a adição ou remoção de um componente num idioma afeta os outros idiomas. Apenas a configuração é independente idioma por idioma. Para sair do builder, clique no ícone de saída