Sections

Documentation

COMPOSER ITEMS


WHAT ARE THE SECTIONS ?

The section are the base container for all the contents of your pages, you will use it for organize your contents in different sections. There are different section types that support different media and layouts. For more informations visiti the HTML documentation.

FULL WIDTH OR CONTAINER

From top right select you can choose between full width or container layouts. The full width layout enlarge your contents to all the screen's width. The container layout put your contents in center into a fixed width container, default width is 1170px.

ANIMATIONS - MOVE - DUPLICATE - CODE

Animations, move, duplicate and code features are explained in the general documentation page accessible by button below.


SECTION - IMAGE

The section image is a container with background image.

PREVIEW
Nulla quibusdam quae quisquam cursus nisl taciti nisi curae wisi egestas iure metus ex maiores tempore doloremque, assumenda, sociosqu numquam velit praesent anim eos nesciunt amet molestiae adipisci voluptatem exercitationem.Voluptatibus enim montes consequat dignissim sed eligendi? Luctus porta curabitur ante amet suscipit nascetur, cras! Cum, laborum vero, incididunt magni reiciendis natus expedita laudantium sunt minus urna fuga anim leo.Voluptatibus fuga ipsum scelerisque libero eaque laborum habitasse, veritatis, laboriosam ultrices officia. Magnam eget earum? Maiores maxime laboriosam quisquam imperdiet, consequatur. Dis? Ut cumque. Est facilisis felis, impedit, minima eius.

ADMIN PREVIEW

USAGE
Select the background image by click on big gray box with + icon and you're done.

OPTIONS
  • Background image Background image of the section, best image width is 1920px, best height is related to your contents
  • Fullscreen Set section size to full width, use height overflow feature to adjust the height
  • Parallax Active the parallax background image effect
  • Ken-burn animation Add a animation to the background, parallax is required
  • Overlay Add a overlay pattern to the background
  • Bleed The image overflow on top and bottom of N px. Useful for avoid empty areas while scrolling.

SECTION - SLIDER

The section slider is a container with multiple background images that changes with a fade effect.

PREVIEW
  • slide
  • slide
  • slide
Nulla quibusdam quae quisquam cursus nisl taciti nisi curae wisi egestas iure metus ex maiores tempore doloremque, assumenda, sociosqu numquam velit praesent anim eos nesciunt amet molestiae adipisci voluptatem exercitationem.Voluptatibus enim montes consequat dignissim sed eligendi? Luctus porta curabitur ante amet suscipit nascetur, cras! Cum, laborum vero, incididunt magni reiciendis natus expedita laudantium sunt minus urna fuga anim leo.Voluptatibus fuga ipsum scelerisque libero eaque laborum habitasse, veritatis, laboriosam ultrices officia. Magnam eget earum? Maiores maxime laboriosam quisquam imperdiet, consequatur. Dis? Ut cumque. Est facilisis felis, impedit, minima eius.
ADMIN PREVIEW

USAGE
Select the background images by click on big gray box with + icon and you're done, you can select multiple images at same time.

OPTIONS
  • Background images Background images of the section, best image width is 1920px , best height is related to your contents
  • Fullscreen Set section size to full width, use height overflow feature to adjust the height
  • Overlay Add a overlay pattern to the background
  • Slider options Advanced plugin options, check slider documentation for more details, section sldier not support all the features

SECTION - VIDEO

The section video is a container with a Youtube or MP4 video background.

PREVIEW
Nulla quibusdam quae quisquam cursus nisl taciti nisi curae wisi egestas iure metus ex maiores tempore doloremque, assumenda, sociosqu numquam velit praesent anim eos nesciunt amet molestiae adipisci voluptatem exercitationem.Voluptatibus enim montes consequat dignissim sed eligendi? Luctus porta curabitur ante amet suscipit nascetur, cras! Cum, laborum vero, incididunt magni reiciendis natus expedita laudantium sunt minus urna fuga anim leo.Voluptatibus fuga ipsum scelerisque libero eaque laborum habitasse, veritatis, laboriosam ultrices officia. Magnam eget earum? Maiores maxime laboriosam quisquam imperdiet, consequatur. Dis? Ut cumque. Est facilisis felis, impedit, minima eius.
ADMIN PREVIEW

USAGE
Insert the Youtube video link or click on Upload video and select the MP4 video, select a poster image for the video and you're done.

OPTIONS
  • Video link Insert the Youtube video link or MP4 link, you can upload a MP4 video by click on Upload video button. MP4 video is raccommended method to use. Video must be compatible with HTML5, you can use the free software Any video converter to convert your videos to MP4 HTML5 format.
  • Poster image Poster image of the video is showed on mobile, while video is loading, or if video play not possible.
  • Overlay Add a overlay pattern to the video

SECTION - ANIMATION

The section animation is a container with a background image and animated overlays like clouds, you add also a main image on center.

PREVIEW
Nulla quibusdam quae quisquam cursus nisl taciti nisi curae wisi egestas iure metus ex maiores tempore doloremque, assumenda, sociosqu numquam velit praesent anim eos nesciunt amet molestiae adipisci voluptatem exercitationem.Voluptatibus enim montes consequat dignissim sed eligendi? Luctus porta curabitur ante amet suscipit nascetur, cras! Cum, laborum vero, incididunt magni reiciendis natus expedita laudantium sunt minus urna fuga anim leo.Voluptatibus fuga ipsum scelerisque libero eaque laborum habitasse, veritatis, laboriosam ultrices officia. Magnam eget earum? Maiores maxime laboriosam quisquam imperdiet, consequatur. Dis? Ut cumque. Est facilisis felis, impedit, minima eius.
ADMIN PREVIEW

USAGE
Select the background image and you're done, you can add also a main image on center, the image must be in PNG format.

OPTIONS
  • Background image Background images of the section, best image width is 1920px , best height is related to your contents
  • Main image A optional image that will appear over the background, must be in PNG format with transparent background
  • Animation image The first layer of the animated background image
  • Animation image 2 The second layer of the animated background image
  • Parallax Active the parallax background image effect

SECTION - TWO BLOCKS

The section two blocks is half container and half media.

PREVIEW
slide
Nulla quibusdam quae quisquam cursus nisl taciti nisi curae wisi egestas iure metus ex maiores tempore doloremque, assumenda, sociosqu numquam velit praesent anim eos nesciunt amet molestiae adipisci voluptatem exercitationem.Voluptatibus enim montes consequat dignissim sed eligendi? Luctus porta curabitur ante amet suscipit nascetur, cras! Cum, laborum vero, incididunt magni reiciendis natus expedita laudantium sunt minus urna fuga anim leo.Voluptatibus fuga ipsum scelerisque libero eaque laborum habitasse, veritatis, laboriosam ultrices officia. Magnam eget earum? Maiores maxime laboriosam quisquam imperdiet, consequatur. Dis? Ut cumque. Est facilisis felis, impedit, minima eius.
ADMIN PREVIEW

USAGE
On left panel add the contents you want, best contents are texts, content boxes and icon boxes. On right panel select the media type you want and insert the contents.

OPTIONS
  • Left Panel Add the contents you want
  • Right panel - image Show a image, parallax effect need a full width image, best width is 1920px
  • Right panel - slider Show a slider of images
  • Right panel - video Show a video. Insert the Youtube video link or MP4 link, you can upload a MP4 video by click on Upload video button. MP4 video is raccommended method to use. Video must be compatible with HTML5, you can use the free software Any video converter to convert your videos to MP4 HTML5 format. Poster image of the video is showed on mobile, while video is loading, or if video play not possible.
  • Right panel - custom Custom panel allow you to insert all the contents you want
  • Inverse Invert the position of the two blocks

SECTION - MAP

Show a full width map with the options to add a overlay box with custom contents.

PREVIEW
Nulla quibusdam quae quisquam cursus nisl taciti nisi curae wisi egestas iure metus ex maiores tempore doloremque, assumenda, sociosqu numquam velit praesent anim eos nesciunt amet molestiae adipisci voluptatem exercitationem.Voluptatibus enim montes consequat dignissim sed eligendi?
ADMIN PREVIEW

USAGE
Insert the coordinates or the address and add your contents. You must insert the Google API KEY before use the map, you can get your key here: developers.google.com/maps/documentation/javascript/, click on top right button GET KEY. You must insert the key into WordPress menu > Apparence > Social and API > Google API key. For more informations go to Google map documentation.

OPTIONS
  • Map coordinates Longitude and latitude coordinates. You can get it from www.gps-coordinates.net. Coordinates are the recommended method due address method is slower and less accurate
  • Map height Map and section height
  • Map address Address of the map with format address, city, country. This method is not recommended, use coordinates instead
  • Map zoom Map zoom level
  • Marker image Marker image in PNG
  • Marker position Marker position related to the map, should be the inverse of box position
  • Map box position Box position related to the map, should be the inverse of marker position
  • Marker top offset Marker position adjustment
  • Marker left offset Marker position adjustment
  • Map skin Map skin is the design of the map, check HTML documentation for custom skins