Lander for Blocs
Lander features a modern, versatile layout that fits any project.
❖ Lander Core Scripts: HTML footer widgets with special classes for navigation and more
︙Extra pages: Terms (link in footer) + Privacy page (link in the cookie panel and footer)
❖ Lander Header image parallax: The header image with parallax and blur is created manually, without using the block's parallax feature
❖ Lander Header Carousel & Video: Lander also supports both image galleries and videos
Lander Core Widget
The lander Line & Cursor Widget adds interactive visual effects to links across the site.
✓ Custom Parallax and Blur over the Header Image.
Created using an extra DIV to avoid issues with the Toggle menu visibility. The Blocs Parallax option is disabled
✓ Add a custom SVG cursor to images or DIVs (on desktop )
Menu Widget
⚠︎ This is a widget provided separately, as some of its features may be included in the core program by default in the future.
✓ Automatically opens submenus when you hover your mouse over the desktop navigation
✓ Highlights the current page in the parent menu for easy navigation (using the project class nav-active-link)
✓ Opens sub-menus on mobile when the current page is loaded
Class naming
Class prefixes
Using prefixes makes it easier to find and organize classes
Prefix classes
All manually created classes use the prefix ‘lander-‘ to separate them from Blocs-generated classes
Nav class naming:
All custom classes that are used in pages have the prefix ‘lander-nav-'
Standard Nav Classes
Desktop Navigation
nav-link
Standard color, set color (normal & Hover) only here to keep link active color properly
navbar-nav li a
Large font size on desktop, medium size on mobile
ⓘ Class also managed via Project Settings / Typography / Navigation Link
nav .dropdown-menu a.nav-link
Second-level links style and color
nav .dropdown-menu
Responsive menu styling
menu .nav-active-link (active link)
Footer Navigation
Inherit colors from the desktop Navigation (nav-link)
lander-footer-menu, lander-footer-menu a
Nav Classes
lander-menu-top-fixed, .lander-menu-nav-position-on-mobile
Setting Menu on desktop and mobile
.lander-menu-left-column, .lander-menu-right-column
Position and fixed width of side columns
lander-menu-nav-height, lander-menu-logo, lander-menu-icons
Standard style on desktop, with a dark background on mobile devices
lander-nav-toggle-button, lander-nav-toggle-button-text
Button-style ‘menu' next to the responsive menu toggle icon
lander-nav-side-logo + lander-nav-side-icon
Logo style and phone/email icons styling
lander-menu-extra-contents, lander-menu-extracontent-button-style
Menu container and buttons style
NAV Bric:
lander-nav-position-on-mobile
Navigation position inside Extra Content
lander-menu-nav-toggle-show
Menu Button Style (Button Visibility Classes), the default menu toggle is hidden because the menu is embedded with extra content and is always visible
nav-link, .navbar-nav li a, nav .dropdown-menu, nav .dropdown-menu a.nav-link
Navigation text color, menu and sub-menu
nav-active-link
Active link color in Main navigation and footer (lander-footer-menu) Use the same color as nav-link:hover color
ⓘ Class is managed in Project Settings / Active Link Class
Lander Classes
font-raleway-bold, font-raleway-light, font-raleway-bold
font-lato-light, font-lato-regular, font-lato-bold
Extra Font Classes
lander-header-image-1, 2, 3, 4 + lander-background-blurred-image
Header images: To change the image, select the class and change the image in the class background settings
lander-bg-color-page, lander-bg-lander-light, …...
Background colors,
lander-header-height-50vh
Header setting for parallax images, variable height in VH.
✎ To avoid a variable banner height, set a fixed pixel value
lander-header-container-carousel, lander-header-container-video
The height settings for Carousel and Video classes may vary depending on the aspect-ratio of the uploaded content
lander-header-bottom-part, lander-header-titles-icons, lander-header-band-text, lander-header-spinner, lander-header-band
Header elements position and style
lander-image-overlay
Extra overlay for images
lander-bar-chart, lander-bar-chart-text-right, lander-bar-chart-text-left
Animated chart, colors and text style
lander-team-card-text, lander-team-card-img, lander-team-card, lander-team-card-box-img
Team Page classes
lander-box-mp3, lander-audio-bric-style, lander-box-mp3-cover
Audio Style
lander-img-scale, lander-image-shadow,
Image animations and style
lander-google-review-logo, lander-google-review-box, lander-svg-icon-google-review, lander-google-review-avatar, lander-google-review-text-box
Google review box, images and text style
lander-prices-card, lander-prices-list, lander-prices-list-icons-yes, lander-prices-list-icons-no
Prices box style
lander-max-width-250, lander-max-width-550
center elements with max width
lander-text-shadow, lander-box-shadow / inner-shadow
Add shadow to text and elements
General Classes
position-relative
Position value applied to a parent element so that child elements with position: absolute are positioned relative to that parent instead of the entire page.
position-absolute
Position value that positions an element relative to nearest positioned parent
overflow-hidden
Utility class that hides content outside the container boundaries
text-decoration-none
Disable underline in links
z-index-0
Sets stacking order to 0. Elements with higher values (z-index: 1, 2, 3, etc.) appear in front of elements with lower values.
Note: Additional custom classes may also be present, typically with clear and logical names that make their purpose easy to understand
ⓘ Blocs Classes
⨁ nav-active-link, navbar-nav li a, nav .dropdown-menu, nav .dropdown-menu a.nav-link etc
Standard navigation and responsive menu
⨁ cc-link, cc-btn, cc-window
Cookie Consent - Bric Styke
⨁ scrollToTop & scroll-to-top-btn-icon
Back to Top - Buttons Style
⨁ dropdown-menu
Background and border style
⨁ modal, modal-content, modal-backdrop.show
Edit styles & Lightbox Overlay color and opacity
⨁ scrollToTop + scroll-to-top-btn-icon
Back to top Button Style
⨁ page-scroll-progress-bar
Control position and add gradient background
⚠︎ Note: These classes are active, even if they may show a value of "0" in the list
Classes beyond the Blocs standard with PRO Classes
CSS in ‘lander Core Script’, advanced CSS code with manual settings to offer custom creative solutions.
💎 Pro Class Lander-header-custom-parallax
Custom parallax with progressive blur, applied to an additional DIV to avoid visibility issues with the Toggle menu and the standard parallax option
💎 Pro Class lander-page-label-widget
"A lightweight breadcrumb-style indicator that displays the current page and its parent section, if any. Add your own text to the element, the script will append the active page info automatically, so each page can have its own custom prefix"
💎 Pro Class lander-cursor-arrow
Custom SVG cursors for images and div with CSS Media queries to show SVG only on desktop (>1025px)
⚙️ a:focus
Remove Gray Highlight first link Safari in modal window
⚙️ page-container
In some cases it is required for the parent DIV of a Sticky element
⚠︎ Note: These classes in Blocs do not contain any settings, their code is defined in the script
⚠️ Keep in mind
🔐 Locked Classes
Some classes are locked because modifying them is not recommended. If you choose to edit them, be aware and do so at your own risk.
⚠︎ Required Classes
All classes made of multiple parts, like .class a or .class.active, are visible in the class list but aren’t directly attached to any single element. These classes are required, even if they appear as "0" in the list.
ⓘ Editing Classes across layouts
When editing a class, it’s important to check its settings in all 4 layouts (desktop, laptop, tablet, and phone), because a class can have different properties in different layouts. It often happens with padding, margin, and sizes; it can also be used for visibility classes, to show or hide elements (Visibility toggle options)
✎ Testing Class edits safely
If you’re unsure about modifying classes, make progressive copies of the project so you can always revert to a correct version.
Global - Modal Panel
This modal panel is located within the Global Footer and is accessible from all pages. You can enter general information useful to the visitor.
Set the max-width as desired, thanks to the class available in the project. Set the max-width in Modal pref. and change the width in the class. You can also set different widths for different layouts.