widget

Esempi di vari widget inseribili direttamente nei contenuti della pagina tramite il tool standard di Jimdo selezionando il bottone "Altri contenuti" e successivamente "widget/html". La modifica dei parametri dei singoli widget avviene sostituendo/modificando le parti del codice indicate in rosso.

Nel tutorial è descritto come reperire il corretto url delle proprie immagini. La sostituzione dei testi avviene direttamente modificando i testi del codice widget d'esempio.


tutti i shortcodes per inserire i widget nel sito

full slider  

inserendo come sopra descritto il codice a lato comparirà in testa alla pagina questo full slider con testi. 

codice copia/incolla e modifica

 

<div id="hs-slider-fullwidth" class="owl-carousel owl-theme"> <div class="item"> <img src="http://u.jimdo.com/www70/o/sc56747b598fef120/userlayout/img/slide01.jpg" alt="" /> <div class="carousel-caption"> <center> <h1 class="color-dark"> It's time for custom design </h1> <a class="hs-button" href="http://www.matrix-themes.com/purchase">learn more</a> </center> </div> </div> <div class="item"> <img src="http://u.jimdo.com/www70/o/sc56747b598fef120/userlayout/img/slide02.jpg" alt="" /> <div class="carousel-caption"> <center> <h1 class="color-white"> Professional support </h1> <a class="hs-button" href="http://www.matrix-themes.com/purchase">learn more</a> </center> </div> </div> <div class="item"> <img src="http://u.jimdo.com/www70/o/sc56747b598fef120/userlayout/img/slide03.jpg" alt="" /> <div class="carousel-caption bg"> <h1 class="color-white"> It's time for custom design </h1> <p class="color-white"> Quisque velit nisi, pretium ut lacinia in, elementum id enim. </p> </div> </div> </div> <div class="matrix-msg invisible">
Edit here your fullwidth slider
</div>

slider area contenuti testo al centro

inserendo come sopra descritto il codice a lato comparirà nell'area contenuti questo slider con testi.

codice copia/incolla e modifica

<!-- ************* Responsive Carousel ************* --> <div id="hs-slider" class="owl-carousel owl-theme"> <div class="item"> <img src="http://u.jimdo.com/www70/o/sc56747b598fef120/userlayout/img/slide01.jpg" alt="" /> <div class="carousel-caption"> <center> <h1 class="color-dark"> It's time for custom design </h1> <a class="hs-button" href="http://www.matrix-themes.com/purchase">learn more</a> </center> </div> </div> <div class="item"> <img src="http://u.jimdo.com/www70/o/sc56747b598fef120/userlayout/img/slide02.jpg" alt="" /> <div class="carousel-caption"> <center> <h1 class="color-white"> Professional support </h1> <a class="hs-button" href="http://www.matrix-themes.com/purchase">learn more</a> </center> </div> </div> <div class="item"> <img src="http://u.jimdo.com/www70/o/sc56747b598fef120/userlayout/img/slide03.jpg" alt="" /> <div class="carousel-caption bg"> <h1 class="color-white"> It's time for custom design </h1> <p class="color-white"> Quisque velit nisi, pretium ut lacinia in, elementum id enim. </p> </div> </div> </div>

full image

inserendo come sopra descritto il codice a lato comparirà in testa alla pagina questa full image con testi. 

codice copia/incolla e modifica


<!-- ************* Single image Carousel ************* -->
<div id="image-fullwidth"> <div class="item"> <img src="http://u.jimdo.com/www64/o/se157b2c84ae3c4bd/userlayout/img/slide4.jpg" alt="" /> <div class="carousel-caption"> <center> <h1 class="color-white"> It's time for custom design </h1>

</center> </div> </div> </div>
<div class="matrix-msg invisible">
Edit here your fullwidth image
</div>

slider area contenuti testo a sinistra e colore

inserendo come sopra descritto il codice a lato comparirà nell'area contenuti questo slider con testi.

codice copia/incolla e modifica

<!-- ************* Responsive Carousel ************* --> <div id="hs-slider" class="owl-carousel owl-theme no-pagination"> <div class="item"> <img src="http://u.jimdo.com/www70/o/sc56747b598fef120/userlayout/img/slide01.jpg" alt="" /> <div class="carousel-caption caption-right green color-white"> <h2> left caption </h2> <p> Quisque velit nisi, pretium ut lacini </p> </div> </div> <div class="item"> <img src="http://u.jimdo.com/www70/o/sc56747b598fef120/userlayout/img/slide02.jpg" alt="" /> <div class="carousel-caption caption-left yellow color-dark"> <h2> left caption </h2> <p> Quisque velit nisi, pretium ut lacini </p> </div> </div> <div class="item"> <img src="http://u.jimdo.com/www70/o/sc56747b598fef120/userlayout/img/slide03.jpg" alt="" /> <div class="carousel-caption caption-right purple color-white"> <h2> Caption with links </h2> <p> Quisque <a href="http://matrix-themes.com/">Your custom title</a> velit nisi, pretium ut lacini </p> </div> </div> </div> </div>


content teaser1

codice copia/incolla e modifica

<!-- ************* Content teaser ************* --><div class="content-teaser cc-clearover"> <div class="hs-left"> <h2>I build Jimdo themes for your Business</h2> <p>Premium Jimdo Theme coupled with advanced functionality and awesome support</p> </div> <div class="hs-right"><a class="hs-button" href="http://www.matrix-themes.com/purchase" target="">learn more</a></div> </div> <!-- ************* End Content teaser ************* -->

content teaser 2

codice copia/incolla e modifica

<!-- ************* Content teaser style 2 ************* --><div class="content-teaser green cc-clearover"> <div class="hs-left"> <h2>I build Jimdo themes for your Business</h2> <p>Premium Jimdo Theme coupled with advanced functionality and awesome support</p> </div> <div class="hs-right"><a class="hs-button bg-round" href="http://www.matrix-themes.com/purchase" target="">learn more</a></div> </div> <!-- ************* End Content teaser ************* -->

quote teaser 1

The only way to get smarter is by playing a smarter opponent.

– Fundamentals of Chess 1883

codice copia/incolla e modifica

<!-- ************* Quote teaser ************* --><div class="quote-teaser"> <blockquote> <p> The only way to get smarter is by playing a smarter opponent. </p> <cite>– Fundamentals of Chess 1883</cite> </blockquote> </div> <!-- ************* End Quote teaser ************* -->

quote teaser 2

The only way to get smarter is by playing a smarter opponent.

– Fundamentals of Chess 1883

codice copia/incolla e modifica

<!-- ************* Quote teaser style 2 ************* --><div class="quote-teaser2"> <blockquote> <p> The only way to get smarter is by playing a smarter opponent. </p> <cite>– Fundamentals of Chess 1883</cite> </blockquote> </div> <!-- ************* End Quote teaser ************* -->

aggiungere links personalizzati

versione 1

codice copia/incolla e modifica

<!-- ************* Custom links style 1 ************* --><div class="links"> <ul> <li> <a href="/">Lorem ipsum dolor sit amet</a> </li> <li> <a href="/">Lorem ipsum dolor sit amet</a> </li> <li> <a href="/">Lorem ipsum dolor sit amet</a> </li> <li> <a href="/">Lorem ipsum dolor sit amet</a> </li> </ul> </div> <!-- ************* end Custom links ************* -->

versione 2

codice copia/incolla e modifica

<!-- ************* Custom links style 2 ************* --><div class="plus"> <ul> <li> <a href="/">Lorem ipsum dolor sit amet</a> </li> <li> <a href="/">Lorem ipsum dolor sit amet</a> </li> <li> <a href="/">Lorem ipsum dolor sit amet</a> </li> <li> <a href="/">Lorem ipsum dolor sit amet</a> </li> </ul> </div> <!-- ************* end Custom links ************* -->


aggiungere tags personalizzati

versione 1

codice copia/incolla e modifica

<div class="tagcloud cc-clearover"> <a href="/">Jimdo</a> <a href="/">Matrix</a> <a href="/">Design</a> <a href="/">Responsive</a> <a href="/">jQuery</a> <a href="/">Milano</a> <a href="/">templates</a> <a href="/">business</a> </div>

versione 2

codice copia/incolla e modifica

<div class="tagcloud mid-round cc-clearover"> <a href="/">Jimdo</a> <a href="/">Matrix</a> <a href="/">Design</a> <a href="/">Responsive</a> <a href="/">jQuery</a> <a href="/">Milano</a> <a href="/">templates</a> <a href="/">business</a> </div>

versione 3

codice copia/incolla e modifica

<div class="tagcloud bg-round cc-clearover"> <a href="/">Jimdo</a> <a href="/">Matrix</a> <a href="/">Design</a> <a href="/">Responsive</a> <a href="/">jQuery</a> <a href="/">Milano</a> <a href="/">templates</a> <a href="/">business</a> </div>


effetti su immagini /immagini e testo

tipologia cursore 1

Your custom title

This is an example text, simply click to edit or delete it. Delete example content by clicking on it and using the trash icon on the left. The plus icon lists all of the elements you can use to add content to your website

codice copia/incolla e modifica

<!-- ************* Overlay teaser with simple image link ************* --> <div class="hs-thumbnail"> <img src="http://u.jimdo.com/www65/o/sca605c2799058ab5/userlayout/img/slide01.jpg" alt="" /> <div class="thumbnail-hover"> <a href="http://matrix-themes.com/"></a> </div> </div> <!-- ************* end overlay teaser ************* -->
<!-- ************* start description ************* --> <div class="hs-description"> <h3> <a href="http://matrix-themes.com/">Your custom title</a> </h3> <p> This is an example text, simply click to edit or delete it. Delete example content by clicking on it and using the trash icon on the left. The plus icon lists all of the elements you can use to add content to your website </p> </div> <!-- ************* End description ************* -->

tipologia cursore 2

Your custom title

This is an example text, simply click to edit or delete it. Delete example content by clicking on it and using the trash icon on the left. The plus icon lists all of the elements you can use to add content to your website

codice copia/incolla e modifica

<!-- ************* Overlay teaser with simple image link ************* --> <div class="hs-thumbnail"> <img src="http://u.jimdo.com/www65/o/sca605c2799058ab5/userlayout/img/slide01.jpg" alt="" /> <div class="thumbnail-hover info-icon"> <a href="http://matrix-themes.com/"></a> </div> </div> <!-- ************* end overlay teaser ************* -->
<!-- ************* start description ************* --> <div class="hs-description"> <h3> <a href="http://matrix-themes.com/">Your custom title</a> </h3> <p> This is an example text, simply click to edit or delete it. Delete example content by clicking on it and using the trash icon on the left. The plus icon lists all of the elements you can use to add content to your website </p> </div> <!-- ************* End description ************* -->

tipologie sfondo caption

Your custom title

This is an example text, simply click to edit or delete it. Delete example content by clicking on it and using the trash icon on the left. The plus icon lists all of the elements you can use to add content to your website

<div class="hs-description">

        <h3>

            Your custom title

        </h3>


        <p>

            This is an example text, simply click to edit or delete it. Delete example content by clicking on it and using the trash icon on the left. The plus icon lists all of the elements you can

            use to add content to your website

        </p>

    </div>

Your custom title

This is an example text, simply click to edit or delete it. Delete example content by clicking on it and using the trash icon on the left. The plus icon lists all of the elements you can use to add content to your website

<div class="hs-description bg-primary-dark color-white">

        <h3>

            Your custom title

        </h3>


        <p>

            This is an example text, simply click to edit or delete it. Delete example content by clicking on it and using the trash icon on the left. The plus icon lists all of the elements you can

            use to add content to your website

        </p>

    </div>

   <div class="hs-description jimdo-green bg-image color-white link-white">

        <h3>

            Your custom title

        </h3>


        <p>

            This is an example text, simply click to edit or delete it. Delete example content by clicking on it and using the trash icon on the left. The plus icon lists all of the elements you can

            use to add content to your website

        </p>

    </div>


tabelle prezzi

€ 60,00

Professional package


Custom button

codice copia/incolla e modifica versione 1


<!-- ************* pricing table ************* --> <div class="hs-description jimdo-green color-white"> <center> <h1 class="big"> € 60,00 </h1> <p> Professional package </p> </center> </div> <!-- ************* End description ************* --> <!-- ************* description style 1 ************* --> <div class="hs-description"> <center> <!-- ************* Custom links style 1 ************* --> <div class="links"> <ul> <li>Lorem ipsum dolor sit amet </li> <li>Lorem ipsum dolor sit amet </li> <li>Lorem ipsum dolor sit amet </li> <li>Lorem ipsum dolor sit amet </li> <li>Lorem ipsum dolor sit amet </li> </ul> </div> <!-- ************* end Custom links style 1 ************* --> <!-- ************* style 2 ************* --> <br /> <a class="hs-button bg-round" href="http://www.matrix-themes.com/purchase" target="">Custom button</a> </center> </div> <!-- ************* End description ************* -->

€ 150,00

Advanced package


Custom button

codice copia/incolla e modifica versione 2

<!-- ************* pricing table ************* --> <div class="hs-description jimdo-blue color-white"> <center> <h1 class="big"> € 150,00 </h1> <p> Advanced package </p> </center> </div> <!-- ************* End description ************* --> <!-- ************* description style 1 ************* --> <div class="hs-description"> <center> <!-- ************* Custom links style 1 ************* --> <div class="links"> <ul> <li>Lorem ipsum dolor sit amet </li> <li>Lorem ipsum dolor sit amet </li> <li>Lorem ipsum dolor sit amet </li> <li>Lorem ipsum dolor sit amet </li> <li>Lorem ipsum dolor sit amet </li> </ul> </div> <!-- ************* end Custom links style 1 ************* --> <!-- ************* style 2 ************* --> <br /> <a class="hs-button bg-round" href="http://www.matrix-themes.com/purchase" target="">Custom button</a> </center> </div> <!-- ************* End description ************* -->


aggiungere video 2 versioni

in entrambe le versioni compaiono la foto a scelta che si riferisce al video ed una descrizione (che si potra' omettere) cliccando sulla foto appare un pop-up sovrapposto del video

Open YouTube video

This is an example text, simply click to edit or delete it. Delete example content by clicking on it and using the trash icon on the left. The plus icon lists all of the elements you can use to add content to your website

codice copia/incolla e modifica versione 1

<!-- ************* Overlay teaser with YouTube video ************* --> <div class="hs-thumbnail"> <img src="http://u.jimdo.com/www62/o/s572cf8a914c2631f/userlayout/img/teaser2.jpg" alt="" /> <div class="thumbnail-hover"> <a class="popup-youtube" href="http://www.youtube.com/watch?v=ajVoeX4eqIQ"></a> </div> </div> <!-- ************* End YouTube video ************* --> <!-- ************* Start description ************* --> <div class="hs-description"> <h3> <a href="http://matrix-themes.com/">Open YouTube video</a> </h3> <p> This is an example text, simply click to edit or delete it. Delete example content by clicking on it and using the trash icon on the left. The plus icon lists all of the elements you can use to add content to your website </p> </div> <!-- ************* End description ************* -->


Open Vimeo video

This is an example text, simply click to edit or delete it. Delete example content by clicking on it and using the trash icon on the left. The plus icon lists all of the elements you can use to add content to your website

codice copia/incolla e modifica versione 2

<!-- ************* Overlay teaser with Vimeo video ************* --> <div class="hs-thumbnail"> <img src="http://u.jimdo.com/www62/o/s572cf8a914c2631f/userlayout/img/teaser1.jpg" alt="" /> <div class="thumbnail-hover"> <a class="popup-vimeo" href="http://vimeo.com/44251332"></a> </div> </div> <!-- ************* End Vimeo video ************* --> <!-- ************* Start description ************* --> <div class="hs-description"> <h3> <a href="http://matrix-themes.com/">Open Vimeo video</a> </h3> <p> This is an example text, simply click to edit or delete it. Delete example content by clicking on it and using the trash icon on the left. The plus icon lists all of the elements you can use to add content to your website </p> </div> <!-- ************* End description ************* -->



google maps

Open Google Map

This is an example text, simply click to edit or delete it. Delete example content by clicking on it and using the trash icon on the left. The plus icon lists all of the elements you can use to add content to your website

codice copia/incolla e modifica

 

<!-- ************* Overlay teaser with Google Maps ************* --> <div class="hs-thumbnail"> <img src="http://u.jimdo.com/www62/o/s572cf8a914c2631f/userlayout/img/teaser3.jpg" alt="" /> <div class="thumbnail-hover"> <a class="popup-gmaps" href="https://maps.google.it/maps?q=milan+italy&ll=45.465458,9.186502&spn=0.016163,0.038452&hnear=Milan,+Lombardy&gl=it&t=m&z=15&iwloc=A"></a> </div> </div> <!-- ************* End Google Maps ************* --> <!-- ************* Start description ************* --> <div class="hs-description"> <h3> <a href="http://matrix-themes.com/">Open Google Map</a> </h3> <p> This is an example text, simply click to edit or delete it. Delete example content by clicking on it and using the trash icon on the left. The plus icon lists all of the elements you can use to add content to your website </p> </div> <!-- ************* End description ************* -->


tabs

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

codice copia/incolla e modifica

<!-- ************* jQuery Tabs ************* --><ul class="tabs-nav"> <li class="active"> <a href="#tab1">First</a> </li> <li> <a href="#tab2">Second</a> </li> <li> <a href="#tab3">Third</a> </li> </ul> <div class="tabs-container"> <div id="tab1" class="tab-content"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> <div id="tab2" class="tab-content"> <p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </div> <div id="tab3" class="tab-content"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> <p> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </div> </div> <!-- ************* End jQuery Tabs ************* -->


toggle

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

codice copia/incolla e modifica

<!-- ************* jQuery Toggles ************* --><div class="toggle"> <a class="switch" href="#"></a> Lorem ipsum dolor <div class="content"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> </div> <!-- ************* End jQuery Toggles ************* -->


animazione testo

This is your Heading

codice copia/incolla e modifica

<!-- ************* CSS animation ************* --><div class="animated fadeInRight"> <h1> This is your Heading </h1> </div> <!-- ************* End CSS animation ************* -->


full color back testo

Nulla porttitor accumsan tincidunt. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Nulla porttitor accumsan tincidunt. Pellentesque in ipsum id orci porta dapibus. Vivamus suscipit tortor eget felis porttitor volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultricies ligula sed magna dictum porta. Donec sollicitudin molestie malesuada. Nulla porttitor accumsan tincidunt

codice copia/incolla e modifica versione 1

<div class="hs-fullwidth cc-clearover"><p>
Nulla porttitor accumsan tincidunt. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Nulla porttitor accumsan tincidunt. Pellentesque in ipsum id orci porta dapibus. Vivamus suscipit tortor eget felis porttitor volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultricies ligula sed magna dictum porta. Donec sollicitudin molestie malesuada. Nulla porttitor accumsan tincidunt
</p>
</div>

Nulla porttitor accumsan tincidunt. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Nulla porttitor accumsan tincidunt. Pellentesque in ipsum id orci porta dapibus. Vivamus suscipit tortor eget felis porttitor volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultricies ligula sed magna dictum porta. Donec sollicitudin molestie malesuada. Nulla porttitor accumsan tincidunt

codice copia/incolla e modifica versione 2

<div class="hs-fullwidth green cc-clearover"><p>
Nulla porttitor accumsan tincidunt. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Nulla porttitor accumsan tincidunt. Pellentesque in ipsum id orci porta dapibus. Vivamus suscipit tortor eget felis porttitor volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultricies ligula sed magna dictum porta. Donec sollicitudin molestie malesuada. Nulla porttitor accumsan tincidunt
</p>
</div>

Nulla porttitor accumsan tincidunt. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Nulla porttitor accumsan tincidunt. Pellentesque in ipsum id orci porta dapibus. Vivamus suscipit tortor eget felis porttitor volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultricies ligula sed magna dictum porta. Donec sollicitudin molestie malesuada. Nulla porttitor accumsan tincidunt

codice copia/incolla e modifica versione 3 (con immagine di background

<div class="hs-fullwidth jimdo-green bg-image color-white cc-clearover"><p>
Nulla porttitor accumsan tincidunt. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Nulla porttitor accumsan tincidunt. Pellentesque in ipsum id orci porta dapibus. Vivamus suscipit tortor eget felis porttitor volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultricies ligula sed magna dictum porta. Donec sollicitudin molestie malesuada. Nulla porttitor accumsan tincidunt
</p>
</div>

meta' pagina con testo e colore

codice copia/incolla e modifica 

<div class="half-fullwidth"> <div class="mid-box-left bg-primary"> <div class="hs-description bg-transparent color-white link-white cc-clearover"> <div class="hs-center"> <h2>This is your heading</h2> <p>Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Cras ultricies ligula sed magna dictum porta. Nulla quis lorem ut libero malesuada feugiat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Nulla quis lorem ut libero malesuada feugiat. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Donec rutrum congue leo eget malesuada.</p> </div> </div> </div> <div class="mid-box-right bg-primary-dark"> <div class="hs-description bg-transparent color-white link-white cc-clearover"> <div class="hs-center"> <h2>This is your heading</h2> <p>Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Cras ultricies ligula sed magna dictum porta. Nulla quis lorem ut libero malesuada feugiat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Nulla quis lorem ut libero malesuada feugiat. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Donec rutrum congue leo eget malesuada.</p> </div> </div> </div> </div>

bottoni 5 versioni (la versione 4 ghost e' per fondi scuri)

<!-- ************* default style ************* --><a class="hs-button" href="http://www.matrix-themes.com/purchase" target="">Custom button</a>

<!-- ************* flat style ************* --><a class="hs-button flat" href="http://www.matrix-themes.com/purchase" target="">Custom button</a>


<!-- ************* round style ************* --><a class="hs-button bg-round" href="http://www.matrix-themes.com/purchase" target="">Custom button</a>


<!-- ************* ghost white round ************* --><a class="hs-button ghost-white" href="http://www.matrix-themes.com/purchase" target="">Custom button</a>

<!-- ************* ghost dark round ************* --><a class="hs-button ghost-dark" href="http://www.matrix-themes.com/purchase" target="">Custom button</a>


skills 2 versioni

HTML

55%

CODICE COPIA/INCOLLA E MODIFICA CODICE COPIA/INCOLLA E MODIFICA 

<!-- skills small size --><div class="skill skill-small"> <h3> <span class="skill_name">HTML</span> </h3> <div class="skill_bar"> <div class="skill_active" style="width: 55%;"> </div> <span>55%</span> </div> </div>

HTML

55%

CODICE COPIA/INCOLLA E MODIFICA 

<!-- skills big size --><div class="skill"> <h3> <span class="skill_name">HTML</span> </h3> <div class="skill_bar"> <div class="skill_active" style="width: 55%;"> </div> <span>55%</span> </div> </div>


parallax (2 immagini 1200x800)

This a parallax image

Nulla porttitor accumsan tincidunt. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Nulla porttitor accumsan tincidunt. Pellentesque in ipsum id orci porta dapibus. Vivamus suscipit tortor eget felis porttitor volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultricies ligula sed magna dictum porta. Donec sollicitudin molestie malesuada. Nulla porttitor accumsan tincidunt

CODICE COPIA/INCOLLA E MODIFICA 



<div id="pic1" class="hs-fullwidth color-white bg-holder" data-width="1200" data-height="800">
    <h1 class="center-align weight-800">
        This a parallax image
    </h1>

    <p>
        Nulla porttitor accumsan tincidunt. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus
        convallis quis ac lectus. Nulla porttitor accumsan tincidunt. Pellentesque in ipsum id orci porta dapibus. Vivamus suscipit tortor eget felis porttitor volutpat. Lorem ipsum dolor sit amet,
        consectetur adipiscing elit. Cras ultricies ligula sed magna dictum porta. Donec sollicitudin molestie malesuada. Nulla porttitor accumsan tincidunt
    </p>

    <p>
         
    </p>
</div>

This a parallax image

Nulla porttitor accumsan tincidunt. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Nulla porttitor accumsan tincidunt. Pellentesque in ipsum id orci porta dapibus. Vivamus suscipit tortor eget felis porttitor volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultricies ligula sed magna dictum porta. Donec sollicitudin molestie malesuada. Nulla porttitor accumsan tincidunt

CODICE COPIA/INCOLLA E MODIFICA 

<div id="pic2" class="hs-fullwidth color-dark bg-holder" data-width="1200" data-height="800"> <h1 class="center-align weight-800"> This a parallax image </h1> <p> Nulla porttitor accumsan tincidunt. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Nulla porttitor accumsan tincidunt. Pellentesque in ipsum id orci porta dapibus. Vivamus suscipit tortor eget felis porttitor volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultricies ligula sed magna dictum porta. Donec sollicitudin molestie malesuada. Nulla porttitor accumsan tincidunt </p> <p> </p> </div>

Valtrebbia Experience è un progetto di promozione turistica e valorizzazione della Val Trebbia. La realizzazione e il mantenimento del progetto è possibile grazie al contributo di attività commerciali della valle e sponsor istituzionali. Per inserzioni e/o maggiori informazioni sul progetto clicca qui.

Iscriviti alla Newsletter

Nota: I campi con l'asterisco sono richiesti

© 2017 Valtrebbia Experience - Tutti i diritti riservati