4th of July Sale! Use coupon fireworks35 to save 35%. See Pricing →

Create a sticky wrapper in your WordPress site with Headway

Create a sticky wrapper in your WordPress site with Headway

Creating a “sticky” wrapper (one that stays at the top of the screen as a user scrolls) in Headway can be done in 3 clicks!  Many people wanted this feature and typically you see the menu as sticky but that’s not a requirement, of course.

Are you ready to add a Sticky Wrapper? Let’s go!

Step One: Open the wrapper options for the wrapper you want to make sticky


sticky-wrapper-1
Step Two: Click on “Sticky Positioning Tab”

sticky-wrapper-2

Step Three: Click on “Enable Sticky Positioning” and that is it!

sticky-wrapper-3

Save, of course, and then view your site to see the sticky wrapper functionality!

Add Parallax to your WordPress site with Headway

Add Parallax to your WordPress site with Headway

Headway makes it easy to add parallax to your WordPress powered site. The written tutorial is first and at the end is a screencast that goes over creating a sample design so pick your poison! Finally, at the very end, find the layout I created as a downloadable file. Use as a reference or a starting point!

Jump to:

Part One: Grid Mode

Step One: Create desired numbers of wrappers in Grid Mode

I’m using 5 to re-create the design in this tutorial.

parallax-add-wrappers

You can also add an alias to the Wrappers to make them easily identifiable.  Please see: Wrapper Options article

Step Two:  Add text blocks in each wrapper

parallax-text-blocks

You can use the duplicate block feature to quickly duplicate a block so it keeps your set height and even content.

Make sure to add the desired text in each text block.
parallax-text-blocks-text

Step Four: Change wrappers to fluid

Right click on the wrapper and choose “Change Wrapper to Fluid”

parallax-wrapper-fluid

Part Two: Design Mode

Step Five: Add background image(s) and set to parallaxparallax-image-parallax

Select the wrappers you need to add images to, right click and choose Edit This Instance.  Then in background settings, add an image and change the following settings:

Repeat: No Tiling

Position: Center Center

Size: Cover (Only if your image is not big enough to fill or you want to make sure it fills no matter the screen size)

Parallax: Enable

Parallax Ratio: Change to desired ratio

If you notice any jumpiness when scrolling, please set the Behavior to Fixed.  In fact, you may want to do this by default.

Step Six: Style the other wrappers and the text

Wrappers:  Instead of adding an image, you can also just add a background color like in the sample design

Text:  Make sure you select “Edit this instance” unless you want all text blocks throughout the site to be styled the same.

Step Seven:  Remove default margins and (optional) box shadows on wrappers

Go into the Design Tree and click on Structure and then select Wrapper.  Then click on the Styles tab and click the Trash icon next to each of the margin and (optional) box shadow settings.

parallax-wrapper-remove-1parallax-wrapper-remove-2

Step Eight: View live site and scroll!



Download the layout
(Note: this is a zip file. You will need to unzip to use the .json layout)

Learn how to separate your titles into a separate wrapper

Learn how to separate your titles into a separate wrapper

In this tutorial, you will learn how to create something like this and it is super easy to do with Headway and requires no code!

 

separate-title-part-1

Step one: Create your 2 content blocks

First things first, on the Single layout you will need two wrappers, each with a content block.

separate-title-part-2

You’ll notice that I’ve given each content block a block alias so they are easily identifiable.

Step 2: Edit the first content block to only show the title

In the content block labeled “Single Title”, you need the following settings:

Mode – Default

Display: Default settings except

  • Entry Content Display is set to “Hide Entry Content”
  • Comment Visibility: “Always hide comments”

separate-title-part-3

Meta: Erase what is in “Meta Above Content” & “Meta Below Content”.

Everything else: Leave as default

separate-title-part-4

Step 3: Edit the second content block to only show the entry content

In the block options for the content block labeled “Content”, you’ll need the following settings:

Mode: Default

Display: Uncheck “Show Titles”.

Everything Else:  Leave as default

separate-title-part-5

 

Step 4: Style your Wrapper with the title differently

Switch to design mode, and select the wrapper with the inspector that contains the “Single Title” named Content block.

First, we will give our wrapper a background color.

separate-title-part-6

 

Next, we set the Entry title to white in that wrapper and increase the font size.

separate-title-part-7And that is it!  I’d love to see what you create with this tutorial!

 

Rename your Shared Layout

Rename your Shared Layout

A helpful feature you may have missed is the ability to renamed Shared Layouts.  Here’s how: Step One:  Edit the Shared Layout you want to rename Step 2: Go back into the layout selector Now you will see “Rename” next to the Shared Layout you are editing instead of “Edit”.   Step 3: Click Rename… Continue Reading

Intro to Headway version 3.8

Headway version 3.8 is available now. It is available as an auto-update (with a valid license key entered and activated in your Headway Options) or in your Members Dashboard.   As always, we recommend taking a full backup of your site before upgrading.  Duplicator plugin (free) and BackupBuddy (premium) both are highly recommended to handle your… Continue Reading

Introduction to qoerz Animations

A new community block, qoerz Animations, was recently added to Extend and offers 2 blocks for the price of one to allow you to easily animate text and images.   Animate text and images Simply choose your block type and then select your animation type. Choose between over 50 animation options Many options to choose from for all… Continue Reading

Introducing Architect: A content layout plugin and block for Headway

On April 1, 2015, Chris Howard’s (of PizazzWP) latest product was added to Headway Extend. Architect A content layout plugin and block for Headway.  Use it to create dynamic, content driven layouts like: Sliders Galleries Grids Tabular   Tabbed Both vertical and horizontal tabs! Masonries    Accordions And More! As Chris has stated in this blog… Continue Reading

Creating a features/services area in Headway

Creating a featured area is very easy in Headway. This tutorial is going to go over how to create an area that looks like this The great thing is you can do this with just core blocks in the visual editor but I’m also going to go over how to do this with a block from… Continue Reading

Headway Newsletter

Get the latest updates from our blog directly in your inbox! Are you ready to learn the latest from Headway Themes?

Copyright © 2015 Vesped Inc. All Rights Reserved. Proudly Powered by Headway and WordPress