Alguns modelos WordPress são bastante estreitos no menu lateral, a chamada barra lateral, ou, pelo contrário, estreitos na seção de artigos, e naturalmente alguns webmasters precisam expandir certos limites, por exemplo, para acomodar banners. Neste artigo vou te contar como altere o tamanho do cabeçalho, modelo, seção do artigo ou menu lateral.
Por que você pode precisar alterar o tamanho do modelo.
Você pode querer alterar o tamanho do modelo logo no início, assim que o instalar ou depois de escrever vários artigos e suas primeiras dezenas de visitantes começarem a aparecer. Por exemplo, precisei expandir o modelo depois de tentar ganhar os primeiros centavos em publicidade com meu trabalho - um blog. Para isso, foi escolhido o sistema banners publicitários de Google-AdSense. Mas para ganhar pelo menos dois infelizes centavos, você precisa levar em consideração dois parâmetros:
- Para que alguém clique em um anúncio, os banners que o sistema irá emitir devem estar em determinados locais. Na internet escrevem que esse é o controle deslizante esquerdo, colocamos um banner quadrado ali, e três vezes dentro do artigo. No topo, no centro, depois de algum cabeçalho e no final. Esse arranjo será ideal para as pessoas clicarem no banner. Claro, existem outras opções, por exemplo nas fotos, mas não as consideramos no âmbito deste artigo.
- O Google fornece banners de determinados tamanhos.
aqueles. precisamos combinar o primeiro e o segundo pontos, ou seja, garantir que os banners do Google ou Yandex sejam colocados nos locais designados, na barra lateral esquerda e nos artigos. Como meu modelo era muito estreito para esses fins e não faz sentido pendurar banners pequenos, porque ninguém vai clicar neles, só resta uma coisa a fazer - expandir o menu lateral e a seção de artigos.
Como ampliar um modelo horizontalmente parte 1, entenda os números
Para entender o quanto precisamos aumentar a largura deste ou daquele elemento, não precisamos estimar à primeira vista “um centímetro aqui é suficiente e meio centímetro ali”, mas descobrir esses números com exatidão, em pixels. Quase qualquer navegador nos ajudará com isso, por exemplo:
- Safári
- FireFox
- Google Chrome
Pessoalmente, mostrarei o Safari como exemplo e você usará qualquer navegador que lhe seja conveniente. As diferenças devem estar apenas em um botão.
Portanto, a base - o tamanho do nosso site consiste em 4 elementos, o tamanho do próprio modelo, o tamanho da página, o tamanho do bloco do artigo e o bloco do menu esquerdo. Vamos aumentar tudo um por um, não se preocupe, não dá medo.
Para alterar a largura do menu esquerdo.
Nesse caso, você pode alterar os pixels, como fizemos nas etapas 3 a 5, e a porcentagem na página. Para fazer isso, basta alterar o parâmetro em vez de pixels
Esses valores significam quantos por cento da largura podem ser ocupados por um ou outro elemento. O principal é que a barra lateral e o artigo ocupem 100% do total, e não mais, caso contrário tudo flutuará pela página.
Isso é tudo. Agora sabemos quais valores precisamos mudar para que tudo caiba. Resta apenas inserir os dados necessários no arquivo de estilo.
Como aumentar o modelo horizontalmente parte 2, alterar a largura
Depois de entendermos os números e anotá-los em algum lugar de um pedaço de papel, vamos agora alterá-los para todos, e não apenas para nós mesmos. Para fazer isso:
- Faça login via FTP no site
- Encontre e copie o arquivo /wp-content/themes/Your theme/style.css para o seu computador
- Faça uma cópia de backup deste arquivo, ou seja, copie-o para sua pasta de documentos. Para que haja duas cópias do arquivo no computador, uma na qual trabalharemos, a segunda na qual não iremos mexer. A segunda serve caso mudemos algo errado e esqueçamos o quê.
- Abra o arquivo em um editor conveniente. Agora nos deparamos com uma tarefa bastante simples de mudar os valores antigos para novos. Existem duas maneiras, a primeira é fácil e a segunda é difícil. Primeiro, encontramos o valor antigo pesquisando e escrevendo um novo. A segunda forma é procurar o nome dos estilos, procurar a largura dentro dos estilos e alterar o valor.
Pessoalmente, escolhi o primeiro método fácil, pois permite fazer alterações em apenas alguns segundos. Então, estamos procurando o valor 980. Uma busca no arquivo retornou apenas dois parâmetros, que preciso alterar.
O primeiro é responsável pela largura de todo o site:
| 1
2
3
4
5
6
7
8
| #page (altura mínima: 100px; claro: ambos; largura: 96%; preenchimento: 0; preenchimento superior: 24px; largura máxima: 980px; overflow: oculto; |
#page (altura mínima: 100px; claro: ambos; largura: 96%; preenchimento: 0; preenchimento superior: 24px; largura máxima: 980px; overflow: oculto;
A segunda é para a largura de dois elementos, a lista de artigos e o menu esquerdo:
| 1
2
3
4
5
6
7
8
9
10
11
| . main- container (largura: 980px; margem: 0 automático; overflow: oculto; preenchimento: 0; fundo: #fff; posição: relativa; - webkit- box- shadow: 0px 0px 10px rgba(50, 50, 50, 0,17) ; - moz-box-shadow: 0px 0px 10px rgba(50, 50, 50, 0,17) ; |
Contêiner principal (largura: 980px; margem: 0 automático; overflow: oculto; preenchimento: 0; plano de fundo: #fff; posição: relativa; -webkit-box-shadow: 0px 0px 10px rgba (50, 50, 50, 0,17) ; -moz-box-sombra: 0px 0px 10px rgba (50, 50, 50, 0,17);
Tudo o que precisamos fazer é alterar os valores de 980 para 1080 e carregá-lo novamente.
Isso é tudo, mas se você ainda tiver alguma dúvida, escreva nos comentários ou me envie um e-mail, terei prazer em ajudá-lo.
Você deseja criar uma página de largura total no WordPress?
Então vamos voltar ao motivo de estarmos aqui.
Método 1: usando o modelo de largura integrado em um tema WordPress
Este método é recomendado se o seu tema WordPress já vier com um modelo de página de largura total. Se você não tiver um, consulte a próxima opção e obtenha um.
Primeiro você deve editar a página ou criar uma nova visitando " Páginas>Adicionar Nova página
Na janela de edição da página, selecione Largura total como um modelo na caixa de seleção de atributos da página.
Depois de escolher um modelo Largura total Você deve registrar sua página. Você pode continuar personalizando a página para adicionar mais conteúdo ou clicar no botão de visualização para vê-la em ação.
Se você não tiver a opção "Largura total" - "modelo de largura total" - na tela de edição da sua página, significa que o seu tema WordPress não possui essa página.
Mas não se preocupe, mostraremos como é fácil criar uma página em tamanho real sem alterar Temas WordPress.
Método 2: como criar um modelo de página de largura total
Este método requer que você edite os arquivos de tema do WordPress que você está usando e para o básico compreensão de PHP, CSS e HTML.
A propósito, também convidamos você a consultar
Primeiro você precisa abrir editor de texto, como o Bloco de Notas, e cole o seguinte código em um arquivo vazio:
Este código simplesmente especifica o nome do modelo de arquivo e pede ao WordPress para recuperar o modelo de cabeçalho.
Então você precisará da parte do conteúdo do código. Conecte-se ao seu site usando um cliente FTP ( ou gerenciador de arquivos no cpanel) então vá para /wp-contents/themes/seu-tema-diretório/ .
Então você deve encontrar um arquivo chamado " página.php" Este é o arquivo de modelo de página padrão para o seu tema.
Copie tudo depois da função " get_header() E cole no arquivo Largura total.php Você criou isso no seu computador.
Agora você precisa olhar o conteúdo do arquivo "full-width.php" e remover esta linha de código:
Esta linha simplesmente restaura a barra lateral e a exibe no seu tema WordPress. Ao remover isso, seu tema não exibirá a barra lateral ao usar o modelo Largura total.
Você pode ver esta linha aparecer várias vezes no seu tema WordPress. Se o seu tema WordPress tiver vários, você verá cada barra lateral referenciada uma vez no código. Você deve decidir quais barras laterais deseja manter.
Seu site está carregando lentamente, descubra
Se o seu tema não exibir barras laterais na sua página, talvez você não encontre esse código no seu arquivo.
É assim que nosso código full-width.php se encarrega de fazer alterações. Seu código pode variar um pouco dependendo do seu tema.
Então você precisa baixar o arquivo Largura total.php Na sua pasta de temas do WordPress usando .
Você criou e carregou com sucesso um modelo de página personalizado de largura total para o seu tema. A próxima etapa é usar este modelo para criar uma página em tamanho real.
Vá para o seu painel e edite ou crie uma nova página.
Na tela de edição da página, encontre a caixa de seleção de atributos da página e clique no menu suspenso na opção Modelo.
Você poderá ver seu modelo. Vá em frente, selecione-o e salve ou atualize a página.
Agora você pode visitar seu site e verá que as barras laterais desapareceram e sua página aparece como uma página de coluna única. Pode não estar completo ainda, mas agora você está pronto para distribuí-lo de uma forma diferente.
Torne seu site popular descobrindo
Você precisará usar a ferramenta Inspecionar para descobrir as classes CSS que seu tema usa para definir a área de conteúdo.
Você pode então ajustar sua largura para 100% usando CSS. Usamos o seguinte código CSS:
.str-template zona de largura total.content (largura: 100%; margem: 0px; borda: 0px; preenchimento: 0px; ) .str-template largura total.Saída (margem: 0px; )
É assim que seria Twenty Seventeen.
Isso é tudo para este tutorial, espero que permita criar páginas em tamanho real.
Os métodos acima são gratuitos para aqueles que podem pagar e desejam criar rapidamente layouts de largura total ou de largura total.
Descubra também alguns plug-ins premium do WordPress
Você pode usar outros plugins do WordPress para dar uma aparência moderna e otimizar o gerenciamento do seu blog ou site.
Oferecemos vários plug-ins WordPress premium que o ajudarão a fazer isso.
1. Divi Construtor
Divi Builder é um construtor de páginas de alta qualidade altamente avaliado Temas elegantes Embora seja comumente usado como parte do tema WordPress Divi, o Divi Builder também é um plugin independente que pode ser usado em outros temas WordPress.
Divi Builder permite que você edite seu conteúdo usando uma interface visual front-end, bem como uma interface do lado do servidor, embora a maioria dos usuários prefira a interface anterior.
Essencialmente, em vez de barras laterais, tudo está em pop-ups e botões flutuantes. Dá acesso a 316 modelos predefinidos distribuídos em 40 pacotes de apresentação diferentes e também permite salvar seus próprios designs como modelos.
Nós convidamos você a abrir
Uma das características do Divi sempre foi o controle sobre os estilos que ele oferece. Com três guias diferentes, você pode definir várias configurações, incluindo controles adaptativos, espaçamento personalizado e muito mais.
Você pode até adicionar CSS personalizado porque seu editor CSS integra validação básica e preenchimento automático.Uma das críticas ao Divi Builder sempre foi que ele é baseado em . Isso significa que se você desativá-lo uma vez, ficará com um monte de códigos de acesso em seu conteúdo. Embora seja um pouco frustrante, agora há menos problemas com plug-ins como o Shortcode Cleaner.
2. Construtor
Não é nenhuma surpresa que Themify Builder seja uma oferta da equipe Themify. Ele o integra em muitos de seus temas WordPress para fornecer aos clientes opções simples configurações. Mas você também pode comprá-lo como um plugin independente e usá-lo com qualquer tema WordPress.
Assim como o Divi Builder e o WPBakery Page Builder, o Themify Builder permite criar layouts no frontend ou backend.Outra coisa boa é que este plugin permite que você personalize seus pontos de interrupção responsivos (mas apenas em todo o site).
Descubra como criar uma loja online e venda facilmente seus produtos online
Um recurso interessante do Themify Builder é que ele ainda permite que você use o editor padrão do WordPress, enquanto outros construtores de páginas forçam você a usar a interface do Page Builder para tudo.
3. Faquir
Lançado originalmente em 2016, o plugin WordPress Elementor é um dos desenvolvedores mais jovens desta lista. Apesar do lançamento tardio, a Elementor rapidamente acumulou mais instalações ativas 1.000.000 no WordPress.org, tornando-o um dos criadores de WordPress mais populares.
Se você tiver alguma sugestão ou comentário, deixe-os em nossa seção
Muitas vezes acontece que o tema que você gosta tem uma área estreita para entradas e suas configurações não permitem alterar a largura. Neste caso, pode ser aumentado com conhecimento mínimo HTML E CSS. Por exemplo, usamos o popular tema gratuito Patagônia. Você pode expandir seu tema usando um ótimo plugin Raposa de fogo— Bug de fogo. Primeiro você precisa instalá-lo baixando-o aqui. Então ligue-o plug-in, como mostrado na imagem - Guia Ferramentas — Desenvolvimento web — Bug de fogo — abra o Firebug:
Depois disso, na parte inferior da tela, você precisa mover o cursor e clicar com o mouse para selecionar vários elementos. Neste caso, do lado direito, será exibido Estilos CSS
, e na área da página uma ou outra área será destacada - a principal, barra lateral, cabeçalho. Agora estamos interessados na área principal em que iremos parar quando “entrarmos” na tag
. Um fragmento do arquivo será exibido no lado direito
estilo.css. E aqui você pode ver que a largura da área principal é de 580 pixels. E isso não é suficiente para as nossas necessidades.
Por exemplo, aumentar a larguraárea principal de 550 pixels para 620. Para fazer isso, você precisa fazer alterações na linha largura: 550px arquivo estilo.css. Se o tema já estiver instalado, você pode editar este arquivo diretamente no painel de administração; caso contrário, será necessário descompactar o arquivo com o tema e fazer alterações no arquivo usando o editor; No nosso caso, o tema está instalado, então vá para painel de administração— Aparência
— Editor— abra o arquivo style.css, pesquise a largura da linha: 550px e altere o valor da largura de 550px para 620px. Clique Atualizar arquivo.
Entramos no site e vemos que a área de postagens se expandiu, mas em alguns lugares ela se sobrepôs à coluna da direita. Neste caso, precisamos estreitar proporcionalmente esta área. Para isso também usaremos Plug-in Firebug, como no caso anterior. Encontrando a etiqueta
