Páginas Multiuso | Como inserir um álbum de fotos em Página Multiuso usando HTML?

Criada por Administrador InChurch, Modificado em Sex, 8 Jul, 2022 na (o) 4:17 PM por Ana Késya


1. Acesse seu Painel de Controle e crie uma Nova Página. 



2. Insira o título 'Galeria de Fotos', por exemplo, e indique a publicação para o App e Web e role a página até a parte de Versão Web.




3. Na área Versão Web clique em inserir imagem e adicione suas imagens sem se importar no momento em alinhamento, apenas adicione-as na página.




4. Ainda em Versão Web clique em ver código fonte, ali você verá todos os códigos de suas imagens adicionadas (caso deseje copie e cole estes links no bloco de notas para facilitar a edição).




5. Agora insira o código html e seguir como na imagem.



6. Copie este código e cole na sua Página Multiuso e troque o link marcado pelo link da sua primeira imagem que reservamos na etapa quatro (4).



<script>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="hups://maxedn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> 
</script>

<div class="container">
  <h2>Image Gallery</h2>

  <div class="row">

    <!-- Bloco de código da imagem  -->
    <div class="col-md-4">
      <div class="thumbnail"> 
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSIzvJQ-JEnnj5YAI_tf7tB40j8MUOanncYNnhsXIgvyqZarhhYgA&amp;s" alt="" style="height:320px">
      </div>
      <div class="caption"> 
        <p> EDITE AQUI A DESCRIÇÃO DA SUA IMAGEM </p> 
      </div>
    </div>
    <!-- Fim do bloco de código da imagem  -->

    <!-- Adicione aqui novos blocos de código de imagens  -->

  </div>
</div>


Para cada imagem nova acrescentar o bloco de código HTML abaixo:
Lembre-se de editar a descrição da sua imagem.



<div class="col-md-4">
  <div class="thumbnail"> 
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSIzvJQ-JEnnj5YAI_tf7tB40j8MUOanncYNnhsXIgvyqZarhhYgA&amp;s" alt="" style="height:320px">
    <div class="caption"> 
      <p> EDITE AQUI A DESCRIÇÃO DA SUA IMAGEM </p> 
    </div>
  </div>
</div>



7. Ao terminar de adicionar as imagens da estrutura html clique novamente em ver código fonte.




8. Você pode atribuir esta página a um Menu, lembre-se que deve fazer isso para a versão App e Web, depois salve e pronto.








 Pronto! Agora você tem um álbum de fotos em uma página multiuso!

Este artigo foi útil?

Que bom!

Obrigado pelo seu feedback

Desculpe! Não conseguimos ajudar você

Obrigado pelo seu feedback

Deixe-nos saber como podemos melhorar este artigo!

Selecione pelo menos um dos motivos
A verificação do CAPTCHA é obrigatória.

Feedback enviado

Agradecemos seu esforço e tentaremos corrigir o artigo