chi
|
Hey does anyone know how I can make this type of website with Artisteer?
It's a single page theme that when you hit the menu bar it scrolls down to the next section on the page.
here is an example below.. anyway input would be helpful.. thanks.
http://www.daba.in.rs/tf/jumper_wpr/#home
|
|
Arkymedes
|
I took a quick look and this is indeed just one big page with sections divided by div's with ID attributed to them.
The menu points to each link and a smooth transiction occurs, probably jQuery.
It's simple, elegant and very doable with Artisteer. Of course you still need to configure some jQuery/javascript for the smooth scrolling.
Cheers,
Arky
|
|
Elvira
Artisteer Team
|
Hi,
Unfortunately, you can't create such kind of template with Artisteer.
But maybe there is a third-party extension for your CMS that can do that.
Best regards,
Elvira
|
|
jrgweb
|
@chi - I agree with Elvira but with a little creativity you can create your template and modify a few elements after export and you have a smooth scrolling page.
I did a quick example which took about 15 mins and the external edits about 3 mins.
http://demo.artisteertoday.com/smooth_scroll/
Template was created with artisteer 4.2.0.60609
Need more info let me know.
|
|
chi
|
@jrgweb thats Really Cool... its exactly how I wanted to make the site scroll like your example above..
How do I go about doing the 3 min external edits ?
And will the same external edits work on menu bars that horizontal instead of vertical as your demo website. (http://demo.artisteertoday.com/smooth_scroll)
Cheers
|
|
guest
|
looks like crap on my galaxy
not mobile compstale st all
|
|
Arkymedes
|
Hi guys,
Got a working demo I did this morning.
It' s supposed to be responsive and all.
Thanks jrgweb for the scroll script.
http://caron-webdesign.com/demo/smooth-scroll-demo/
Cheers,
Arky
|
|
jrgweb
|
@chi - Yes you can use horizontal.
In this next demo I use horizontal and side menu and also fixed menu on scroll.
@Arkymedes - you beat me too it. LOL
@Guest - As a designer/developer by looking at the code you will know in a split second why it's not responsive.
demo: http://demo.artisteertoday.com/smooth_scroll3/
@chi - contact me at jrgweb [@] gmail.com
|
|
chi
|
@Arkymedes - I really like what you've done... How long did it take for you to add the code into the theme?
@jrgweb - thanks.
|
|
illwillsites
|
Hey, could someone PLEASE teach me how to do this for WordPress themes in Artisteer. I am dying to learn how you guys made responsive one page designs in artisteer. Please teach me your ways!!!!!!!!!
@Arkymedes I really liked yours
My email is wbncwebdesign1@gmail.com if you have ANY info you could teach me. Thanks in advance!!!!!!!!
|
|
Orrelix
|
jrgweb, please post some basic tips here for us. We all like your stuff and you usually show how to do things. Please!
|
|
jrgweb
|
Orrelix - I'll post the basic's tonight.
|
|
Whitemol
|
Really nice work done by jrgweb and Arkymedes..
Pls keep this threed active since it is a great learning for others like me that need to use alot of hours of research for doing this if needed..
Keep up the good work with helping others :D
Thx u ppl for helping everyone :D
|
|
jellyweb
|
I'd love to see some some info on this as well, to integrate with joomla.
Thanks
David
|
|
jrgweb
|
To all - Artisteer one page template basic's.
This is for the HTML website. We will convert this to a wordpress or joomla later.
Create your template as usual. Colors, menu's, background's etc.
You can layout you template with one column if you wish.
When it comes to content, the only page you care about is the main page.
On the main menu(home or whatever the name) right click, go to properties and edit the name/url. Enter index
Now lets enter some content. Go to your main page and enter content.
At the begging of each section we are going to insert <section id="1"></section> <section id="2"> </section> etc. etc. This gives your page specific sections that can be styles and also aloows your menu's to find the section.
After all content is created, export the template. Because artisteer doesn't allow us to edit the url while designing, we must edit after export.
The only file that is important is the index.html.
Open in a text editor(I use notepad++) and edit the menu items. Change menu item 1 to #1, menu item 2 to #2 etc. etc.
here is an example artx for artisteer 4.2 latest version.
http://demo.artisteertoday.com/smooth_scroll/smooth_scroll2.artx
view source: view-source:http://demo.artisteertoday.com/smooth_scroll/
|
|
Tayeb
|
All done inside artisteer:
http://zianalabdeen.com/eng/
|
|
Malas
|
Tayeb,
Nice
|
|
P.Hozza
|
Quote Tayeb:
Tayeb Nice work.. gives me a starting point.
However, I have a question, how can you make use of one menu only that does scroll? In Tayeb's example he duplicated the menu in all sections <a> </a> .
|
|
Ray Selby
|
demo.artisteertoday.com appears to be unavailable at the moment and I really want to see jrgweb's postings. It's very important to me, at this moment.
|
|
jrgweb
|
@Ray Selby - You'll have to look at them here:
http://demos.jrgweb.net/smooth_scroll/
http://demos.jrgweb.net/smooth_scroll3/
http://demos.jrgweb.net/smooth_scroll4/
http://demos.jrgweb.net/flat_draft/
|
|
jrgweb
|
@Dudek - Absolutely. Artisteer 4.2.x or better
http://demos.jrgweb.net/flat_draft/flat_draft.artx
|
|
P_Wojtas
|
@jrgweb - Could you shar with us smooth scroll template for artisteer ?
|
|
jrgweb
|
@P_Wojtas
http://demos.jrgweb.net/smooth_scroll/smooth_scroll2.zip
http://demos.jrgweb.net/smooth_scroll3/smooth_scroll3.zip
http://demos.jrgweb.net/smooth_scroll4/smooth_scroll4.zip
These are fairly old and the artx is included in the zip file but they may be from 4.1 or 4.2.
I didn't check. If you have any issues, do give me a buzz.
|
|
Da Webmasta
|
And how can we do this in Joomla? I would like to know.
|
|
jrgweb
|
@Da Webmasta - Follow these instructions.
Create your template as usual. Export for joomla and include content if desired.
(you can create content within joomla)
Install joomla then import content.
Once content is imported or created, the horizontal menu needs to be edited.
Select the 2nd menu item and set menu type to external. Select system link and enter
the given id. example #1 or #about which ever you setup in your document.
Do this for all menu items except the Home item.
Then go the the menu module and select the advanced tab.
In the menu id enter smoothmenu. More on this later.
Now the basics are set and we need to enter the script that will make this work.
You can put the script somewhere in the template but this take a number of steps so lets go and edit the script.js file.
In joomla, go to extensions/templates/templates and select the default template.
A list of files and directories will display. Select script.js
Go to the bottom of this file and insert this script.
jQuery(function() {
jQuery('#menusmooth a').click(function(){
jQuery('html,body').animate({
scrollTop: jQuery(jQuery(this).attr('href')).offset().top
}, 1000 );
return false;
});
});
save the file and test.
Here is an example:
http://joomla.jrgweb.net/
Let me know if you need additional help.
|
|
dawebmasta
|
@jrgweb
Sorry for my bad English
So i can manually put <section id="1"></section> on any html-module or article I find on my homepage?
Well that seems to work fine, but I can't make it 'smooth'
Oh now I see: It must be 'menusmooth' instead of 'smoothmenu' in the advanced tab of the menumodule
But I'm still confused which ID I have to use to go to, for example a login-module, As long as it is a html-module or an article I can use <section id="1"></section> but wich ID I have to use with other modules than a html-module?
|
|
jrgweb
|
@Da Webmasta - Well joomla names the login form as "#login-form"
So I assume you have a menu item that will go to the form.
I added a login in form to the bottom of the example template.
When you select Login from the menu it will go to the bottom of the page.
I assume this is what you are asking?
|
|
Da Webmasta
|
@jrgweb
Yes that is what I'm asking. What's the best way to find the name of that form?
Using Firebug (for some modules I can't find an ID using firebug) or can I find it somewhere in the backend of Joomla?
Thanx for the help. I appreciate it a lot
|
|
Kalman
|
Hi Arky,
Could you send me the artx file of this template?
szilardi@freemail.hu
Thank you,
Kalman
Quote Arkymedes:
|
|
Kalman
|
Hi jrgweb,
Could you send me this artx file?
szilardi@freemail.hu
Tahnk you,
Kalman
Quote jrgweb:
To all - Artisteer one page template basic's.
This is for the HTML website. We will convert this to a wordpress or joomla later.
Create your template as usual. Colors, menu's, background's etc.
You can layout you template with one column if you wish.
When it comes to content, the only page you care about is the main page.
On the main menu(home or whatever the name) right click, go to properties and edit the name/url. Enter index
Now lets enter some content. Go to your main page and enter content.
At the begging of each section we are going to insert <section id="1"></section> <section id="2"> </section> etc. etc. This gives your page specific sections that can be styles and also aloows your menu's to find the section.
After all content is created, export the template. Because artisteer doesn't allow us to edit the url while designing, we must edit after export.
The only file that is important is the index.html.
Open in a text editor(I use notepad++) and edit the menu items. Change menu item 1 to #1, menu item 2 to #2 etc. etc.
here is an example artx for artisteer 4.2 latest version.
http://demo.artisteertoday.com/smooth_scroll/smooth_scroll2.artx
view source: view-source: http://demo.artisteertoday.com/smooth_scroll/
|
|