Iniciante do WordPress: personalização de nível médio

Para ir além do básico simples no meu último blog WordPress Beginner, nas últimas duas semanas tenho trabalhado para recriar uma de nossas páginas de demonstração ProteusThemes. A demonstração do tema Auto para ser específico. Assim como antes, meus colegas me definiram tarefas passo a passo para me colocar no caminho. Essas são as lições mais importantes que aprendi até agora.

Caixas de ícones

Os widgets Icon Box são uma peça muito útil de linguagem visual . Pode parecer óbvio, mas ter o número de telefone da sua empresa ao lado de um ícone de telefone é uma maneira simples, mas eficaz , de melhorar a experiência do usuário do seu site .

Minha tarefa era adicionar as caixas de ícone no cabeçalho da página inicial. Para fazer isso, no seu dashboard você precisa ir em Appearance -> Widgets e depois dentro de ' Theme Sidebars ' selecionar ' Header '.

Depois de ter localizado ' Cabeçalho ', direcione sua atenção para a esquerda da tela, onde você verá uma lista de ' Widgets Disponíveis '. ProteusThemes: IconBox é o widget que você está procurando.

Agora você tem duas opções . Você pode arrastar e soltar o widget à direita da tela e colocá-lo no cabeçalho ou, quando clicar no widget, verá um menu suspenso de seus locais aplicáveis, basta selecionar ' Cabeçalho ' a partir deste lista e clique no botão azul ' Adicionar Widget ':

Você verá agora que há muitos ícones para escolher dentro do widget, para o propósito deste exercício eu escolhi o telefone. Tudo o que você precisa fazer é dar um título à Caixa de Ícones e decidir quais informações você deseja que apareçam ao lado dela.

Abaixo de todos os ícones no menu do widget, você verá uma opção para ' destacar este widget '. Marque essa caixa se as informações na caixa de ícones forem muito importantes e você quiser que elas se destaquem mais.

Controle deslizante de primeira página

Recriar a Demonstração Automática exigia a adição de um controle deslizante como um recurso na página inicial. Para que isso aconteça, selecione Páginas -> Todas as páginas -> Home ; quando estiver no editor da sua página inicial, você precisa encontrar o menu suspenso ' Atributos da página ' no lado direito da tela. Encontre isso e altere o ' Template ' para ' Front Page With Slider '.

Depois de alterar para ' Front Page With Slider ', haverá uma nova meta na parte inferior da tela intitulada ' Front page slider ', clique aqui para adicionar suas imagens e texto ao controle deslizante:

Códigos de acesso

Recriar o controle deslizante da página inicial nos traz muito bem os códigos de acesso. Por quê? Porque na demonstração automática que estou recriando, há botões dentro do controle deslizante .

Neste ponto é importante enfatizar que você realmente precisa instalar os plugins recomendados . O erro que cometi foi inserir o shortcode no 'texto do slide' sem ter ativado o plugin ProteusThemes Shortcodes . Se você não tiver o plug-in ativado, o próprio código aparecerá no controle deslizante, em vez do botão que você está tentando criar.

Há uma seção de 'Códigos de acesso' em toda a documentação de nossos temas, que fornece muitas opções disponíveis para o estilo e a funcionalidade do botão que você pode inserir. Tudo o que você precisa fazer é copiar e colar este código na seção 'texto do slide' do controle deslizante. Basta editar o texto do botão dentro do código para atender às suas necessidades e pronto.

É claro que você pode usar códigos de acesso em outros lugares além do controle deslizante. Por exemplo, se você escreveu um artigo de marketing de conteúdo para tentar vender algo, use os códigos de acesso para criar um botão de CTA eficaz na parte inferior da postagem do seu blog.

Construtor de páginas

Conhecer o plugin Page Builder do SiteOrigin foi absolutamente crítico na recriação do Auto Demo. A primeira tarefa para a qual tive que usá-lo foi criar esta seção IconBox com Popover abaixo do cabeçalho da página inicial:

Para fazer isso, vá para a página que deseja editar, no meu caso a página inicial. Então você precisa localizar o menu do construtor de páginas , que se parece com isso:

A partir daqui, selecione ' Adicionar linha '. Você verá então opções relacionadas às colunas dentro desta linha. Você pode selecionar quantas colunas deseja, sua proporção de tamanho e se deseja que elas sejam em ordem de tamanho, da esquerda para a direita ou vice-versa. Para o meu IconBox Popover, selecionei 3 colunas de tamanho uniforme.

Agora que você tem suas colunas prontas, você pode começar a adicionar funcionalidades a elas adicionando widgets. Faça isso clicando na coluna que deseja adicionar, uma vez selecionada a coluna, clique no botão ' Adicionar Widget ' no menu acima.

Dependendo do widget selecionado, você pode adicionar mais funcionalidades à coluna. No meu Popover IconBox ' Horários de Abertura ' por exemplo, foi necessário adicionar o widget Horário de Abertura ProteusThemes dentro do Popover IconBox, para que as informações relevantes fossem mostradas no popover caso a coluna fosse clicada.

Um problema que tive depois de criar esta linha de popovers IconBox foi que a linha não era da mesma cor que a Demonstração Automática, nem se estendia por toda a largura da minha página. É fácil resolver esses tipos de problemas. Primeiro, passe o cursor sobre o pequeno ícone de chave inglesa acima de sua linha e selecione ' Editar linha '. Para alterar a cor, o próximo passo é selecionar ' Desenho ' no menu ' Estilos de Linha ', aqui você pode alterar a cor e outras opções de desenho.

Para alterar o tamanho de sua linha, primeiro selecione ' Layout ' no menu ' Estilos de linha '. Isso lhe dará a opção de adicionar preenchimento à linha. Em seguida, se você quiser que a linha se estenda até a largura total da sua página, selecione a lista suspensa ' Layout de linha ' e escolha ' Largura total '.

Eu usei o Page Builder exatamente da mesma maneira para criar essas colunas de página em destaque :

Para isso, em vez de adicionar o widget Iconbox com Popover à coluna, escolhi o widget ProteusThemes: Featured Page . Você deve se divertir colocando diferentes widgets em colunas para realmente ter uma ideia de como o construtor de páginas será útil para você.

Isso será tudo por enquanto. Dê uma olhada no meu post anterior para algumas dicas mais básicas. Clique abaixo para assinar nossa newsletter e receber esse tipo de conteúdo e muito mais diretamente na sua caixa de entrada…

INSCREVA-SE AGORA