Back to top

Autore Topic: [RISOLTO] togliere effetti testo articoli su risoluzioni da mobile template  (Letto 5363 volte)

Offline Paolo.VR

  • Esploratore
  • **
  • Post: 52
    • Mostra profilo
salve,

negli articoli e nelle immagini del sito ho applicato gli effeti testo con "animate" su template responsive il punto è che per quanto riguardo il desktop mi vanno bene ma vorrei toglierle in quelle risoluzioni da mobile perchè aumentano troppo l'attesa di visualizzazione pagina.
Qualcuno sa dirmi come fare e soprattutto se si può?

grazie
« Ultima modifica: 16 Set 2017, 14:30:17 da Paolo.VR »

Offline marine

  • Moderator
  • Instancabile
  • *****
  • Post: 6314
  • Sesso: Maschio
    • Mostra profilo
Con le media queries

Offline Paolo.VR

  • Esploratore
  • **
  • Post: 52
    • Mostra profilo
ciao marine,

e già questo è un indizio almeno so cosa cercare, c'è qualche modulo o plug in da installare che lavora sulle media queries?
le media queries le ho già trovate nel css ma non so cosa inserire per togliere l'effetto anche perchè è inserito tramite codice nell'articolo
« Ultima modifica: 06 Set 2017, 21:29:23 da Paolo.VR »

Offline marine

  • Moderator
  • Instancabile
  • *****
  • Post: 6314
  • Sesso: Maschio
    • Mostra profilo
c'è qualche modulo o plug in da installare che lavora sulle media queries?

Sinceramente non saprei, prova a vedere nella jed

Offline Limma

  • Abituale
  • ****
  • Post: 1209
  • Sesso: Maschio
    • Mostra profilo
codice nell'articolo

Potresti postare uno di questi codici che hai utilizzato?

Offline Paolo.VR

  • Esploratore
  • **
  • Post: 52
    • Mostra profilo
certo Limma,

{edsnewanimate|class="eds-animate edsanimate-sis-hidden "|data-eds-entry-animation="fadeInDown"|data-eds-entry-delay="0"|data-eds-entry-duration="1.5"|data-eds-entry-timing="linear"|data-eds-exit-animation=""|data-eds-exit-delay=""|data-eds-exit-duration=""|data-eds-exit-timing=""|data-eds-repeat-count="1"|data-eds-keep="yes"|data-eds-animate-on="scroll"|data-eds-scroll-offset="75"}

è il codice che crea il plug in animate it

Offline Limma

  • Abituale
  • ****
  • Post: 1209
  • Sesso: Maschio
    • Mostra profilo
... ho scaricato il plugin e ho fatto un po' di prove.
Una soluzione l'avrei trovata, un po' macchinosa, ma fa quello che ti serve...

Il template che usi su quale versione di Bootstrap è basato ?

Offline Paolo.VR

  • Esploratore
  • **
  • Post: 52
    • Mostra profilo
dove posso vederla la versione di bootstrap?... perchè non ricordo di averla vista

Offline Paolo.VR

  • Esploratore
  • **
  • Post: 52
    • Mostra profilo
ovviamente nel css di bootstrap..chiedo venia.. mi da "Bootstrap v2.1.1"

Offline Limma

  • Abituale
  • ****
  • Post: 1209
  • Sesso: Maschio
    • Mostra profilo
L'esempio che vedi qui sotto serve per non visualizzare un paragrafo di testo e relativa animazione in uno smartphone (vedi l'inserimento della classe "hidden-phone" nell'html del paragrafo), e per visualizzarlo senza animazione solo nello smartphone ( vedi l'inserimento della classe "visible-phone").

Codice: [Seleziona]
{edsnewanimate|class="eds-animate edsanimate-sis-hidden "|data-eds-entry-animation="slideInLeft"|data-eds-entry-delay="0"|data-eds-entry-duration="1"|data-eds-entry-timing="linear"|data-eds-exit-animation=""|data-eds-exit-delay=""|data-eds-exit-duration=""|data-eds-exit-timing=""|data-eds-repeat-count="1"|data-eds-keep="yes"|data-eds-animate-on="load"|data-eds-scroll-offset=""}
<p class="hidden-phone">testo testo testo</p>
{/edsnewanimate}
<p class="visible-phone">testo testo testo</p>

La soluzione non è molto "elegante", e la macchinosità sta nel fatto che devi inserire due volte lo stesso testo. Ma col copia incolla fai in attimo.

Io l'ho provato, e funziona benissimo, con le classi di Bootstrap 3, ma dovrebbe funzionare senza problemi anche con le classi di Bootstrap 2 (quelle che ho usato sono riferite alla versione 2.3.2 di Bootstrap, e le puoi vedere qui al paragrafo "Responsive design").


 
« Ultima modifica: 06 Set 2017, 23:51:56 da Limma »

Offline marine

  • Moderator
  • Instancabile
  • *****
  • Post: 6314
  • Sesso: Maschio
    • Mostra profilo
La soluzione non è molto "elegante", e la macchinosità sta nel fatto che devi inserire due volte lo stesso testo

A parere mio è la soluzione corretta, bravo Limma.

Offline Paolo.VR

  • Esploratore
  • **
  • Post: 52
    • Mostra profilo
grazie Limma,

stasera provo il tuo metodo e ti faccio sapere, grazie ancora

Offline Paolo.VR

  • Esploratore
  • **
  • Post: 52
    • Mostra profilo
ho provato ha inserire quel codice con il testo ricopiato ma non funziona, quando vado a vedere con smartphone visualizza il secondo testo e anche la riga di comando del codice.

Secondo te è dovuto dalla versione di Bootstrap o sto sbagliando qualcosa io?
« Ultima modifica: 07 Set 2017, 20:10:53 da Paolo.VR »

Offline Limma

  • Abituale
  • ****
  • Post: 1209
  • Sesso: Maschio
    • Mostra profilo
... Ho appena provato col Template Protostar (Bootstrap 2) e funziona benissimo. Anche da smartphone.
Vedi qui.
Naturalmente ho fatto un copia incolla del codice che ti postato sopra.
« Ultima modifica: 07 Set 2017, 20:40:05 da Limma »

Offline Paolo.VR

  • Esploratore
  • **
  • Post: 52
    • Mostra profilo
ok...mi chiedo dove sbaglio allora...

ho inserito il codice con testo subito sotto {/edsnewanimate} incollando il testo tra 
<p class="visible-phone"...............</p>

da telefono però mi appare il testo che già c'era e il duplicato compreso di codice il tutto con ancora l'effetto di transizione
« Ultima modifica: 07 Set 2017, 20:51:05 da Paolo.VR »

Offline Limma

  • Abituale
  • ****
  • Post: 1209
  • Sesso: Maschio
    • Mostra profilo
... Prova facendo un copia incolla del codice di cui sopra.

In ogni caso controlla la sintassi. Il tag di apertura <p class="visible-phone"> va chiuso come ho scritto ora. Nel tuo post precedente non l'hai chiuso...

Offline Paolo.VR

  • Esploratore
  • **
  • Post: 52
    • Mostra profilo
ho controllato ma il codice è giusto...non capisco dove sbaglio..ho modificato solo una pagina al momento se vuoi vedere anche tu è questa
« Ultima modifica: 16 Set 2017, 14:28:05 da Paolo.VR »

Offline Paolo.VR

  • Esploratore
  • **
  • Post: 52
    • Mostra profilo
un momento..io l'ho inserito normalmente nell'editor come quello di animate it dove in pratica ho scritto l'articolo..lo devo inserire nella versione codice dell'editor?

Offline Paolo.VR

  • Esploratore
  • **
  • Post: 52
    • Mostra profilo
niente..ho provato a inserire nella parte "code" dell'editor ma si vede la copia del testo...una con la transizione e l'altra fissa

Offline Limma

  • Abituale
  • ****
  • Post: 1209
  • Sesso: Maschio
    • Mostra profilo
Ho dato un'occhiata al codice sorgente della pagina che hai linkato, e l'html risultante è alquanto diverso da quello del mio esempio con Protostar... E alcune cose mi sono poco comprensibili.

Se sei davanti al pc - fallo per me - copia e incolla il codicetto che ti ho postato all'inizio dell'articolo del tuo sito che hai linkato prima, lo incolli nell'editor in modalità codice.

Non può non funzionare... All'esempio che ho fatto ho anche aggiunto un'immaginina...

Offline Paolo.VR

  • Esploratore
  • **
  • Post: 52
    • Mostra profilo
l'ho incollato lato codice ed in effetti funziona, il testo appare statico solo che sopra si vede ancora il testo con l'animazione quindi appare doppio, uno dinamico e l'altro statico

Offline Limma

  • Abituale
  • ****
  • Post: 1209
  • Sesso: Maschio
    • Mostra profilo
l'ho incollato lato codice ed in effetti funziona, il testo appare statico solo che sopra si vede ancora il testo con l'animazione quindi appare doppio, uno dinamico e l'altro statico

Vabbé, mi arrendo...  :'(
Come hai visto nel mio piccolo esempio il problema che rilevi tu non c'è.

Magari qualcun altro troverà l'inghippo.


Offline Paolo.VR

  • Esploratore
  • **
  • Post: 52
    • Mostra profilo
si infatti ho visto che  nell'esempio funziona...non mi spiego continuo a guardare che non sto sbagliando io ma mi sembra di inserire tutto corretto...grazie molte davvero dell'aiuto e dell'interessamento!!! in caso mi arrenderò anche io a lasciarlo così o solo fisso senza alcun effetto..vediamo se qualcuno magari nota dove sbaglio

Offline Limma

  • Abituale
  • ****
  • Post: 1209
  • Sesso: Maschio
    • Mostra profilo
Potresti postare qui uno dei codici che hai usato tu nel tuo articolo, ma non solo il codice creato da Animate It, intendo anche con i paragrafi di testo (o quello che è) che hai animato.

Offline Limma

  • Abituale
  • ****
  • Post: 1209
  • Sesso: Maschio
    • Mostra profilo
Allora, non mi davo pace per cui ho prelevato il codice sorgente della tua pagina e ho fatto una prova.
Per la prova ho utilizzato i testi iniziali che hai animato col "fadeInDown".

Ecco il risultato. Naturalmente confronta PC e smartphone.

C'erano alcuni errori nei tag, errori che una volta emendati producono il risultato che vedi.

P.S. Ho anche cambiato, nella prova che vedi, questi due paragrafi di testo:
<h1><span style="color: #ffffff;"><span style="font-size: 14px;">Box doccia in vetro</span></span></h1>
<h2><span style="color: #ffffff;"><span style="font-size: 12px;">I box doccia con vetro trasparente o satinato e trattamento anti goccia apertura porta scorrevole o battente</span></span></h2>
paragrafi che risultano invisibili nella tua pagina in quanto testi di colore bianco (#ffffff) su background pagina bianco!


Offline Paolo.VR

  • Esploratore
  • **
  • Post: 52
    • Mostra profilo
non mi davo pace nemmeno io e stamattina credo di aver trovato l'inghippo e ora sta capirne il motivo!

in sostanza io copio il testo tra i tag del codice <p class="visible-phone">...............</p> inserisco tutto correttamente, clicco su salva ma quando si ricarica la pagina dell'editor torna il testo senza il codice...ho provato più volte anche cancellando la cache ma si elimina sempre la riga di comando

Offline Limma

  • Abituale
  • ****
  • Post: 1209
  • Sesso: Maschio
    • Mostra profilo
Se  fosse un problema di "rimozione" del codice dai un'occhiata a questo thread, troverai info in merito relativamente agli editor TinyMCE e JCE.

In verità, guardando l'html risultante della tua pagina il codice necessario c'è tutto, ma, mi ripeto, ci sono degli "errori" nei tag che ne impediscono il funzionamento...

Prova questo (fai copia incolla):
Codice: [Seleziona]
<div class="hidden-phone">
<div class="eds-animate edsanimate-sis-hidden " data-eds-entry-animation="fadeInDown" data-eds-entry-delay="0" data-eds-entry-duration="2.5" data-eds-entry-timing="linear" data-eds-exit-animation="" data-eds-exit-delay="" data-eds-exit-duration="" data-eds-exit-timing="" data-eds-repeat-count="1" data-eds-keep="yes" data-eds-animate-on="scroll" data-eds-scroll-offset="75">
<h1><span style="color: #000000;"><span style="font-size: 14px;">Box doccia in vetro</span></span></h1>
<h2><span style="color: #000000;"><span style="font-size: 12px;">I box doccia con vetro trasparente o satinato e trattamento anti goccia apertura porta scorrevole o battente</span></span></h2>
<p style="text-align: justify;"><span style="line-height: 1.8em;"><span style="color: #313235;">La stanza da bagno diventa sempre pi&ugrave; una parte di casa dove il gusto e l'estetica la fanno da padrona. I <strong>box doccia</strong> in solo vetro si integrano nella stanza salvaguardando lo spazio con la versione in vetro trasparente donando eleganza con la loro semplicit&agrave; mentre per chi non teme la riduzione degli spazi la versione con vetro satinato in diversi colori disponibili sa inserirsi in qualsiasi tipologia di rivestimento esistente all'interno. Vasta &egrave; la scelta delle aperture e delle parti metalliche che lo compongono con la possibilit&agrave; di scegliere la finitura di quest'ultime per meglio integrarsi alla rubinetteria dei sanitari. La pulizia viene facilitata dal trattamento antigoccia che rende il vetro brillante in pochi passi senza fatica.</span></span></p>
<p style="text-align: justify;"><span style="line-height: 1.8em;"><span style="color: #313235;">La continua evoluzione di questo affascinante materiale porta a poter proporre diverse tipologie di vetro oltre alle pi&ugrave; classiche. I satinati possono essere con finitura decorata o a gradiente per creare della privacy ma nel contempo dare sempre il tocco della trasparenza dove ed il trattamento anti goccia pu&ograve; essere reso permanente. </span></span></p>
</div>
</div>
<div class="visible-phone">
<h1><span style="color: #000000;"><span style="font-size: 14px;">Box doccia in vetro</span></span></h1>
<h2><span style="color: #000000;"><span style="font-size: 12px;">I box doccia con vetro trasparente o satinato e trattamento anti goccia apertura porta scorrevole o battente</span></span></h2>
<p style="text-align: justify;"><span style="line-height: 1.8em;"><span style="color: #313235;">La stanza da bagno diventa sempre pi&ugrave; una parte di casa dove il gusto e l'estetica la fanno da padrona. I <strong>box doccia</strong> in solo vetro si integrano nella stanza salvaguardando lo spazio con la versione in vetro trasparente donando eleganza con la loro semplicit&agrave; mentre per chi non teme la riduzione degli spazi la versione con vetro satinato in diversi colori disponibili sa inserirsi in qualsiasi tipologia di rivestimento esistente all'interno. Vasta &egrave; la scelta delle aperture e delle parti metalliche che lo compongono con la possibilit&agrave; di scegliere la finitura di quest'ultime per meglio integrarsi alla rubinetteria dei sanitari. La pulizia viene facilitata dal trattamento antigoccia che rende il vetro brillante in pochi passi senza fatica.</span></span></p>
<p style="text-align: justify;"><span style="line-height: 1.8em;"><span style="color: #313235;">La continua evoluzione di questo affascinante materiale porta a poter proporre diverse tipologie di vetro oltre alle pi&ugrave; classiche. I satinati possono essere con finitura decorata o a gradiente per creare della privacy ma nel contempo dare sempre il tocco della trasparenza dove ed il trattamento anti goccia pu&ograve; essere reso permanente. </span></span></p>
</div>
« Ultima modifica: 08 Set 2017, 13:55:25 da Limma »

Offline Paolo.VR

  • Esploratore
  • **
  • Post: 52
    • Mostra profilo
ma non capisco...perchè allora io dall'editor non vedo il codice!?...
altra cosa...gli errori neli tag dici il colore del font?

Offline Paolo.VR

  • Esploratore
  • **
  • Post: 52
    • Mostra profilo
Limma...ho copiato e incollato e ....funziona!!...ora lo dovrò applicare a tutti gli altri articoli, quindi non funzionava per i tag con gli errori!?

PS: il titolo bianco è fatto di proposito perchè essendo già presente nella slide sopra non lo volevo ripetere visivamente
« Ultima modifica: 08 Set 2017, 21:35:46 da Paolo.VR »

Offline Limma

  • Abituale
  • ****
  • Post: 1209
  • Sesso: Maschio
    • Mostra profilo
E ci mancava anche che non funzionasse...!  ;)

Scherzi a parte, il codice di cui hai fatto copia/incolla funziona come funzionavano tutti gli altri esempi che ti ho linkato.
In realtà, guardando l'html della tua pagina, c'è qualcosa che non mi quadra nella procedura che attui per applicare le animazioni col codice fornito da Animate It.
Per esempio: prima che incollassi il mio codice avevi un TAG <p> anteposto a <div class="eds-animate ecc. ecc. che non capisco proprio da dove saltasse fuori. Nelle prove che ho fatto io non c'era mai, e non ci dovrebbe proprio essere.
Forse - passami il termine - "pasticci" un po' tra editor in modalità visuale e in modalità codice...

Vedi un po' quando applichi nuovamente la procedura.

P.S. Non è fondamentale, ma piuttosto che rendere "invisibile" un testo, lo toglierei proprio, o lo modificherei per dargli un senso come titolo diverso da quello che usi nella slide.
Poi quello spazio bianco tra slide e testo è un po' troppo per i miei gusti, soprattutto nella visualizzazione da mobile.
Ma è solo un'opinione, naturalmente.

Offline Paolo.VR

  • Esploratore
  • **
  • Post: 52
    • Mostra profilo
ahahah...ero sicuro di essere io a sbagliare qualcosa!...solo che non riuscivo a capire cosa e dove...il codice di animate lo copiavo semplicemente dal sito ma ho notato spesso e volentieri, pasticci a parte miei che confermo!, che molte volte scrivo l'articolo salvo e lato codice ci sono cose come tag <p> o spazi vuoti che fanno saltare la riga che io non ho mai inserito e a fatica riesco a togliere se non ricreando un nuovo articolo...

nella visione da mobile sono pienamente d'accordo neanche a me piace tutto quel vuoto e ci dovrò lavorare, toglierli se ho ben capito a livelli SEO è come non essere visualizzati nella serp (serp locale in questo caso)

..grazie infinite per il tempo e la pazienza che hai dedicato al mio enigamtico "problema"..sono in debito...birra pagata se passi da queste parti... ;)  ...

..non escludo di tornare con nuovi quesiti però eh!?
« Ultima modifica: 08 Set 2017, 22:19:44 da Paolo.VR »

Offline Limma

  • Abituale
  • ****
  • Post: 1209
  • Sesso: Maschio
    • Mostra profilo
..grazie infinite per il tempo e la pazienza che hai dedicato al mio enigamtico "problema"..sono in debito...birra pagata se passi da queste parti... ;)  ...

Di nulla. Se VR sta per Verona (visto anche il sito), io non abito molto distante, e una birra non si rifiuta mai!  ;D

..non escludo di tornare con nuovi quesiti però eh!?

A volte ritornano...!  ;D

P.S. I moderatori scusino l'OT... 

Offline marine

  • Moderator
  • Instancabile
  • *****
  • Post: 6314
  • Sesso: Maschio
    • Mostra profilo
PS: il titolo bianco è fatto di proposito perchè essendo già presente nella slide sopra non lo volevo ripetere visivamente

toglierli se ho ben capito a livelli SEO è come non essere visualizzati nella serp (serp locale in questo caso)

Nascondere contenuti con vari escamotage (es. testo bianco su sfondo bianco) è una pratica che a google non piace proprio!

Offline Paolo.VR

  • Esploratore
  • **
  • Post: 52
    • Mostra profilo
vedrò di cambiare o toglierli

Offline Paolo.VR

  • Esploratore
  • **
  • Post: 52
    • Mostra profilo
solo una domanda pur sapendo di essere OT...il doppio tag H1 non crea problemi per l'indicizzazione!?

 



Web Design Bolzano Kreatif