Personalização do alinhamento de imagens

O alinhamento de imagens ajuda você a manter sua imagem na área pretendida, seja à esquerda, direita ou centro, e a modificá-la para otimizar a experiência do site para o usuário. Também ajuda a manter as proporções de imagem e conteúdo mantidas quando você redimensiona o conteúdo no Site da base de conhecimento.

Por padrão, as imagens no Site da base de conhecimento base estão alinhadas à esquerda.

Imagens do centro na sua base de conhecimento Document360

Para alinhar imagens centralmente usando CSS personalizado, siga os passos abaixo:

1. Navegue até Configurações () > Site da base de conhecimento na barra de navegação da esquerda no Portal da base de conhecimento.

2. No painel de navegação à esquerda, navegue até Personalização do site.

   A página contém todas as configurações básicas de design do site.

3. Na página de Personalização do site , clique em CSS & JavaScript personalizados.

   

4. No menu suspenso à esquerda, selecione CSS / JavaScript personalizado.

5. Clique em Adicionar trechos de código no canto superior direito do espaço de código, e um painel aparece, pré-carregado com sete trechos que você pode usar para personalizar seu Site da base de conhecimento.

6. Clique no Centro para alinhar imagens nos artigos, e o trecho será adicionado ao seu bloco de código CSS personalizado.

7. Clique em Salvar.

   Por exemplo,

.content_block .content_container .content_block_text img{
margin: 0 auto;
display: block;
}

article img {
    margin: 0 auto !important;
    display: block;
}

A imagem agora estará centralizada dentro do quadro do seu Site da base de conhecimento.

Alinhamento de Imagens

1. Para alinhar a imagem à esquerda

.content_block .content_container .content_block_text img {
    margin: 0px 0 0;
    display: block;
}

article img {
    margin: auto 0 0 0 !important;
    display: block;
}

2. Para alinhar a imagem corretamente

.content_block .content_container .content_block_text img {
    display: block;
    margin: 0 0 0 auto;
}

article img {
    margin: 0 0 0 auto !important;
    display: block;
}

Remover/apagar um trecho de código previamente adicionado

Para remover o trecho de código adicionado anteriormente, selecione o trecho pretendido e pressione delete no teclado.

NOTA

Antes de adicionar um novo trecho de alinhamento, não se esqueça de apagar o que foi adicionado anteriormente.

O alinhamento da imagem definido será aplicado a toda a base de conhecimento.

Redimensionando imagens no site da Base de Conhecimento

Para manter as proporções de texto e imagem quando você dá zoom (ampliação) ou zoom out (minimizar) no seu site de base de conhecimento,

1. Navegue até Configurações () > Site da base de conhecimento na barra de navegação da esquerda no Portal da base de conhecimento.

2. No painel de navegação à esquerda, navegue até Personalização do site.

   A página contém todas as configurações básicas de design do site.

3. Na página de Personalização do site , clique em CSS & JavaScript personalizados.

4. No menu suspenso à esquerda, selecione CSS / JavaScript personalizado.

5. No painel esquerdo, clique em CSS e cole o seguinte trecho de CSS no espaço de código:

.content_block .content_container .content_block_text img {
height: auto !important;
}

article img {
    height: auto !important;
}

6. Clique em Salvar no canto superior direito.