Página
Esta funcionalidade permite a você construir páginas para o seu app, nela você poderá utilizar funções que facilitará as navegações internas e externas, possibilitará criações de designs mais modernos e muitos outro recursos. Neste artigo abordaremos cada uma dos recursos disponíveis e como você poderá utilizar dentro do seu app. Veja o vídeo e, se preferir veja o tutorial escrito, abaixo do vídeo.
Como construir sua página
No editor do aplicativo na Fabapp, adicione a funcionalidade "Página" no aplicativo;
Inicie a configuração clicando em "Acessar Editor". Como mostra a imagem abaixo;
Logo em seguida aparecerá um modal com o editor de páginas aberto, nele você verá os seguintes pontos:
Topo fixo de comandos
Blocos de recursos
Configurações da Página
Configuração de cada bloco
No topo fixo você terá os seguintes comandos:
Bloco de recursos
Para adicionar recursos na sua página, basta arrastar e soltar dentro do preview em formato de celular
Texto
Nesse recurso você poderá adicionar um bloco de texto para redigir textos com formatação distintas, como opções em negrito, itálico, hiperlink, destaque em cores, posicionamento e muito mais. Veja:
Imagem
Esse recursos possibilita inserção de imagem através da galeria interna do seu app, com ele você poderá inserir imagens, direciona-las, adicionar bordas, colocar tag na imagem dentro da galeria para melhor organização, e muito mais. Assista o video exemplificando abaixo:
Carrossel
Você poderá criar diversos carrosséis com automações e personalizações distintas em uma mesma página. Nesta função você terá dois modelos (slide completo, carrossel de botões), assim como todos os componentes da página, aqui você também poderá definir direcionamentos internos e externos, tempo de exibição e estilização das bordas. Veja no vídeo abaixo:
Video
Aqui você poderá adicionar videos do Youtube e do Vimeo apenas inserindo o link, além de poder automatizar a visualização e adicionar controles
Controles - Ao ativar o seu usuário terá as comandos de pausar, dar play e aumentar a visualização do video
Loop - Ao ativar o video ficará em looping de visualização
Autoplay - Ao ativar o video iniciará automaticamente
Container
O container é um recurso "invisivel" mas que serve para manter o seu conteúdo agrupado a fim de organizar a estrutura da sua página. Ao inserir ele na página você precisará inserir um outro bloco dentro dele para ter efetividade.
Divisor
O divisor é um recurso visual para possibilitar separações de conteúdo de forma personalizada. Nesse recurso você poderá alterar a grossura do divisor e deixá-lo colorido, conforme imagem:
Espaçador
Esse recurso permite que você possa definir um espaço em branco entre um bloco e outro, facilitando o layout durante a sua construção.
Botão
O botão é um recurso para induzir clicks dos seus usuários, como botões de “Visite a página”, “Se inscreva”, “Comprar” e muito mais. Troque o texto, sua cor e seu tamanho de acordo com a sua necessidade.
Perceba que no botão existe o recurso de texto inserido dentro dele, para trocar a escrita e estilizá-la clique no texto:
Card
O card são formatos pré-definidos para utilizar na sua página, ele é um compilado de recursos da página, como imagem, texto, sombras e etc. Ele serve para estilizar sua página e deixá-la mais atrativa, e você pode utilizar dois formatos distintos:
Configuração da página
No menu lateral esquerdo ao lado da opção "Blocos", você verá a opção "Config". Nela você irá configurar algumas informações do fundo da página, como cor
Configuração de cada bloco
No menu lateral direito você irá perceber que existem algumas configurações ao inserir os blocos, entenda para que serve cada uma delas:
Na lateral esquerda você terá duas opções de paleta de cores:
Cores do app: Aqui ele trará automaticamente as cores do seu app que você definiu no painel editor
Sua paleta: Aqui você pode criar uma nova paleta pra usar na página, ela ficará salva como atalho para as próximas edições.
Na lateral direita você terá outras duas opções:
Cor de fundo: Ao definir essa cor ela será aplicada em toda a página
Cor de texto: Ao definir essa cor ele será aplicado em todos os campos de texto da página
Direcionamento
Aqui você poderá optar por adicionar um direcionamento no bloco utilizado, ou seja, quando seu usuário clicar nele ele poderá ser redirecionado para um link externo ou para alguma aba interna do seu app.
Largura e alinhamento
Aqui você irá configurar o tamanho que o conteúdo irá ocupar na tela e o alinhamento da mesma.
Espaçamento
Essa configuração permite que você altere o espaçamento para criar margem entre o bloco inserido e o anterior.
Borda
Ao ativar a borda você poderá definir a cor, tamanho, estilo e arredondamento de todas as bordas ou de algumas extermidades
Como construir sua página
No editor do aplicativo na Fabapp, adicione a funcionalidade "Página" no aplicativo;
Inicie a configuração clicando em "Acessar Editor". Como mostra a imagem abaixo;
Logo em seguida aparecerá um modal com o editor de páginas aberto, nele você verá os seguintes pontos:
Topo fixo de comandos
Blocos de recursos
Configurações da Página
Configuração de cada bloco
No topo fixo você terá os seguintes comandos:
Bloco de recursos
Para adicionar recursos na sua página, basta arrastar e soltar dentro do preview em formato de celular
Texto
Nesse recurso você poderá adicionar um bloco de texto para redigir textos com formatação distintas, como opções em negrito, itálico, hiperlink, destaque em cores, posicionamento e muito mais. Veja:
Imagem
Esse recursos possibilita inserção de imagem através da galeria interna do seu app, com ele você poderá inserir imagens, direciona-las, adicionar bordas, colocar tag na imagem dentro da galeria para melhor organização, e muito mais. Assista o video exemplificando abaixo:
Carrossel
Você poderá criar diversos carrosséis com automações e personalizações distintas em uma mesma página. Nesta função você terá dois modelos (slide completo, carrossel de botões), assim como todos os componentes da página, aqui você também poderá definir direcionamentos internos e externos, tempo de exibição e estilização das bordas. Veja no vídeo abaixo:
Video
Aqui você poderá adicionar videos do Youtube e do Vimeo apenas inserindo o link, além de poder automatizar a visualização e adicionar controles
Controles - Ao ativar o seu usuário terá as comandos de pausar, dar play e aumentar a visualização do video
Loop - Ao ativar o video ficará em looping de visualização
Autoplay - Ao ativar o video iniciará automaticamente
Container
O container é um recurso "invisivel" mas que serve para manter o seu conteúdo agrupado a fim de organizar a estrutura da sua página. Ao inserir ele na página você precisará inserir um outro bloco dentro dele para ter efetividade.
Divisor
O divisor é um recurso visual para possibilitar separações de conteúdo de forma personalizada. Nesse recurso você poderá alterar a grossura do divisor e deixá-lo colorido, conforme imagem:
Espaçador
Esse recurso permite que você possa definir um espaço em branco entre um bloco e outro, facilitando o layout durante a sua construção.
Botão
O botão é um recurso para induzir clicks dos seus usuários, como botões de “Visite a página”, “Se inscreva”, “Comprar” e muito mais. Troque o texto, sua cor e seu tamanho de acordo com a sua necessidade.
Perceba que no botão existe o recurso de texto inserido dentro dele, para trocar a escrita e estilizá-la clique no texto:
Card
O card são formatos pré-definidos para utilizar na sua página, ele é um compilado de recursos da página, como imagem, texto, sombras e etc. Ele serve para estilizar sua página e deixá-la mais atrativa, e você pode utilizar dois formatos distintos:
Configuração da página
No menu lateral esquerdo ao lado da opção "Blocos", você verá a opção "Config". Nela você irá configurar algumas informações do fundo da página, como cor
Configuração de cada bloco
No menu lateral direito você irá perceber que existem algumas configurações ao inserir os blocos, entenda para que serve cada uma delas:
Na lateral esquerda você terá duas opções de paleta de cores:
Cores do app: Aqui ele trará automaticamente as cores do seu app que você definiu no painel editor
Sua paleta: Aqui você pode criar uma nova paleta pra usar na página, ela ficará salva como atalho para as próximas edições.
Na lateral direita você terá outras duas opções:
Cor de fundo: Ao definir essa cor ela será aplicada em toda a página
Cor de texto: Ao definir essa cor ele será aplicado em todos os campos de texto da página
Direcionamento
Aqui você poderá optar por adicionar um direcionamento no bloco utilizado, ou seja, quando seu usuário clicar nele ele poderá ser redirecionado para um link externo ou para alguma aba interna do seu app.
Largura e alinhamento
Aqui você irá configurar o tamanho que o conteúdo irá ocupar na tela e o alinhamento da mesma.
Espaçamento
Essa configuração permite que você altere o espaçamento para criar margem entre o bloco inserido e o anterior.
Borda
Ao ativar a borda você poderá definir a cor, tamanho, estilo e arredondamento de todas as bordas ou de algumas extermidades
Atualizado em: 10/10/2023