Arquivo de Botão - Portal Apper https://portalapper.com.br/centraldeajuda/tag/botao/ Plataforma de Criação de App Thu, 28 Oct 2021 21:47:24 +0000 pt-BR hourly 1 https://wordpress.org/?v=6.9.4 https://portalapper.com.br/wp-content/uploads/2020/04/cropped-Portal-Apper_NOVO-Logo_Sem-txt_PA-04_512x512.png Arquivo de Botão - Portal Apper https://portalapper.com.br/centraldeajuda/tag/botao/ 32 32 133352939 Mudar a posição e o tamanho do player de sua galeria de vídeos https://portalapper.com.br/centraldeajuda/personalizar-o-player-de-video/ https://portalapper.com.br/centraldeajuda/personalizar-o-player-de-video/#respond Tue, 27 Mar 2018 13:00:29 +0000 https://portalapper.com.br/://https://portalapper.com.br/://portalapper.com.br.br.br/.br/office/?post_type=epkb_post_type_1&p=13666 O post Mudar a posição e o tamanho do player de sua galeria de vídeos apareceu primeiro em Portal Apper.

]]>

Se deseja mudar posição e/ou a altura do player de sua galeria de vídeos, aplique o código deste artigo seguindo as instruções abaixo:

1 – Abra o Construtor de Apps

2 – Vá para sessão CORES.

3 – Desça a página pela barra de rolagem até o final onde você localizará a sessão “PERSONALIZAÇÃO AVANÇADA CSS / SCSS”, se tiver escondido clique em MOSTRA.

4 – Cole o código abaixo (exatamente como esta) no campo em branco.

Obs. Se caso já tiver algum código neste local, aconselhamos que pule pelo menos 2 linhas e depois acrescente o código CSS abaixo. Para separar bem os códigos.


.video-view .sprite {
background-size: 15%;
background-position: 96% 80%;
}

Importante:

Para modificar para outro tamanho mude o valor de “15%” para outro tamanho.

Para modificar a posição do player mude os valores “96% 80%”. Sendo o “96%” relacionado com a posição horizontal e o “80%” referente a posição vertical.

 

5 – Salve.

6 – Verifique o resultado no simulador ao lado.
Obs. Se caso não houver mudança imediata, por favor clique em F5 ou Ctrl+F5 para atualizar a página e verifique novamente. Se mesmo assim o efeito não estiver ocorrendo verifique o código novamente e salve.

 

Pronto. 😉

Original

CSS aplicado

Pronto. 😉

O post Mudar a posição e o tamanho do player de sua galeria de vídeos apareceu primeiro em Portal Apper.

]]> https://portalapper.com.br/centraldeajuda/personalizar-o-player-de-video/feed/ 0 13666 Alterar a cor de um botão ao ser clicado https://portalapper.com.br/centraldeajuda/alterar-cor-de-um-botao-ao-ser-clicado/ https://portalapper.com.br/centraldeajuda/alterar-cor-de-um-botao-ao-ser-clicado/#respond Tue, 20 Feb 2018 13:00:45 +0000 https://portalapper.com.br/://https://portalapper.com.br/://portalapper.com.br.br.br/.br/office/?post_type=epkb_post_type_1&p=13649 Com este código você vai poder trocar a cor que aparece assim que o botão é clicado. Aplique o código deste artigo seguindo as instruções abaixo para este efeito: 1 – Abra o Construtor de Apps 2 – Entre na sessão CORES. 3 – Desça a página pela barra de rolagem até o final onde você localizará a sessão “PERSONALIZAÇÃO AVANÇADA CSS / SCSS”, se tiver escondido clique em MOSTRA. 4 – Cole o código abaixo (exatamente como esta) no campo em branco. Obs. Se caso já tiver algum código neste local, aconselhamos que pule pelo menos 2 linhas e depois acrescente o código CSS abaixo. Para separar bem os códigos.     .button.button-custom:hover,.button.button-custom:active { color: #fff; background-color: #123456; }     Para mudar para uma cor desejada, altere o valor da cor de “123456” para o código da cor que desejar. Este código só tem efeito nos “Botões de […]

O post Alterar a cor de um botão ao ser clicado apareceu primeiro em Portal Apper.

]]> Com este código você vai poder trocar a cor que aparece assim que o botão é clicado. Aplique o código deste artigo seguindo as instruções abaixo para este efeito:

1 – Abra o Construtor de Apps

2 – Entre na sessão CORES.

3 – Desça a página pela barra de rolagem até o final onde você localizará a sessão “PERSONALIZAÇÃO AVANÇADA CSS / SCSS”, se tiver escondido clique em MOSTRA.

4 – Cole o código abaixo (exatamente como esta) no campo em branco.

Obs. Se caso já tiver algum código neste local, aconselhamos que pule pelo menos 2 linhas e depois acrescente o código CSS abaixo. Para separar bem os códigos.  

 

.button.button-custom:hover,.button.button-custom:active {

color: #fff;
background-color: #123456;

}  

 

Para mudar para uma cor desejada, altere o valor da cor de “123456” para o código da cor que desejar. Este código só tem efeito nos “Botões de Ação”. Por exemplo: Telefone, Link e E-mail.

 

5 – Salve.

6 – Verifique o resultado no simulador ao lado. Obs. Se caso não houver mudança imediata, por favor clique em F5 ou Ctrl+F5 para atualizar a página e verifique novamente. Se mesmo assim o efeito não estiver ocorrendo verifique o código novamente e salve.   Pronto. 😉  

O post Alterar a cor de um botão ao ser clicado apareceu primeiro em Portal Apper.

]]> https://portalapper.com.br/centraldeajuda/alterar-cor-de-um-botao-ao-ser-clicado/feed/ 0 13649 Link Interno https://portalapper.com.br/centraldeajuda/link-interno/ https://portalapper.com.br/centraldeajuda/link-interno/#comments Fri, 08 Sep 2017 17:16:49 +0000 https://portalapper.com.br/://https://portalapper.com.br/://portalapper.com.br.br.br/.br/.br/?post_type=epkb_post_type_1&p=11777 O post Link Interno apareceu primeiro em Portal Apper.

]]>

Como utilizar o Link Interno

 

1 – Procure um simbolo de Link Interno (seta na diagonal) nos recursos HTML, PÁGINA PERSONALIZADA, LUGARES e em alguns outros que tem um bloco de texto (CKEditor), simbolo apontado com uma seta na imagem abaixo:

 

2º – Usaremos o exemplo do recurso PÁGINA PERSONALIZADA, adicione um bloco de texto e clique no botão LINK INTERNO (o que esta apontado na imagem acima), ao clicar deve aparecer uma lista de recursos que tem em seu aplicativo, escolha o recurso que deseja criar um Link Interno, pronto, ele já aparecerá como um texto clicável. Salve sua página e pronto quando o usuário clicar neste texto ele será direcionado para o recurso que você escolheu.

 

 

Customizando o Link Interno

Se desejar você poderá customizar este link, ele é um texto, com isso você poderá alterar tamanho, cor e outras opções que encontrar na barra do CKEditor.

Criando um botão com Link Interno

Você também poderá fazer que este Link vire um verdadeiro botão adicionando alguns códigos.
1 – No CKEditor clique em FONTE.
Observe que com isso sua página vira um editor de códigos e já mostra os códigos gerados pela ação do LINK INTERNO.

 

Importante: Quando trabalhar com bloco de texto (CKEditor) nos recursos, sempre que finalizar um código cole-os em um bloco de texto em seu computador (alguns códigos não são totalmente aceitos neste CKEditor e por isso alguns deles somem após salvar a página, então em alguns casos não conseguirá reeditar o código se desejar), então é bom guardar de forma segura para uma posterior edição.

 

2 – Identifique o código do seu Link Interno (Se caso tiver mais conteúdo em seu bloco de texto).
Basicamente o código do Link Interno é como este:

 

Use a referência abaixo para gerar um botão com imagem.
Código para usar uma imagem no lugar do texto:

 

Importante: No exemplo abaixo perceba que copiamos apenas a partir da palavra “data-params…” até a ultima aspas” do código do Link Interno, é apenas isso que você deve usar neste caso para que o Link Interno tenha uma imagem no lugar do texto e funcione.

Pronto. 😉

O post Link Interno apareceu primeiro em Portal Apper.

]]> https://portalapper.com.br/centraldeajuda/link-interno/feed/ 1 11777 Página Personalizada https://portalapper.com.br/centraldeajuda/pagina-personalizada/ https://portalapper.com.br/centraldeajuda/pagina-personalizada/#respond Mon, 28 Aug 2017 04:59:34 +0000 https://portalapper.com.br/://https://portalapper.com.br/://portalapper.com.br.br.br/.br/.br/?post_type=epkb_post_type_1&p=10500 Veja aqui a documentação do recurso Página Personalizada

O post Página Personalizada apareceu primeiro em Portal Apper.

]]>
ícone

Página Personalizada

O Recurso Página Personalizada permite que você exponha o seu negócio de várias maneiras. Você pode escrever um artigo com uma foto, publicar uma galeria de fotos, publicar um vídeo diretamente nessa página e/ou adicionar botões de “clique único” ou link para qualquer site externo e muito mais. Chamamos este recurso de “Recurso Coringa” por suas inúmeras aplicações e possibilidades.

Adicionando o Recurso

Primeiro, clique em     para adicionar o recurso em seu aplicativo.

Nota: Este recurso não é real time, mas o usuário pode a qualquer momento segurar e arrastar para baixo a página para atualiza-la.

 

Aproveite este recurso que é tão completo.

Criando uma página

Criando uma Página

Primeiro você precisa criar uma nova Página Personalizada:

Em seguida, você deve nomear seu recurso, em “Nome da página”.

Uma página personalizada é composta de blocos independentes. Assim, você pode criar quantos blocos necessitar na mesma página.

Exemplo:

Bloco de Texto “Sobre nós”

Bloco de Imagem “Fotos do lugar”

Bloco de Endereço “Endereço do local com botão que ativa o GPS”

Bloco de Contato “Botão de Telefone que direciona a discagem”

E etc…

Texto

  • Texto

Para criar um bloco de Texto você deve clicar em  , um novo documento de texto aparece e você pode escrever seu artigo nele.

Um Editor de texto CKEditor.

Você poderá formatar seu texto com bastante liberdade. Por exemplo: Negrito, Itálico, alinhamentos, cores, tamanho e muito mais.

Este CKEditor te permite trabalhar com alguns códigos HTML, para ativar o editor de HTML neste recurso, você deve clicar no botão “FONTE”.

Você poderá também inserir uma imagem no texto usando o botão destacado na imagem abaixo, e ainda inserir um Link Interno. Para saber mais sobre Link Interno clique aqui.

Inserindo uma imagem no Bloco Texto:

1 – Clique no botão destacado na imagem abaixo.

2 – Em seguida, insira a imagem desejada nesta seção. Para fazer isso, clique no ícone  que permite que você insira sua foto ou imagem.

Após ter inserido, você poderá escolher seu alinhamento e tamanho:

O resultado é este:

Mais...

Mais:

Você também pode adicionar em seu bloco de texto um link para um site (URL).

No CKEditor clique no simbolo de Link , clicando deve aparecer uma janela semelhante a imagem abaixo.

Você precisa escolher o protocolo que deseja integrar “http://” se você quiser integrar. Em seguida, escreva no URL o link.

Ex:

https://www.exemplo.com

Imagem

  • Imagem

Criar uma galeria de fotos é muito fácil. Para fazer isso, clique em  e depois em “mais imagens”.

Você pode adicionar uma descrição a sua imagem, se quiser. Se desejar criar mais galerias, basta clicar em .

 

Importante: Você poderá verificar que em cada seção que adicionar ao lado superior direto tem um simbolo de uma seta com duas pontas, apontando para cima e para baixo, este recurso serve para você mover a ordem das seções. Segure e arraste para cima ou para baixo e depois solte no local (ordem) que deseja e salve o recurso.

Vídeo

  • Vídeo

A criação de um bloco de vídeo também é muito fácil. Para fazer isso, clique em .

  • Aqui você precisará escolher o tipo de vídeo que deseja integrar em sua Página Personalizada: Vídeos do YouTube, Vídeos de Podcast ou seus próprios vídeos.

    Youtube:

    Insira uma palavra chave para uma pesquisa e aperte Enter no teclado ou insira sua URL do vídeo do Youtube no campo e salva sua Página Personalizada.

  • Você pode criar quantos blocos de vídeos que necessitar.

    Podcast:

    Digite seu endereço URL de podcast de vídeo (no formato .xml) no campo apropriado

  • Em seguida, pressione “Enter”. Selecione o vídeo que você deseja integrar à sua Página Personalizada. Em seguida, clique em “Salvar”.(Exemplo de URL de Podcast vídeo: http://www.feedforall.com/rss-video-tutorials.xml) 

    Meu vídeo:

    Para incluir um vídeo, você precisará colar o endereço URL do seu vídeo em “Vídeo URL”.

  • Depois de ter colado a URL do seu vídeo, você poderá escrever uma pequena descrição e adicionar uma imagem de capa.(Exemplo de uma URL de vídeo: site.com/exemplo.mp4.mp4)

Endereço

  • Endereço

Para criar um novo endereço clique em .

Graças a esta seção você pode adicionar o endereço do seu local e um botão para localizar, este botão ainda direciona o usuário para o GPS que traça a rota pegando a localização do usuário com destino do endereço colocado. Você também pode colocar um número de telefone e um site.

Botões

  • Botões

Primeiro clique em .

Você poderá adicionar um botão para uma Ligação (Telefone), para um E-mail ou para abrir um Site (LINK).

Opções de personalização: Inclua um ícone e/ou Inclua um título.

Anexos

  • Anexo

Primeiro clique em .

Nesta seção você poderá adicionar arquivos a esta página (por exemplo: arquivos PDF, Word, etc…) que o usuário poderá baixar em seu dispositivo.

Inclua um título.

Slider

  • Slider

Primeiro clique em .

Com o Slider você poderá criar um com carrocel com várias imagens. (O usuário poderá arrastar para ver as imagens do carrocel).

Perguntas mais frequentes

Neste recurso posso colocar códigos?

Sim.

Você pode criar um bloco de texto e clicar em “FONTE” e aplicar seu código HTML.

Dica: Sempre use um bloco de notas para editar e guardar seu código, se caso o código se perder você o terá guardado em sua máquina.

Pronto, crie grandes projetos. 😉

O post Página Personalizada apareceu primeiro em Portal Apper.

]]> https://portalapper.com.br/centraldeajuda/pagina-personalizada/feed/ 0 10500