O guia completo para usar o SmartVideo com o Divi Builder para hospedagem de vídeo WordPress

Para usuários do Divi Builder, o SmartVideo oferece apenas a ferramenta necessária para fornecer uma experiência de reprodução de vídeo moderna, profissional e nativa em seu site.

Vivemos na era dos poderosos temas WordPress e construtores de páginas que ajudam você a criar qualquer site sob o sol. Um desses temas e construtores de páginas visuais é o Divi Builder , do pessoal legal da Elegant Themes.

Se você é um usuário jurado do Divi Builder, vai adorar o post de hoje. Em alguns minutos, mostraremos exatamente como usar o SmartVideo do Swarmify junto com o Divi Builder.

Agora você não precisa usar o Vimeo ou os players de vídeo carregados de links do YouTube em seu site. Oferecemos a você um player de vídeo organizado que parece absolutamente incrível em seu site com tecnologia Divi.

Quais são os benefícios diretos?

• O player de vídeo SmartVideo não contém marcas de terceiros (olá, YouTube) e links que desviam o tráfego que você tanto trabalha para direcionar ao seu site. Agora, você pode marcar seus players de vídeo para uma aparência e sensação nítidas e profissionais :)
• Nosso CDN de vídeo e a tecnologia proprietária EdgeAI permitem que você ofereça vídeos super rápidos, sem buffer e sem erros para os visitantes do seu site, não importa onde eles estejam no mundo. Seus usuários vão agradecer.
• Usamos a mesma infraestrutura que gigantes de streaming como Netflix e Hulu usam porque estamos totalmente comprometidos com nossa missão. Como resultado, você desfruta de vídeos de início instantâneo e sem interrupções que ajudam a reter mais visitantes e aumentar sua receita.
• Nossa solução de codificação de vídeo é incrível, o que significa que os visitantes do seu site desfrutam de reprodução de vídeo de alta qualidade, independentemente do dispositivo que usam. Diga adeus aos vídeos incompletos que parecem terríveis em diferentes telas e resoluções.
• E muito mais, como você aprenderá mais adiante no artigo :)

Por enquanto, vamos aprender mais sobre o Divi Builder e como integrá-lo ao SmartVideo.

Alerta de Spoiler: Você pode adicionar o código SmartVideo ao seu site Divi Builder manualmente, mas agora você pode pular todas as coisas técnicas com nosso novo plugin WordPress SmartVideo. Isso significa que você pode integrar facilmente o SmartVideo com o Divi Builder, mesmo que não consiga codificar para salvar sua vida.

O que é o Construtor Divi?

Se você é novo, o Divi é um belo e poderoso tema WordPress e construtor de páginas visuais. Graças à avançada tecnologia de construção visual, o Divi ajuda você a criar sites WordPress incríveis rapidamente.

O Divi vem com uma tonelada de layouts pré-fabricados que você pode importar para sua instalação do WordPress com um único clique. Além disso, você tem o Divi Visual Builder que permite personalizar seu site arrastando e soltando elementos.

Isso mesmo, você não precisa de conhecimento prévio de codificação para criar um site notável com o Divi. Se isso não for suficiente, você pode até usar dois layouts diferentes ao mesmo tempo, oferecendo bastante liberdade de design.

O Divi vem com vários recursos incríveis, incluindo:

• Mais de 40 elementos do site, como botões de call-to-action, galerias, formulários, blogs, sliders, depoimentos etc.
• Mais de 800 designs pré-fabricados em diferentes nichos, como negócios, comércio eletrônico, tecnologia, saúde etc.
• Controle de projeto completo
• Design 100% responsivo com configurações adicionais para todos os tipos de dispositivos
• Controle CSS personalizado
• Uma grande biblioteca de efeitos, transições e estilos
• Um milhão e uma opções de design
• E muito mais!

A melhor parte é que quando você compra o Divi, você obtém acesso a outros temas e plugins do WordPress. A Elegant Themes tem mais de 700 mil clientes, então você está em boas mãos.

"Divi é o REI quando se trata de facilidade de web design. O que costumava levar uma semana leva algumas horas e agora estamos todos com nosso objetivo pessoal de converter todos os sites de nossos clientes para Divi." - Scott Lawrence

O Divi é perfeito para freelancers, agências e proprietários de sites que procuram um construtor de páginas visual poderoso, intuitivo e fácil de usar. Quer você saiba codificar ou não, o Divi é uma ferramenta incrível de criação de sites.

Dito isso, o que é SmartVideo?

O que é Swarmify SmartVideo?

Para os recém-chegados, o Swarmify é um serviço de aceleração de vídeo de primeira linha que lançamos em 2013, após dias de desenvolvimento e testes rigorosos.

A nossa é uma plataforma de hospedagem de vídeo de serviço completo, completa com conjuntos de ferramentas de codificação, reprodução, CDN de vídeo, entrega e distribuição. Estamos orgulhosos de trabalhar com um número crescente de empreendedores de todas as esferas da vida.

Somos apaixonados pelo que fazemos e trabalhamos incansavelmente para oferecer a você vídeos que carregam instantaneamente sem buffer, como é a norma em muitos sites de hospedagem de vídeo, como YouTube, Wistia e Vimeo.

O Swarmify garante uma reprodução de vídeo 12x mais rápida e buffering 8x menor do que os players de vídeo médios do mercado. Nós nos concentramos apenas em acelerar vídeos e somos muito bons nisso :)

Plug sem vergonha à parte, Swarmify é incrivelmente fácil de integrar com várias plataformas de criação de sites, incluindo WordPress, Shopify e Squarespace, entre outras.

Embora você possa incorporar o player de vídeo SmartVideo em seu site WordPress manualmente, você pode economizar tempo usando nosso revolucionário plug-in SmartVideo WordPress.

O plugin é ridiculamente fácil de instalar e configurar no seu site WordPress + Divi Builder. Você estará entregando experiências de vídeo rápidas e de alta qualidade para seus visitantes em menos de 10 minutos!

Com essas informações básicas, agora estamos prontos para a parte divertida. Na próxima seção, você aprenderá como usar o Swarmify com o Divi Builder. Em outras palavras, mostramos como adicionar um vídeo a um layout típico do Divi Builder.

Como usar o Swarmify SmartVideo com o Divi Builder

Para a seção a seguir, você precisa instalar e ativar o plug-in SmartVideo WordPress e o Divi. Instalar e ativar o SmartVideo ou o Divi é coisa de alunos da quarta série, não esperamos que você tenha problemas.

Se você tiver o Divi e o SmartVideo prontos, vamos começar a trabalhar. Para fins de ilustração, estou trabalhando com o layout da Agência Web da Divi que se parece com isso:

Bem legal, certo? O que vou fazer é adicionar um vídeo SmartVideo logo abaixo do título principal, onde se lê " Agência de Web Design de Serviço Completo ". Veja imagem acima.

Vamos começar!

No painel de administração do WordPress, navegue até a página que deseja editar. No nosso caso, estou editando a página inicial mostrada na captura de tela acima.

Abra a página no editor como de costume. Para começar a editar a página acima no Divi Builder, basta clicar no botão Editar com o Divi Builder , conforme destacamos abaixo.

Isso carrega sua página no front-end. Em seguida, clique no botão Habilitar Visual Builder , conforme mostrado abaixo.

Em seguida, role até a seção que deseja editar. No nosso caso, estamos adicionando um SmartVideo logo abaixo do título principal na parte superior da página.

Quando você passa o mouse sobre a seção, as opções de edição aparecem. Basta clicar no ícone de mais (+) para adicionar um novo módulo:

Fazê-lo vai abrir um pop-up que permite adicionar um novo módulo Divi:

Em seguida, digite "SmartVideo" na caixa de pesquisa e clique em SmartVideo , conforme mostrado abaixo.

Depois disso, é hora de configurar seu vídeo usando a guia Configurações do SmartVideo . Como você pode ver na imagem abaixo, existem muitas opções disponíveis para você:

Em Configurações do SmartVideo , você pode:

• Escolha a fonte de vídeo - Pode ser a biblioteca de mídia do WordPress, YouTube, Vimeo ou qualquer outra fonte ( NB : Se o seu vídeo do YouTube estiver definido como privado , altere-o para não listado )
• Altere a largura e a altura do seu vídeo
• Defina um pôster personalizado para o seu vídeo (o padrão SmartVideo é o primeiro quadro do seu vídeo se você não escolher uma imagem de pôster personalizada)
• Ativar/desativar opções como Autoplay, Loop e Muted
• Ative/desative as opções, como controles de vídeo, design responsivo e reprodução de vídeo em linha para o navegador iOS Safari
• Controle o design do seu vídeo usando as opções do Divi, que incluem bordas, dimensionamento, espaçamento, filtros, sombreamento de caixa, animações e muito mais :)

Quando terminar, basta clicar no botão Salvar , conforme detalhamos abaixo:

Não se esqueça de salvar as alterações no Divi Visual Builder depois disso:

Agora, se visualizarmos nosso site de amostra no front-end, veremos o novo player de vídeo SmartVideo pronto para agitar a festa:

Para adicionar um SmartVideo em qualquer seção, basta repetir o processo. Inicie a página que deseja editar no Divi Visual Builder, clique no ícone de mais (+) para adicionar um novo módulo, escolha o módulo SmartVideo, adicione suas opções e salve suas alterações.

Tão simples quanto A, B, C!

Adicionar vídeos SmartVideo ao seu site Divi nunca foi tão fácil. Você pode esquecer tudo sobre a marca do YouTube, vídeos recomendados e links que roubam seu tráfego.

Além disso, você pode personalizar totalmente o player de vídeo SmartVideo para combinar com o estilo do seu site.

O que mais?

Se você já possui vídeos em seu site Divi, o SmartVideo os converte automaticamente assim que você configura nosso plugin.

Certifique-se de ativar Otimizar o plano de fundo e os vídeos existentes nas configurações do SmartVideo.

Como?

No painel de administração do WordPress, navegue até SmartVideo > Configurações . Em seguida, alterne Otimizar plano de fundo e vídeos existentes :

Depois disso, clique no botão Salvar configurações na parte inferior da página:

E é isso - SmartVideo converterá todos os seus vídeos existentes automaticamente.

Isso mesmo; não precisa fazer mais nada :)

Como personalizar o reprodutor de vídeo SmartVideo

Antes de chegarmos ao final, vamos abordar algumas opções para personalizar o player de vídeo SmartVideo.

Alterando a forma e a cor do player de vídeo

Por padrão, o player de vídeo SmartVideo usa um botão de reprodução hexágono amarelo. Você pode, no entanto, alterar a forma e a cor para se adequar ao seu site. Aqui está como.

No painel de administração do WordPress, clique em SmartVideo:

Quando estiver no painel do SmartVideo, clique na guia Configurações , conforme mostrado abaixo.

Na tela Configurações , role para baixo e você encontrará seções que permitem alterar a forma e a cor do botão de reprodução:

Aqui estão mais notas sobre a captura de tela acima.

1. Para alterar a forma do botão do player, escolha Padrão , Retângulo ou Círculo no menu suspenso.
2. Escolha uma cor personalizada para o botão do jogador.
3. Clique no botão Salvar configurações para salvar suas alterações.

Agora você pode aproveitar seu botão de player recém-personalizado :)

Mais opções avançadas

O SmartVideo vem com mais opções para adicionar legendas de fontes do YouTube, ativar/desativar a aceleração de upload, alternar para layouts alternativos, adicionar uma marca d'água personalizada e monitorar seus vídeos com anúncios.

Veja como encontrar as opções acima na página Configurações do SmartVideo. Para adicionar legendas de fontes do YouTube, marque a caixa mostrada abaixo e lembre-se de salvar suas configurações:

Para iniciar mais opções, role para baixo e clique em Opções avançadas , conforme destacamos abaixo.

Na seção Opções avançadas , você tem as seguintes opções:

1. Ative ou desative o método de layout alternativo , o que ajuda se você estiver enfrentando problemas de tamanho de vídeo estranho ou de tela inteira.
2. Ative ou desative a aceleração de upload se tiver problemas com uploads.
3. Defina uma marca d'água/logotipo personalizado em seu player de vídeo.
4. Adicione o URL do anúncio VAST , para que você possa vender anúncios do Adsense, Spotx, DFP e assim por diante.

Dica profissional: lembre-se sempre de clicar no botão Salvar configurações na parte inferior para salvar suas alterações.

Palavras finais

Divi é um maravilhoso tema WordPress e construtor de páginas visuais. Ele ajuda você a criar belos sites antes que o próximo cara termine um sanduíche. O processo é tão simples quanto importar um layout e personalizá-lo até cair.

A funcionalidade de arrastar e soltar torna a personalização de qualquer layout tão fácil quanto a torta. Você não precisa de habilidades de codificação, além de editar seu site no front-end, vendo suas alterações entrarem em vigor em tempo real.

Se você usa vídeos em seu site, o SmartVideo ajuda você a fornecer experiências de vídeo profissionais, rápidas e sem buffer em seu site. Mesmo se você hospedar seus vídeos no YouTube ou em outro lugar, nosso player de vídeo organizado elimina marcas e links de terceiros.

Divi + SmartVideo é uma combinação vencedora. Em suas mãos, agora você tem a combinação perfeita para criar sites rapidamente e oferecer experiências de vídeo incomparáveis ​​aos visitantes do seu site ou clientes de web design.

Além disso, não temos limites de largura de banda ou armazenamento como outros serviços, o que significa que você pode hospedar vídeos ilimitados a preços que cabem no bolso :) Experimente o Divi + SmartVideo hoje e desfrute de vídeos rápidos e de alta qualidade sem suar a camisa.

Deixe-nos saber como vai. Feliz construção!