@wstech,
A index tem altura fixa?
Se não, você quer que o background seja fixo enquanto o conteúdo rola na tela, ou quer que ele role junto?
Olá, estou tentando fazer o projeto seguindo os exemplos abaixos, e pra variar quebrando a cabeça pra encaixar as peças kkkk, pra entender melhor vou explicar o meu job ok.
Na index deve ser full seguindo o mesmo tamanho das demais páginas conforme exemplos abaixo, para isso estou criando a estrutura na mão pois é muito difícil adaptar um layout pronto. Basicamente o layout vai ter um menu no topo, o conteúdo no centro e um rodapé com menu.
Estrutura do projeto
Index – http://i.imgur.com/DkNibw1.jpg
Contato – http://i.imgur.com/znbOGhS.jpg
Info – http://i.imgur.com/THHJNN2.png
Demais páginas – http://i.imgur.com/mlAhsrj.jpg / http://i.imgur.com/Xy0g8IC.jpg
Para as demais páginas vou usar o plugin chamado WP Electric Carousel – link: http://codecanyon.net/item/wp-electric-carousel-full-width-responsive-lazy-load-slider/full_screen_preview/6554799 e para chegar no efeito com a imagem selecionada a esquerda vou alterar o código dele.
Objetivos do job:
– Layout responsivo;
– Index com imagens aleatórias quando houver o refresh;
– Independente da página que esteja ao selecionar a página contato e info deve ser exibido um box sobre o conteúdo atual, seja ele fashion, editorial…
Se puder me ajudar com dicas ai ficaria muito grato, sou iniciante e estou apaixonado com o WordPress… Fiz trabalhos pequenos e esse é um grande desafio.
Abrs.
Para o box sobre o conteúdo sugiro o plugin Easy Fancybox. Ele é muito completo e flexível.
https://wordpress.org/plugins/easy-fancybox/
Para a imagem do index o seu body vai ter que ter width:100% e a div que vai conter a imagem também. Aí você deve usar a imagem como fundo dessa div e colocar background-size:cover.
Para que o seu layout seja responsivo e mobile friendly, você vai precisar definir fundos diferentes para cada tamanho de tela. Assim um vistante que abra a página em um celular de 320x200px não vai baixar uma imagem de 1920x1080px que deve servir monitores de alta resolução.
Para alterar a imagem de acordo com o tamanho da tela e, ao mesmo tempo, servir uma imagem aleatória, você vai precisar usar o css incorporado no html. A melhor prática seria o css com uma folha de estilo externa para cada media-query e a randomização das imagens com jQuery, mas você pode começar com esse código que apesar de ser mais sujo é mais fácil de implementar e aprender. Vai ficar mais ou menos assim:
<body style="width:100%">
<style type="text/css">
.imgcontainer {
background-size:cover;
width:100%}
@media only screen and (max-width: 480px) {
.imgcontainer {
background-image: url(<?php bloginfo('template_url'); ?>/img/index480<?php echo rand(1,3); ?>.jpg);
height:320px; //no height colocar a atlura da img }
}
@media only screen (min-width: 481px) and (max-width: 720px) {
.imgcontainer {
background-image: url(<?php bloginfo('template_url'); ?>/img/index720<?php echo rand(1,3); ?>.jpg); }
height:560px}
.
.
.
continua com todas as media-queries
</style>
<div class="imgcontainer">
<!--só pra garantir compatibilidade com alguns browsers antigos -->
</div>
</body>
Muito obrigado pelas dicas BRG Web, elas estão me ajudando pakas aqui viu. Vamos as dúvidas kkk.
Obs: Eu ainda não acabei o tableless, estou ajustando os elementos, menus, e etc…
No caso @media only screen, eu notei que existe valores no nome das imagens para as resoluções, nesse caso ai eu terei que gerar as imagens nesses tamanhos? Isso não seria automático?
No caso da index estou quebrando a cabeça aqui para fazer no tableless, depois vou partir pro WP….
Vlw!!!
Olá BRG Web, estou aplicando o tableless e coloquei online, assim fica mais fácil de te mostrar ok.
Link: http://www.eddiemendes.com.br/tableless/index.html
Da uma olhada ai, tentei aplicar o esquema das imagens na index, mas não rolou, essa imagem ai possui um tamanho de 1920×1281, e ela esta cortada.
O menu esta de forma inversa da que eu coloquei, isso ainda estou arrumando, porque quando insiro o float:left ele alinha junto com a logo e o menu fica certo, quando coloco float:right ele vai pro lado que eu quero, mas o menu inverte a ordem.
Abrs e mais uma vez, muito obrigado pela atenção e ajuda.
