CriarSite.Online
Login

Categoria: Tutorial

  • Recursos do formulário de contato DIVI

    Recursos do formulário de contato DIVI

    O novo módulo de formulário de contato com mais opções de entrada, lógica condicional e validação de campo

    O novo e melhorado módulo de formulário de contato

    Icon

    Hoje, estamos anunciando uma grande atualização para o módulo de formulário de contato Divi, incluindo novos tipos de campo, mais opções de personalização, validação de campo e lógica condicional.

    Hoje é um grande dia para o módulo de formulário de contato Divi. Esta nova atualização leva o que era um construtor de formas simples e transforma isso em algo muito mais avançado e cheio de possibilidades. Nós adicionamos mais tipos de entrada, mais customizabilidade, regras de validação de campo e lógica condicional. É uma grande atualização que realmente leva o módulo para o próximo nível.

    Novos tipos de entrada

    Icon

    O módulo de formulário de contato agora vem com todos os tipos de entrada que você precisa, incluindo caixas de seleção, seleção de pastas e botões de rádio.

    O módulo de formulário de contato agora contém todos os tipos de entrada que você precisa. Incluindo seleção de dropdowns, caixas de seleção e botões de rádio. E a nova interface facilita a gestão de itens secundários dentro desses novos tipos de campo. Adicione e subtraia o menu suspenso e os itens de rádio com facilidade. E até mesmo escolha quais itens devem ser pré-selecionados.

    Caixas de verificação

    Checkbox

    O módulo de formulário de contato agora aceita caixas de seleção. Quando você cria um novo campo dentro do módulo do formulário de contato. Você verá as caixas de seleção como uma opção dentro do menu de seleção do tipo de entrada. Checkboxes são uma ótima maneira de obter informações rapidamente de seus visitantes. Você também pode optar por fazer uma caixa de seleção “necessária”. O que é ótimo para garantir que as pessoas concordem com seus Termos de Serviço ou Política de Privacidade antes de enviar suas informações.

    Selecione Dropdowns

    Dropdowns

    O módulo de formulário de contato agora oferece suporte a menus suspensos selecionados. Quando você cria um novo campo dentro do módulo do formulário de contato. Você verá os menus suspensos selecionados como uma opção dentro do menu de seleção do tipo de entrada. Se a informação que você está solicitando tiver um conjunto fixo de respostas possíveis. Ou se você quiser limitar a resposta a um conjunto fixo de valores, usar menus suspensos pode fornecer resultados superiores. Eles são fáceis de usar e eles eliminam a chance de erro do usuário.

    Botões do rádio

    Radio buttons

    O módulo de formulário de contato agora oferece suporte a botões de rádio. Quando você cria um novo campo dentro do módulo do formulário de contato, você verá os botões de opção como uma opção dentro do menu de seleção do tipo de entrada. Os botões de rádio funcionam da mesma forma que as opções de seleção. Permitindo que o usuário escolha uma opção desta lista. Se você estiver trabalhando com uma pequena lista de opções. Os botões de rádio requerem menos interação do que selecionar menus suspensos. Pois todas as opções estão visíveis sem ter que clicar no menu secundário.

    Fácil gestão de Sub Item

    Sub item management

    O módulo de formulário de contato atualizado vem com uma nova interface. Para gerenciar itens secundários dentro do botão de opção e selecionar os tipos de entrada de lista suspensa. É fácil adicionar e subtrair itens diretamente na janela de configurações do formulário de contato. Você também pode escolher se uma caixa de seleção ou botão de rádio deve ser pré-selecionado.

    Lógica Condicional

    Conditional Logic

    Hoje estamos apresentando um sistema de lógica condicional abrangente. Que permite que você exiba e esconda os campos com base na informação que os visitantes colocam no seu formulário.

    O meu novo recurso favorito é o sistema de lógica condicional. Nós implementamos opções de lógica condicional no módulo de formulário de contato que permitem que você exiba e esconda os campos com base na informação que seus visitantes colocam no formulário. Por exemplo, você pode criar um formulário dinâmico de cotação de design web usando lógica condicional que exiba campos adicionais. Quando os usuários selecionam certos pacotes de design web. Se o visitante escolher a opção eCommerce, exiba automaticamente campos adicionais para solicitar mais informações sobre seus negócios. O sistema de lógica condicional é muito robusto e permite misturar e combinar várias regras para criar qualquer combinação que possa imaginar.

    Criar formulários dinâmicos

    Há tantas maneiras criativas que a lógica condicional pode ser usada para criar formas dinâmicas que se adaptem às informações do visitante. Permitindo capturar dados relevantes de diferentes tipos de usuários. À medida que os visitantes preenchem o formulário de contato, muda-se automaticamente com base nas regras que você forneceu.

    Dynamics forms

    IU de lógica condicional

    A nova interface UI de lógica condicional é super fácil de usar. Depois de habilitar a lógica condicional para um determinado campo. Você pode adicionar qualquer número de regras que determinarão quando esse campo for exibido. Adicione, subtraia e combine conjuntos de regras complexas diretamente da janela de configurações do Divi Builder.

    conditional UI

    As regras

    O sistema de lógica condicional suporta vários tipos de regras. Cada um dos quais permite determinar uma partida com base em critérios diferentes. Cada regra tem várias aplicações diferentes que podem ser usadas para personalizar seu formulário.

    Rules

    Veja as Regras

    • Igual: esta regra corresponde quando a informação que um visitante coloca em um campo específico é uma correspondência exata com o valor que você especifica. Por exemplo, se você perguntar a um cliente qual o tipo de site que eles precisam, e eles selecionam “eCommerce”, você pode exibir campos adicionais que solicitam mais informações sobre os tipos de produtos que eles vendem.
    • Não é igual – Este é o oposto da regra “Igual”. Isso exibirá um campo quando o valor adicionado a um campo específico não corresponde ao valor que você especificou.
    • Contém – Esta regra corresponderá quando os dados inseridos contiverem o valor que você especificou. Isso é diferente de “Igual” porque não requer uma matemática exata. Por exemplo, você pode pedir o endereço comercial do visitante e, se o valor que eles inserem contém “Califórnia” ou “CA”, você pode exibir campos adicionais que solicitam mais informações sobre política local e regulamentação comercial para a Califórnia.
    • Não contém – Este é o oposto da regra “Contém” e exibirá um campo quando o valor inserido não contiver o valor que você especificou. Por exemplo, digamos que existem alguns regulamentos do governo local em todo os Estados Unidos que afetam sua capacidade de atender certos clientes. Esses regulamentos existem em todos os estados, exceto Oregon e Washington. Você pode configurar uma regra que apenas exiba campos adicionais quando o endereço fornecido pelo cliente não contém “Oregon”, “OU”, “Washington” ou “WA”.

    Regras para numéricos

    • É Maior que – Esta opção funciona com todos os valores numéricos. Por exemplo, você pode perguntar quantos sites o pessoal precisa ser criado. Se eles precisam de mais de 10 sites, talvez seja necessário exibir mais campos para solicitar informações adicionais para fornecer uma cota
  • Como adicionar ícones extras de redes sociais no topo e rodapé com Divi

    Como adicionar ícones extras de redes sociais no topo e rodapé com Divi

    O editor de site Divi oferece por padrão quatro opções de redes sociais (Facebook, Twitter, Google+ e RSS) para inserir no topo e no rodapé do site. Porém em determinados casos, há a necessidade de incluir outras mídias sociais. Abaixo, você irá aprender como ativar ícones extras de mídias sociais no topo e rodapé do site.

    Para iniciar é necessário instalar o tema filho da CriarSite.Online.

    Após instalado o tema Filho Divi.CriarSite, navegue no menu à esquerda até a aba Divi e clique em Opções de temas.

    Habilitando os ícones

    Desça a página até encontrar as opções para habilitar/desabilitar os novos ícones. Além dos quatros ícones citados no começo deste post, o tema filho inclui as seguintes redes sociais: Youtube, Instagram, Pinterest, Tumblr, Dribbble, Vimeo, LinkedIn, MySpace, Skype, Flickr.

    Após definido quais ícones irão aparecer no site, desça a janela até encontrar os campos para inserir o link com o perfil da rede social escolhida. Após inserido os links, desça até o final da página e clique no botão Salvar mudanças.

    Sucesso! O ícone foi adicionado no rodapé do site com o link do perfil.

    Ainda está com dúvidas? Deixe nos comentários abaixo. Nossa equipe está pronta para te ajudar.

  • Como instalar um tema filho para o DIVI

    Como instalar um tema filho para o DIVI

    Como instalar um tema filho para o DIVI

    Tema filho ou child theme, é um tema que herda as funcionalidades e estilos de outro tema, chamado de tema pai. A principal importância de utilizar um tema filho no WordPress é realizar customizações no tema sem o perigo de perder o que foi desenvolvido quando ocorrer alguma atualização no tema pai. Veja como instalar o tema filho para o Divi disponibilizado pela CriarSite.Online
    .

    Acesse a página de Downloads na área do cliente. Na lista de downloads disponíveis, clique em Tema Filho DIVI CriarSite para fazer o download do tema.

    Instale o tema filho no site

    Para instalar o tema filho, acesse a área administrativa do site. Com o cursor do mouse, vá no menu à esquerda, na aba Aparência e clique em Tema.

    No topo da janela, clique no botão Adicionar novo, e depois clique no botão Enviar tema. Escolha o arquivo que baixou no inicio do tutorial e após a instalação, ative o tema.


    Pronto! O tema filho foi instalado e ativado com sucesso.
    Vale ressaltar que é necessário manter instalado o tema Divi (tema pai) para que não ocorra alguma tipo de erro no site.

    Agora você pode personalizar o tema de acordo com a identidade do site. Navegue no menu à esquerda, na aba Aparência clique em Editor. Insira o CSS na linha indicada pelo cursor do mouse na imagem ao lado. Não altere alguma informação acima da linha 13 para que não ocorra algum tipo de erro no site.

    Após inserir o CSS, clique no botão Atualizar arquivo para salvar as alterações realizadas.

    Veja também como ativar ícones de redes sociais no topo e rodapé do site com o tema filho.

    Ainda está com dúvidas? Deixe nos comentários abaixo. Nossa equipe está pronta para te ajudar.

  • Como configurar módulo de Loja do Divi

    Como configurar módulo de Loja do Divi

    Neste tutorial é possível conferir como adicionar e personalizar o módulo Loja do editor de site Divi. O módulo foi criado para ser utilizado em uma loja virtual desenvolvido com Woocommerce. Com esse recurso, você pode personalizar a visualização dos produtos da loja virtual.

    Configurar módulo loja

    Com o editor de site habilitado, insira um novo módulo e pesquise por Loja e clique no item correspondente como mostra na imagem.

    Após selecionar o módulo, os produtos irão carregar automáticamente (se já estiver inseridos na loja). Na janela de configuração, é possível personalizar a apresentação dos produtos.

    É possível filtrar produtos na opção Tipo, definir a quantidade de produtos na opção Contagem de produtos, dentre outras opções que o módulo oferece.

    Configurar módulo loja

    Configurar módulo loja

    Após configurar a apresentação dos produtos. Com o cursor do mouse, clique no botão verde na parte inferior direita da janela, para salvar as alterações. Como mostrado na imagem.

    E logo após, clique no botão Salvar no canto inferior direito para salvar as alterações da página.

    Pronto. O módulo está configurado. Agora a loja virtual está personalizada da forma que deseja.

    Configurar módulo loja

    Confira também nosso vídeo explicativo

    Se ainda estiver com alguma dúvida, deixe nos comentários abaixo. Nossa equipe está pronta para te responder.

  • Como criar um logotipo animado com SVG, CSS e DIVI

    Como criar um logotipo animado com SVG, CSS e DIVI

    O uso seletivo de animações bem projetadas mostrou-se para melhorar a experiência do usuário. E embora a web esteja passando lentamente para o HTML5 para animações na web, seu uso também causa algumas complicações.

    Os gráficos vetoriais escaláveis ​​(ou SVGs) fornecem uma alternativa acessível, com uma ótima API, juntamente com muitos outros benefícios. E podem ser animados com um pouco de uso criativo de folhas de estilo em cascata.

    No decorrer deste artigo, vamos aprofundar todos os outros benefícios do uso de SVGs. E ensinar-lhe exatamente como usá-los em combinação com o CSS para criar logotipos animados.

    Por que os gráficos vetoriais escaláveis ​​são tão legais

    Apesar do que o nome indica, Scalable Vector Graphics não é um tipo de formato de arquivo de imagem. É uma linguagem de marcação XML (bem como XHTML ou XOXO ). Esta linguagem de marcação específica é usada para criar imagens bidimensionais baseadas em vetores. Que podem ser ampliadas ou baixas sem perda de resolução.

    Para colocar isso em perspectiva, vamos dar uma olhada no código por trás de um arquivo SVG simples. Antes de passar para falar sobre mais das propriedades desse formato.

    codigo-1

    Como trabalhar com SVGs

    Como mencionamos anteriormente, você pode mergulhar em SVGs com suas próprias mãos, se isso é do seu agrado. Embora seja um método completamente válido, existem excelentes ferramentas disponíveis para criar e manipular diretamente SVGs. O que…

    codigo

    codigo-2

    Embora o arquivo SVG original tenha sido bastante compacto para começar (0.5kB), o processo de otimização foi capaz de reduzir seu tamanho de arquivo em 12.5% ​​(para 0.4kB). Em imagens mais complexas, você notará reduções ainda mais extrem…

    Criando um logotipo animado com SVG e CSS

    Como mencionamos ao falar sobre o que torna os SVGs tão legal, eles vêm com alguns efeitos gráficos incorporados que incluem recursos de animação. Na verdade, o SVG possui uma sintaxe nativa exclusivamente para animações, denominada

    codigo-3

    codigo-4

    adobe-logo-hover-animation

    Conclusão

    • Escolha uma ferramenta de editor gráfico compatível.
    • Lembre-se de sempre otimizar seu código SVG.
    • Tenha em mente que você só pode implementar animações “simples” usando esta técnica.

  • Como alterar uma página com o Divi

    Como alterar uma página com o Divi

    Veja como alterar uma página criada com WordPress e Divi. O editor possibilita fazer alterações na página de forma simples e rápida. Você também pode conferir o resultado em tempo real.

  • Como configurar métodos de entregas na loja virtual

    Como configurar métodos de entregas na loja virtual


    Após instalado o plugin do Woocommerce, é necessário configurar a área de entrega, essa configuração é necessária para expecificar as regiões e métodos de entrega que a loja virtual disponibiliza. Confira abaixo como configurar.

    Veja como instalar o Woocommerce.

    Na área administrativa, com o curso do mouse, vá no menu à esquerda, na aba Woocommerce e cliquem em Configurações.

    Veja como acessar a área administrativa do site.

    Após carregar a página de Configurações, clique na opção Entrega no topo da janela.

    Clique no botão Adicionar área de entrega.

    Em Nome da área, defina um nome de identificação do tipo de entrega. Após definir um nome, é necessário escolher a região de entrega na opção Regiões da área. Nessa opção é possível limitar por CEP’s específicos.

    Após definido a região de entrega, clique no botão Adicionar método de entrega.

    Escolha o método de entrega

    Por padrão, o Woocommerce vem com as seguintes opções: Taxa fixa; Frete grátis e Retirar no local. Para adicionar os serviços oferecidos pelos Correios, é necessário adicionar a extensão dos Correios ao Woocommerce.

    Após escolher o método de entrega, é necessário fazer a configuração, como valores, cep de origem, etc. Utilizaremos neste exemplo o métodos PAC dos Correios. Para que o plugin faça o cálculo correto do frete para o cliente é necessário especificar o CEP de origem.

    Também é possível definir um tamanho mínimo padrão para os pacotes de entrega, após fazer as alterações clique no botão Salvar alterações.

    Método de entrega configurado com sucesso! É possível configurar diversos métodos de entrega em uma mesma área de entrega. Dúvidas? Deixe nos comentários abaixo que teremos o prazer de responder.


  • URL amigavel

    A URL amigável é como os sistemas de busca vão localizar o seu site. Também é uma forma do visitante não olhar para coisas estranhas, complicadas de entender na URL de um link/navegador.

    Os sistemas de busca aumentam a pontuação dessas páginas quando o endereço é relevante. E contem palavras que fazem parte do título e/ou conteúdo da página.

    Em primeiro lugar, é necessário estar na área administrativa do seu site.

    Veja como acessar a área administrativa do seu site.

    Além disso no menu à esquerda do WordPress, vá com o mouse na aba Configurações e clique em Links permanentes.

    A configuração Padrão mostra na URL o IP do post. O que por ser um código não facilita a localização pelos sistemas de busca e não é de facil interpretação pelos visitantes.

    Já na configuração Dia e Nome a aparência da URL se torna um pouco mais fácil de ser localizada pelos sistemas.

    Uma configuração de fácil localização pelos serviços de busca e de interpretação dos visitantes é pelo Nome do post.

    Você também tem a opção de mudar a URL em cada post/pagina que for criar. Aprenda como fazer esse tipo de alteração vendo o restante do tutorial logo abaixo.

    Em Posts no menu a esquerda, há opção editar ou adicionar novo. Você tem logo abaixo do título do seu post, o Link Permanente da página. Portanto selecione o botão Editar para fazer as alterações.

    Coloque o título do seu post (sem letra maiúscula, sem acentuação e separado por hífen), essa é uma das formas mais fáceis de um post ser localizado. Para finalizar clique em OK.

    Se ainda continua com dúvidas ou dificuldades para ativar todos os recursos e usufruir do serviço entre em contato.

  • Como acessar os arquivos do site via FTP

    Frequentemente precisamos atualizar os arquivos do site, um plugin ou enviar um pacote de imagens. Uma forma rápida e segura para fazer isso é via FTP (File Transfer Protocol ou Protocolo de Transferência de Arquivo) e a ferramenta que indicamos aqui é o Filezilla. Embora possa ser utilizado por webmasters e webdesigners mais experientes, o FileZilla tem um grande apelo para os novatos, pois é fácil de usar.

    Depois de fazer o download do Filezilla abra-o e então clique no ícone superior a esquerda como indicado na imagem.

    Clique com o mouse no botão Novo Site

    Nomeie a nova entrada. É indicado colocar o domínio do site para uma melhor organização. Na opção Host digite linknacional.com.br Na opção Tipo de logon selecione a opção Normal. Os dados de Usuário e Senha são os mesmos dados de acesso do cPanel, enviados para o e-mail após a finalização do pedido.

    No lado esquerdo você verá os arquivos do seu computador (Endereço local) e do lado direito os arquivos da hospedagem (Endereço remoto). Na lista de pastas e arquivos da hospedagem, procure pela pasta public_html como indicado na imagem. Nessa pasta está todos os arquivos do site. Você pode baixar para seu computador uma pasta ou arquivo da hospedagem ao clicar e arrastar da janela do Endereço remoto para a janela do Endereço local e, vice e versa, para subir um arquivo para o site.

    Entre em contato e tire suas dúvidas

    Se ainda continua com dúvidas ou dificuldades para ativar todos os recursos e usufruir do serviço entre em contato.

    Entre em contato

  • Como colocar vídeo de background

    Como colocar vídeo de background

    Abaixo segue o passo a passo de como inserir um vídeo de background usando o editor Divi.

    Para isto, é necessário estar dentro da área administrativa do seu site

    Explorando o Módulo de Vídeo

    O módulo de vídeo permite que você incorpore vídeos em sua página de qualquer fonte. A documentação do Divi no módulo de vídeo explica todos os recursos e como adicionar um vídeo de background à sua página.

    No menu à esquerda do WordPress, vá com o mouse na aba Página e clique em Adicionar nova.

    Digite o nome da página no campo indicado, depois clique no botão Usar Construtor Divi.

    Clique em Usar Visual Builder para editar a sua página.

    Após abrir o editor Divi, vá até o centro da tela na parte inferior, na opção Expandir Configurações (botão roxo) e clique em Abrir da Biblioteca ( + ), selecione um layout pré definido para criação de sua página.

    Definido o layout de sua preferência selecione a opção Configuração de Módulo

    Uma vez selecionada a opção de configuração de módulo uma pequena tela aparecerá, onde você deverá clicar no botão de configuração para alterar e inserir seu vídeo como background.

    Após entrar nas configurações do seu módulo, procure pela opção Plano de Fundo, selecionando a última opção de vídeo e clique para inseri-lo.

    Do mesmo modo, após inserir seu vídeo de background selecione a opção Salvar (botão verde) e de continuidade na criação de seu site.

    Saiba onde encontrar vídeos gratuítos para seu background