|
 |
Favoritos |
Barras de Destaque
Conteúdos > Barras de Destaque
As barras de destaque são elementos que ocupam toda a largura do site e podem ser posicionadas em diferentes zonas da página, como logo após o menu, depois do painel principal ou antes do rodapé. Na prática, podem surgir tanto antes como depois do conteúdo principal (corpo) do site.
É possível utilizar várias barras na mesma página. Por exemplo, pode ter duas barras após o painel e três antes do rodapé. A ordem de apresentação é definida na configuração de cada barra, assim como as páginas onde devem aparecer.
Estas barras permitem incluir diversos tipos de conteúdo, como produtos, banners, textos, publicações ou testemunhos, entre outros.
Trata-se de uma funcionalidade extremamente útil para destacar informação, promover conteúdos ou ativar funcionalidades, de forma organizada, dinâmica e visualmente apelativa.
A criação de uma barra é feita em duas etapas:
- Criação do bloco da barra onde define a sua localização, o aspeto e o tipo de conteúdo que irá conter
- Adição de elementos á barra e configuração desses elementos
1 - Criação do Bloco da Barra
A primeira coisa a fazer é criar a barra de destaque. Para isso clicamos no botão Novo e preenchemos os campos que definem o tipo de barra, onde aparece, a formatação e o funcionamento. Só depois de criar a barra é que inserimos o seu conteúdo. Em baixo vamos apresentar os campos que definem uma barra durante a sua criação e explicar o que fazem e como se configuram.
Titulo e Localização da Barra
| Localização |
Define o posicionamento da barra na página. Existem três localizações possíveis podendo cada localização conter um grupo de barras. As três localizações são (tomar como referência a estrutura do site):
|
| Ordem | Campo numérico que contem a ordem da barra dentro do grupo (Localização) em que está inserida. A ordem é sequêncial sendo o valor 1 correspondente à primeira posição, o 2 à segunda e assim sucessivamente. |
| Visível na(s) |
Neste grupo de campos define em que páginas do site é que a barra está visível. Pode por exemplo ter uma barra visível apenas na Home, ou ter uma barra visível nas Listagens e na Ficha do Produto.
|
| Visibilidade Site/Angar | Define se a barra está ativa apenas no site, apenas no angar ou em ambos os locais. Pode por exemplo configurar a barra no Angar visível apenas para si e quando estiver pronta ativar a barra para o site ou ambos. |
| Visibilidade por Dispositivo |
Pode criar barras específicas para PC, para o Telemóvel ou barras que funcionam em ambos os dispositivos. |
| Tipo de Barra |
Existem vários tipos de barra dependendo do que deseja apresentar. Estas barras são configuradas na generalidade neste formulário, podendo também ir buscar informação ao formulário de cada elemento e à opção Design. Em baixo segue a lista com os tipos de barra disponíveis: Nota: O scroll horizontal é constituído por botões em forma de seta nas laterais da barra que permite deslocar o seu conteúdo para a esquerda e para a direita.
|
| Margem Superior | Aplica uma margem ou um espaço antes da barra |
| Margem Inferior | Aplica uma margem ou um espaço depois da barra |
Titulo da Barra
Este conjunto de campos é opcional e permite configurar o título da barra apresentado no topo, facilitando a identificação ou categorização do respetivo conteúdo.
| Titulo | Define o título a apresentar |
| Tamanho da Letra | O tamanho da letra do titulo varia entre 10 e 32 pixeis |
| Cor da Letra | Cor da letra do titulo |
| Bold | Define se o titulo está a bold (negrito) |
| Tipo de Titulo |
O titulo pode ser apresentado de quatro formas:
|
| Bordo e Fundo | Permite ativar a moldura em torno do titulo bem como o fundo |
| Bordo do Título | Cor do bordo caso a moldura esteja ativa |
| Fundo do Título | Cor de fundo caso a moldura esteja ativa |
Configuração do Fundo e da Moldura da Barra
Este conjunto de campos permite formatar o bloco que contem a barra. Com eles pode definir a largura, escolher o tipo de fundo que pretende (cor, imagem ou transparência) e o tamanho da moldura.
| Largura do Fundo |
Este campo define o comportamento da barra em termos de largura e para isso existem quatro opções disponíveis.
|
| Transparência | Permite selecionar o nível de transparência do fundo da barra. Se optar por uma das transparências do menu a cor de fundo será ignorada e irá aparecer apenas a transparência de branco ou de preto. Caso opte pela opção "Sem Transparência" a cor de fundo e do bordo serão assumidos como as cores de fundo da barra. |
| Cor de Fundo | Cor de fundo do bloco da barra. A cor apenas será aplicada se a transparência (campo em cima) estiver definido como "Sem Transparência" e não existir imagem de fundo (campo Imagem de Fundo em baixo) |
| Cor de Bordo | Em torno do bloco da barra existe um bordo fino com 1 pixel de espessura. Neste campo define a cor desse bordo. Caso a barra tenha a largura de 100% o bordo apenas ficará visível em cima e em baixo e não nas laterais. O bordo apenas será aplicado se a transparência (campo em cima) estiver definido como "Sem Transparência" e não existir imagem de fundo (campo Imagem de Fundo em baixo) |
| Imagem de Fundo |
Neste campo pode definir uma imagem de fundo a aplicar no bloco da barra. Além de identificar a imagem define como se irá comportar nos campos imediatamente abaixo:
|
| Moldura |
A moldura define a margem interior do bloco, ou seja, é a distância entre o conteúdo da barra e o bordo (em pixeis). Garante assim que o conteúdo não toca os limites da barra. Pode definir margens diferentes para cada lado da barra, tem assim três campos:
|
Configuração de Elementos Diversos
Os seguintes campos dizem respeito a determinados tipos de barras que iremos descriminando em cada campo
| Cantos |
Campo onde define o tipo de canto que será colocado no bloco da barra, ou seja, na moldura da barra definida em cima, bem como nos elementos no interior da barra caso seja do tipo Linha de Produtos (abrange os 8 tipos) e Linha de Banners (abrange os 2 tipos). As várias opções de cantos neste campo, permite configurar cantos mais ou menos redondos, ou até rectos. |
| Setas de Scroll Horizontal | Sempre que o tipo de barra tem scroll horizontal, e o número e tamanho dos seus elementos não caibam na largura da barra, irão aparecer as setas de deslocamento horizontal nas laterais da barra dentro dos limites do corpo (área útil onde aparece o conteúdo da barra). Caso pretenda que as setas apareçam fora do corpo deverá selecionar este campo. |
| Espaço entre Elementos | Quando barra é do tipo Linha de Banners ou Slide Horizontal pode especificar a distância entre os elementos no interior da barra. |
| Deslocamento | Sempre que o tipo de barra tem scroll horizontal, e o número e tamanho dos seus elementos não caibam na largura da barra, pode selecionar neste campo o tipo de deslocamento dos elementos da barra. Assim, ao clicar numa das setas os elementos podem deslocar-se um a um ou grupo a grupo. |
Configuração da Barra de Produtos
Os seguintes campos permitem configurar os elementos (blocos de produtos) dentro de qualquer uma das oito barras do tipo Linha de Produtos
| Cor de Bordo | Cor do bordo com 1 pixel de espessura do bloco de produto |
| Cor de Fundo | Cor do fundo do bloco de produto |
| Cor da Letra OFF | Cor da letra do nome do produto |
| Cor da Letra ON | Cor da letra do nome do produto quando o cursor passa por cima do nome |
| Ordenar Por |
Selecione a ordem pela qual aparecem os produtos na barra:
|
| Tipo de Sombra | Pode aplicar até nove tipos de sombra ao bloco de produto ou deixar sem sombra. |
| Efeitos e Funções |
|
| Tempo | Tempo de transição de produto em produto quando o modo de deslocamento automático ( campo em cima ) está ativo. O valor deve estar em segundos. |
| Botão Comprar | Aqui define as cores do botão comprar. Existem dois grupos de cor, a cor normal do botão e a cor quando passa o cursor do rato por cima do botão. A cor normal do botão tem os campos identificados com OFF enquanto que os campos identificados com ON têm as cores de quando o ponteiro do rato está em cima do botão. Cada grupo possui 3 campos correspondentes à cor do bordo, cor de fundo e cor da letra. |
| Botão Comprar Efeito 3D | Quando selecionado aplica um efeito 3D através de sombras ás cores do botão |
| Botão Comprar Texto | Texto que aparece dentro do botão. Se deixar este campo em branco o botão deixa de aparecer no bloco de produto. |
| Botão Comprar Icon | Icon opcional que pode adicionar ao botão. Este icon deve ter no máximo 15x15 pixeis. |
Configuração da Barra de Elementos Livres e Posts
| Largura do Elemento | Define a largura máxima de cada elemento nas barras de elementos livres e na barra de posts |
| Pontos de Deslocamento | Este campo permite ativar pontos de deslocamento no fundo da barra que quando clicados permitem navegar por todos os elementos da barra. |
Deslocamento Automático de Elementos
Neste campo define o tempo em segundos de transição entre elementos nas barras com scroll horizontal . Se colocar o valor 0 não haverá deslocamento automático e a barra apenas se deslocará se clicar nas setas laterais.
Setas de deslocamento para a esquerda e para a direita
Escolha a cor das setas laterais
Classes CSS para Barras Livres e Elementos Livres
Neste campo pode definir classes a serem usadas na configuração dos elementos presentes na barra. Não deve colocar a tag style, apenas as classes. Este campo é dirigido exclusivamente a utilizadores com conhecimentos em programação CSS.
Configuração da barra de Caixas Pré-Formatadas e dos respetivos elementos
As caixas pré-formatadas são elementos dinâmicos com efeitos visuais apelativos que poderá personalizar a seu gosto nos campos que apresentamos em baixo. Estas caixas são compostas por fotografia e frases e podem ter links. O seu conteúdo é definido dentro de cada elemento.
| Tipo de Caixa | Existem vários tipos de caixas pré-formatadas que pode usar para destacar elementos no seu site (ver exemplos). Neste campo seleciona o tipo de caixa que melhor se enquadra no que pretende. |
| Comprimento | Campo onde define o comprimento (largura) da sua caixa. Algumas caixas enquadram-se melhor no formato retangular horizontal |
| Altura | Altura da caixa. O conteúdo que colocar estará limitado ao tamanho definido no campo Comprimento e Altura, incluindo fotografias |
| Margem Lateral | Espaço entre caixas lado a lado |
| Margem Vertical | Espaço entre as caixas da linha de cima, aplicável apenas na barra sem scroll horizontal. |
| Letra do Titulo | Campo opcional pois nem todas as caixas têm título, mas se tiverem é aqui que define o tipo de letra. Associado a este campo existe ainda o campo Tamanho da Letra onde define o tamanho da letra do titulo. |
| Letra do Subtítulo | Este campo é opcional, uma vez que nem todas as caixas possuem subtítulo. Caso exista, é aqui que pode definir o tipo de letra do subtítulo, que normalmente aparece abaixo do título. Está também associado o campo Tamanho da Letra, onde pode definir o tamanho do texto do subtítulo. |
| Canto | Neste campo define o quão redondo quer os cantos da caixa. Pode também optar por ter cantos rectos. |
| Fundo |
Embora possa definir imagens de fundo pode optar por ter uma cor sólida de fundo ao preencher estes campos:
|
| Letra |
Sempre que existir texto pode definir aqui a cor desse texto:
|
Configurações Opcionais
Estas configurações permitem definir a altura mínima das barras, contribuindo para melhorar o parâmetro CLS (importante para SEO) e para tornar o site mais estável durante o carregamento. Ao definir previamente a altura da área inicial, evita-se que o layout “salte” enquanto os elementos da página são carregados. Existe assim os campos Altura Mínima PC e Altura Mínima Mobile onde define para cada dispositivo a altura mínima que a barra ocupa.
2 - Adição de elementos à barra
Após criar a barra, passamos à segunda fase, que consiste na definição do seu conteúdo através da adição de elementos. No entanto nem todas as barras têm elementos, algumas barras associadas a funcionalidades, por exemplo a barra de Newsletter e a barra de Posts, não permitem a adição de elementos. A configuração dessas barras é feita no exterior da opção Barras de Destaque. Quando uma barra pode ter elementos, na tabela inicial (ver fotografia em cima) aparece o botão 
em cada linha na coluna Barra. Pode também verificar que a barra do tipo Newsletter não possui este botão. Ao clicar no botão aparecem os elementos já existentes e o botão para adicionar novos elementos à barra (Ver fotografia em baixo)
Cada elemento possui um formulário onde deve colocar o conteúdo desse elemento e em alguns casos definir o link, campos de cor etc..
Os primeiros dois campos de cada elemento para todos os tipos de barra são:
| Nome do Elemento | Campo interno que identifica o elemento, não fica visível no site. |
| Barra de Destaque | Identificação da barra a que pertence o elemento. Alterando este campo pode mudar o elemento para outra barra se necessário. Por defeito aparece a barra de destaque onde foi criado o elemento. |
Abaixo destes campos aparecem os campos onde configura o elemento em si.
