Weebly upgraded the platform to fourth generation and named it as Weebly 4 on September 2016. One of the features of Weebly 4 is flexible drag and drop header. We have published a trick on how to drag and drop elements in header area and Weebly made this as a default feature now.
Can Everyone Use Flexible Header?
The good news is the feature is available for all Weebly plan users including free users. But the bad news is that flexible header is available only on default responsive Weebly themes and can’t be used in the following themes:
- If you have modified and saved the theme as custom theme.
- You are using a theme bought from third party vendor.
- You are using one of the old non-responsive Weebly themes.
In a nutshell Weebly drives the platform to make use of default themes and developers can use App Center to sell items (although themes are not sold as of now this article is written). With the introduction of “Section” element which can also only be used on default responsive themes, external third party developers will have tough time to sell their themes without default functions.
If you are already using custom theme, read out our article on creating drag and drop header.
Features of Flexible Header
Below are the features of flexible header:
- Dragging and dropping the pointer can adjust height of the header area. This eliminates the need of using different header types for different pages as you can drag and adjust the height as per your need on individual pages. Hence all previous header types were consolidated into header, no-header and splash page layouts.
- Apply the header changes to all the pages or only to the selected pages on your site.
- Edit the background image or select from one of the available layouts.
- Drag and drop any elements on the header area like social icons, buttons, text, etc.
- Create the header with background image or plain color. Pro, business and performance plan users can add video backgrounds to the drag and drop header.
- Easily create parallax effect or reveal effect to the header.
How to Use Flexible Drag and Drop Header in Weebly?
As mentioned above, flexible header is available only for default responsive Weebly themes. Hence, if you are using modified custom theme change to one of the latest theme. Note you will loose all custom changes when changing to the default theme. The best way is to create a new site and test whether it is useful for your need.
Once you are in the site editor check the page has default image. Or else go to “Pages” menu and choose the header type as “Header” to enable the header section on your page. Now you can drag and drop any elements on the header area similar to the content area.
Weebly Flexible Header Options
- Drag and drop any elements
- Adjust the size by dragging
- Edit background with image, color or video
- Delete the existing header layout by replacing with new layout
Click on the header to see the customization options. You have two options – edit background and replace header layout.
Edit Background
Free and started plan users can change the background of the header with image and color options. While Pro, Business and Performance plan users can add videos to the header background.
Weebly Header Background Options
1. Using Image as Header Background
Following are the available options for using image as header background:
Header Background Image Option
- Edit the background image with Weebly image editor and adjust the blur, darkness and apply filters.
- Replace the image with your own custom image.
- Replace the image from one of the free Weebly header images.
- Enable parallax or reveal scrolling effects.
- Apply the header changes to selected or all pages on your site by clicking “Advanced > Save to more…” option.
Save Header Changes to Multiple Pages
- Align the content on the header area to top, middle or bottom.
Advanced Header Background Options
2. Using Background Color
Background color has all options similar to images except that you can’t enable parallax scrolling effect.
3. Video Background
If you purchased Pro, Business or Performance plan then you can add video to the header background.
Replace Header Layout
If you don’t like the default layout then click on the “Replace Header Layout” option to check some of the options offered by Weebly. Before choosing another layout you must click on the “Delete” button to delete the current layout. Note this will delete all changes you have made to the header.
Replacing Existing Header Layout
Choose one of the available layouts and customize again.
Choosing New Header Layout
Resizing Header
You will see a bottom border line when clicked on the header area. Drag that bottom border and resize the header to desired height. You can see the height in pixel while dragging the header.
Leave a Reply
Your email is safe with us.