Um usuário perguntou ?
Parece não haver como fazer uma exibição de imagem em sua totalidade (sem deslocamento), dimensionando para a largura da janela, com texto de sobreposição orientado verticalmente à imagem.
Aqui está um exemplo de um site que faz isso com sucesso (provavelmente sem o Elementor). Veja o texto “Telling Full History” acima da imagem e como o texto fica centralizado e altera a imagem inteira conforme a janela é redimensionada.
Este é um layout básico que o Elementor deve ser capaz de fazer facilmente. Isso é algo que os desenvolvedores esqueceram ou estou perdendo alguma coisa?
Este tópico foi modificado 2 anos, 5 meses atrás por.
(@lestexas60)
2 anos, 5 meses atrás
Qual modelo você está usando? OceanWP faz isso. tigre721.com
Editar Layout de Arranjo – Seção Estendida Sem Diferença de Altura – Ideal para Filtrar Posição do Pilar – Média
Esta resposta foi modificada há 2 anos e 5 meses.
(@randomenengineer)
2 anos, 5 meses atrás
Uma opção de altura de layout de seção para “altura da imagem de fundo” parece estar ausente. O problema que vejo é que acho que aproveitaria a maioria das opções de imagem de fundo não específicas.
(@randomenengineer)
2 anos, 5 meses atrás
LesTexas, height: “screen fit” não faz isso. Em vez disso, apenas exibe a parte/imagem individual na tela verticalmente e preenche o restante da tela com espaços em branco para a próxima parte. Ou eu estou esquecendo de alguma coisa?
Esta resposta foi modificada há 2 anos e 5 meses. Esta resposta foi modificada há 2 anos e 5 meses.
(@lestexas60)
2 anos, 5 meses atrás
Aqui está o YouTube explicando:
Não tenho certeza do que você quer dizer com “deixaria a maioria das opções de imagem de fundo não especificadas”. Suponha que você adicione um widget de texto e, em seguida, defina o plano de fundo de sua imagem, você pode adicionar quantas linhas brancas de texto para aumentar a altura da imagem. Em seguida, adicione outro widget de texto abaixo e adicione outra imagem de fundo. Se houver lacunas das quais você deseja se livrar, ajuste as margens. Por favor, visite tiger721.com novamente. Eu adicionei 2 imagens adicionais ao original.
O vidro original é o fundo da peça e depois há vidro e outras rendas como fundos de widget.
Esta resposta foi modificada há 2 anos e 5 meses.
(@randomenengineer)
2 anos, 5 meses atrás
LesTexas, agradeço o esforço para ajudar, mas acho que você não entendeu o problema. tiger721.com não representa uma implementação bem-sucedida desse recurso. À medida que a janela cresce e abaixa (horizontal), sua imagem não vai de acordo com a largura da janela. Em vez disso, a imagem é cortada. Se você tentar isso em saveplaces.org, ele se comportará conforme o esperado.
(@lestexas60)
2 anos, 5 meses atrás
Quando você diz crescer e encolher, você quer dizer a função Ctrl + e – Zoom do navegador? Se assim for, vejo o que você quer dizer quando cai abaixo de 90%. Eu me deparei com um problema semelhante com meu menu de cabeçalho e função de zoom. O menu é muito dinâmico.
(@randomenengineer)
2 anos, 5 meses atrás
Não, quero dizer, quando você redimensiona a janela do navegador (horizontalmente em particular), a imagem da qual estou falando é dimensionada diretamente para a largura da janela, em vez de cortá-la nas laterais, preencher com espaços em branco nas laterais ou repetir horizontalmente.
Esta resposta foi modificada há 2 anos e 5 meses. Esta resposta foi modificada há 2 anos e 5 meses. Esta resposta foi modificada há 2 anos e 5 meses.
(@randomengineer)
2 anos, 5 meses atrás
Aqui está um exemplo da versão mais recente do site saveplaces.org. Veja como a imagem fica organizada conforme reduzo a largura da janela?
Esta resposta foi modificada há 2 anos e 5 meses.
(@lestexas60)
2 anos, 5 meses atrás
Obrigado pelo seu esclarecimento, há muitas maneiras de interpretar um relatório. Agora eu entendo o que você quer dizer. Você despertou minha curiosidade. Descobri que geralmente há uma maneira de fazer quase tudo, tudo o que você precisa fazer é olhar em volta até encontrar a configuração certa. Estou ansioso para experimentar a nova versão do Elementor, acredita-se que facilitará o acesso às configurações. Você pensaria que alguém saberia a resposta para esta.
Eu só testei isso usando Chrome e FireFox & Edge. Limitado a 1/3 da tela, o Chrome foi cortado para pouco menos da metade e o FireFox pela metade. Eu estava procurando isso no mesmo site que você mostrou. Estou usando o Win 10 com as versões mais recentes dos navegadores. Olhando para suas imagens, ele só desceu até o meio da imagem, então ainda funcionou. Isso funciona com o tamanho como uma “capa”, mas no meu teste e na sua página de amostra a parte superior da imagem é necessária à medida que a largura diminui.
Esta resposta foi modificada há 2 anos e 5 meses. Esta resposta foi modificada há 2 anos e 5 meses.
(@randomengineer)
2 anos, 5 meses atrás
@lestexas60, sim, a imagem é “cortada” quando redimensionada. Esta é uma escolha de design consciente pelos web designers especialistas em saveplaces.org. Quando o usuário acessa um tablet ou telefone do tamanho de um tablet, a imagem muda para uma versão diferente da foto, que é dimensionada conforme as escalas superiores maiores. Eu não mencionei isso porque não é relevante para a discussão.
Continuarei procurando construtores de páginas mais sólidos. Espero que Guttenberg possa dar conta desta tarefa.
Esta resposta foi modificada há 2 anos e 5 meses.
(@logologia)
2 anos, 5 meses atrás
sim, a imagem “up” quando redimensionada. Esta é uma escolha de design consciente pelos web designers especialistas em saveplaces.org. Quando o usuário acessa um tablet ou telefone do tamanho de um tablet, a imagem muda para uma versão diferente da foto, que é dimensionada conforme as escalas superiores maiores. Eu não mencionei isso porque não é relevante para a discussão.
Você também pode fazer isso com o Elementor, usando as opções responsivas. Crie 3 imagens em escala e carregue-as. Crie 3 seções com essas imagens em cada dimensão.
Edite cada parte e oculte-a, por exemplo, na área de trabalho ou capacidade, etc. Dessa forma, as imagens da escala serão exibidas apenas em tablets, dispositivos móveis, etc. E eles exibirão a imagem na escala correta por dispositivo.
(@randomenengineer)
2 anos, 5 meses atrás
obrigado também a @logologics por tentar ajudar. O que você parece ter feito é criar um elemento de tela cheia (veja o quarto comentário acima).
LesTexas, height: “screen fit” não faz isso. Em vez disso, apenas exibe a parte/imagem individual na tela verticalmente e preenche o restante da tela com espaços em branco para a próxima parte.
Em relação: o “top” funcional para telas menores, como eu disse, isso não é relevante para a limitação no Elementor. Este post não é sobre layouts diferentes para tamanhos de tela diferentes, que eu já conheço. Neste ponto, a incapacidade de dimensionar uma imagem com uma sobreposição de texto sem montá-la na tela é claramente uma deficiência séria do Elementor.
Esta resposta foi modificada há 2 anos e 5 meses. Esta resposta foi modificada há 2 anos e 5 meses.
(@ruven)
2 anos, 5 meses atrás
Sou novo aqui, mas acho que isso não é possível. Eu adoraria adicionar a opção de conteúdo e camadas a um recurso de imagem também. talvez eu possa fazer três perguntas de identificação?
sua conexão usa flexbox. você pode adicionar esta função a algum css personalizado, eu acho
Esta resposta foi modificada há 2 anos e 5 meses. Esta resposta foi modificada há 2 anos e 5 meses. Esta resposta foi modificada há 2 anos e 5 meses.
Isto foi útil?
0 / 0