Sections

Documentation

Admin preview


What're 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 and container layouts

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, copy and paste, settings box

Animations, move, duplicate, copy and paste, settings box are explained in the general documentation page accessible by the button below.




Section image

The section image is a container with background image.


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.


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 slider not support all the features.




Section video

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


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

This feature is deprecated and it's no more available on the latest themes (all themes published after May, 2019).
The section animation is a container with a background image and animated overlays like clouds, you add also a main image on center.


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.


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.
  • Boxed Remove the full width layout and insert the two blocks into a container.



Section map

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


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