Print Page | Close Window

New elements (and new template using them)

Printed From: Forum openElement
Category:

openElement


Forum Name: Element Editor
Forum Description: Create and share your own custom elements to use with openElement
URL: http://forum.openelement.com/fr/forum_posts.asp?TID=841
Printed Date: 25 Oct 2020 at 11:51
Software Version: Web Wiz Forums 10.11 - http://www.webwizforums.com


Topic: New elements (and new template using them)
Posted By: Dmit OE
Subject: New elements (and new template using them)
Date Posted: 23 Sep 2016 at 09:39
Hi everyone,

Here is the collection of downloadable elements I recently did for our new templates being built. While our Element Store is not updated, you can "install" them yourself.

To install an element, put its DLL into your project folder's Common/Elements subfolder. (To find your project folder use Project->Other->Open the project folder in OE), then close and re-open your project if it's open at the moment.

http://drive.google.com/open?id=0B3daBEI1z4o2QVlyNmkwZ1B3b1U" rel="nofollow - https://drive.google.com/open?id=0B3daBEI1z4o2QVlyNmkwZ1B3b1U

[Edit: here's the latest version of Swipebox Image element, with buttons available by default and some other fixes:
http://drive.google.com/open?id=0B3daBEI1z4o2VGpiRnVFQVNrdmc" rel="nofollow - https://drive.google.com/open?id=0B3daBEI1z4o2VGpiRnVFQVNrdmc
]

There's a brief description on mouseover and descriptions of Properties to help you start. Some elements are more complex while others require nearly no configuration.

Example of use (this element and other elemens below) - our last template, download it here for it to work properly as it does not work well in Store at the moment:

http://sensode.com/TEMPLATE_OPENELEMENT.zip" rel="nofollow - http://sensode.com/TEMPLATE_OPENELEMENT.zip

Its online demo:
http://sensode.com/template/" rel="nofollow - http://sensode.com/template/

We didn't have time to translate it into English at the moment of this writing. you can use online translator to translate the FAQ page:
http://sensode.com/template/FAQ.htm" rel="nofollow - http://sensode.com/template/FAQ.htm

 - WERespPanel01.dll
Responsive Group of Elements that takes 100% screen height (with an option to reduce by height of specified neighbor elements). It resembles a lot the behavior of our old Responsive01 template, with improvements.
As the element will indicate in the beginning, you need to put another (usual) Group of Elements inside to make it a container for inner "centered" content; and you can put some other elements (ex. animated background - see below) directly into the external Group, they will be positioned "absolutely".
To make it work correctly, you shoudl set your page's main section to Responsive positioning mode (it may require you to redo your website if it's already done) - use Page->Responsive->Page sections menu.
Check the template above to see how it works.

WEAnchorScroll.dll
 - Smooth/animated scroll to achors (works well on links configured to link to standard Anchor elements, but not only).

WEElBackgroundSlider.dll
 - Adaptation of Vegas script version 2. Works on page background and element's background, for example for the Responsive Panel above.

WEFieldsDefaultText.dll
Default texts in form fields. The text you put into the Value property in the Editor is used as the "hint" text which disappears when user enters a real value.

WESafeParallax.dll
Parallax (background that moves at a different speed when scrolling - see the template

WEStickyElements.dll
Makes element(s) stuck at the top of the screen while scrolling instead of disappearing. See the template's menu for example.

WESwipeboxImage.dll
Put several of these elements to create a responsive-friendly image slider (example in the template). You can use styles to create rather complex mouseover effects.

[Edit] One more element - responsive 2-level menu, probably not quite finished but it is sufficient for ceratin usage scenarios:
http://drive.google.com/file/d/0B3daBEI1z4o2aEtpdElWWHVYbzg/view?usp=sharing" rel="nofollow - https://drive.google.com/file/d/0B3daBEI1z4o2aEtpdElWWHVYbzg/view?usp=sharing

Best wishes
OE team



Replies:
Posted By: skoro
Date Posted: 26 Sep 2016 at 09:43
Hello, I tried to open your template but I need to update my OE from 1.56 to 1.56.6. No matter what I do (close OE, run as admin,...) update program doesn't want to update. I really want to include StickyElements into my web page but I don't know how to exactly (I added dll). So I wanted to open your template to see options, how to manage it.

Here's picture of failed update.



Posted By: Dmit OE
Date Posted: 26 Sep 2016 at 11:38
Hi,

Yes you need to update openElement. Just download the latest version (the DOWNLOAD link on the top here) and be careful to check "Keep opled versions" during install, to be able to go back if the project breaks.


Posted By: skoro
Date Posted: 26 Sep 2016 at 22:02
Thanks, I finally started new element Sticky on Scroll, but guess what? I have another questions :/
My header is combined with several texts (Storitve, SURE,...), images (green Mamit logo) and Rollover element. If i want to choose all of them, I can only pick one, but I want to all header is scrolled down, not only one as I can choose. I attached image where can pick only one. What to do?





Posted By: Dmit OE
Date Posted: 26 Sep 2016 at 23:10
1) In Sticky on Scroll, you haveseveral properties to specify elements: you can use Custom Classes, comma-separated list of IDs, or the one you've used to select one element. You can even use all three of them at the same time.

2) If need be, you can use several instances of Sticky on Scroll, with different settings and atached elements.

3) You can put your elements into a Group of Element and "stick" that Group.


Posted By: skoro
Date Posted: 27 Sep 2016 at 11:14
Ok thanks, I tried to add for each element another Sticky, but when I scroll down, elements are random placed. Example on pictures. I've searched where in Sticky can change that but didn't find :/

I choose only logo for this test, if I choose all elements in header, are random mixed too.






Posted By: Dmit OE
Date Posted: 27 Sep 2016 at 16:25
It happens because the element changes positioning type.
What you should manage to do is to have all the elements to stick - logo, menu and social icons - inside one Group of Elements (which is probably already the case? can you publish your website online ang give the link?) then stick the group with the option to center (available for the Sticky on Scroll element).


Posted By: skoro
Date Posted: 28 Sep 2016 at 10:01
Ok, I managed to move down whole bar with two stickys. First, I added logo, links and social icons in group element and connected it with first. Then is all ok when I moved down the page. In second stick I added background, which is behind logo and links. And when I moved down the page, background is before links...I tried with the background function and other tricks but didn't work. Here's screenshot.
I choose to separate those two things with two stickys because in one stick doesn't work correctly, background image is cutted to 980px, what is width for my page.




Posted By: Dmit OE
Date Posted: 28 Sep 2016 at 11:44
It would help if you give the link to the website online.

Try to set z-index for the first Group - in Styles->Customize->Free Code (at the bottom), type

z-index:1000000 !important;


Posted By: skoro
Date Posted: 28 Sep 2016 at 11:48
Ok, page incoming. I tried with free code like u said but didn't work.

edit: http://mamitest.netne.net/" rel="nofollow - http://mamitest.netne.net/

edit2: i tried to change z-index from 999 to group elements which are meant to be on the top and z-index 0 or 1; for background image but still, not a result I want to get :/


Posted By: djju1029
Date Posted: 29 Sep 2016 at 21:03
I appreciate your great help!!!


Posted By: Dmit OE
Date Posted: 29 Sep 2016 at 23:32
I see your structure now. You should get the top menu out of your main Group (one with the page content), directly on the page like the background rectabngle frame (WE7c263aaa25). Otherwise you won't be able to control its position. You could increase z=index of the main Group (WEdc631a1f7a) but that would make the background sticky rectangle get behind the content as it scrolls.


Posted By: skoro
Date Posted: 30 Sep 2016 at 09:29
Ok, i put both of them in the same content. But it looks like (i tried all the possibilities with changing top distance and so on) both stickys are fighting for position. Without including stickys, position is ok, when I added background in sticky, it change like it is on the picture :/ but when I scroll down, position is correct, image behind menu.





Posted By: Dmit OE
Date Posted: 30 Sep 2016 at 15:35
I need to check online again.. I think you are complicating something that can be done very easily (by combining background and menu into the same Group of Element and "sticking" this Group..


Posted By: skoro
Date Posted: 30 Sep 2016 at 15:35
Ok, give me 1min to put it online. I joined background image and menu into the same group but then sticky cut background image into the 980px, what is the width of page. I tried to change width from 980px to 100% but still, same result.

page is up: http://mamitest.netne.net/" rel="nofollow - http://mamitest.netne.net/


Posted By: Dmit OE
Date Posted: 30 Sep 2016 at 15:45
Just add a new Group of Elements, full-width (size it like your gray frame), then put the frame and the menu (in this exact order, to keep the menu above) inside. Then delete existing Sticky element and add a new one just for this new Group.


Posted By: skoro
Date Posted: 30 Sep 2016 at 17:34
I made a completeljy new group and added all things from header. Now it works, but menu is messed up, cannot center the menu (picture 01). In other case, if put group into the main containter(max 980px) then menu is showed correctly but background img is cutted down. In any case, it is not showing correctly.

I tried everything, I am just a percent away from working header but this one percent is killing me :/ I think best solution is the first one (group out of main containter) but it is necessary to center whole content, except background img...

edit: last version is updated.




Posted By: Dmit OE
Date Posted: 30 Sep 2016 at 17:51
I thought you had your menu elements inside a Group as well. Put them into a Group (of the same width as your central content), then right-click this group to choose Centering->Horizontal


Posted By: skoro
Date Posted: 30 Sep 2016 at 18:00
Where to use right click and center? I put header group into the main containter.
edit: ok I already have been selected horizontal center.

edit2: I have now same problem as it is on the picture 2 on previous post...background img is cutted on the 980px.




Posted By: Dmit OE
Date Posted: 01 Oct 2016 at 00:32
I will try to be clear:

You should get 2 "top-level" elements on the page:
 - the Group with your content (it now has ID WEdc631a1f7a)
 - the other Group "number 2" (not inside the first one like now!), you can use the one with ID WE47fb4c8e76, just put it outside, onto the page - you can manipulate using the Element Explorer on the bottom-left of OE.

Inside the Group number 2 (which should be 100% width) you should have 2 elements:
 - The gray "background" frame WE7c263aaa25
 - A Group of elements (does not exist yet, it's the one I suggested to create in my last post), where all the menu elements should be. Its width should be the same as the width of the content panel. It should then be centered horizontally.


Posted By: skoro
Date Posted: 01 Oct 2016 at 07:16
Oh my god, man... it is working!!! Thank you and your nerves, I hope I didn't pissed you off to much :)

It is soo simple, another group into first group and that's it.


Posted By: Dmit OE
Date Posted: 01 Oct 2016 at 14:38
You know in more than 4 years I'm rather used to it, besides you've managed a rather nice layout and this was the only thing you were blocked at, so I woudn't complain much.


Posted By: skoro
Date Posted: 01 Oct 2016 at 15:00
Thanks, I appreciated your opinion :)


Posted By: SpiceyAngel2017
Date Posted: 04 Feb 2017 at 12:52
Are there any instructions for the parallax safe? The video posted in at the beginning of this thread doesn't load. 


Posted By: Dmit OE
Date Posted: 04 Feb 2017 at 13:27
Hi,

You can download the template SensBlack and see how it's done there. Basically, it's very simple: you add an instance of Parallax element, it appears on the top of the page (in the non-visual elements' bar), then in its Properties you choose an element on the page where you want to apply it, usually a Group of elements (or Reponsive Panel if you want it to adapt itself to the page height -again, see SensBlack) or a Frame, you choose your image, and the speed ratio (50% to scroll 2 times slower than the page).


Posted By: theboss007
Date Posted: 29 Mai 2017 at 14:31
Dear Team,

how can i add a link to a "SwipeboxImage" ?

best regards


Posted By: Dmit OE
Date Posted: 30 Mai 2017 at 10:20
Hi,

Select the element and set the link in Properties on the right.


Posted By: theboss007
Date Posted: 30 Mai 2017 at 10:52
Dear Dimit,
thank you for your quick reply.
I am using the template "Sens White", I would like to add a link to the swipe box image in the Gallery,
i setted in the properties the "button link" but it does not work. Do I need other setting ?
Best Regards,
Paolo




Posted By: Dmit OE
Date Posted: 30 Mai 2017 at 11:42
You've enabled the button but then you should specify the link (URL) itself to make it work.


Posted By: theboss007
Date Posted: 30 Mai 2017 at 11:48
Dear Dimit,
off course I specified the URL but id does not work. I checked also the style zones. 
I got always the full image displayed but the link to the url is not working
Best regards


Posted By: Dmit OE
Date Posted: 30 Mai 2017 at 18:17
You use an older version of the element (it's not up to date on the forum and in templates). Download this:

http://drive.google.com/open?id=0B3daBEI1z4o2VGpiRnVFQVNrdmc" rel="nofollow - https://drive.google.com/open?id=0B3daBEI1z4o2VGpiRnVFQVNrdmc

Then in Common/Elements of your project folder (Project->Other->Open the project folder) replace the .dll file with the one in the ZIP, then reopen the project.


Posted By: theboss007
Date Posted: 30 Mai 2017 at 20:00
Dear Dmit,

it works perfectly. Thank you very much for your help !

Best regards


Posted By: theboss007
Date Posted: 20 Juin 2017 at 19:54
Dear Dmit, 
I'm using SENSWHITE template and it is perfect after your last help. However i am encountering a little problem on Mobile phone. When i click to gallery it does not show the image gallery until scrolling down . It happens the first time entering in the website. Can You help ?
Best regards,
Paolo


Posted By: brolysan
Date Posted: 21 Juin 2017 at 11:27
Hello,

2 solutions for this problem there:

Use the Scrollreveal element (5) available http://www.microvinc.fr/OE_ScrollReveal_Help.php" rel="nofollow - by clicking here , then erase the scrollreveal code included in the template.
With this element, you will be able to choose whether or not to activate scrollreveal on mobile versions or not.

Alternatively, see to add code for media based on resolution and disable the css code related to items using scrollreveal (more difficult to set up by newbies).

cordially


Posted By: Dmit OE
Date Posted: 25 Juin 2017 at 12:18
Alterlatively, just select the element that does not show up correctly, and in Properties remove from the Custom Classes anything like "ScrollReveal" (or change it to xxScrollReveal for example), this will desactivate the malfunctioning animation.


Posted By: thekhan
Date Posted: 15 Août 2017 at 00:27
I am unable to use Parallax no matter what I do. I make a group of elements (1366 x 560px with overflow set to Hide and Absolute Positioning), include a top nav bar in it, a bottom text bar in it, and put an image between them. Now I drag and drop Parallax element on top of this image. Parallax settings:

http://imgur.com/a/v78P9" rel="nofollow - http://imgur.com/a/v78P9

The element selected in it is the image. Not working.


-------------
OE is the best thing happened to me in softwares :D


Posted By: Dmit OE
Date Posted: 15 Août 2017 at 14:52
Hi.

You should publish your website somewhere and give the link, to see what's wrong.
In the properties of the Parallax element, you should select the "Target" element where the parallax effect needs to happen. Group of Element in  this case.

Then, on this target element, you should set the background image, using the top menu Style Zone: .... or the right pane Styles->Customize.


Posted By: thekhan
Date Posted: 15 Août 2017 at 21:27
Thank you sooo much. I should emphasize that I find Open Element with the best potential and I have tried the so called 'simpler' platforms like Mobirise, Pingendo, wordpress, wix etc. but they look so short cut with very limited creativity allowed.

I can only imagine the future versions of Open Element to be revolutionary.

Dear Admin, I would urge you to please help me in my post on this thread:
http://forum.openelement.com/en/forum_posts.asp?TID=1035&title=business-website" rel="nofollow - https://forum.openelement.com/en/forum_posts.asp?TID=1035&title=business-website

Thank you again. You guys are unbelievable.


-------------
OE is the best thing happened to me in softwares :D



Print Page | Close Window

Forum Software by Web Wiz Forums® version 10.11 - http://www.webwizforums.com
Copyright ©2001-2012 Web Wiz Ltd. - http://www.webwiz.co.uk