Crie conteúdo estilizado para faixas, blocos/anúncios ou vídeo
Crie faixas, blocos/anúncios ou vídeos usando o tipo de conteúdo estilizado para personalizar configurações como cor do texto, alinhamento do texto, links, cores de fundo e imagens.
Antes de Iniciar
Função necessária: sn_cd.content_manager
Por Que e Quando Desempenhar Esta Tarefa
Este tipo de conteúdo oferece três opções:
- Faixa: aparece na parte superior da página
- Bloco: aparece em um widget na página
- Vídeo: pode aparecer em qualquer lugar em uma página, inclusive na parte superior no lugar de uma faixa
A Biblioteca de conteúdo oferece suporte aos seguintes tipos de vídeo:
- HTML5Nota:O texto de foco ou as dicas das ferramentas não são compatíveis com HTML5 no momento.
- YouTube
- Vimeo
Ao criar ou editar uma faixa usando conteúdo estilizado, você pode exibir e editar a imagem de fundo em vez de editar sua imagem externamente e importá-la.
O menu Contexto do 
) na parte superior esquerda do formulário fornece a capacidade de realizar tarefas rapidamente ao criar conteúdo. Selecione o ícone e as seguintes opções serão exibidas:
) na parte superior esquerda do formulário fornece a capacidade de realizar tarefas rapidamente ao criar conteúdo. Selecione o ícone e as seguintes opções serão exibidas:- Clonar: duplicar o registro de conteúdo.
- Excluir: remova o registro de conteúdo e os registros de conteúdo programado associados.
- Exibir registro de conteúdo: acesse e exiba o registro de conteúdo.
Nota:
Você deve salvar o registro de conteúdo subjacente antes que as seleções do menu Contexto de formulário sejam ativadas.
Procedimento
-
Preencha os campos no formulário Novo conteúdo.
Tabela 1. Design Campo Descrição Nome do conteúdo O nome que descreve o conteúdo que você está criando ou editando. Ordem O número que indica a ordem na qual o portal e o conteúdo estilizado aparecem na lista Conteúdo. Ativo Indica que o conteúdo está ativo e disponível para uso. Estilo de conteúdo Identifica se o seu conteúdo é: - Faixa
- Bloquear
- Vídeo
CONTEÚDO Tabela de referência de usuário Determina as variáveis que você pode usar para personalizar o texto do conteúdo do bloco. Selecione Perfil de RH para selecionar variáveis da tabela sn_hr_core_profile.Nota:Quando o plug-in Human Resources Scoped App: Core (com.sn_hr_core) é ativado, somente o perfil de RH é exibido.Selecione Usuário para selecionar variáveis da tabela sys_user.
Títulos Um título que você deseja exibir para o seu conteúdo. Este campo não será obrigatório se você quiser que a faixa mostre apenas um gráfico.Nota:Este campo só é exibido quando o widget Experiência de conteúdo é usado.Texto do título Texto que fornece informações adicionais ou clareza ao seu título. Texto do corpo A mensagem detalhada que você deseja que apareça sobre a faixa. Coluna do usuário Junto com a tabela de perfil de RH [sn_hr_core_profile], filtra usuários ao avaliar uma condição. Este campo é exibido somente quando você seleciona Perfil de RH no campo da tabela de referência do usuário.
Cor do texto Indica se você deseja que o texto do corpo apareça escuro ou claro. Nota:Para o estilo de conteúdo Faixa, escuro e claro são compatíveis. Para o estilo de conteúdo de bloco, somente a luz será compatível se o campo Texto sobre plano de fundo estiver ativo (verde).Alinhamento do texto Indica como você deseja que o texto apareça. Você pode selecionar justificado à esquerda, centralizado ou à direita. Ícone Determina se você deseja que um ícone apareça. Deslize para a direita para escolher um ícone. Aparece somente quando você seleciona Bloco em Estilo de conteúdo.
Escolha um ícone Selecione o ícone que você deseja exibir. Este campo só é exibido quando você ativa o campo Ícone para verde.
Tamanho do ícone Indica o tamanho do seu ícone. Este campo só é exibido quando você ativa o campo Ícone para verde.
Os tamanhos recomendados para os ícones são:- Ícone do tópico: 56 x 56px
- Ícone de subtópico: 28 x28px
Plano de ação Selecione se você deseja que um botão ou link seja exibido. Título do botão O texto que aparece sobre o botão. Este campo só é exibido quando você seleciona Botão.
Link do botão O link que o usuário acessa ao selecionar o botão. Selecione a seta para baixo para exibir uma lista de links.
Este campo só é exibido quando você ativa o campo Ícone para verde.
Título do link O texto que aparece para o link. Este campo só é exibido quando você seleciona Link.
Link O link que o usuário acessa ao selecionar o link. Selecione a seta para baixo para exibir uma lista de links.
Este campo só é exibido quando você seleciona Link.
Link de vídeo O link para o vídeo que você deseja que apareça no seu portal. Este campo só é exibido quando você seleciona Vídeo em Estilo de conteúdo.Nota:Somente vídeos do YouTube e do Vimeo são compatíveis no momento. Certifique-se de usar o link de vídeo incorporado.ANTECIPADO Cor de fundo A cor de fundo da faixa ou do texto do bloco. Para definir a cor, você pode usar: - Códigos de cores hexadecimaisNota:Para obter uma lista de códigos de cores hexadecimais, consulte Códigos de cores hexadecimais.
- Valor da cor CSS e inclui palavras-chave, nome, decimal RGB ou número hexadecimal RGB da cor. Nota:Para obter mais informações, consulte Nomes de cores HTML (W3CSchools).
Imagem em segundo plano Indica que você deseja que uma imagem apareça como plano de fundo. Deslize para a direita para exibir campos de imagem adicionais. Arquivo de imagem [Carregar uma imagem] Selecione o link para adicionar uma imagem. Este campo só é exibido quando você ativa Imagem de plano de fundo.
Os tamanhos recomendados para faixas são:- Faixa da página inicial: 1440 x 400 px
- Página do tópico: 1258 x 300 px
Permite editar sua imagem de plano de fundo no módulo Biblioteca de conteúdo. Este campo só é exibido depois que você carrega uma imagem de plano de fundo. Uma caixa de corte aparece sobre a imagem no formulário do modo do Editor de imagens.
Você pode usar a caixa de corte arrastando as bordas para dentro ou para fora para indicar qual parte da imagem você deseja exibir.
Depois de abrir o editor de imagens, o modo padrão é recortar.
Quando você carrega e edita um arquivo .svg, ele é salvo como um arquivo .png.Nota:Arquivos .gif não são compatíveis.Os ícones e botões a seguir aparecem para ajudar a editar sua imagem:
Cada ícone permite editar a imagem importada:- Redefinir para
- Ativa depois que você faz edições na imagem.
- Selecione e Redefinir para original? pop-up é exibido. Selecione o botão Redefinir imagem para reverter todas as edições feitas na imagem.Nota:Depois de selecionar Salvar, você não poderá mais redefinir sua imagem. Você deve carregar a imagem novamente se não estiver satisfeito com suas edições.
- Se você não quiser manter suas edições, selecione Cancelar.
- Mover modo
modo de imagem - Selecione sua imagem em qualquer lugar fora da caixa de corte e, com o mouse, mova sua imagem.
- Use os pontos para redimensionar a imagem.
- Mantenha o mouse pressionado para mover a caixa de corte.
- Modo
do modo recortar imagem - Selecione e seu cursor será definido como recortar.
- Crie uma nova caixa de corte mantendo e arrastando o cursor.
- Segure e pressione o mouse para mover a caixa de corte.
- Redimensionar a caixa de corte usando os pontos.
- Ampliar
- Clique para tornar a imagem maior e mais próxima.
- Continue clicando para ampliar gradativamente a imagem.
- Reduzir
- Clique para tornar a imagem menor e mais distante.
- Continue clicando para diminuir o zoom gradativamente na imagem.
- Mover 10 pixels para a esquerda
- Clique para mover a imagem para a esquerda em 10 pixels.
- Continue clicando para mover a imagem para a esquerda em incrementos de 10 pixels.
- Mover 10 pixels para a direita
- Clique para mover a imagem para a direita em 10 pixels.
- Continue clicando para mover a imagem para a direita em incrementos de 10 pixels.
- Mover 10 pixels
- Clique para mover a imagem para cima em 10 pixels.
- Continue clicando para mover a imagem para cima em incrementos de 10 pixels.
- Mover para baixo 10 pixels
- Clique para mover a imagem para baixo.
- Continue clicando para mover a imagem para baixo em incrementos de 10 pixels.
- Girar 45 graus para a esquerda
- Clique para girar a imagem 45 graus no sentido anti-horário.
- Continue clicando para girar a imagem no sentido anti-horário em incrementos de 45 graus.
- Girar 45 graus para a direita
- Clique para girar a imagem 45 graus no sentido horário.
- Continue clicando para girar a imagem no sentido horário em incrementos de 45 graus.
- Retângulo
- Clique para mudar a ferramenta de corte para uma forma de retângulo curto.
- Use os pontos quadrados do retângulo para recortar ainda mais a imagem.
- Retângulo
- Clique para mudar a ferramenta de corte para uma forma de retângulo alto.
- Use os pontos quadrados do retângulo para recortar ainda mais a imagem.
-
- Clique para mudar a ferramenta de corte para uma forma quadrada.
- Use os pontos quadrados do quadrado para recortar ainda mais a imagem.
- Personalizar
- Clique para exibir o pop-up Edição de detalhes.
- Você pode definir o tamanho da ferramenta de corte e o tamanho da sua imagem por pixels.
- Você também pode especificar o ângulo em que deseja girar a imagem.
- Visualização
de visualização - Selecione para exibir uma visualização da imagem editada.
- Insira informações de local semelhantes a quando você publica seu conteúdo. Isso permite que você exiba a imagem onde quiser que ela apareça. Para obter informações sobre os campos, consulte Criar um plano de publicação para seu conteúdo.
- Cancelar e Salvar
- Selecione Cancelar para sair da edição da imagem e não salvar as mudanças.
- Selecione Salvar para salvar as edições feitas na imagem. Você pode selecionar Recortar e continuar editando. Nota:Depois de selecionar Salvar e continuar, suas edições serão salvas e você não poderá revertê-las.
Tamanho da imagem Como você deseja que a imagem apareça. - Preencher largura: redimensione a imagem para cobrir todo o contêiner, mesmo se a imagem precisar ser esticada ou recortada nas bordas.
- Ajustar à largura: redimensione a imagem para garantir que ela fique totalmente visível.
- Tamanho original: use o tamanho original da imagem.
Este campo só é exibido quando você ativa Imagem de plano de fundo.
Posição da imagem O local em que você deseja que sua imagem apareça. Selecione uma caixa para definir a posição da imagem. Este campo só é exibido quando você ativa Imagem de plano de fundo.
Texto acima do plano de fundo Indica que você deseja que o texto apareça sobre a imagem de fundo. Se você deixar desmarcado, o texto aparecerá abaixo da imagem. Deslize para a direita para selecionar um gradiente para o plano de fundo.
Adicionar degradê Indica que você deseja que o texto inclua um gradiente de cores para facilitar a leitura do texto. Aparece somente quando você ativa o campo Texto sobre plano de fundo.
O que Fazer Depois
- Visualize seu conteúdo no formulário Novo conteúdo. Nota:A Visualização de conteúdo foi projetada para fornecer uma ideia geral da aparência do seu conteúdo. O conteúdo pode ter uma aparência diferente depois de publicado devido a variações na resolução do dispositivo, diferença de tema ou configuração de estilo do aplicativo para celular.
- (Opcional) Traduza seu conteúdo.
Selecione um idioma diferente para exibir sua sessão ou solicite uma tradução de idioma para o conteúdo que você está criando. Para obter mais informações, consulte Suporte de idioma para Experiências de conteúdo e Publicação de conteúdo.
Use o menu suspenso Configurações de idioma para selecionar um idioma diferente para exibir sua sessão ou solicitar uma tradução de idioma para o conteúdo que você está criando.- Alternar idioma: permite alternar o idioma das configurações do sistema para um idioma diferente. Isso é semelhante à mudança de idioma no login. Para obter mais informações, consulte Alternar idioma para Publicação de conteúdo.
- Traduzir conteúdo: quando você ativa a propriedade do sistema sn_cd.enable_localization_framework_integration, o conteúdo criado da Biblioteca de conteúdo exibe a seleção de conteúdo Traduzir no menu suspenso Configurações de idioma. Isso permite que você solicite a tradução do conteúdo para o idioma selecionado. Para obter mais informações, consulte integração com Framework de localização.Nota:Traduza o conteúdo somente depois de terminar de modificar o conteúdo. Para obter melhores resultados, não recomendamos que você adicione ou remova componentes ou altere a formatação após a tradução.
Para criar conteúdo avançado com formatação diferente em idiomas diferentes, duplique o conteúdo e modifique a formatação conforme necessário. Em seguida, use Audiences para direcionar o conteúdo para usuários por idioma. Veja Públicos
- Configure um plano de publicação para controlar onde o conteúdo é entregue, o público e o período de tempo em que ele está disponível: Criar um plano de publicação para seu conteúdo.