Parallax sections add beauty to the pages and attract users to click on the button or links on the section. Parallax elements are highly suitable for the themes with 100% width and Weebly made this possible with the “Section” element. The section element can be used on all responsive themes offered by Weebly. In this article we will discuss step by step tutorial on how to add parallax sections in Weebly site. By adding multiple parallax section in sequence you can also easily create full width parallax page layout.
Note: Remember section element by default is applicable only on responsive themes, but you can enable section element on non-responsive themes using this little trick.
How to Add Parallax Sections in Weebly?
There are two places you can enable parallax sections:
- Using header page layout on header area
- Using section element on content area
Header Parallax Section
Go to the pages tab and select the page you want to add parallax header section. Under “Header Type” section choose “Header” option from the first dropdown.
This will enable the default header image of the theme on the selected page. You can drag and drop any elements on the header section and also resize the height of your header. Learn more on Weebly flexible header layout. Click on the header section to see the two options popping up – Edit Background and Replace Header Layout.
Click on the “Edit Background” option. You will have the following three options to choose:
- Image – applicable for all users
- Color – applicable for all users
- Video – only for premium users
If you are a free user choose either image or color for the header background. The header video background is only available for the users having Weebly pro or higher level plans. Basically all of these three options allow you to have parallax header section. Let us choose image in our example.
Click on the “Scrolling Effect” option and you will see three effects – none, parallax and reveal.
Choose “Parallax” effect, save your header layout changes and publish your site to see beautiful header layout with parallax effect.
Add Parallax Section On Content Area
Drag and drop a section element anywhere on your content area. This will create a full width section on your page and you can add any elements inside the section element. Click on the section element to see the following option popup.
Click on the “Edit Background” and follow the similar steps explained in the above section for header image. You can multiple section elements one below other to create a full page parallax layout with beautiful scrolling effect.
Adjusting Image Background
The background image of the header and section elements can be edited with Weebly image editor. The editor allows you to add zoom, darken, blur and filter effects for the background image.
I have a space between backgrounds how do I fix that?
Hi,
I’m confused as to where exactly to copy and paste each code. Could you clarify that?
HTML should be placed on the content using “Embed Code” element and the CSS needs to be placed under the “Header Code” section of the page’s advanced settings.
The images should automatically get resized on smaller devices with responsive themes with center alignment. If you want to have more specific way of displaying on mobile devices then use @media queries in CSS to control the display.
Hi, thank you so much. It works excellent on desktop. How do you make the parallax effect to work on mobile devices? I’m having trouble with that, the images look off and way too stretched, and the font doesn’t match either on mobile. Please help. Thanks!