fbpx

Bem vindo ao
Blog da FULL.

Aprenda, crie e cresça seu negócio na internet.

Encontre conteúdos, dicas, tutoriais e novidades sobre as principais ferramentas Wordpress

Adicione belos slides com o MotoPress Slider

Você está em:

Adicione belos slides com o MotoPress Slider

MotoPress é bem conhecido na comunidade WordPress por seu plugin WordPress de editor de conteúdo de construção de página . Desde seu lançamento no ano passado, a MotoPress adicionou mais produtos ao seu portfólio, incluindo complementos de plug-in e temas do WordPress.

Em fevereiro deste ano eles lançaram MotoPress Slider ; seu segundo grande plugin WordPress. O plug-in é responsivo, então os slides que ele ajuda a criar ficam ótimos em qualquer dispositivo. Vamos dar uma olhada no que o MotoPress Slider pode fazer.

Configurando um novo controle deslizante MotoPress

O MotoPress Slider é incrivelmente fácil de configurar. Quando você escolhe criar um novo controle deslizante, são apresentadas três páginas de configurações curtas. Há uma guia para configurações de controle deslizante, controles e aparência.

Na guia de configurações do controle deslizante, você pode nomear seu controle deslizante e o alias usado para o código de acesso do controle deslizante. O controle deslizante pode ter largura total ou você pode definir o tamanho padrão da grade. O atraso da apresentação de slides também pode ser definido nesta área. Se preferir, a apresentação de slides pode ser desativada.

Novas configurações do controle deslizante

Nove controles deslizantes podem ser ativados ou desativados na próxima guia. Você pode configurar controles como setas, botões de reprodução, contadores e muito mais.

Novos controles deslizantes

Na guia aparência, você pode definir o tamanho de pixel padrão para telas de telefone, tablet e desktop. As configurações originais são que qualquer coisa com até 767 pixels é exibida usando o layout do telefone, qualquer coisa entre 768 e 991 pixels usa o layout do tablet e qualquer coisa acima de 992 pixels usa a tela da área de trabalho.

Uma classe CSS personalizada pode ser aplicada ao seu controle deslizante. Há também uma caixa na qual você pode adicionar código CSS personalizado.

Nova aparência do controle deslizante

Uma página de configurações separada está localizada no menu de administração do MotoPress Slider que permite desabilitar o controle deslizante para grupos de usuários específicos.

Configurações de grupos de usuários do MotoPress Slider

Não se preocupe muito com as configurações do controle deslizante. Os valores padrão devem ser bons para a maioria de vocês e há um botão na parte inferior da área de criação do controle deslizante que permite retornar e modificar as configurações a qualquer momento.

Adicionando slides ao seu novo controle deslizante MotoPress

Na próxima área, você pode adicionar slides ao seu controle deslizante. Você pode ver uma captura de tela desta área abaixo. Pode parecer um pouco assustador à primeira vista, mas é muito fácil de entender quando você sabe onde está tudo.

Página de criação de slides do MotoPress

Na parte superior estão sete guias: Geral, cor, imagem, vídeo, link, visibilidade e diversos. Uma visualização do seu controle deslizante domina o coração da página e, abaixo, você encontrará opções para adicionar texto, imagens, botões e vídeos. Cada tipo de conteúdo é conhecido como camada e essas camadas são exibidas no lado direito da página.

Você pode reorganizar a ordem das camadas usando arrastar e soltar. O posicionamento da camada funciona da mesma maneira que em aplicativos gráficos como o Photoshop, com prioridade dada à camada na parte superior. No meu exemplo acima, tenho duas camadas: Imagem e texto. Se eu tivesse que posicionar a camada HTML após a imagem, o texto não ficaria visível.

A interface funciona muito bem. Quando você seleciona uma camada na área da tela principal, as configurações dessa camada serão exibidas abaixo. Clicar em excluir no teclado removerá a camada do slide. Dois botões de exclusão também estão disponíveis: um exclui a camada que você selecionou, o outro exclui todas as camadas.

As camadas podem ser arrastadas na área da tela. Ao fazer isso, você verá as coordenadas X e Y mudarem. Isso é útil, pois significa que você pode posicionar camadas em vários slides exatamente na mesma posição (o que é muito útil para posicionar conteúdo como texto). Uma grade de nove caixas também pode ser usada para posicionar camadas, por exemplo, no canto superior esquerdo, no centro, no canto inferior direito, etc.

Dezenas de animações podem ser usadas para camadas de fade in e fade out. Isso inclui fades, zooms, flips e saltos. As camadas podem ser exibidas e/ou ocultas em um determinado momento (em milissegundos). Este é, na minha humilde opinião, um dos melhores recursos do plugin, pois permite exibir camadas exatamente quando você deseja que sejam exibidas.

Estilos predefinidos também estão disponíveis, mas se preferir, você pode definir classes CSS personalizadas para uma camada específica.

Opções de animação

Na guia geral, você pode nomear seu slide e escolher se ele será publicado ou salvo como rascunho. Dessa forma, você pode ser criativo e salvar seus slides antes de ir ao vivo com eles.

A guia de cores permite selecionar uma cor ou gradiente para o plano de fundo do slide. Uma coisa que me incomodou foi que não havia uma roda de cores para selecionar as cores. Você deve inserir o código hexadecimal manualmente. Espero que isso seja algo que eles abordem em uma versão futura do plugin. A opção gradiente permite definir duas cores e o ângulo em que o gradiente é aplicado.

Configurações de cores do controle deslizante MotoPress

Se você não quiser uma cor sólida ou um plano de fundo gradiente, poderá usar uma imagem. Você pode selecionar uma imagem da sua biblioteca de mídia do WordPress ou definir uma URL de imagem externa. Atributos de tamanho, repetição e posição podem ser definidos.

Configurações de imagem do controle deslizante MotoPress

O MotoPress Slider também suporta fundos de vídeo. Se preferir, os vídeos podem ser inseridos em seus slides usando camadas. Você pode exibir vídeos do YouTube, Vimeo, sua biblioteca de mídia ou um URL externo.

Configurações de vídeo do controle deslizante MotoPress

Os slides podem ser vinculados. Você pode definir os atributos de ID, classe, rel e título do link. Quando um visitante clicar no slide em questão, ele será direcionado para a URL que você definiu. Como os links são configurados slide por slide, você pode fazer com que alguns slides sejam vinculados a sites externos e não a outros.

Configurações de link do controle deslizante MotoPress

Os slides podem ser restritos a usuários logados. Isso pode ser usado para exibir apenas slides para usuários registrados. Você também pode ativar os slides durante um período de tempo específico. Isso pode ser usado para uma variedade de usos. Por exemplo, você pode criar slides para promover uma competição durante a primeira semana de dezembro.

Configurações de visibilidade do controle deslizante MotoPress

Na última guia, você pode definir um nome de classe CSS e um ID para o seu slide. Como observei anteriormente, você também pode estilizar camadas individuais em seu slide usando classes CSS personalizadas.

Configurações diversas do controle deslizante do MotoPress

Depois de criar seu slide, você pode salvá-lo usando o botão Salvar na parte inferior da página. Clicar no botão fechar irá levá-lo para a lista de slides, ou seja, todos os slides que você criou para aquele slider específico.

Você pode editar, duplicar ou excluir slides existentes. Duplicar um slide é uma opção útil se você quiser criar um slide semelhante. Caso contrário, você pode criar um novo slide do zero.

Lista de slides deslizantes do MotoPress

Por fim, você pode inserir o controle deslizante concluído em seu site usando o alias do código de acesso definido para o controle deslizante.

O controle deslizante MotoPress

Dizem que a beleza está nos olhos de quem vê, mas fiquei muito impressionado com o que o MotoPress Slider poderia fazer. Não demora muito para inserir planos de fundo, texto, imagens, botões e vídeos personalizados.

Exemplo de controle deslizante MotoPress

Se você visitar a página principal de informações do MotoPress Slider , verá um ótimo exemplo do que pode ser alcançado usando o plug-in. Ele destaca como as camadas e o atraso no carregamento de camadas podem ser usados para criar controles deslizantes profissionais em minutos. A maneira como as camadas aparecem ao longo do tempo durante um slide dá a impressão de que você está assistindo a uma apresentação de vídeo (mesmo quando os vídeos não estão sendo usados). É um efeito simples que realmente transforma os slides.

Exemplo de controle deslizante MotoPress

Preços

A MotoPress adotou um esquema de preços justo para seu plug-in deslizante. Sua licença pessoal custa US$ 19 e oferece um ano de suporte e atualizações para um site. Com preço de varejo de US$ 49, a licença comercial aumenta o limite do site de um para cinco sites.

Preços do Slider MotoPress

A licença de desenvolvedor é vendida por US$ 99. Oferece suporte prioritário ao desenvolvedor e oferece um ano de suporte e atualizações para um número ilimitado de sites. O licenciamento por volume também está disponível se você desejar empacotar o MotoPress Slider em um produto próprio.

MotoPress Slider é 100% GPL . É necessária uma licença para obter atualizações automáticas e suporte para o plug-in, no entanto, o plug-in ainda é totalmente utilizável se esta chave de licença não for inserida.

Pensamentos finais

Todos os plugins de slider do WordPress têm uma curva de aprendizado e o MotoPress Slider não é diferente. Você precisa gastar pelo menos vinte ou trinta minutos brincando com slides até começar a entender do que o plugin é capaz.

Após um curto período de uso do plugin, tive alguns momentos “Aha” quando comecei a entender como tudo funcionava. A primeira é quando entendi como tirar o máximo proveito das camadas. A segunda é quando aprendi como as animações podem ser usadas para fazer fade in e fade out de texto, botões e imagens. No entanto, o recurso que realmente me fez apreciar o potencial do controle deslizante do MotoPress foi a opção de atrasar o aparecimento das camadas. Isso permite que muitos truques interessantes de apresentação sejam usados, como inserir texto aos visitantes do site e exibir imagens e botões em pontos-chave do slide.

Depois de dominar essas técnicas simples, tenho certeza de que você será capaz de criar slides profissionais usando o MotoPress Slider . Se você precisar de inspiração, recomendo verificar o controle deslizante exibido no MotoPress, pois destaca o que pode ser alcançado usando camadas simples de texto e imagem.

Espero que você tenha gostado deste olhar sobre MotoPress Slider. Nesse caso, encorajo você a se inscrever no boletim informativo do WPExplorer para receber atualizações gratuitas de nossos artigos mais recentes e ótimas dicas, truques e ofertas do WordPress.

Obrigado por ler.

Kevin

Aprenda com a FULL.

Junte-se a mais de 50 mil pessoas que recebem em primeira mão as principais ferramentas e tecnologia para desenvolvimento web

Meu carrinho
🎁 Faltam R$100,00 para liberar a Black da FULL
Seu carrinho está vazio.

Parece que você não adicionou nada ao seu carrinho =(