A melhor maneira de adicionar uma fonte externa no seu site

As fontes disponíveis no WordPress são as Google Fonts. Porém o que fazer quando o layout pede uma fonte externa? Apesar de existir mais de uma maneira, a seguir você encontrará a mais eficiente para otimizar o seu site.

Porque essa é a melhor maneira

Embora esse não seja o único modo, ele é o melhor para você e o seu site. Mas por quê?

Por exemplo: se adicionar os arquivos da fonte no tema, não poderá continuar usando se precisar trocá-lo. Além disso, o melhor lugar para colocar sua fonte é no servidor do site já que o navegador baixa a fonte diretamente de lá. Isso significa não só que você pode trocar de tema, mas também que a fonte carregará mais rápido.

Também, se seguir devidamente o passo a passo, além de eficiente é uma maneira rápida e fácil.

Plugins

Você precisará de três plugins para adicionar a fonte externa. O File Manager para pegar o caminho da fonte, My Custom Funcionality Master para inserir o plugin e Elegant Custom Fonts onde adicionaremos as regras da fonte.

Passo a Passo

Por fim, agora vamos ao que realmente interessa: o passo a passo para a instalção.

1- Uma vez que tiver a fonte no seu PC ou notebook, deverá adicioná-la aos arquivos do My Custom Funcionality Master. Para fazê-lo, você só precisa extrair o arquivo .zip do plugin e colar os arquivos da fonte no seguinte local: my-custom-funcionality-master > assets > fonts. É muito importante que todas as fontes tenham seus nomes padronizados e formatos iguais. Por exemplo, se a família da fonte externa for Lato, os arquivos devem estar todos como no print abaixo (capitalize e .ttf). Depois disso, comprima o arquivo com a fonte e adicione-o ao seu site.

Arquivos da fonte

2 – Agora é a hora de instalar os outros plugins (File Manager e Elegant Custom Fonts).

3 – Ao instalar o File Manager, ele vai aparecer na barra lateral do WordPress. É só clicar que os arquivos irão aparecer. Na sequencia você deve procurar pelo seguinte caminho: wp-content > plugins > my-custom-funcionality-master > assets > fonts.

4 – Após chegar nos arquivos da fonte é só clicar com o botão direito, depois em Get info & Share. Em “Path :” você copiará o caminha da fonte a partir de /wp-content. Refaça esse processo em todos os arquivos, um a um. Uma dica interessante é que você copie e cole esse caminho, num bloco de notas por exemplo, para evitar erros e agilizar o processo.

5 – Feito isso temos a parte final e mais importante do processo. No Elegant Custom Fonts, adicione uma nova Font Family. Após colocar o nome, é hora de acrescentar a font-face. É nesse momento em que você precisa de mais atenção para que não adicione nada diferente do layout. Após escolher font-weight e font-style, o .woff URL é aquele caminho do passo 4, lembra? É só colar ele aqui. Não se esqueça de conferir se está tudo certo. Se houver uma segunda família de fonte, é só repetir o processo em uma nova Font Family.

6 – Depois de conferir e tudo estiver certo, a(s) fonte(s) irá aparecer no seu site e voilá! Você acabou de instalar uma fonte externa da melhor maneira possível!

É importante lembrar que, se algo deu errado, não precisa desanimar. Reveja o passo a passo com calma e refaça onde errou.

Se curtiu essa dica acompanhe nosso blog para muito mais!

Criando uma Option Page no seu site WordPress

Existem informações no seu site que não podem estar linkadas a páginas ou posts? Dados globais podem ser adicionados a Option Page, uma página completamente customizável que pode ajudar desenvolvedores e usuários.

O que é uma option page

A option page ou página de opções é uma página costumizável, onde os dados são salvos na tabela wp_options. Isso significa que eles são globais, ou seja, podem ser usados em qualquer parte do site, inclusive em mais de uma.

Possíveis utilidades

Ela pode ter páginas filhas e campos costumizáveis. Dessa maneira se torna uma grande aliada para mantes informações que aparecem mais de uma vez em todo o site. Assim os desenvolvedores poupam bastante tempo, tanto no desenvolvimento quanto em possíveis alterações futuras.

Mas não para por aí: com os campos costumizáveis, a página de opções também é interessante para os usuários. Muitas vezes alterações simples podem ser uma dor de cabeça para pessoas que não entendem de tecnologia, o que custa tempo (ou até dinheiro) dos desenvolvedores e do próprio cliente. Informações como número de telefone ou email que geralmente aparecem no header e footer podem ser alteradas em todo o site mudando somente na option page. Já que ela fica situada no menu do WordPress até mesmo um usuário leigo pode alterar informações sem grandes problemas.

Como obter

Vale lembrar que a página de opções não é um recurso do WordPress. Esse recurso pertence ao Advanced Custom Field (ACF), um plugin WordPress. Embora seja um plugin grátis, a option page é um recurso pago. Pode ser adquirida por meio do ACF PRO ou comprando uma licença que dá acesso a esse recurso extra.

Como usar

Atualização do ACF PRO 6.2

A versão 6.2 do ACF Pro traz uma nova funcionalidade que permite criar Option Pages sem utilizar qualquer código, e de um jeito prático bem semelhante a como se cria custom fields, confira o vídeo:

Depois de adquirido o recurso, você precisará criar a option page por meio do seu arquivo de funções php.

Para um página de funções simples, você pode adicionar:

if( function_exists('acf_add_options_page') ) {
	
	acf_add_options_page();
	
}

Para uma página de funções personalizável e/ou página filhas:

if( function_exists('acf_add_options_page') ) {
	
	acf_add_options_page(array(
		'page_title' 	=> 'Site name', //change to the client name
		'menu_title'	=> 'Site name', //change to the client name
		'menu_slug' 	=> 'site-name', //change to the client name without space and special chars
		'capability'	=> 'edit_posts',
		'redirect'		=> false,
		'position' => 2,
	));
	
	acf_add_options_sub_page(array(
		'page_title' 	=> 'Footer',
		'menu_title'	=> 'Footer',
		'parent_slug'	=> 'footer',
	));
	
	cf_add_options_sub_page(array(
		'page_title' 	=> 'Header',
		'menu_title'	=> 'Footer',
		'parent_slug'	=> 'theme-general-settings',
	));
	
}

Neste caso, as páginas filhas são header e footer, porém você pode adaptar como preferir.

Campos da option page

Outra dica para atingir todo o potencial da Option page são os custom fields. Também são um recurso do ACF, entretanto boa parte desses campos são gratuitos. É desse modo que as informações podem ser facilmente alteradas pelo cliente.

Já para usar essa informação no seu template, você pode optar por qualquer função (get_field, the_field…) se aliada a um segundo parâmetro, como no exemplo:

<?php the_field('header_title', 'option'); ?>

Você também pode optar pela opção insert dynamic data > advanced custom field que aparecem em alguns pagebuilders e temas.

Se gostou desse post, fique ligado no nosso blog para não perder mais dicas sobre wordpres, social media e muito mais!

Como estilizar uma scrollbar usando CSS

A scrollbar ou barra de rolagem facilita a visualização do usuário, entretanto pode interferir no design do seu site. Para que isso não ocorra podemos aderir a estilização por meio do CSS.

Como adicionar a scrollbar?

Para adicioná-la na vertical e horizontal podemos utilizar: 

.classe {overflow:scroll}

Para aparecer só na vertical ou só na horizontal, respectivamente temos:

.classe {overflow-y:scroll}

.classe {overflow-x:scroll}

Ainda podemos adicionar uma altura que determine se o scroll aparecerá ou não. Por exemplo, se a altura definida for de 300px, o scroll só funcionará a partir de 301px.

Estilizando a scrollbar

A barra de rolagem possui classes que podem torná-la formatável. Para uma scrollbar comum podemos utilizar estilos simples, mas que já fazem total diferença.

Utilizando o CSS abaixo podemos resolver o problema:

.classe::-webkit-scrollbar-track{
	/*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);*/
	border-radius:0;
	background-color: #D0D4CE;
}

.classe::-webkit-scrollbar{
	width: 6px;
	background-color: #D0D4CE;
}

.classe::-webkit-scrollbar-thumb{
	border-radius:0;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #71806B;
}

Este CSS corresponde a Scrollbar representada abaixo:

estilizar uma scrollbar

Onde: 

.classe se refere a classe onde a scrollbar está. No print acima, seria a classe da div branca, a div mãe do conteúdo.

-webkit-scrollbar-track  a alça fixa da scrollbar

-webkit-scrollbar  refere-se a scrollbar inteira

-webkit-scrollbar-thumb  é a alça de rolagem móvel

Outras classes

Observe que, no print a scrollbar é simples, porém a formatação do CSS é versátil e útil. Além disso, existem outras classes que também podem ser úteis:

::-webkit-scrollbar-button se refere as setas da scrollbar comum

::-webkit-scrollbar-track-piece é a parte da alça fixa que não é coberta pela alça móvel

::-webkit-scrollbar-corner canto inferior onde as barras de rolagem y e x se encontram

::-webkit-resizer redimensionamento da box que aparece no canto inferior

Todas essas classes podem ser usadas em conjunto, de maneira que sua barra de rolagem seja completamente formatável.

Gostou das dicas do post? Acompanhe nosso blog para não perder mais desse conteúdo, além de ter acesso a muito mais.

Ferramentas indispensáveis para ser mais produtivo

A tecnologia e principalmente a internet mudaram totalmente o modo como qualquer tipo de negócio funciona, e uso  diariamente 6 ferramentas indispensáveis para ser mais produtivo.

Existem softwares, apps e sites que facilitam muito a nossa vida, e ser mais produtivo tem um significado importante para mim que é ter mais tempo fora do trabalho.

Sobre as ferramentas, existem outras, claro, mas vou apresentar as que entendo não podem faltar pois além de facilitar a administração e marketing de uma pequena empresa, vão otimizar o tempo, que sempre é pouco, para realizar de forma simples as principais tarefas.

– você pode se interessar: Não participe da guerra pelo preço mais baixo

Vamos para a lista:

Todoist

No dia a dia são muitas e muitas tarefas para ser executadas, e se assim como eu você precisa lidar com muitas pessoas ao mesmo tempo, bem, esquecer algo não é incomum.

Tentei várias ferramentas, tabelas do Excel com checkbox, utilizar apps no smartphone, o calendário do Google, muitos mesmo.

Então encontrei o Todoist, é muito simples de usar. Cadastrar tarefas separar por projeto (ou clientes, faço dessa forma).

Cada projeto pode ter subprojetos, que podem também ter subprojetos. É ótimo, fica tudo organizado por horários, lembretes por e-mail, no navegador e smartphone (caso instale o app).

E o melhor, a versão grátis tem muitos recursos, e sinceramente, caso não precise gerenciar uma equipe é dispensável a versão paga. A não ser que queira integrar com outros serviços, cadastrar tarefas por e-mail, comentar as tarefas e incluir anexos.

Uso na MDGA para lembrar de tudo, cadastrar os trabalhos que são recorrentes, e essa é uma das partes que mais gosto, dá pra fazer algo assim: “fazer tal coisa todo dia útil às 10:00” e pronto, as tarefas são criadas para a semana toda nesse horário.

Acesse aqui o Todoist

Quickbooks Zero Paper

O básico de qualquer negócio é gerar lucro. Ganhar mais do que se gasta. O Quickbooks, que funciona tanto no desktop como em um aplicativo, ajuda a controlar despesas e recebimentos.

Utilizo a versão gratuita e ela já me serve muito bem. Ideal para fazer os lançamentos de recebimentos e pagamentos, tudo é categorizado e gera relatórios a partir disso.

A versão paga custa R$19,90 e é possível integrar com uma conta bancária e gerar até boletos. Mas a opção free já disponibiliza muitos recursos, como gerar recibos, cadastrar pagamentos recorrentes, parcelados, etc.

Há uma série de notificações para não esquecer de fazer pagamentos ou deixar de receber de clientes. Os gráficos são excelentes, além de poder utilizar de qualquer lugar que tenha internet.

Acesse aqui o Quickbooks Zero Paper.

 Trello

É uma ferramenta excelente para organização de tarefas. Funciona arrastando e soltando quadros, ou cards como a ferramenta chama.

Por exemplo, se há uma série de tarefas para fazer dá para criar cards para cada atividade e ir colocando em colunas como: A fazer, executando, finalizado.

Fica tudo muito visual o que contribui para saber exatamente como cada etapa do seu trabalho está. Se seu negócio não lida com muitas pessoas ou tarefas pode parecer desnecessário, mas se o seu caso é de muitas tarefas e trabalho em equipe o Trello e ferramentas semelhantes são indispensáveis.

Acesse aqui o Trello.

Dropbox e Google Drive

O compartilhamento de arquivos é uma realidade. Além de ser seguro manter um arquivo salvo em seu computador e na nuvem.

Além disso, imagine que precisa enviar um arquivo grande. Serviços de e-mail como o Gmail permitem anexos de até 25mb, ao colocar no Dropbox ou Google Drive basta enviar um link para quem precisa receber o arquivo, ela faz o download e pronto.

A nuvem em muitos casos substitui a necessidade de uma rede interna para compartilhamento de arquivos, e é muito útil quando o trabalho é remoto.

Aqui na MDGA, quando o trabalho é em equipe ou precisamos enviar muitos arquivos tudo é feito pelo Google Drive, cada cliente tem a sua pasta e os compartilhamentos são por lá.

Ainda de gerar um backup de todos os arquivos, o que é essencial hoje!

Acesse aqui o Dropbox e Google Drive

Mlabs

Essa é a única ferramenta que não é gratuita. Mas ela é bem em conta e extremamente útil para a estratégia de redes sociais do seu negócio.

Toda empresa utiliza o Facebook e o Instagram. No segundo não é possível fazer agendamento de postagens, o Mlabs permite isso, de uma vez agendar todos os posts para as redes sociais que utiliza.

Além de centralizar tudo em um local, ele permite acompanhar concorrentes e gerar relatórios valiosos com os melhores dias e horários para cada rede social que sua empresa utiliza.

Nosso trabalho para mídias sociais é feito através do Mlabs.

Acesse aqui o Mlbas.

-20 ideias de conteúdo para redes sociais

-Transformar perfil em Fanpage no Facebook

NitroNews

Bem, se sua empresa tem cadastro de clientes há a possibilidade de captar e-mails. Claro, deixe claro que serão enviados e-mails com promoções e notícias. NUNCA compre lista de e-mails.

O NitroNews é uma ferramenta brasileira para fazer envios, até 5 mil é de graça. Então vamos supor que você tem 1 mil e-mails, poderá fazer 5 envios por mês.

A ferramenta conta com diversos tutoriais e é bem intuitiva, não é preciso saber programar, HTML ou CSS para criar os e-mails, desde que seja algo mais simples.

Pode parecer ultrapassado, mas o e-mail marketing ainda é uma das principais ferramentas de vendas na internet, ou você acha que essas grandes lojas enchem você de e-mail atoa?

Acesse aqui o NitroNews.

Bônus: Google Forms

Faça pesquisas! Como saber o que seus clientes pensam sobre sua empresa ou produtos se não pergunta para eles?

Então, aproveite essa ferramenta do Google, crie a pesquisa e envie por email, pelo Messenger do Facebook. Não importa, as informações obtidas serão extremamente valiosas.

Informação é poder, e a opinião e reação do seu público-alvo não dá para achar por aí na internet. É preciso perguntar, analisar e criar soluções de lá.

Acesse aqui o Google Form.

Por que acho essas ferramentas indispensáveis para ser mais produtivo?

Aqui na MDGA funciona muito bem, cada uma tem a suas peculiaridades, mas ajudam a ser mais rápido no trabalho sem perder a qualidade do serviço.

São muitos clientes e contas redes sociais para administrar, então centralizar as tarefas é uma forma de ter uma visão rápida sobre tudo o que está acontecendo e precisa ser feito.

E como todas elas funcionam na nuvem dá para acessar de qualquer lugar e dispositivo.

Além disso, conseguir trabalhar de forma mais produtiva e focada durante as 8 horas (ou 6 dependendo da sua jornada) evita ter que passar do horário. Trabalhar é bom, mas o descanso e se desligar disso tudo é necessário.