animated captions

You can combine Slideshow CK and Page Builder CK to make advanced layouts for the caption on the slides. You can create the content whithin Page Builder CK, style it, add some animations, use the responsive settings and load it in the slide.

There are few steps that you need to follow to make it work correctly.

  1. Set caption effect to none
  2. Set a style and set it up to have the caption fullscreen
  3. Create a page in Page Builder CK
  4. Select the page in the slide options
  5. Add responsive settings

 

1. Set caption effect to none

Create a Slideshow CK module and go in the options Effects >> Caption Effect = None

caption effect none

This will avoid the animations of the Page Builder CK to be launched before the content is visible. But if you don't plan to add any animation in Page Buider CK, you can still use the caption effect in the module to make it apply on the whole content area.

 

2. Set a style and set it up to have the caption fullscreen

In the module Styles options you can select a style for your slideshow.

set style

Click on the Edit button to edit the style in the popup, then you can go in the Caption tab and set it to be Fullscreen.

fullscreen layout

 

 

3. Create a page in Page Builder CK

3.1. Create a new page

 Go in the Page Builder CK component and create a new page. Add your blocks and items as you want, style them. You will need to create a page for each slide where you want to have an advanced layout.

3.2. Add animations

You can use every setting of the Page Builder to make your layout as you want. Click on the blocks or rows to add the animations

animations

 The animations will be launched when the slideshow loads in the page, but also on each slide transition when you click on the next/prev button, or using the autoplay.

 

4. Select the page in the slide options

Once your page has been created, you can simply select it in the slide options

page in slide

 

You will get the desired result directly in the slideshow

slideshow preview

 

5. Add responsive settings

As for the animations, you can use the responsive settings of Page Builder CK to control the layout of the slideshow on small screens. For example you can decide to hide a text and leave only the main things to ben shown (title and button for example)

responsive settings

 

You can see the result of the layout in the slideshow on small screen, using the responsive settings

slideshow preview responsive

 

 

Outil de création rapide, puissant et responsive.

En savoir plus

Extensions favorites

logo maximenuck 110 logo pagebuilderck 110 logo slideshowck 110template creator ck large 449

Sauvegarder
Choix utilisateur pour les Cookies
Nous utilisons des cookies afin de vous proposer les meilleurs services possibles. Si vous déclinez l'utilisation de ces cookies, le site web pourrait ne pas fonctionner correctement.
Tout accepter
Tout décliner
Analytics
Outils utilisés pour analyser les données de navigation et mesurer l'efficacité du site internet afin de comprendre son fonctionnement.
Google Analytics
Accepter
Décliner