The third part is the GALLERY section.

We have developed a special element, the Image Swipebox element. This element comes from the JS Swipebox plugin. It is a responsive gallery suitable for all formats. Its use has been simplified so that any gallery is possible.

Gallery's unique name:
This is the default name. All new Image Swipebox elements will have the same gallery name. That is, all images will be in one gallery. If you want to create different galleries, simply change the name of the galleries.

Full size image:
 This is the maximum zoom image you want to have. By default, avoid exceeding 1280 pixels in width.

Image-overview:
If you want thumbnail images that are smaller (lighter) than full-size images, you need to specify the thumbnail image. Use if needed.

Title:
You can assign a caption for each image.


As you can see, we put a personal transitions class on each image.









The fourth part is the NEWS section.


Nothing complicated on this section of the most classic. The links of each article refer to the news page. To change the links, double-click the "read more" button and click on the top icon Create. You will find the corresponding link. You can even specify the desired anchors.


The fifth and last part is the CONTACT section.



The main element panel has the apply-smoove class only (animated appearance when scrolling).
The only new feature is text entry fields (single and multi-line). We added the default-text class. This class has the characteristic of erasing the text entered by default and when a visitor clicks inside the element, it erases and keeps the new text filled.

IMPORTANT:
Remember to change the recipient of the mail "Sending by email", both on the home page and the News page.



We also insert the googlemap element. To modify it, simply select the element and then click on the second icon at the bottom left of it (adjustable wrench). You will be able to put the code of your GoogleMap coordinates.
The icons of the social networks do not have links informed, it will be enough to put yours.

The "up" button is displayed on the scroll; The corresponding element is on the layer "Base", as well as some blocks of code necessary for its operation.

Slider with parallax effect
Between each section, we have integrated an element panel and placed a voluntarily larger image in height. We have developed an element (at least one function) dedicated to parallax.
What is parallax, then?
If the name is sophisticated, the concept is simple: basically, the image or texture that is in the background scrolls slower (or faster) than the rest of the page. Think of it: if "first-row" objects move faster than those "at the bottom" of the screen, this gives the illusion of a certain depth, close to 3D. In addition, this effect, combined with other techniques, can really breathe life into a website.
For this, we imported the Parallax safe element:



Height of the background image:
(Optional) You can specify the exact height of the background image to speed up the calculations and correct display. Otherwise, the value will be calculated automatically.

Width of the background image:
(Optional) You can specify the exact width of the background image to speed up the calculations and the correct display. Otherwise, the value will be calculated automatically.

speed:
The relative speed in % between 0 and 200. Example: 0 - the image does not move on scroll; 50 - the image scrolls half as fast as the page; 100 - the scroll will be identical to the rest of the other elements. At 200, the scroll will be 2 times faster.

Personal Class:
By default "parallax" but you can change it if you wish. Interesting in case you want to put parallax effects to other elements and vary the scrolling speeds. Rather than using a class, you can directly choose an element to apply the parallax to.






















Once your parameters are finished, put the parallax class in the element panel (or else if you have changed the class in the element).


Hopefully this first faq will allow you to better appreciate and use the template that we developed in partnership with openElement and Sensode.

The entire openElement team would like to thank you.