Menu

Template articles

  • Κατηγορία: Template articles
  • Εμφανίσεις: 961

Frontpage elements

Frontpage can contain big header image if you add in the template settings (on the "Features" tab the imageBg page suffix.

Header form

Header form is based on the following code:

<h1>Start 30-Day free trial today. Set up in instant</h1>
<h2>Powerful landing page theme for running serious business</h2>
<form class="gk-form">
<div><input type="email" placeholder="Email address ..." /> <input type="submit" value="Get Started today!" /></div>
</form>
<p><a class="gk-video-link modal" href="http://www.youtube.com/embed/vb2eObvmvdI" rel="{handler: 'iframe', size: {x: 560, y: 315}}">Watch the introduction</a></p>

As you can see it uses h1 and h2 elements for creating headers, then the form is wrapped in the form element with gk-form class. The input elements are automatically styled inside the form. Additionally under the form there is the link with classes gk-video-link and modal - first class is responsible for the styling, second one is responsible for the popup - it uses the Joomla! built-in popup mechanism.

In every module with centered suffix you can place a paragraph with gkCentered class.

Icons

Icons placed on the frontpage uses the following structure:

<div class="gkIcons">
<div>
<div class="gkIconArea">
<a href="#" class="gkCrop">Creative</a>
</div>
<h2>Creative</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget elit eu velit vehicula feugiat. </p>
</div>

<div>
<div class="gkIconArea">
<a href="#" class="gkRocket">Rocket</a>
</div>
<h2>Powerful Control</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget elit eu velit vehicula feugiat. </p>
</div>

<div>
<div class="gkIconArea">
<a href="#" class="gkMobile">Responsive</a>
</div>
<h2>Responsive Design</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget elit eu velit vehicula feugiat. </p>
</div>
</div>

Every column is placed in the div container which contains a container with class gkIconArea with link using one of these classes: gkCrop, gkRocket or gkMobile.

Under the icon area you can place the h2 element with title and paragraph with description

Sliding notebook

To create the two columns block with the sliding image you should use the following structure:

<div class="gkHorizontalSlide">
<div class="gkHorizontalSlideLeftColumn">
<h2>Joomla! and WordPress blog theme
inspired by Metro Windows 8 UI</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget elit eu velit vehicula feugiat. Integer viverra metus vitae lectus dictum eleifend. Lorem ipsum dolor sit amet. Donec viverra lobortis feugiat. Sed id odio ante.</p>
<p>Duis bibendum metus eu urna placerat mattis! Duis bibendum tempor massa at tristique. Integer viverr metus vitae lectus dictum eleifend amet.</p>
<p><a href="#" class="button">View Details</a></p>
</div>
<div class="gkHorizontalSlideRightColumn">
<img src="/templates/gk_simplicity/images/demo/demo_notebook.png" alt="Notebook" />
</div>
</div>

The most important part are the containers with classes: gkHorizontalSlideLeftColumn and gkHorizontalSlideRightColumn - in the second container there should be placed an image which will slide on scroll.

Sliding tablet

The sliding tablet effect is created using the following structure:

<div class="gkTextBlock">
<h2>We build responsive,<br />mobile-friendly website</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam scelerisque faucibus risus non iaculis. Fusce a augue ante, pellentesque pretium erat. Fusce in turpis in velit tempor pretium. Integer a leo libero.</p>
</div>
<img src="/templates/gk_simplicity/images/demo/manufacturers.png" alt="Manufacturers" />

<img src="/templates/gk_simplicity/images/demo/tablet_image.png" class="gkImageBlock" alt="Image block" />

The sliding image is placed in the gkImageBlock wrapper. The gkTextBlock class adds necessary top spacing for the text block.

Testimonials

The testimonials are created using the following structure:

<div class="gkTestimonials">
<div>
<figure>
<img src="/templates/gk_simplicity/images/demo/avatar-1.png" alt="Robert Gavick" />
<figcaption><q>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam scelerisque faucibus risus non iaculis. Fusce a augue ante, pellentesque.</q></figcaption>
</figure>
</div>

<div>
<figure>
<img src="/templates/gk_simplicity/images/demo/avatar-2.png" alt="Paulina Nowakowska" />
<figcaption><q>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam scelerisque faucibus risus non iaculis. Fusce a augue ante, pellentesque.</q></figcaption>
</figure>
</div>

<div>
<figure>
<img src="/templates/gk_simplicity/images/demo/avatar-3.png" alt="Tomasz Dziuda" />
<figcaption><q>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam scelerisque faucibus risus non iaculis. Fusce a augue ante, pellentesque.</q></figcaption>
</figure>
</div>
</div>

The testimonial content was wrapped up into the figure element - the image is used to create an avatar and the figcaption with the blockquote element is used to create the testimonial text.

Button area

The last custom HTML element from the frontpage uses the following structure:

<div class="gkButtonArea">
<h3>The 30 day free trial includes all features.<small>Your 30-day money back guarantee starts after your 30-day free trial.</small></h3>
<a href="#">Get Started</a>
</div>

Every link placed in the gkButtonArea element creates a big button floated to right.

  • Κατηγορία: Template articles
  • Εμφανίσεις: 1007

Price Table

Price table Custom HTML is based on the following structure:

<div class="gkPriceTable gkPriceTableAnimated col3">
<dl>
<dt>Basic</dt>
<dd class="gkPrice">$15<small>/ month</small></dd>
<dd>Unlimited Storage</dd>
<dd>Unlimited Transactions</dd>
<dd>Unlimited Contacts</dd>
<dd>Unlimited Users</dd>
<dd><a href="#">Choose</a></dd>
</dl>

<dl class="gkPremium">
<dt>Premium</dt>
<dd class="gkPrice">$99<small>/ month</small></dd>
<dd>Unlimited Storage</dd>
<dd>Unlimited Transactions</dd>
<dd>Unlimited Contacts</dd>
<dd>Unlimited Users</dd>
<dd>Try it for a month!</dd>
<dd><a href="#">Choose</a></dd>
</dl>

<dl>
<dt>Plus</dt>
<dd class="gkPrice">$29<small>/ month</small></dd>
<dd>Unlimited Storage</dd>
<dd>Unlimited Transactions</dd>
<dd>Unlimited Contacts</dd>
<dd>Unlimited Users</dd>
<dd><a href="#">Choose</a></dd>
</dl>
</div>

The main wrapper contains three clases: the gkPriceTable class is required, the gkPriceTableAnimated is required if you want to create an animated price table on scrolling and the last class is used to specify the amount of columns - you can use classes col1-col5.

Every column is specified by dl element (with gkPremium class the column will be highlighted) - in the dt element you can specify the table column title. In the dd element with gkPrice class you can specify the price - using the small element you can specify te service period time.

Adding of the button at the bottom is very simple - it needs just to add the link element in the dd element.

  • Κατηγορία: Template articles
  • Εμφανίσεις: 2498

Page Break

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin posuere nisi quis odio egestas non tempus est sollicitudin. Nulla facilisi. Pellentesque tempus suscipit nulla sed tempor. Phasellus et lorem id libero fermentum molestie sit amet sit amet mi. Quisque ultrices, neque et laoreet dictum, arcu sapien pulvinar odio, in aliquam mi dui eu leo. Nullam posuere, arcu et egestas fermentum, enim purus fermentum diam, quis porta mauris lectus ut odio. In tincidunt dapibus malesuada. Integer a lorem ligula. In tincidunt augue eget velit convallis nec pharetra eros tincidunt. Maecenas et tortor libero, vel malesuada est.

Quisque magna tellus, condimentum a porttitor eu, fermentum nec enim. Aenean et erat nec lectus adipiscing auctor. Sed tellus sapien, condimentum eget tristique ac, faucibus sed nisi. Curabitur pretium porta pulvinar. Integer cursus venenatis dictum. Morbi massa est, ultricies ut ultrices vitae, hendrerit vitae tellus. Duis a nulla quis tellus lacinia tristique.


Donec libero urna, cursus vitae sollicitudin sit amet, elementum et massa. Donec feugiat, turpis a dictum vulputate, dui diam faucibus nunc, ac sodales augue magna id augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec sit amet nisi felis. Morbi faucibus nunc id elit aliquam ac condimentum leo laoreet. Sed nec risus sed nulla mattis volutpat in eget diam. In leo nisl, eleifend vel lobortis vel, tincidunt a ligula. Nulla placerat gravida laoreet. In lobortis, ligula in sagittis pellentesque, orci magna venenatis neque, eu sagittis lacus ante et tellus. Morbi vel semper augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam erat volutpat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin posuere nisi quis odio egestas non tempus est sollicitudin. Nulla facilisi. Pellentesque tempus suscipit nulla sed tempor. Phasellus et lorem id libero fermentum molestie sit amet sit amet mi. Quisque ultrices, neque et laoreet dictum, arcu sapien pulvinar odio, in aliquam mi dui eu leo. Nullam posuere, arcu et egestas fermentum, enim purus fermentum diam, quis porta mauris lectus ut odio. In tincidunt dapibus malesuada. Integer a lorem ligula. In tincidunt augue eget velit convallis nec pharetra eros tincidunt. Maecenas et tortor libero, vel malesuada est.


Quisque magna tellus, condimentum a porttitor eu, fermentum nec enim. Aenean et erat nec lectus adipiscing auctor. Sed tellus sapien, condimentum eget tristique ac, faucibus sed nisi. Curabitur pretium porta pulvinar. Integer cursus venenatis dictum. Morbi massa est, ultricies ut ultrices vitae, hendrerit vitae tellus. Duis a nulla quis tellus lacinia tristique.

Donec libero urna, cursus vitae sollicitudin sit amet, elementum et massa. Donec feugiat, turpis a dictum vulputate, dui diam faucibus nunc, ac sodales augue magna id augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec sit amet nisi felis. Morbi faucibus nunc id elit aliquam ac condimentum leo laoreet. Sed nec risus sed nulla mattis volutpat in eget diam. In leo nisl, eleifend vel lobortis vel, tincidunt a ligula. Nulla placerat gravida laoreet. In lobortis, ligula in sagittis pellentesque, orci magna venenatis neque, eu sagittis lacus ante et tellus. Morbi vel semper augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam erat volutpat.

  • Κατηγορία: Template articles
  • Εμφανίσεις: 2720

Page break example

Ut dignissim aliquet nibh tristique hendrerit. Donec ullamcorper nulla quis metus vulputate id placerat augue eleifend. Aenean venenatis consectetur orci, sit amet ultricies magna sagittis vel. Nulla non diam nisi, ut ultrices massa. Pellentesque sed nisl metus. Praesent a mi vel ante molestie venenatis.

Donec sed odio dui. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

Mauris justo metus, ultrices id lobortis et, euismod sit amet metus. Maecenas sed nisl a arcu ultricies consectetur. Integer ut mollis elit. Nulla ultrices scelerisque mauris id commodo. Integer congue lectus et justo pellentesque sed semper lacus facilisis. Nunc tristique placerat odio eget rutrum.

Περισσότερα

Περισσότερα Άρθρα...

  1. Module variations
  2. Messages
  3. Typography

Τα νέα του Μοναστηριού

ΠΟΛΙΤΙΣΤΙΚΕΣ ΕΚΔΗΛΩΣΕΙΣ ΠΑΝΗΓΥΡΕΩΣ 2017

30-08-2017 Hits:224 Τα νέα μας Super User

ΠΟΛΙΤΙΣΤΙΚΕΣ ΕΚΔΗΛΩΣΕΙΣ ΠΑΝΗΓΥΡΕΩΣ 2017

ΠΟΛΙΤΙΣΤΙΚΕΣ ΕΚΔΗΛΩΣΕΙΣ ΠΑΝΗΓΥΡΙ ΚΑΛΛΙΠΕΤΡΑΣ  Ο Σύλλογος Φίλων Μονής Καλλίπετρας σας προσκαλεί στις πολιτιστικές εκδηλώσεις που θα τελεστούν στο γήπεδο της Ραχιάς τη Δευτέρα 4 Σεπτεμβρίου 2017 και ώρα 20:00.  Θα παρουσιαστούν Παραδοσιακοί Χοροί...

Γυναίκα στον Αλιάκμονα για τον Τ.Σταυρό…

08-01-2016 Hits:716 Τα νέα μας Super User

Γυναίκα στον Αλιάκμονα για τον Τ.Σταυρό. Θεοφάνεια 2016

Η δασκάλα πολεμικών τεχνών Μαρία Τσιλιγκερίδου ήταν η τολμηρή γυναίκα που βούτηξε στα παγωμένα νερά του Αλιάκμονα, στην όχθη όπου πραγματοποιείται η τελετή της Καλλίπετρας για να πιάσει το Σταυρό...

Θεοφάνεια στην Καλλιπετρα 2016

07-01-2016 Hits:1232 Τα νέα μας Super User

Θεοφάνεια στην Καλλιπετρα 2016

Θεοφάνεια στην Καλλίπετρα: Βγαλμένα απ' τα διηγήματα του Παπαδιαμάντη...  από ΤΟΠΙΚΕΣ ΕΙΔΗΣΕΙΣ - ΡΕΠΟΡΤΑΖ / 06 Ιανουαρίου 2016 20:02 - Δημητρης Καρολιδης   Στις όχθες του "αυτοκράτορα" Αλιάκμονα, δυτικά της Βέροιας, στα ριζά του Βερμίου...

Πρόσφατα άρθρα

ΜΟΝΑΧΟΣ ΘΕΩΝΑΣ (1959-+14 Σεπτεμβριου 201…

18-10-2016 Hits:348 Αρθρογραφία Super User

ΜΟΝΑΧΟΣ ΘΕΩΝΑΣ (1959-+14 Σεπτεμβριου 2016)

ΝΕΚΡΟΛΟΓΙΑ ΓΙΑ ΤΟ ΜΟΝΑΧΟ ΘΕΩΝΑ (1959-2016) (κατά κόσμον ΣΤΕΦΑΝΟ ΓΚΑΛΙΤΣΙΟ) του Αρχιμ. Παλαμά, Ηγουμένου της Ι.Μονής Θεοτόκου Καλλίπετρας.               Καθώς πλησιάζει η συμπλήρωση των σαράντα ημερών από την εκδημία του μοναχού Θεωνά Γκαλίτσιου...

ΜΟΝΑΧΟΣ ΘΕΩΝΑΣ (1959-+14 Σεπτεμβριου 201…

18-10-2016 Hits:371 Αρθρογραφία Super User

ΜΟΝΑΧΟΣ ΘΕΩΝΑΣ (1959-+14 Σεπτεμβριου 2016)

ΝΕΚΡΟΛΟΓΙΑ ΓΙΑ ΤΟ ΜΟΝΑΧΟ ΘΕΩΝΑ (1959-2016) (κατά κόσμον ΣΤΕΦΑΝΟ ΓΚΑΛΙΤΣΙΟ) του Αρχιμ. Παλαμά, Ηγουμένου της Ι.Μονής Θεοτόκου Καλλίπετρας.               Καθώς πλησιάζει η συμπλήρωση των σαράντα ημερών από την εκδημία του μοναχού Θεωνά Γκαλίτσιου...

Ξενάγηση στην Ιερά και Σεβάσμια Μονή του…

05-05-2015 Hits:3693 Αρθρογραφία Super User

Ξενάγηση στην Ιερά και Σεβάσμια Μονή του Τιμίου Προδρόμου Σκήτεως Βεροίας

Σειρά: Ιστορικά & Αγιολογικά κείμενα Μια σύντομη αφήγηση για τα σπουδαιότερα γεγονότα και τις παραδόσεις που αφορούν στην ιστορική πορεία της Μονής του Τιμίου Προδρόμου και τη Σκήτη της Βέροιας. Διατίθεται...