Kraken: Recreating the Demo - Header Section

Introduction

1

Swiper (Particle)

2

Swiper (Particle)

The Header section includes four Swiper particles. The two particles at the bottom two rows mimic the particles above them, but are designed for mobile users. This quality is set in the Block settings for the particle, with the particles intended for non-phone devices being given a hidden-phone CSS class and the ones made for phones a visible-phone CSS class.

So, what makes the mobile versions different? For the first Swiper particle, the Element Height is set to 600px for non-mobile and 300px for mobile. The second Swiper particle has 3 in the Slide Per View field while the mobile version only has 1.

Here is a breakdown of the widget(s) and particle(s) that appear in this section:

• Swiper (particle)
• Swiper (Particle)

Section Settings

Swiper (Particle)

Particle Settings

Block Settings

Swiper (Particle) 2

Particle Settings

Block Settings