Studio Help · Tutoriais

Como trabalhar com blocos no StudioCMS

Os blocos são peças de conteúdo reutilizáveis — texto, imagem, slideshow, tabs e outros componentes — que, em conjunto, constroem uma página. A lógica base é simples: adicionar um bloco, configurar, ordenar e publicar.

Entrar em modo de edição

Slideshow · dois caminhos

Passo 1 · Opção A

A partir do site

Abra a página no site, no frontpage, e use o ícone do Studio no canto superior direito para abrir a Barra de Funcionalidades. Depois, em Blocks Info, use o botão Editar para abrir diretamente o bloco no backoffice.

Esta opção é especialmente útil quando está a validar a página “ao vivo” e quer chegar rapidamente ao bloco certo, sem procurar manualmente no backoffice.

Editar bloco a partir do backoffice no StudioCMS

Passo 1 · Opção B

Pelo backoffice

Entre no backoffice e abra a página que pretende editar. Aí terá acesso à lista de blocos existentes e às respetivas opções de gestão, incluindo adicionar, ordenar e editar.

Esta via é mais organizada quando quer gerir vários blocos ou trabalhar com a estrutura completa da página.

Adicionar um novo bloco

Criação e preenchimento

Imagem de referência do processo de criação de um novo bloco.

Na página, escolha Adicionar bloco ou o botão equivalente de criação.
Selecione o tipo de bloco, por exemplo Texto, Imagem ou Slideshow.
Preencha os campos principais: título, texto, imagens, CTAs e restantes elementos necessários.
Guarde as alterações para o bloco ficar registado na estrutura da página.

Dica prática: comece por um bloco mais simples, como Título ou Texto, para definir o tom e a hierarquia da página, e só depois introduza blocos mais visuais.

Configurações avançadas comuns

Definições base partilhadas por vários blocos

Configurações avançadas de blocos no StudioCMS

Exemplo visual das configurações avançadas disponíveis em vários tipos de bloco.

Muitos blocos partilham um conjunto de definições base, normalmente dentro da área de configurações do bloco. Entre as opções mais comuns estão Skin, Disabled block, Full Width, Block ID / Extra Class, Margin / Padding, Background color / Text color e Animation / Scroll animation type.

Estrutura e layout

Skin define a variante visual do bloco.
Full Width permite ocupar a largura total disponível.
Margin e Padding controlam os espaçamentos.
Background color e Text color ajudam a garantir contraste e legibilidade.

Controlo e personalização

Disabled block permite ocultar sem apagar.
Block ID e Extra Class servem para âncoras, tracking e customizações.
Animation e Scroll animation type controlam comportamento visual adicional.

Regra de ouro: se o bloco “desapareceu” do site, confirme primeiro se não está com a opção Disabled block ativa.

Duplicar um bloco

Ganhar velocidade sem perder consistência

Exemplo visual da ação de duplicação de um bloco existente.

Quando precisar do mesmo layout com conteúdo diferente, use a ação de Duplicar no menu do bloco e depois altere apenas o que muda, como texto, imagens e links.

É uma boa prática duplicar blocos que já estejam bem afinados ao nível de espaçamentos, cores e alinhamentos, para manter consistência ao longo da página.

Reordenar blocos

Controlar o ritmo e a narrativa

Na lista de blocos da página, arraste o bloco pela pega de ordenação.
Solte o bloco na posição correta dentro da estrutura.
Guarde a nova ordem para refletir o ritmo pretendido na página.

Desactivar vs apagar

Escolher a ação certa

Comparação visual entre desativar um bloco e removê-lo definitivamente.

Desativar é a opção ideal para testes, sazonalidade ou rascunhos que pretende recuperar mais tarde.
Apagar deve ser usado apenas quando tiver a certeza de que não vai precisar mais do bloco.

Publicar e validar no site

Confirmar resultado final

Depois de guardar, confirme sempre o resultado no site. Em frontpage, pode usar Images Size para validar dimensões e otimização das imagens, e Blocks Info para garantir que está a editar o bloco certo.

Importar / Exportar configurações

Reutilização de setups

Importar e exportar configurações de blocos no StudioCMS

Exemplo visual da exportação e reutilização de configurações entre blocos.

Alguns blocos permitem o download de uma configuração e a sua posterior importação noutro bloco, o que é útil para replicar setups ou variações já testadas. Esta funcionalidade é especialmente prática quando pretende manter coerência entre múltiplos blocos semelhantes.

Ajuda