VERTICAL FAQ - LO SMANETTONE

Esempi e Codice
Vai ai contenuti

VERTICAL FAQ - ACCORDION
Progetto FREE
Un esempio di come si può realizzare una sorta di faq con titolo verticale "responsive". Molto semplice da realizzare.
Il contenuto del codice e dei relativi testi va inserito in un normale oggetto html
  • CREA LA TUA PAGINA TEST
  • VAI AL PASSO 3 E SULLE PROPRIETÀ DELLA PAGINA CHE HAI APPENA CREATO INSERISCI QUESTO CODICE PRIMA DELLA CHIUSURA DEL TAG HEAD CHE EVITA LA SCROOL DELLA BARRA BROWSER POSTA SUL FOOTER NEL CASO SUL TUO PROGETTO SI PRESENTASSE IN ANTEPRIMA: ► <!-- Da inserire ma facoltativo. Elimina la barra scrool sul footer -->
    <style> body {overflow-x:hidden} </style>.
  • VAI ORA SULLA TUA PAGINA CHE HAI CREATO E INSERISCI UN OGGETTO HTML
  • APRI L'OGGETTO HTML CON DOPPIO CLICK NELLA STRUTTURA DI PAGINA
  • INSERISCI TUTTO IL CODICE CHE SEGUE MODIFICANDO LE PARTI DI INTERESSE
  • CAMBIA IL PERCORSO DELL'IMMAGINE DI SFONDO CON UNA TUA IMMAGINE (FALLO PER OGNI BOX FAQ)
  • SUL CODICE CAMBIA I TITOLI E I CONTENUTI PRESENTI METTENDOCI I TUOI
  • SALVA TUTTO
  • SE TUTTO E' ANDATO OK DOVRESTI VISUALIZZARE SULLA TUA PAGINA L'OGGETTO COME DA ESEMPIO SOTTOSTANTE.



PRO
  • Effetto gradevole in puro CSS3 (indipendentemente dai gusti personali)
  • Possibilità di manipolare lo stile del Box con le opzioni INCOMEDIA
  • Utilizzo di risorse minime
  • Si può impostare il tag H2 sullo style iniziale del codice per adattare i titoli sui cellulari.
CONTRO
  • Si perde un po di tempo a mettere le proprie faq e cercare una immagine appropriata di sfondo



  • NOLEGGIO

    1. Il modulo autorizza sia l'accesso al sito sia lo scaricamento dei file necessari all'installazione del software EUREKA sulla propria postazione.
    2. Suggeriamo che, in fase di prima installazione, dopo aver effettuato l'accesso e scaricato tutto il materiale occorrente per l'inizializzazione del prodotto,di dare uno sguardo preliminare alla guida in pdf onde apprendere le preliminari nozioni sulle azioni da compiere per una corretta installazione del software.

  • ACCESSO

    1. La registrazione al sito prevede che, una volta inviata la richiesta di registrazione, sia l'Amministratore di sistema che vi abilita poi a fare accesso inviandovi una e-mail nella quale vi sarà indicata la possibilità di eseguire il login.
    2. La procedura non avviene in tempo reale ma a monte vengono fatti controlli volti ad eliminare tutti gli accessi abusivi che potrebbero verificarsi.
    3. In parole più semplici se non vi arriva l'email dell'amministratore di sistema con il quale vi si concede l'abilitazione al Login , non sarà mai possibile eseguire nessun accesso da parte vostra.

  • SUPPORTO

    1. L'amministrazione EUREKA offre sempre una piena assistenza nei limiti del possibile e in tempo reale attraverso canali telematici come TELEGRAM e WA.

  • E-MAIL

    Quando avete il sospetto che il ritardo nella ricezione di una e-mail amministrativa EUREKA vadi oltre un ragionevole tempo, controllate anche la vostra posta spam o re-inviate un sollecito all'amministrazione EUREKA tramite il nostro modulo contatti.

  • LOGIN

    SE ricevuto l'abilitazione al LOGIN non riuscite a fare accesso, ci potrebbero essere più cause invalidanti come,ad esempio, errata digitazione dell'email con la quale vi eravate registrati,errato inserimento della password richiesta per il login, blocchi firewall aziendali, accettazione dei cookie bloccata dai vostri browser, blocco antivirus (vanno messe le eccezioni) ecc...

CODICE DA INSERIRE

INSERISCI IN CODICE
<style>
  
  .accordion-title {
  font-size: 24px !important;
}
</style>

<!-- Start 1st accordion -->
<div class="T73auXqB6A1R7oKOBA8BDesP h-100 reset-max-600 hover nav nav-square nav-bottom scroll">
<ul>
  <!-- Start 1st slide -->
  <li>
    <div style="background-image: url('https://www.interception.altervista.org/mo.jpg');">
      <div class="accordion-text pYLEi1aS9dFRUWLSptPEh7ov">
        <div class="centered">
          <h2 class="accordion-title">NOLEGGIO</h2>
          <div class="accordion-body"><ol>
             <li>Il modulo autorizza sia l'accesso al sito sia lo scaricamento dei file necessari all'installazione del software EUREKA sulla  propria postazione.</li>
              <li>Suggeriamo che, in fase di prima installazione, dopo aver effettuato l'accesso e scaricato tutto il materiale occorrente per  l'inizializzazione del prodotto,di dare uno sguardo preliminare alla guida in pdf onde apprendere le preliminari nozioni sulle  azioni da compiere per una corretta installazione del software.</li></ol>
                  </div>
        </div>
      </div>
      <div class="accordion-nav">
        <a class="disabled" href="#" onclick="return false;"><i class="fa fa-angle-left" aria-hidden="true"></i></a>
        <a href="#" onclick="return false;"><i class="fa fa-angle-right" aria-hidden="true"></i></a>
      </div>
  </div>
</li>
<!-- End 1st slide -->
<!-- Start 2nd slide -->
  <li>
    <div style="background-image: url('https://www.interception.altervista.org/mo.jpg');">
      <div class="accordion-text pYLEi1aS9dFRUWLSptPEh7ov">
        <div class="centered">
          <h2 class="accordion-title">ACCESSO</></h2>
         
          <div class="accordion-body"><ol>
              <li>La registrazione al sito prevede che, una volta inviata la richiesta di registrazione, sia l'Amministratore di sistema che vi  abilita poi a fare accesso inviandovi una e-mail nella quale vi sarà indicata la possibilità di eseguire il login.</li>
                   <li>La procedura non avviene in tempo reale ma a monte vengono fatti controlli volti ad eliminare tutti gli accessi abusivi che  potrebbero verificarsi.</li>
              <li>In parole più semplici se non vi arriva l'email dell'amministratore di sistema con il quale vi si concede l'abilitazione al Login, non sarà mai possibile eseguire nessun accesso da parte vostra.</li></ol>
          </div>
        </div>
      </div>
      <div class="accordion-nav">
        <a href="#" onclick="return false;"><i class="fa fa-angle-left" aria-hidden="true"></i></a>
        <a href="#" onclick="return false;"><i class="fa fa-angle-right" aria-hidden="true"></i></a>
      </div>
  </div>
</li>
<!-- End 2nd slide -->
<!-- Start 3rd slide -->
  <li>
    <div style="background-image: url('https://www.interception.altervista.org/mo.jpg');">
      <div class="accordion-text pYLEi1aS9dFRUWLSptPEh7ov">
        <div class="centered">
          <h2 class="accordion-title">SUPPORTO</h2>
          <div class="accordion-body"><ol>
              <li>L'amministrazione EUREKA offre sempre una piena assistenza nei limiti del possibile e in tempo reale attraverso canali telematici come TELEGRAM e WA.</li></ol>
          </div>
        </div>
      </div>
      <div class="accordion-nav">
        <a href="#" onclick="return false;"><i class="fa fa-angle-left" aria-hidden="true"></i></a>
        <a href="#" onclick="return false;"><i class="fa fa-angle-right" aria-hidden="true"></i></a>
      </div>
  </div>
</li>
<!-- End 3rd slide -->
<!-- Start 4th slide -->
  <li>
    <div style="background-image: url('https://www.interception.altervista.org/mo.jpg');">
      <div class="accordion-text pYLEi1aS9dFRUWLSptPEh7ov">
        <div class="centered">
          <h2 class="accordion-title">E-MAIL</h2>
          <p class="accordion-body">
            Quando avete il sospetto che il ritardo nella ricezione di una e-mail amministrativa EUREKA vadi oltre un ragionevole tempo, controllate anche la vostra posta spam o re-inviate un sollecito all'amministrazione EUREKA tramite il nostro modulo contatti.
          </p>
        </div>
      </div>
      <div class="accordion-nav">
        <a href="#" onclick="return false;"><i class="fa fa-angle-left" aria-hidden="true"></i></a>
        <a href="#" onclick="return false;"><i class="fa fa-angle-right" aria-hidden="true"></i></a>
      </div>
  </div>
</li>
<!-- End 4th slide -->
<!-- Start 5th slide -->
  <li>
    <div style="background-image: url('https://www.interception.altervista.org/mo.jpg');">
      <div class="accordion-text pYLEi1aS9dFRUWLSptPEh7ov">
        <div class="centered">
          <h2 class="accordion-title">LOGIN</h2>
          <p class="accordion-body">
            SE ricevuto l'abilitazione al LOGIN non riuscite a fare accesso, ci potrebbero essere più cause invalidanti come,ad esempio, errata digitazione dell'email con la quale vi eravate registrati,errato inserimento della password richiesta per il login, blocchi firewall aziendali, accettazione dei cookie bloccata dai vostri browser, blocco antivirus (vanno messe le eccezioni) ecc...
          </p>
        </div>
      </div>
      <div class="accordion-nav">
        <a href="#" onclick="return false;"><i class="fa fa-angle-left" aria-hidden="true"></i></a>
        <a class="disabled" href="#" onclick="return false;"><i class="fa fa-angle-right" aria-hidden="true"></i></a>
      </div>
  </div>
</li>
<!-- End 5th slide -->
</ul>
</div>
COMMENTA ▼
Non sono presenti ancora recensioni.
5 
0
4 
0
3 
0
2 
0
1 
0

Crediti

Questo pannello è stato personalizzato da Losmanettone.it a partire dal progetto open source SIENNA concesso sotto licenza MIT.

Torna ai contenuti