Headlines modules :News 1/3

on Thursday, February 2nd 2012 I 0 Comment

Headlines modules :News 1/3
Using the framework javascript JQuery in the front office opens a new field of opportunities for the modules of your site.

Therefore, I have many things to show you on these modules that are very important for a successful home page. I'll split the presentation of those news in 2 notes. In that one, I will tell you about the four new modules reserved to the title area of the site.

Until now, you used the modules headlines in the central area. With these four there, you'll be able to add this module to the title area. If you opt for a module headlines in this area,  it will not be displayed in the internal pages but only on the home page.

So there are four different types of presentations. Let's review
them.

Modern 8, the most visual

We chose to illustrate this note with the modern 8 (image above)

Modern 8 is the most visual module. It consists of a large image, which occupies the entire width of the template. The title and meta information associated with the item (description, author, date, ...) are displayed on a square in opacity on the picture.

Modern 8 can publish up to 5 items on the headlines. A pager as "bullets" (small round style iOS) to navigate between different articles. Opacity is automatically applied to the bullets.

For the transitions display, you can choose between two effects:
- Slide: sliding effect during a transition from one article to another
- Fade: Fade Effect

It is possible to choose an auto-scroll and adjust the timing of the scroll.

You can notice that the configuration interface of the module has also been improved. The options are contextual and appear according to their activation or not. This avoids overloading the interface unnecessarily, and makes the
setup more intuitive.

Modern 9, sober and elegant

Headlines modules :News 1/3
Modern 9 is a classic type of presentation but containing little subtleties that will make all the difference.

On the left, the title and metadata of the article. On the right, on half of the module, the photo associated. An image average sized will be enough to dress this module.

Note the
shaded effect on CSS3 on the contours of the image. The shadow is positioned outside of the border.

Modern 9 can accommodate up to 5 articles on the headlines. Navigation is done from the pager Bullets. The effect of transition is of  type Fade.

Modern 10, arrow in CSS3

Headlines modules :News 1/3
Modern 10 displays the photo on the left side of the module. The size is medium and panoramic. A shadow in CSS is applied to the inside edge of the image. On the right we find the title and metadata of the article.

With modern
10, you can place up to 5 items on the headlines. For the effect of transition between the articles, you can choose between Fade and Slide. Automatic scrolling is possible.

The peculiarity of modern 10 lies in the arrows to navigate between articles. The arrows are  off the template. These are not images, but the arrows are made ​​entirely in CSS3. This allows not only to improve the speed of display, but also an easy customization. To do this, simply work on the font Pager of the module. You can then play with their colours.

If the possibility to customize the default CSS arrows do not suit you, you can replace them with personal pictures. In that case, you will upload in the module two pictures. One for the right arrow and one for the left arrow.

Modern 11, the heir of the Web TV

Headlines modules :News 1/3
Modern 11 is directly inspired by one of the headlines modules of a Web TV. The image is on the left and pretty large. On the right, in column, the list of articles on the headlines.

For the selected articles, we can find their title and meta information on an horizontal strip in
opacity on the image. The colour of the opacity is the dominant font and remains consistent with the background colour of the module. The colour of the selected article matches the background colour of the font title.

Fade effect is used to transition between articles. Automatic scrolling is possible and you can also set the break on the description of articles for the four positions to work your slogan and catchwords in e fine way.

 

To follow...

We've just seen the novelties of the title area of CMS.

In the next notes, We will present other novelties about the headline modules of the CMS and WebTv.


Saveria Maroselli
As support manager, Saveria guides you daily while you're using your favorite CMS, but not only,... Know more about this author


New comment:
Facebook Twitter



Last tweets
WMaker Blog | Le système de paiement Payzen est ajouté au webservice de la... | #cms https://t.co/6VvXLLceHm https://t.co/HF3XvCMvKw
Friday, October 14th - 19:00
WMaker Blog | Facebook Articles instantanés: Facebook a ouvert ses articles... | #cms https://t.co/WUawtB2eWc https://t.co/tnDyVMWJHo
Monday, August 1st - 17:01
WMaker Blog | Trois numéros plutôt rare: L'autre jour Sébastien a trouvé dans les... | #cms https://t.co/MMGmi2wozH https://t.co/IvP8v4m3Wz
Thursday, July 28th - 10:22
WMaker Blog | Créez vos apps avec GoodBarber: Aujourd’hui, coup de projecteur sur... | #cms https://t.co/Xnygo9EEQX https://t.co/DseCCN8wpq
Monday, July 25th - 12:03

Photostream