Edição de Páginas - Avançado

Sempre buscamos fazer tutoriais diretos, de fácil compreensão e resumidos, este tutorial irá sair um pouco destes objetivos pois abordará uma utilização mais avançada dos recursos de edição de páginas do site administrável.
Se você está fazendo a configuração inicial do seu site administrável e não irá mudar frequentemente a estrutura desta página ou deseja realizar uma modificação pontual em alguma página de seu site recomendamos que entre em contato com o nosso suporte pois possívelmente será mais interessante para você solicitar que nós façamos este ajuste, devido ao tempo que você necessitará dedicar para poder aprender a utilizar os recursos explicados abaixo.
Agora se você já tem um conhecimento um pouco maior sobre gerenciadores de conteúdos ou deseja realizar modificações frequentes ou muito específicas nas suas páginas acreditamos que abaixo você encontrará preciosas informações para a edição avançada das páginas usando o Wordpress e o editor avançado fornecido no nosso sistema.

Abaixo do editor padrão é exibido o editor avançado Muffin Builder, conforme exibido na imagem abaixo:

Página de opções
Vamos inicialmente explicar a estrutura que o editor utiliza para poder organizar e apresentar os conteúdos na página, podemos definir esta estrutura em quatro partes principais:
  • Seção: agrupamento de vários conteúdos, uma página pode ter várias seções onde uma é exibida abaixo da outra cada seção ocupa toda a largura disponível para os conteúdos da página e seu comprimento será ajustado automaticamente de acordo com os conteúdos dentro dela;
  • Wrap (Pacote): é um agrupamento dentro de uma seção, pode ter sua largura ajustada de 1/6 do tamanho total da seção até 1/1 que ocupa toda a largura, assim pode-se adicionar vários pacotes em uma mesma linha (até 6), se chama Wrap (pacote) porque dentro dele pode-se adicionar vários ítens;
  • Ítens: Também pode ser dimensionado até 1/6 da largura mas agora tendo como referência o tamanho do pacote em que o ítem está, são colocados dentro de um pacote se alinhando tanto na vertical como na horizontal de acordo com o espaço disponível;
  • Divisor: Cria uma divisoria (espaço) entre dois pacotes (Wrap);

Veja nesta imagem abaixo um Seção com 1 Wrap criado e dentro dele 4 Ítens dois com 1/6 do tamanho um com 1/5 e outro com 1/4:
Divisões

Com estes componentes você pode montar a mais diversa estrutura de conteúdos, o sistema irá ajustar o tamanho e forma de exibição dos  pacotes de acordo com a tela do dispositivo em que o site for exibido, caso não seja possível exibir os pacotes um ao lado do outro como é exibido no editor eles serão exibidos em sequência abaixo;

Vamos então ver as opções de edição de cada um destes recursos:
Seção:
  • Adicionar Wrap - Como já vimos adiciona um pacote dentro desta seção;
  • Adicionar um Divisor - Adiciona um divisor dentro desta seção;
  • Editar - Abre a janela de opções de uma seção, as opções mais interessantes são: Clonar - Duplica esta seção com todo o conteúdo que existe dentro dela;
    • Título - Para você dar um nome a esta seção, não será exibido aos visitantes;
    • Diversas opções de configuração de background (fundo da seção) incluindo definição de cor, imagem, ou vídeo como fundo;
    • Layout configuração de espaço de preenchimento (Padding) tanto no topo como na parte inferior da seção;
    • Além de mais algumas opções avançadas que acreditamos que você não irá precisar usar;
  • Esconder - Torna esta seção indisponível aos visitantes do site;
  • Excluir - Deleta esta seção e todo o conteúdo dentro dela, cuidado você pode excluir todo o conteúdo da sua página;
Wrap (Pacotes):
  • - (Sinal de menos) - Diminui o tamanho lateral deste pacote;
  • + (Sinal de mais) - Aumenta o tamanho lateral deste pacote;
  • Add Item - Abre o popup de opções de Itens a serem adicionados a este pacote;
  • Editar - Abre a janela de opções de edição deste pacote, contendo opções de personalização do fundo (background) e algumas opções avançadas de Layout;
  • Clonar - Duplica este pacote com todas as configurações e ítens que estiverem dentro dele;
  • Excluir - Excluir este pacote com todos os ítens que estiverem dentro dele;
Ítens :
  • - (Sinal de menos) - Diminui o tamanho lateral deste ítem;
  • + (Sinal de mais) - Aumenta o tamanho lateral deste ítem;
  • Editar - Abre a janela de opções de edição deste ítem sendo que cada ítem terá as suas próprias opções de edição, abaixo falaremos sobre os princiais ítens;
  • Clonar - Duplica este ítem com todas as configurações e ítens que estiverem dentro dele;
  • Excluir - Excluir este ítem com todos os ítens que estiverem dentro dele;
Divisor:
  • Editar - Oferece as mesmas opções de edição que um Wrap, pois na verdade é um Wrap sem nenhum ítem;
  • Excluir - Deleta este divisor;
Vamos ver agora uma breve descrição sobre cada ítem disponível, ao total são quase 60 tipos de ítens diferentes, além desta descrição veja o ícone do ítem, ele pode lhe auxiliar a compreender como será a sua exibição:
  • Placeholder - É um ítem em branco, normalmente utilizado para preencher algum espaço ou dar algum espaço entre diferentes ítens;
  • Accordion - Exibe o conteúdo como se fosse uma sanfona, é exibido apenas as linhas com os títulos, ao clicar em uma delas é exibido o seu conteúdo;
  • Caixa de artigo - Pode exibir uma imagem, uma frase e o título, podendo ser utilizado para destacar determinada página ou postagem, tendo o link apontando para a mesma;
  • Blockquote - Exibe uma citação, podendo ser informado a frase (conteúdo) o autor e o link para outra página;
  • Blog - Exibe as postagens do site, podendo ser definido a quantidade de posts a serem exibidos, a suas categorias, e o estilo de exibição, podendo ser exibido as postagens ou apenas chamadas para as postagens (Style Masory);
  • Notícias do Blog - Exibe os títulos das notícias (Posts) do site e sua imagem de destaque em miniatura, ao contrário do Blog, não exibe o conteúdo das postagens;
  • Slide do Blog - Exibe um slider com as postagens do site, podendo ser filtrado por categoria, também utiliza a imagem de destaque de cada postagem;
  • Call to Action - Chamada para uma ação, é um item para criar facilmente botões usando um grande acervo de ícones prontos disponíveis, também podendo ter título e um botão com texto;
  • Gráfico - Possibilita criar um grafico circular com uma imagem ou um icone no centro com uma barra preenchendo a porcentagem que você informar em volta do circulo;
  • Clientes - Este item não está ativo no momento, caso você tenha extrema necessidade deste recurso entre em contato conosco;
  • Slide de clientes - Este item não está ativo no momento, caso você tenha extrema necessidade deste recurso entre em contato conosco;
  • Código - Possibilita exibir um código html no site para os visitantes, se você colocar um player neste item ele exibirá o código e não o player;
  • Coluna - Possibilita criar uma coluna na página, tem o funcionamento muito parecido com o Editor Visual;
  • Caixa de Contato - Fornece uma forma simples de exibir os dados de contato da rádio ou empresa, pode ser usado no lugar da edição manual na página contatos desde que os campos oferecidos sejam adequados e suficientes;
  • Conteúdo WP - Exibe o conteúdo do editor visual padrão do Wordpress (o primeiro exibido na página de edição);
  • Contagem Regressiva - Informe uma data e hora e será exibido um contador de quanto tempo e dias faltam para este momento,  em Fuso Horário informe -3 para o horário de Brasília (ou -2 em horário de verão).
  • Contador - Exibe uma contagem rápida até o número que você informou. Normalmente são usados para exibir alguns números de destaque da rádio ou empresa, usando um ítem por número;
  • Divisor - Assim como o divisor de pacotes é apenas um ítem sem nenhum conteúdo, pode ter sua altura personalizada;
  • Divisor Fancy - cria uma divisória com uma divisão entre duas cores;
  • Fancy Heading - cria grandes títulos podendo ser usado para definir seções diferentes do site;
  • PF (FAQ) - Parecido com o Accordion mas numera cada tópico, indicado para perguntas frequentes ou algo similar;
  • Lista de destaques - Exibe uma lista com ícone e títulos, deve ser copiado e colado o código informado e informado dentro das aspas de title="" o texto de cada destaque, o ícone também pode ser editado mas manualmente;
  • Caixa Flat - Exibe um icone ao lado da imagem e o texto e descrição abaixo, não funciona corretamente se não for informado uma imagem;
  • Hover Box - Exibe uma imagem no lugar da outra ao passar o mouse em cima, as imagens devem ter exatamente o mesmo tamanho;
  • Hover Color - Substitui a cor de fundo ao passar o mouse em cima;
  • Como funciona - Permite exibir etapas de um processo, sendo que cada item se refere a uma etapa, deve ser utilizada uma imagem e pode-se linkar cada etapa a uma página diferente;
  • Icon Box - Crie uma caixa de ícone, exibindo o ícone, título e descrição, o mesmo apresenta uma animação ao ter o mouse em cima de sua área;
  • Imagem - Exibe uma imagem, com opção de definição de tamanho e alinhamento, além disto pode ser informado uma outra imagem (ou a mesma) para ser exibida em tela cheia em um popup;
  • Caixa de Informação - exibe uma lista de frases devendo-se copiar e colar o código <li>list item 1</li> e editar o texto list item x, (o código deve ficar dentro de <ul> e </ul>
  • Lista - Parecido com Icon box, mas sem efeito e com o título e descrição ao lado do ícone, exibe a imagem ou icone dentro de um quadro;
  • Mapa -  Adiciona um mapa do Google Maps, também pode ser escolhido exibir imagens do satélite, deve-se utilizar a latitude e longitude obtidas no Google Maps;
  • Slide Completo de ServiçoEste item não está ativo no momento, caso você tenha extrema necessidade deste recurso entre em contato conosco;
  • Miniatura de Slide de ServiçoEste item não está ativo no momento, caso você tenha extrema necessidade deste recurso entre em contato conosco;
  • Horário de Funcionamento - Exibe o horário de funcionamento da empresa, é necessário editar o código;
  • Nossa Equipe - Permite adicionar perfis de pessoas, com foto, nome, telefone, descrição e links para redes sociais;
  • Lista de nossa Equipe - Mesmo funcionamento que o Nossa Equipe mas mais reduzido, exibindo as informações em uma altura reduzida;
  • Photo Box - Exibe uma única imagem com um efeito ao passar o mouse, podendo também deixar a imagem preto e branco;
  • PortifólioEste item não está ativo no momento, caso você tenha extrema necessidade deste recurso entre em contato conosco;
  • Portifólio em GradeEste item não está ativo no momento, caso você tenha extrema necessidade deste recurso entre em contato conosco;
  • Imagem do PortifólioEste item não está ativo no momento, caso você tenha extrema necessidade deste recurso entre em contato conosco;
  • Slide do PortifólioEste item não está ativo no momento, caso você tenha extrema necessidade deste recurso entre em contato conosco;
  • Preço do ítem - Permite exibir um produto ou serviço em promoção, com nome, imagem, período e descrição, entre outras opções;
  • Barras de progresso - Exibe barras com seu título e preenchimento de acordo com a porcentagem informada, deve ser editado via código;
  • Promo Box - Exibe uma imagem no canto esquerdo, o título no lado direto e a descrição abaixo, podendo ter um botão para algum link;
  • Quick Fact - Mesmo estilo do Contador mas com mais algumas opções de texto acima e abaixo da contagem rápida;
  • Slider da LojaEste item não está ativo no momento, caso você tenha extrema necessidade deste recurso entre em contato conosco;
  • Widget da Barra Lateral - Permite exibir os widgets de uma barra lateral dentro deste item;
  • SliderEste item não está ativo no momento, caso você tenha extrema necessidade deste recurso entre em contato conosco;
  • Plugin de Slider - Permite adicionar um slider do Revolution Slider no espaço deste ítem;
  • Sliding Box - Exibe uma imagem com um título grande abaixo e a imagem com um efeito de movimento em cima;
  • Story Box - Exibe uma imagem esvanecida com o título sobre ela do lado esquerdo e a descrição abaixo;
  • Abas - Como um fichario, exibe as abas e os conteúdos da aba escolhida, semelhante ao Accordion;
  • DepoimentosEste item não está ativo no momento, caso você tenha extrema necessidade deste recurso entre em contato conosco;
  • Lista de DepoimentosEste item não está ativo no momento, caso você tenha extrema necessidade deste recurso entre em contato conosco;
  • Linha do tempo - Titulos em sequência que podem ser usados para informar fatos cronológicos e programações com horários;
  • Trailer Box - mostra um slogan, e um título em cima de uma imagem;
  • Video - Exibe um vídeo, aceitando diferentes fontes;
  • Editor Visual - Editor visual semelhante ao editor padrão do Wordpress, incluindo a opção de inserir scripts via html;
  • Zoom Box - Exibe uma imagem com efeito de zoom ao contrário ao passar o mouse;
Vamos ver agora algumas das opções de configuração dos Itens citados acima mais comuns:
  • Título: É o texto que será exibido, normalmente no topo do Item;
  • Link: Endereço da página onde o visitante será direcionado ao clicar neste Item ou em um botão a ser exibido;
  • Animação: Permite criar facilmente uma animação na exibição do Item, desde zoons e deslizamentos laterais;

Existem muitas outras opções, assim não iremos nos aprofundar em cada uma delas pois acreditamos que são bem intuitivas, bastando que você crie um item e teste o seu funcionamento.

Movimentação dos blocos e itens, para você montar a estrutura da forma que você melhor considerar bastando arrastar os itens para dentro dos pacotes e os pacotes dentro de uma mesma seção ou para outras. 

Vamos agora falar sobre as opções de configuração mais importantes do Layout e outras opções da página:
  • Esconder o conteúdo - Se ligado não será exibido aos visitantes o conteúdo do editor padrão do Wordpress (o primeiro da página) isto pode ser interessante principalmente se você realmente não quiser mostrar o conteúdo deste editor ou se você usar o Item Conteúdo WP, onde você poderá definir então onde este conteúdo será exibido;
  • Layout - Você pode escolher entre ter a página sem a exibição de uma Sidebar (barra lateral) ou onde ela irá aparecer, pondendo ter dos dois lados do conteúdo;
  • Barra lateral e 2ª - Nestes dois campos você irá indicar qual barra lateral será utilizada (elas devem ser criadas em Aparência - Opções do Tema - Barras Laterais;
  • Slider | Revolution Slider - Aqui você pode escolher que slider será exibido nesta página, os mesmos devem ser configurados em Slider Revolution;
  • Slider | Layer Slider - Para simplificar o uso do sistema desativamos este sistema de slider;
Estas mesmas informações também podem ser utilizadas na edição de artigos, agora que você tem o conhecimento sobre as principais opções você deve passar a agir para criar e configurar as suas páginas de acordo com as suas preferências. Recomendamos que crie uma página nova para fazer os testes antes de editar nas páginas já existentes. Mais uma vez nos colocamos a disposição para lhe auxiliar dentro das nossoas possibilidades.
  • 0 Usuários acharam útil
Esta resposta lhe foi útil?

Artigos Relacionados

Widget Facebook Members - Site v2

A relevância das redes sociais e atualmente do Facebook como fonte de divulgação é...

Acesso ao sistema de administração

Nesta série de tutoriais buscaremos lhe mostrar como usar da melhor forma o nosso sistema de site...

Edição de Páginas

Após estarmos logados no sistema administrativo do site vamos editar as suas páginas, neste...

Edição de Posts (Artigos)

Como você já deve ter percebido, no sistema existe uma divisão entre Páginas e Posts, páginas são...

Mudança do Cabeçalho (imagem do topo) - Sites v2

Esta é uma das mudanças que mais diferencia o site, mas abordaremos aqui apenas a parte do...

Powered by WHMCompleteSolution