2 of 62

Cada site do Portal FMVZ será acessado através de um endereço personalizado, onde os usuários habilitados poderão editar aquilo que já foi publicado e criar novos conteúdos:

http://[SEU SITE].fmvz.usp.br/wp-admin

Cada editor ou editora deve possuir um nome de usuário e senha, fornecidos pela Seção Técnica de Informática.

4 of 62

Para acessar a área de edição do site, o usuário precisa utilizar a rede de internet da USP.

Se o usuário precisar editar o site a partir de um computador fora da faculdade, deverá usar a VPN USPnet, que permite o acesso remoto à rede da USP.

Para instalar a VPN, clique no link abaixo e siga as instruções.

Download da VPN USPnet

5 of 62

1.2 - O Painel

O “Painel” será a primeira página visualizada após o login. Esse painel auxilia na edição e criação das páginas, bem como informa novidades da plataforma WordPress e seus recursos.

6 of 62

1.3 - A Página Inicial

A página inicial apresenta uma série de itens que podem ser editados pelos usuários, seja para atualizar informações ou incluir novas páginas:

1 - O Menu (Início, Apresentação, Graduação, etc.);

2 - O Carrossel, com imagens onde são exibidos os posts definidos como “Destaques”;

3 - Os Pictogramas, figuras estilizadas que permitem acesso rápido a outras páginas do site.

4 - A Apresentação, um bloco no qual pode ser inserida uma breve introdução com informações sobre o seu Departamento, Comissão, Laboratório ou Grupo de pesquisa.

7 of 62

2.1 Como Editar o conteúdo no menu

2 - Como Editar

A maioria do conteúdo publicado em seu site será acessado a partir do Menu, através de seus itens e subitens.

Para visualizar a estrutura dos itens que aparecem no menu da página inicial, clique em “Aparência” na barra lateral e depois em “Menus”.

A estrutura dos menus das páginas dos departamentos será semelhante à da imagem.

8 of 62

A estrutura do Menu da página inicial do departamento será como a da imagem ao lado.

Cada item do Menu poderá possuir Subitens/Submenus, onde serão listados os links para as demais páginas do site, como Histórico, Chefia, Docentes, etc.

Menus

Submenus

9 of 62

2.2 - Como editar o conteúdo das páginas

Para visualizar as páginas listadas na estrutura do Menu, clique no item Páginas, localizado na barra lateral.

Para localizar a página desejada, utilize a busca, no canto superior direito da tela, ou navegue pelas demais páginas da lista.

10 of 62

Para editar o conteúdo de uma página, basta passar o mouse sobre seu título e clicar em “Editar”.

11 of 62

Ao iniciar a edição, será apresentada uma página em branco, estruturada em blocos. Cada bloco conta com uma funcionalidade própria (título, parágrafo, imagem, etc.)

A nova página será criada, por padrão, com dois blocos: um bloco de “Título” e um bloco de “Parágrafo”, onde deverá ser inserido o texto.

12 of 62

Por padrão, o WordPress inicia um nova página com um bloco de “Título”. Esse bloco se refere ao título que será exibido na aba do navegador.

Para incluir um novo bloco, utilize a função “Adicionar Bloco”, que é acessada por meio do ícone destacado na cor verde.

13 of 62

O resultado será semelhante ao da imagem, com cada bloco publicado em um espaço diferente da página:

Na aba do navegador
Na posição do título do texto, com uma fonte maior
No corpo do texto

14 of 62

2.3 - Como formatar o conteúdo dos blocos

Ao clicar em um bloco, será exibida sobre ele uma pequena barra com opções de formatação.

Usando essa ferramenta é possível, por exemplo, editar uma página selecionando partes do seu texto e aplicando uma formatação em negrito ou em itálico.

15 of 62

Selecionando um bloco, também é possível formatar o tamanho e cor da fonte de seu conteúdo.

Para formatar, clique sobre o bloco e, em seguida, no botão Configurações, indicado no canto superior direito da página e, finalmente, selecione a aba Bloco, que exibirá as opções de formatação.

16 of 62

2.4 - Como visualizar o resultado da edição

Após cada edição, é possível visualizar como será a aparência da nova postagem no site do departamento.

Certifique-se de que a visibilidade da página esteja marcada como “Público”. Dessa forma, qualquer pessoa que acessar o site poderá ver o seu conteúdo. Clicando no botão “Visualizar” é possível ver como a página ficará antes de publicá-la. A página recém-editada será aberta em uma nova aba.

Se a aparência estiver adequada, clique no botão “Atualizar” para que a publicação seja concluída.

17 of 62

2.5 - Como criar um link para uma página externa

Por meio da barra de formatação, que é exibida quando clicamos em um bloco de conteúdo, também é possível transformar partes do texto em links para outras páginas ou sites externos, usando o botão “Link”.

Para isso, é preciso seguir 3 passos:

1 - Selecionar o texto que será transformado em link

2 - Na pequena caixa que surgirá abaixo do texto selecionado, inserir o endereço da página de destino do link

3 - Ativar a opção “Abrir em uma nova aba”

18 of 62

O resultado será a transformação de um trecho de texto em um link, que se diferencia pela cor verde, e que direciona o usuário para o endereço vinculado.

19 of 62

2.6 - Como inserir links externos no menu

É possível inserir links externos diretamente no menu da página principal. Assim, ao clicar sobre um item, o usuário será encaminhado diretamente para uma nova página.

20 of 62

Na Barra Lateral, acesse “Aparência” e, em seguida, “Menus”.

Se o item em seu menu for, por exemplo, Pós-Graduação, preencha o endereço da página do programa de pós-graduação no campo “URL”. Em seguida, preencha o campo “Rótulo de Navegação” escrevendo “Pós-Graduação”, pois será esse o texto exibido no item do menu.

21 of 62

Importante!

Páginas que ainda não estão prontas ou que estejam em branco, não devem ser publicadas no site.

Caso esteja sendo feita alguma edição em uma página já existente, use o botão “Mudar para rascunho”. A página será despublicada enquanto são feitas as mudanças necessárias e somente retornará ao site quando o usuário publicá-la novamente.

22 of 62

3 - Como publicar uma nova página

Para alimentar o site com novas informações, o usuário poderá criar páginas do zero, bem como estabelecer um vínculo entre essas novas páginas e o menu principal.

Uma nova página pode ser criada, por exemplo, para reunir informações a respeito de um novo laboratório ou de uma nova linha de pesquisa dentro de um departamento.

23 of 62

3.1 - Como criar uma nova página

Para visualizar a lista das páginas que fazem parte do site, clique no botão “Páginas”, localizado na barra lateral.

Para adicionar uma nova página ao site, clique em “Adicionar nova”.

25 of 62

Na aba “Documento”, no campo “Atributos da página”, é preciso selecionar a “Página Ascendente” com a qual o novo conteúdo estará vinculado.

26 of 62

Sempre que uma nova página é criada, é preciso certificar-se que a opção “No sidebar” está selecionada em ‘Layout Settings”.

Essa janela de opções está localizada na parte inferior da nova página de edição.

27 of 62

3.2 - Como inserir conteúdo em uma nova página

Ao iniciar a edição, será apresentada uma página em branco, estruturada em blocos. Cada um desses bloco possui uma funcionalidade própria (título, parágrafo, imagem, citação, lista etc.)

A nova página, será criada, por padrão, com dois blocos: um bloco de “Título” e um bloco de “Parágrafo”, onde deverá ser inserido o texto.

28 of 62

3.3 - Como acrescentar novos blocos de conteúdo a uma página

Novos blocos de conteúdo podem ser acrescentados clicando no botão “Adicionar bloco”, na barra de edição superior.

Uma série de opções de novos blocos será apresentada ao usuário em uma barra lateral, à esquerda.

29 of 62

3.4 - Como inserir um bloco de imagem à página

Para inserir um novo bloco contendo uma imagem, por exemplo, clique no ícone ”Imagem” na barra lateral.

O novo bloco será acrescentado à página em edição, oferecendo opções para a inclusão da imagem desejada.

A nova imagem pode ser inserida a partir de um arquivo em seu computador, da Biblioteca de Mídia do site ou a partir de um link.

30 of 62

Para inserir uma imagem armazenada em seu computador, clique no botão “Enviar” para que seja aberta uma nova janela, onde a imagem poderá ser selecionada.

31 of 62

Para inserir uma imagem já existente no site, selecione um arquivo da Biblioteca de Mídia.

32 of 62

É possível também incluir uma imagem a partir de um link externo, utilizando o botão “Inserir a partir do URL” e colando o link com o endereço de uma imagem.

Uma opção para economizar o espaço de armazenamento do site é utilizar um link para algum repositório externo, como, por exemplo, o Google Drive.

33 of 62

A imagem selecionada ocupará o espaço do bloco de conteúdo anteriormente inserido.

É possível acrescentar uma legenda ao pé do arquivo, que pode apresentar uma breve descrição ou comentário a respeito da imagem.

34 of 62

Os blocos de conteúdo, sejam aqueles com texto ou com imagens, podem ter sua disposição alterada no layout da página.

Após clicar sobre o conteúdo, um pequeno menu surgirá próximo ao bloco. Clicando no ícone contendo as setas, destacado na imagem, um bloco poderá ser movimentado para cima ou para baixo, permitindo a personalização da aparência da página.

35 of 62

3.5 - Como visualizar o resultado da edição

Após cada edição, é possível visualizar como será a aparência da nova página no site do departamento, clicando no botão “Visualizar”.

A página recém-editada será aberta em uma nova aba.

Se a aparência da página estiver de acordo com o desejado, clique no botão “Publicar”.

36 of 62

Se desejar que uma página seja “despublicada”, isto é, que seja retirada do site e retorne ao modo de edição, use o botão “Mudar para rascunho”.

37 of 62

3.6 - Como adequar arquivos de imagem ao limite de armazenamento do site

As páginas ou posts no site dos departamentos suportam arquivos de imagem com, no máximo, 150 kb de tamanho. No total, o site todo pode armazenar até 100 mb em arquivos.

Caso o usuário possua uma imagem que extrapole esse limite, poderá utilizar o programa Paint, um editor de imagens básico, presente no sistema operacional Microsoft Windows, para redimensionar o tamanho do arquivo.

38 of 62

Para redimensionar uma imagem, escolha abri-la usando o programa Paint.

Em seguida, use o ícone “Redimensionar e distorcer”, ou o atalho “Ctrl+W” para visualizar as opções de redimensionamento.

39 of 62

Uma pequena caixa de diálogo será exibida. Nela, redefina o tamanho do arquivo de imagem.

Por exemplo, se desejar diminuir o tamanho do arquivo para 50% do seu tamanho original, digite “50” e clique em “OK”.

40 of 62

4 - Como organizar as páginas no Menu

Depois de criada, a página precisa ser adicionada ao menu na posição adequada.

Para isso, acesse o item Aparência na barra lateral e em seguida Menus.

Na janela “Adicionar itens no menu”, dentro da aba “Páginas”, selecione a página recém-criada e clique no botão “Adicionar ao menu”.

41 of 62

A página adicionada será exibida na última posição da lista de itens do menu. Clique e arraste o item desejado e o acomode na posição adequada, determinando se ele será um item visível no menu ou um subitem.

42 of 62

Sempre que realizar qualquer alteração na estrutura do menu, use o botão “Salvar menu” para gravar as mudanças.

43 of 62

4.1 - Como organizar itens e subitens no menu

Lembre-se que, na página inicial, os itens visíveis no menu são aqueles alinhados à esquerda da estrutura de menus, como assinalado na imagem.

Os subitens/submenus serão exibidos apenas quando o usuário posicionar o cursor do mouse sobre o item ao qual ele pertence no menu.

Subitens

Itens

44 of 62

Visualmente, a estrutura dos menus, deverá ser exibida como na imagem ao lado.

45 of 62

5 - Como criar um novo post

Um post pode ser usado para publicar avisos importantes, processos seletivos, destaques sobre pesquisas e outras notícias sobre o departamento.

Um novo post, se assinalado como “Destaque” será exibido no “Carrossel”, localizado na página inicial do departamento. (Ver 5.1 - Como exibir um post no Carrossel)

Para criar um novo post, clique em “Posts” na barra lateral. Em seguida clique em “Adicionar Novo”.

46 of 62

Assim como uma nova página , a estrutura do post é formada por blocos, como título, parágrafo e imagens, que podem ser dispostas de acordo com a preferência do usuário.

Uma diferença entre uma página e um post, é que este pode ser classificado em uma das categorias cadastradas na Barra de Configurações do documento.

47 of 62

5.1 - Como exibir um post no Carrossel

Para que o post seja exibido no Carrossel da página inicial, assinale a opção “Destaques” na aba “Categorias”

Além disso, na aba “Imagem destacada”, selecione a imagem que será exibida no Carrossel.

Por fim, o usuário pode visualizar como o post ficará e em seguida publicá-lo, da mesma forma como uma página, usando os botões no canto superior direito da tela.

48 of 62

O novo post será exibido no Carrossel da página inicial, destacando a imagem selecionada. Ao clicar na imagem o usuário é direcionado à postagem com o conteúdo publicado.

49 of 62

5.2 - Como editar ou apagar um post

Para visualizar todos os posts publicados, vá até o item “Posts”, na barra lateral, e clique em “Todos os posts”

50 of 62

Nesta página, os posts mais recentes serão mostrados primeiro na lista. Aqui é possível editar, atualizar ou mesmo apagar um post cuja publicação já não seja desejável, enviando-o para a lixeira.

51 of 62

6 - Como utilizar os Pictogramas

Os Pictogramas são ícones exibidos na página inicial do site, e permitem um acesso rápido a algumas das páginas mais importantes do departamento.

Para inserir ou editar esses ícones é necessário utilizar um complemento do WordPress chamado Elementor, que oferece algumas ferramentas adicionais para a customização das páginas do site.

52 of 62

6.1 - Como acessar o Elementor

Para começar a editar utilizando o Elementor, acesse a lista com todas as páginas, passe o mouse sobre a página desejada e clique no link “Editar com Elementor”

53 of 62

6.2 - Como adicionar uma seção à página

Antes de inserir os pictogramas é necessário escolher como será a disposição desses elementos na página.

Por padrão, as páginas dos departamentos deverão ter três pictogramas, alinhados lado a lado.

Para adequar o layout ao padrão, clique no botão “Adicionar seção”.

54 of 62

Selecione a estrutura que apresenta 3 elementos (ou colunas) da mesma largura, alinhados lado a lado, como indicado na imagem.

55 of 62

6.3 - Como inserir um ícone na página

O Elementor possui uma barra lateral com diversos elementos que podem ser usados para adicionar conteúdos à página.

Para inserir os pictogramas será utilizado o elemento “Ícone”.

Para que um novo ícone seja incluído na estrutura da página, basta clicar e arrastar o elemento para a área de edição demarcada, como no próximo slide.

57 of 62

Para escolher o ícone que será exibido na página, acesse a “Biblioteca de ícones” através da barra lateral.

58 of 62

Serão exibidos todos os ícones disponíveis na Biblioteca.

Navegue pela lista de ícones ou use a barra de busca para encontrar o elemento desejado.

Clique no ícone escolhido e, em seguida, no botão “Insert” para inserir o elemento na página

59 of 62

Em seguida, use novamente a barra lateral do Elementor, agora para incluir uma legenda no criptograma e o endereço da página para a qual o ícone irá direcionar os usuários.

Digite a legenda no campo “Título e descrição” e cole o endereço da página de destino no campo “Link”.

Para visualizar uma prévia da página antes de publicá-la, clique no botão “Ver alterações”, representado pelo desenho de um olho, ao lado do botão “Atualizar”.

Clique no botão “Atualizar” para concluir a edição.

60 of 62

Para retornar ao painel do WordPress, clique no botão indicado na imagem ao lado, localizado no canto superior esquerdo da barra lateral do Elementor. Em seguida, clique no botão “Sair para o painel”,

61 of 62

Em caso de dúvidas, entre e contato com a Comissão Gestora dos Sites e da Identidade Visual da FMVZ pelo e-mail:

site.fmvz@usp.br

62 of 62

Comissão Gestora dos Sites e da Identidade Visual da FMVZ

Maurício Candido da Silva (Presidente)

Museu de Anatomia Veterinária

Maria Isabel Teixeira das Chagas (Vice-Presidente)

Seção Técnica de Informática

Alberto Masao Kawai