Primeiramente, criar uma página de “Em Breve” é essencial para manter os usuários engajados enquanto o site principal está em desenvolvimento. Usar o Bootstrap 4 para codificar essa página é uma escolha prática, uma vez que ele oferece recursos de design modernos e responsivos. Neste artigo, vou te guiar no processo de codificação, abordando cada etapa para você criar uma página de “Em Breve” atrativa e funcional. Vamos explorar desde o básico do layout até as funcionalidades extras que tornam a experiência do usuário mais rica.
O que é uma página de “Em Breve” e por que criá-la?
Antes de mais nada, uma página de “Em Breve” é uma espécie de vitrine temporária para sites em construção. Ela avisa aos visitantes que o conteúdo ainda está sendo preparado, mas também serve para captar leads e gerar curiosidade sobre o lançamento. Ao codificar uma página de “Em Breve” em Bootstrap 4, você garante um design responsivo e moderno, essencial para causar uma boa primeira impressão.
Vantagens de usar Bootstrap 4 para páginas de “Em Breve”
A princípio, utilizar Bootstrap 4 permite que você desenvolva uma página responsiva com facilidade. Além disso, ele fornece componentes prontos como botões, formulários e grids, otimizando o tempo de desenvolvimento. Outra vantagem é a adaptação automática para diferentes telas, ideal para usuários que acessam via dispositivos móveis.
Estrutura básica de uma página de “Em Breve” em Bootstrap 4
Começando com o HTML e a estrutura de diretórios
Primeiramente, crie um novo arquivo HTML. Ele será a base da sua página. Abaixo está um exemplo de estrutura básica para codificar sua página de “Em Breve” em Bootstrap 4.
htmlCopiar código<span class="hljs-meta" data-uipath_custom_id_23_4_59_15687="374"><!DOCTYPE <span class="hljs-keyword" data-uipath_custom_id_23_4_59_15687="375">html</span>></span>
<span class="hljs-tag" data-uipath_custom_id_23_4_59_15687="376"><<span class="hljs-name" data-uipath_custom_id_23_4_59_15687="377">html</span> <span class="hljs-attr" data-uipath_custom_id_23_4_59_15687="378">lang</span>=<span class="hljs-string" data-uipath_custom_id_23_4_59_15687="379">"pt-br"</span>></span>
<span class="hljs-tag" data-uipath_custom_id_23_4_59_15687="380"><<span class="hljs-name" data-uipath_custom_id_23_4_59_15687="381">head</span>></span>
<span class="hljs-tag" data-uipath_custom_id_23_4_59_15687="382"><<span class="hljs-name" data-uipath_custom_id_23_4_59_15687="383">meta</span> <span class="hljs-attr" data-uipath_custom_id_23_4_59_15687="384">charset</span>=<span class="hljs-string" data-uipath_custom_id_23_4_59_15687="385">"UTF-8"</span>></span>
<span class="hljs-tag" data-uipath_custom_id_23_4_59_15687="386"><<span class="hljs-name" data-uipath_custom_id_23_4_59_15687="387">meta</span> <span class="hljs-attr" data-uipath_custom_id_23_4_59_15687="388">name</span>=<span class="hljs-string" data-uipath_custom_id_23_4_59_15687="389">"viewport"</span> <span class="hljs-attr" data-uipath_custom_id_23_4_59_15687="390">content</span>=<span class="hljs-string" data-uipath_custom_id_23_4_59_15687="391">"width=device-width, initial-scale=1.0"</span>></span>
<span class="hljs-tag" data-uipath_custom_id_23_4_59_15687="392"><<span class="hljs-name" data-uipath_custom_id_23_4_59_15687="393">title</span>></span>Em Breve<span class="hljs-tag" data-uipath_custom_id_23_4_59_15687="394"></<span class="hljs-name" data-uipath_custom_id_23_4_59_15687="395">title</span>></span>
<span class="hljs-tag" data-uipath_custom_id_23_4_59_15687="396"><<span class="hljs-name" data-uipath_custom_id_23_4_59_15687="397">link</span> <span class="hljs-attr" data-uipath_custom_id_23_4_59_15687="398">href</span>=<span class="hljs-string" data-uipath_custom_id_23_4_59_15687="399">"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"</span> <span class="hljs-attr" data-uipath_custom_id_23_4_59_15687="400">rel</span>=<span class="hljs-string" data-uipath_custom_id_23_4_59_15687="401">"stylesheet"</span>></span>
<span class="hljs-tag" data-uipath_custom_id_23_4_59_15687="402"></<span class="hljs-name" data-uipath_custom_id_23_4_59_15687="403">head</span>></span>
<span class="hljs-tag" data-uipath_custom_id_23_4_59_15687="404"><<span class="hljs-name" data-uipath_custom_id_23_4_59_15687="405">body</span>></span>
<span class="hljs-comment" data-uipath_custom_id_23_4_59_15687="406"><!-- Conteúdo aqui --></span>
<span class="hljs-tag" data-uipath_custom_id_23_4_59_15687="407"></<span class="hljs-name" data-uipath_custom_id_23_4_59_15687="408">body</span>></span>
<span class="hljs-tag" data-uipath_custom_id_23_4_59_15687="409"></<span class="hljs-name" data-uipath_custom_id_23_4_59_15687="410">html</span>></span>
Nesse código inicial, incluímos o CSS do Bootstrap diretamente do CDN, facilitando o carregamento e reduzindo o trabalho de configuração. Este é o ponto de partida para codificar uma página de “Em Breve” em Bootstrap 4.
Configurando o cabeçalho e a mensagem principal
Agora, vamos adicionar o cabeçalho com uma mensagem chamativa que informe o status do site. Esse cabeçalho é essencial para informar ao usuário sobre o que esperar do site.
htmlCopiar código<span class="hljs-tag" data-uipath_custom_id_23_4_59_15687="426"><<span class="hljs-name" data-uipath_custom_id_23_4_59_15687="427">div</span> <span class="hljs-attr" data-uipath_custom_id_23_4_59_15687="428">class</span>=<span class="hljs-string" data-uipath_custom_id_23_4_59_15687="429">"container text-center"</span>></span>
<span class="hljs-tag" data-uipath_custom_id_23_4_59_15687="430"><<span class="hljs-name" data-uipath_custom_id_23_4_59_15687="431">h1</span>></span>Em Breve<span class="hljs-tag" data-uipath_custom_id_23_4_59_15687="432"></<span class="hljs-name" data-uipath_custom_id_23_4_59_15687="433">h1</span>></span>
<span class="hljs-tag" data-uipath_custom_id_23_4_59_15687="434"><<span class="hljs-name" data-uipath_custom_id_23_4_59_15687="435">p</span>></span>Estamos trabalhando para oferecer algo incrível. Fique ligado!<span class="hljs-tag" data-uipath_custom_id_23_4_59_15687="436"></<span class="hljs-name" data-uipath_custom_id_23_4_59_15687="437">p</span>></span>
<span class="hljs-tag" data-uipath_custom_id_23_4_59_15687="438"></<span class="hljs-name" data-uipath_custom_id_23_4_59_15687="439">div</span>></span>
Nesse bloco, o uso de classes de alinhamento central como text-center ajuda a posicionar o texto corretamente.
Adicionando um contador regressivo
Importância do contador regressivo em uma página de “Em Breve”
Antes de mais nada, um contador regressivo aumenta a expectativa e dá uma ideia do prazo para o lançamento. Usando um contador, o visitante sabe quanto tempo falta até que o site completo esteja disponível.
Criando o contador com JavaScript e Bootstrap 4
Vamos implementar um contador básico em JavaScript. O código abaixo ilustra como adicionar esse elemento ao seu layout em Bootstrap 4.
htmlCopiar código<span class="hljs-tag" data-uipath_custom_id_23_4_59_15687="459"><<span class="hljs-name" data-uipath_custom_id_23_4_59_15687="460">div</span> <span class="hljs-attr" data-uipath_custom_id_23_4_59_15687="461">id</span>=<span class="hljs-string" data-uipath_custom_id_23_4_59_15687="462">"contador"</span> <span class="hljs-attr" data-uipath_custom_id_23_4_59_15687="463">class</span>=<span class="hljs-string" data-uipath_custom_id_23_4_59_15687="464">"display-4 my-4"</span>></span><span class="hljs-tag" data-uipath_custom_id_23_4_59_15687="465"></<span class="hljs-name" data-uipath_custom_id_23_4_59_15687="466">div</span>></span>
<span class="hljs-tag" data-uipath_custom_id_23_4_59_15687="467"><<span class="hljs-name" data-uipath_custom_id_23_4_59_15687="468">script</span>></span><span class="javascript" data-uipath_custom_id_23_4_59_15687="469">
<span class="hljs-comment" data-uipath_custom_id_23_4_59_15687="470">// Código para o contador regressivo</span>
<span class="hljs-keyword" data-uipath_custom_id_23_4_59_15687="471">const</span> countDownDate = <span class="hljs-keyword" data-uipath_custom_id_23_4_59_15687="472">new</span> <span class="hljs-title class_" data-uipath_custom_id_23_4_59_15687="473">Date</span>(<span class="hljs-string" data-uipath_custom_id_23_4_59_15687="474">"Dec 31, 2023 23:59:59"</span>).<span class="hljs-title function_" data-uipath_custom_id_23_4_59_15687="475">getTime</span>();
<span class="hljs-keyword" data-uipath_custom_id_23_4_59_15687="476">const</span> x = <span class="hljs-built_in" data-uipath_custom_id_23_4_59_15687="477">setInterval</span>(<span class="hljs-keyword" data-uipath_custom_id_23_4_59_15687="478">function</span>(<span class="hljs-params" data-uipath_custom_id_23_4_59_15687="479"></span>) {
<span class="hljs-keyword" data-uipath_custom_id_23_4_59_15687="480">const</span> now = <span class="hljs-keyword" data-uipath_custom_id_23_4_59_15687="481">new</span> <span class="hljs-title class_" data-uipath_custom_id_23_4_59_15687="482">Date</span>().<span class="hljs-title function_" data-uipath_custom_id_23_4_59_15687="483">getTime</span>();
<span class="hljs-keyword" data-uipath_custom_id_23_4_59_15687="484">const</span> distance = countDownDate - now;
<span class="hljs-keyword" data-uipath_custom_id_23_4_59_15687="485">const</span> days = <span class="hljs-title class_" data-uipath_custom_id_23_4_59_15687="486">Math</span>.<span class="hljs-title function_" data-uipath_custom_id_23_4_59_15687="487">floor</span>(distance / (<span class="hljs-number" data-uipath_custom_id_23_4_59_15687="488">1000</span> * <span class="hljs-number" data-uipath_custom_id_23_4_59_15687="489">60</span> * <span class="hljs-number" data-uipath_custom_id_23_4_59_15687="490">60</span> * <span class="hljs-number" data-uipath_custom_id_23_4_59_15687="491">24</span>));
<span class="hljs-keyword" data-uipath_custom_id_23_4_59_15687="492">const</span> hours = <span class="hljs-title class_" data-uipath_custom_id_23_4_59_15687="493">Math</span>.<span class="hljs-title function_" data-uipath_custom_id_23_4_59_15687="494">floor</span>((distance % (<span class="hljs-number" data-uipath_custom_id_23_4_59_15687="495">1000</span> * <span class="hljs-number" data-uipath_custom_id_23_4_59_15687="496">60</span> * <span class="hljs-number" data-uipath_custom_id_23_4_59_15687="497">60</span> * <span class="hljs-number" data-uipath_custom_id_23_4_59_15687="498">24</span>)) / (<span class="hljs-number" data-uipath_custom_id_23_4_59_15687="499">1000</span> * <span class="hljs-number" data-uipath_custom_id_23_4_59_15687="500">60</span> * <span class="hljs-number" data-uipath_custom_id_23_4_59_15687="501">60</span>));
<span class="hljs-keyword" data-uipath_custom_id_23_4_59_15687="502">const</span> minutes = <span class="hljs-title class_" data-uipath_custom_id_23_4_59_15687="503">Math</span>.<span class="hljs-title function_" data-uipath_custom_id_23_4_59_15687="504">floor</span>((distance % (<span class="hljs-number" data-uipath_custom_id_23_4_59_15687="505">1000</span> * <span class="hljs-number" data-uipath_custom_id_23_4_59_15687="506">60</span> * <span class="hljs-number" data-uipath_custom_id_23_4_59_15687="507">60</span>)) / (<span class="hljs-number" data-uipath_custom_id_23_4_59_15687="508">1000</span> * <span class="hljs-number" data-uipath_custom_id_23_4_59_15687="509">60</span>));
<span class="hljs-keyword" data-uipath_custom_id_23_4_59_15687="510">const</span> seconds = <span class="hljs-title class_" data-uipath_custom_id_23_4_59_15687="511">Math</span>.<span class="hljs-title function_" data-uipath_custom_id_23_4_59_15687="512">floor</span>((distance % (<span class="hljs-number" data-uipath_custom_id_23_4_59_15687="513">1000</span> * <span class="hljs-number" data-uipath_custom_id_23_4_59_15687="514">60</span>)) / <span class="hljs-number" data-uipath_custom_id_23_4_59_15687="515">1000</span>);
<span class="hljs-variable language_" data-uipath_custom_id_23_4_59_15687="516">document</span>.<span class="hljs-title function_" data-uipath_custom_id_23_4_59_15687="517">getElementById</span>(<span class="hljs-string" data-uipath_custom_id_23_4_59_15687="518">"contador"</span>).<span class="hljs-property" data-uipath_custom_id_23_4_59_15687="519">innerHTML</span> = days + <span class="hljs-string" data-uipath_custom_id_23_4_59_15687="520">"d "</span> + hours + <span class="hljs-string" data-uipath_custom_id_23_4_59_15687="521">"h "</span> + minutes + <span class="hljs-string" data-uipath_custom_id_23_4_59_15687="522">"m "</span> + seconds + <span class="hljs-string" data-uipath_custom_id_23_4_59_15687="523">"s "</span>;
<span class="hljs-keyword" data-uipath_custom_id_23_4_59_15687="524">if</span> (distance < <span class="hljs-number" data-uipath_custom_id_23_4_59_15687="525">0</span>) {
<span class="hljs-built_in" data-uipath_custom_id_23_4_59_15687="526">clearInterval</span>(x);
<span class="hljs-variable language_" data-uipath_custom_id_23_4_59_15687="527">document</span>.<span class="hljs-title function_" data-uipath_custom_id_23_4_59_15687="528">getElementById</span>(<span class="hljs-string" data-uipath_custom_id_23_4_59_15687="529">"contador"</span>).<span class="hljs-property" data-uipath_custom_id_23_4_59_15687="530">innerHTML</span> = <span class="hljs-string" data-uipath_custom_id_23_4_59_15687="531">"Lançado!"</span>;
}
}, <span class="hljs-number" data-uipath_custom_id_23_4_59_15687="532">1000</span>);
</span><span class="hljs-tag" data-uipath_custom_id_23_4_59_15687="533"></<span class="hljs-name" data-uipath_custom_id_23_4_59_15687="534">script</span>></span>
Customizando o contador com CSS
Para melhorar a estética, adicione algumas regras CSS:
cssCopiar código<span class="hljs-selector-id" data-uipath_custom_id_23_4_59_15687="548">#contador</span> {
<span class="hljs-attribute" data-uipath_custom_id_23_4_59_15687="549">color</span>: <span class="hljs-number" data-uipath_custom_id_23_4_59_15687="550">#ff6b6b</span>;
}
Esse código deixa o contador mais atraente e visualmente alinhado com a identidade do site.
Formulário para capturar leads
Por que incluir um formulário de captura?
Sobretudo, incluir um formulário permite que os visitantes deixem seus e-mails para receber atualizações sobre o lançamento. Essa é uma estratégia poderosa para manter o público engajado.
Implementação do formulário em Bootstrap 4
Adicione o seguinte código HTML para o formulário:
htmlCopiar código<span class="hljs-tag" data-uipath_custom_id_23_4_59_15687="568"><<span class="hljs-name" data-uipath_custom_id_23_4_59_15687="569">div</span> <span class="hljs-attr" data-uipath_custom_id_23_4_59_15687="570">class</span>=<span class="hljs-string" data-uipath_custom_id_23_4_59_15687="571">"container mt-4"</span>></span>
<span class="hljs-tag" data-uipath_custom_id_23_4_59_15687="572"><<span class="hljs-name" data-uipath_custom_id_23_4_59_15687="573">form</span> <span class="hljs-attr" data-uipath_custom_id_23_4_59_15687="574">action</span>=<span class="hljs-string" data-uipath_custom_id_23_4_59_15687="575">"/submit-email"</span> <span class="hljs-attr" data-uipath_custom_id_23_4_59_15687="576">method</span>=<span class="hljs-string" data-uipath_custom_id_23_4_59_15687="577">"POST"</span>></span>
<span class="hljs-tag" data-uipath_custom_id_23_4_59_15687="578"><<span class="hljs-name" data-uipath_custom_id_23_4_59_15687="579">div</span> <span class="hljs-attr" data-uipath_custom_id_23_4_59_15687="580">class</span>=<span class="hljs-string" data-uipath_custom_id_23_4_59_15687="581">"form-group"</span>></span>
<span class="hljs-tag" data-uipath_custom_id_23_4_59_15687="582"><<span class="hljs-name" data-uipath_custom_id_23_4_59_15687="583">label</span> <span class="hljs-attr" data-uipath_custom_id_23_4_59_15687="584">for</span>=<span class="hljs-string" data-uipath_custom_id_23_4_59_15687="585">"email"</span>></span>Inscreva-se para saber quando lançarmos:<span class="hljs-tag" data-uipath_custom_id_23_4_59_15687="586"></<span class="hljs-name" data-uipath_custom_id_23_4_59_15687="587">label</span>></span>
<span class="hljs-tag" data-uipath_custom_id_23_4_59_15687="588"><<span class="hljs-name" data-uipath_custom_id_23_4_59_15687="589">input</span> <span class="hljs-attr" data-uipath_custom_id_23_4_59_15687="590">type</span>=<span class="hljs-string" data-uipath_custom_id_23_4_59_15687="591">"email"</span> <span class="hljs-attr" data-uipath_custom_id_23_4_59_15687="592">class</span>=<span class="hljs-string" data-uipath_custom_id_23_4_59_15687="593">"form-control"</span> <span class="hljs-attr" data-uipath_custom_id_23_4_59_15687="594">id</span>=<span class="hljs-string" data-uipath_custom_id_23_4_59_15687="595">"email"</span> <span class="hljs-attr" data-uipath_custom_id_23_4_59_15687="596">name</span>=<span class="hljs-string" data-uipath_custom_id_23_4_59_15687="597">"email"</span> <span class="hljs-attr" data-uipath_custom_id_23_4_59_15687="598">placeholder</span>=<span class="hljs-string" data-uipath_custom_id_23_4_59_15687="599">"Digite seu e-mail"</span>></span>
<span class="hljs-tag" data-uipath_custom_id_23_4_59_15687="600"></<span class="hljs-name" data-uipath_custom_id_23_4_59_15687="601">div</span>></span>
<span class="hljs-tag" data-uipath_custom_id_23_4_59_15687="602"><<span class="hljs-name" data-uipath_custom_id_23_4_59_15687="603">button</span> <span class="hljs-attr" data-uipath_custom_id_23_4_59_15687="604">type</span>=<span class="hljs-string" data-uipath_custom_id_23_4_59_15687="605">"submit"</span> <span class="hljs-attr" data-uipath_custom_id_23_4_59_15687="606">class</span>=<span class="hljs-string" data-uipath_custom_id_23_4_59_15687="607">"btn btn-primary"</span>></span>Inscrever-se<span class="hljs-tag" data-uipath_custom_id_23_4_59_15687="608"></<span class="hljs-name" data-uipath_custom_id_23_4_59_15687="609">button</span>></span>
<span class="hljs-tag" data-uipath_custom_id_23_4_59_15687="610"></<span class="hljs-name" data-uipath_custom_id_23_4_59_15687="611">form</span>></span>
<span class="hljs-tag" data-uipath_custom_id_23_4_59_15687="612"></<span class="hljs-name" data-uipath_custom_id_23_4_59_15687="613">div</span>></span>
Esse formulário é simples e direto, focando na usabilidade. Usar classes do Bootstrap garante uma aparência consistente.
Adicionando ícones de redes sociais
Importância das redes sociais em páginas de “Em Breve”
Além do formulário, as redes sociais são essenciais para manter uma conexão com o público. Incluir links para redes sociais aumenta o engajamento e permite que os usuários acompanhem atualizações.
Implementação dos ícones de redes sociais
Para adicionar ícones de redes sociais, use Font Awesome:
htmlCopiar código<span class="hljs-tag" data-uipath_custom_id_23_4_59_15687="631"><<span class="hljs-name" data-uipath_custom_id_23_4_59_15687="632">div</span> <span class="hljs-attr" data-uipath_custom_id_23_4_59_15687="633">class</span>=<span class="hljs-string" data-uipath_custom_id_23_4_59_15687="634">"container mt-4"</span>></span>
<span class="hljs-tag" data-uipath_custom_id_23_4_59_15687="635"><<span class="hljs-name" data-uipath_custom_id_23_4_59_15687="636">a</span> <span class="hljs-attr" data-uipath_custom_id_23_4_59_15687="637">href</span>=<span class="hljs-string" data-uipath_custom_id_23_4_59_15687="638">"#"</span> <span class="hljs-attr" data-uipath_custom_id_23_4_59_15687="639">class</span>=<span class="hljs-string" data-uipath_custom_id_23_4_59_15687="640">"btn btn-outline-dark mr-2"</span>></span><span class="hljs-tag" data-uipath_custom_id_23_4_59_15687="641"><<span class="hljs-name" data-uipath_custom_id_23_4_59_15687="642">i</span> <span class="hljs-attr" data-uipath_custom_id_23_4_59_15687="643">class</span>=<span class="hljs-string" data-uipath_custom_id_23_4_59_15687="644">"fab fa-facebook-f"</span>></span><span class="hljs-tag" data-uipath_custom_id_23_4_59_15687="645"></<span class="hljs-name" data-uipath_custom_id_23_4_59_15687="646">i</span>></span><span class="hljs-tag" data-uipath_custom_id_23_4_59_15687="647"></<span class="hljs-name" data-uipath_custom_id_23_4_59_15687="648">a</span>></span>
<span class="hljs-tag" data-uipath_custom_id_23_4_59_15687="649"><<span class="hljs-name" data-uipath_custom_id_23_4_59_15687="650">a</span> <span class="hljs-attr" data-uipath_custom_id_23_4_59_15687="651">href</span>=<span class="hljs-string" data-uipath_custom_id_23_4_59_15687="652">"#"</span> <span class="hljs-attr" data-uipath_custom_id_23_4_59_15687="653">class</span>=<span class="hljs-string" data-uipath_custom_id_23_4_59_15687="654">"btn btn-outline-dark mr-2"</span>></span><span class="hljs-tag" data-uipath_custom_id_23_4_59_15687="655"><<span class="hljs-name" data-uipath_custom_id_23_4_59_15687="656">i</span> <span class="hljs-attr" data-uipath_custom_id_23_4_59_15687="657">class</span>=<span class="hljs-string" data-uipath_custom_id_23_4_59_15687="658">"fab fa-twitter"</span>></span><span class="hljs-tag" data-uipath_custom_id_23_4_59_15687="659"></<span class="hljs-name" data-uipath_custom_id_23_4_59_15687="660">i</span>></span><span class="hljs-tag" data-uipath_custom_id_23_4_59_15687="661"></<span class="hljs-name" data-uipath_custom_id_23_4_59_15687="662">a</span>></span>
<span class="hljs-tag" data-uipath_custom_id_23_4_59_15687="663"><<span class="hljs-name" data-uipath_custom_id_23_4_59_15687="664">a</span> <span class="hljs-attr" data-uipath_custom_id_23_4_59_15687="665">href</span>=<span class="hljs-string" data-uipath_custom_id_23_4_59_15687="666">"#"</span> <span class="hljs-attr" data-uipath_custom_id_23_4_59_15687="667">class</span>=<span class="hljs-string" data-uipath_custom_id_23_4_59_15687="668">"btn btn-outline-dark"</span>></span><span class="hljs-tag" data-uipath_custom_id_23_4_59_15687="669"><<span class="hljs-name" data-uipath_custom_id_23_4_59_15687="670">i</span> <span class="hljs-attr" data-uipath_custom_id_23_4_59_15687="671">class</span>=<span class="hljs-string" data-uipath_custom_id_23_4_59_15687="672">"fab fa-instagram"</span>></span><span class="hljs-tag" data-uipath_custom_id_23_4_59_15687="673"></<span class="hljs-name" data-uipath_custom_id_23_4_59_15687="674">i</span>></span><span class="hljs-tag" data-uipath_custom_id_23_4_59_15687="675"></<span class="hljs-name" data-uipath_custom_id_23_4_59_15687="676">a</span>></span>
<span class="hljs-tag" data-uipath_custom_id_23_4_59_15687="677"></<span class="hljs-name" data-uipath_custom_id_23_4_59_15687="678">div</span>></span>
<span class="hljs-tag" data-uipath_custom_id_23_4_59_15687="679"><<span class="hljs-name" data-uipath_custom_id_23_4_59_15687="680">script</span> <span class="hljs-attr" data-uipath_custom_id_23_4_59_15687="681">src</span>=<span class="hljs-string" data-uipath_custom_id_23_4_59_15687="682">"https://kit.fontawesome.com/a076d05399.js"</span>></span><span class="hljs-tag" data-uipath_custom_id_23_4_59_15687="683"></<span class="hljs-name" data-uipath_custom_id_23_4_59_15687="684">script</span>></span>
Esses ícones são compactos e discretos, mas cumprem bem o papel de guiar o usuário.
Dicas de design para a página de “Em Breve”
Escolha de cores e tipografia
Primordialmente, escolha cores que representem bem a marca e criem uma boa primeira impressão. Tipografias claras e modernas também ajudam a transmitir uma imagem profissional.
Imagens de fundo
Uma imagem de fundo interessante pode enriquecer visualmente a página. Por exemplo, escolha uma imagem que faça referência ao que será o futuro site.
cssCopiar código<span class="hljs-selector-tag" data-uipath_custom_id_23_4_59_15687="702">body</span> {
<span class="hljs-attribute" data-uipath_custom_id_23_4_59_15687="703">background</span>: <span class="hljs-built_in" data-uipath_custom_id_23_4_59_15687="704">url</span>(<span class="hljs-string" data-uipath_custom_id_23_4_59_15687="705">'caminho-da-imagem.jpg'</span>) no-repeat center center fixed;
<span class="hljs-attribute" data-uipath_custom_id_23_4_59_15687="706">background-size</span>: cover;
}
Esse código CSS permite definir uma imagem de fundo de forma rápida e eficiente.
Melhorando o desempenho da página de “Em Breve”
Compactação de imagens e arquivos
Para otimizar o carregamento, compacte todas as imagens e use arquivos minificados. Isso reduz o tempo de carregamento e melhora a experiência do usuário.
Habilitando o cache do navegador
Configurar o cache ajuda a acelerar o carregamento em visitas repetidas. Em outras palavras, é um recurso prático que melhora o desempenho e reduz a taxa de rejeição.
Teste de responsividade e compatibilidade
Verificando a responsividade com o DevTools
Antes de finalizar, é importante testar o layout em diferentes resoluções. Abra o DevTools do navegador para ajustar a página para cada dispositivo.
Compatibilidade entre navegadores
Codificar uma página de “Em Breve” em Bootstrap 4 ajuda a garantir compatibilidade com os principais navegadores. Porém, revise sempre o design para evitar qualquer problema.
Conclusão
Portanto, codificar uma página de “Em Breve” em Bootstrap 4 é um processo eficiente e permite resultados profissionais e funcionais. Com a estrutura e os componentes que discutimos, é possível criar uma página cativante, garantindo que seus visitantes fiquem atentos ao lançamento.
Minhas Impressões Pessoais
Pessoalmente, acho que codificar uma página de “Em Breve” em Bootstrap 4 é uma tarefa prática e cheia de vantagens para desenvolvedores que buscam agilidade e funcionalidade. A facilidade de uso do Bootstrap 4 permite criar rapidamente uma página responsiva, incluindo recursos como o contador regressivo e a captura de leads, que são essenciais para engajar o público. Além disso, a compatibilidade com dispositivos móveis e a estética atraente tornam essa abordagem uma excelente escolha para projetos temporários, sem comprometer a qualidade visual.
Perguntas Frequentes (FAQ)
Uma página de “Em Breve” é uma página temporária que avisa aos visitantes que o site está em construção, mas também pode capturar leads e gerar curiosidade sobre o lançamento.
O Bootstrap 4 facilita a criação de páginas responsivas e modernas, com componentes prontos como botões e formulários, otimizando o tempo de desenvolvimento.
Você pode adicionar um contador regressivo usando JavaScript para contar o tempo até o lançamento, além de estilizar com CSS para torná-lo visualmente atraente.
