Sélectionner une page

How to Build a Responsive Fixed Sidebar with Smooth Scrolling Anchor Links Using Divi’s Specialty Section

How to Build a Responsive Fixed Sidebar with Smooth Scrolling Anchor Links Using Divi’s Specialty Section


Sidebars aren’t so popular anymore. In many cases, they end up being more distracting than they are helpful. But sometimes a sidebar makes perfect sense, especially when dealing with lengthy content. That is why I set out to create a sidebar that makes a lot of sense.

Today I’m showing you how to use the specialty section in the Divi Page Builder to create a responsive fixed (or sticky) sidebar menu with smooth scrolling anchor links (or jump links). Because the sidebar remains visible and the anchor links smoothly scroll to different sections on the page, the sidebar stays married to the content, making it a helpful UX feature. Like a document outline, this combination makes your web page content more accessible and easier to read. It is a refreshing solution for those long scrolling pages.

Check it out!

Today’s Before & After: A Responsive Fixed Sidebar with Smooth Scrolling Anchor Links Using Divi’s Specialty Section

Here is a gif showing the page without the fixed sidebar modification. I added the anchor links to the menu to capture the inconvenience of having to scroll back up to the top of the page to view the menu.

before-img-600

Below is an example of the fixed sidebar and anchor link combination. The end result is an elegant solution with seamless transitions throughout your content.

fixed-sidebar-600

The Concept & Inspiration

google-doc-img

Earlier this year, Google added a helpful document outline tool for Google Docs that allows you to easily deploy a fixed sidebar with a clickable outline that jumps to the different headings on your document. I love it because it helps me find information a lot faster. I thought it would be cool to bring this same feature to your website.

Preparing the Design Elements

In this example, I’m setting up a mock tutorial to display the functionality of the sidebar. Even though this functionality will be used with your own content, here is what I’m using today:

For the page content, I’m using dummy lorem ipsum text with custom CSS added to the headers. I’m also adding five royalty-free images from https://unsplash.com sized 700px by 400px.

For the sidebar, I’m adding a mock logo/image sized 200px by 200px to fit at the top of the sidebar. The rest of the sidebar is styled using CSS.

Implementing the Design with Divi

To add these modifications to your own website, follow the instructions below step-by-step.

Adding the Specialty Section

First, add a specialty section to your page by choosing the “Specialty Section” option from the in-line “add new section” controls.

specialty-sec

Select the one-third / two-thirds layout.

specialty-section-edited

Adding the Rows & Content

To create a section for the page title, click the insert column link inside the existing row module.

insertcolumn

Insert a fullwidth row.

add-row

Next, add a text module to the row module. Inside the text module under general settings, locate the content section and make sure the text tab is selected. Add the following html for the title (make sure to use an h1 tag).

<h1>Cooking <span style="color: #406ac2;font-weight: 600">101</span></h1>

add-h1

(Optional: You can label the module by scrolling down to the Admin Label field and entering “page title”. I suggest doing this for all future modules as well.)

Click Save & Exit.

Now add the first of five additional row modules for the rest of your content sections. Each of the five rows will have…

  • a text module (for the subtitle)
  • an image module (for the image)
  • another text module (for the rest of the text).

To add another row module click “Add Row” beneath the existing row module. Select the full width row option, insert a text module, and add the text “Section 1” in the content section (give it an h2 tag since this is a subtitle).

step1

To add a dark gray background to the text module, select the Advanced Design Settings tab and change the background color to the hex color #333333.

gray-bg

Give it a border radius by selecting the Custom CSS tab and adding the following css to the Main Element code editor box:

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

border-radius

Click Save & Exit.

Inside the same row module add an image module under the text module. In the image module settings, upload your image (I’m using one from unsplash.com).

upload

Click Save & Exit.

Next add another text module under the image module. Also add some text to the content box. A few paragraphs of lorem ipsum text will do the trick for now.

Click Save & Exit.

Now your layout should look like this:

after-step1

For the next 4 rows, speed up the process by duplicating the row you just made. Simply click the duplicate icon on the row module four times.

duplicate

Your layout should look like this:

after-duplicate

(Note: After duplicating the rows, you will eventually need to go back and change the subtitles, images, and content for each as you see fit.)

Now that you have all five content rows completed, you need to go back to each one and add your anchor link target ID. This target ID is how your sidebar links will know where to scroll to on the page.

For each of the five row modules, go to the Row Module settings and add a unique CSS ID under the Custom CSS tab (make sure it is CSS ID and not CSS Class). Since I’m going to be linking to different steps for a tutorial, I’ll just name them “step-1”, “step-2”, “step-3”, “step-4”, and “step-5”. So, the first content row should have a CSS ID of “step-1”.

step-1-edited

The next row will have a CSS ID of “step 2” and so on.

Creating the Custom Menu

Now that you have your rows and css id’s setup, you can start creating a custom menu for your anchor links. Start by going to Appearance → Menus in the WordPress admin. Click “create a new menu” and name it “fixed sidebar menu”.

create-new-menu

After that, click to toggle open Custom Links and add your anchor link. You want this first one to link to the first row you created with the unique class id “step-1”. To do this, type “#step-1” in the URL text box. Also give the link a name in the Link Text field. Then click the “Add to Menu” button.

create-menu-links-edited

Repeat this for the next four links and make sure the CSS ID names for each row match the url for each custom link (don’t forget to add the hashtag (#) before). For example, the custom link url “#step-2” should correspond to the CSS ID “step-2” and so on. Save your menu. The links are now properly setup to jump to the five specific sections of the page when clicked.

Note: The smooth scrolling effect for the anchor links will happen automatically because it is built into Divi already which is a nice bonus!

Creating a New Widget Area

Next, create a new widget area for your new menu. In your WordPress admin, go to Appearance → Widgets, enter the name “fixed sidebar” in the Widget Name box and click the “create” button.

add-fixed-sidebar-widget-edited

Note: You may have to refresh the page after creating the widget area for the new area to show up.

To add a logo/image to the top of the sidebar, locate the text widget on the left side of the page and drag it over inside the Fixed Sidebar widget area you just created. Click to toggle open the Text Widget and add an html img tag using this code (notice the dimensions for the image should be 200px by 200px):

<img src="Your Image URL" alt="Your Alternate Text" width=”200px” height=”200px” class="aligncenter" style=”padding-right: 15px” />

badge-image

Replace “Your Image URL” with the the full url of your image and “Your Alternate Text” with an alternate name for your image.

Click Save.

Next, locate the Custom Menu widget on the left side of the page and drag it over inside the Fixed Sidebar widget area under the Text Widget. Click to toggle open the Custom Menu widget and select the custom menu you created called “fixed sidebar menu”. Then give your menu a title (you can put “Cooking Steps” for now).

add-menu-edited

That’s it. Save the widget and head back to your page.

Creating the Sidebar

Finally, it’s time to add your sidebar to the page. Using the Divi Page Builder add a row with a full width column in the ⅓ column (left side). Next, add the Sidebar Module.

sidebar-module

Under the Sidebar Module general settings tab change the following:

  • Widget Area: fixed sidebar (the one we created earlier).
  • Text Color: Light
  • Disable On: select phone and tablet (This is an important step in making this mobile friendly)

add-widget-to sidebar-edited

Under Advanced Design Settings, switch the setting “Remove Border Separator” to “YES”.

remove-border-edited

Now go to the Custom CSS tab and add the following css in the Main Element code editor box:

background: #333;
position: fixed;
width: 25%;
padding: 120px 0px 20px 15px;
top: 0;
left: 0;
height: 100%;

sidebar-custom-css

Click Save & Exit.

Taking Care of Mobile

Currently, the fixed sidebar will not render correctly on mobile devices. This needs to be fixed. Remember how you hid the sidebar from phone and tablet displays? Now you need to add a “non-fixed” version of the sidebar that only shows on phone and tablet.

First, duplicate the sidebar module by clicking the duplicate icon.

duplicate sidebar-edited

In the Sidebar Module settings under general settings, edit the Disable On setting by unchecking the phone and tablet options and checking the desktop option (the opposite of what you had for the first sidebar).

Then go to Custom CSS and take out all the code in the Main Element box and add the following:

background: #333;
padding: 20px 15px 20px 30px;

Now you have two sidebars – a fixed sidebar that shows on desktop only and a traditional sidebar that shows only on mobile devices.

Note: Some of you may prefer to make the sidebar responsive by other means such as media queries. That is a great option too. I did it this way to keep it simple.

Additional Styling

This last step is all about styling. Right now the fixed sidebar overlaps your footer at the bottom and the menu links are just too boring. You can add a few custom css elements to fix this.

Go to Divi Theme Options on the WordPress admin. Under the General tab add the following css in the Custom CSS box at the bottom of the page:

#menu-fixed-sidebar-menu li a { 
color: inherit; 
display: block; 
width: 100%; 
padding: 15px 15px 15px 30px; 
margin-bottom: 10px; 
background: #555; 
border-left: 4px solid #888; 
text-transform: uppercase; 
} 

#menu-fixed-sidebar-menu li a:hover { 
background: #fff; 
color: #333; 
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
} 

@media (max-width: 1280px){
.et-social-icons, #footer-info {
float: none;
text-align: center;
}

@media (max-width: 980px){
#main-footer { 
width: 100% !important; 
}

theme-options

Note: The css id selector is dependant on the name of your menu. For this style to work, make sure you named your menu “fixed sidebar menu” so it corresponds correctly to the css #id selector “#menu-fixed-sidebar-menu”.

The Final Result

fixed-sidebar-600

That’s it. You now have a responsive fixed sidebar menu with smooth scrolling anchor links!

The beauty of this setup is you can easily add fixed sidebars to any page with different anchor link menus. This would be great for membership courses, tutorials, FAQ’s, portfolios, or long blog posts. Do you have other uses to share? I’m interested to hear what they are in the comments.

In Conclusion

The Divi Specialty Section is something we haven’t written a lot about yet–but we plan to! So keep your eyes peeled for more posts like this one in the future. And please, let us know in the comments below if you have any requests!



Source link

Poster le commentaire

Votre adresse e-mail ne sera pas publiée.