Categories
Website Design

How To Add A Table of Contents in WordPress [Video]

How To Add A Table of Contents in WordPress

𝗖𝗵𝗲𝗰𝗸𝗼𝘂𝘁 𝗼𝘂𝗿 𝗲𝘅𝗰𝗹𝘂𝘀𝗶𝘃𝗲 𝗪𝗼𝗿𝗱𝗣𝗿𝗲𝘀𝘀 𝗰𝗼𝘂𝗿𝘀𝗲 ➜ https://link.websitelearners.com/WordPress-Course

𝗚𝗲𝘁 𝘁𝗵𝗲 𝗙𝗮𝘀𝘁𝗲𝘀𝘁 𝗪𝗼𝗿𝗱𝗣𝗿𝗲𝘀𝘀 𝗛𝗼𝘀𝘁𝗶𝗻𝗴 ➜ https://webspacekit.com

𝗛𝗼𝘄 𝘁𝗼 𝗠𝗮𝗸𝗲 𝗠𝗼𝗻𝗲𝘆 𝘄𝗶𝘁𝗵 𝘆𝗼𝘂𝗿 𝘄𝗲𝗯𝘀𝗶𝘁𝗲 ➜ https://websitelearners.com/ebook/top-5-ways-to-monetize-your-website/

𝗩𝗼𝘁𝗲 𝗳𝗼𝗿 𝘁𝗵𝗲 𝘂𝗽𝗰𝗼𝗺𝗶𝗻𝗴 𝘃𝗶𝗱𝗲𝗼𝘀 ➜ https://topics.websitelearners.com/websitelearners

𝗣𝗼𝘀𝘁 𝗜𝘀𝘀𝘂𝗲𝘀 𝗛𝗲𝗿𝗲 ➜ https://wltalk.com/post/1460957900

Learn how you can add a table of contents to your WordPress website.

Let’s say you have a website and a blog in it.

Now if your visitor wants to read any content on the page, they need to scroll down.

Now Instead of scrolling, you can add a list of all the topics on that page

so when someone clicks it, they can view the content in the same window.

You can add a table of contents easily by following our 2 simple steps.

𝗧𝗮𝗯𝗹𝗲 𝗼𝗳 𝗰𝗼𝗻𝘁𝗲𝗻𝘁𝘀 :

0:00 Intro

00:51 Install ‘Easy Table of Contents’ plugin

01:44 Choose where to add the table of contents

04:16 Automatically add the table of contents to all the posts

05:32 Remove the table of contents from a particular post

06:48 Remove particular heading

07:55 How to add the table of contents on the sidebar

10:20 Fix the table of contents on the sidebar

Step 1 : Install ‘Easy Table of Contents’ plugin.

To install the plugin,

Go to WordPress Dashboard ► Plugins ► Add New

Now search for ‘Easy Table of Contents’ and click ‘Install’ & ‘Activate’

Once you’ve installed the plugin, go to the next step.

Step 2 : Choose where to add the table of contents.

To add the table of contents

Go to WordPress Dashboard ► Settings ► Table of Contents

Now enable the section where you want to add the table of contents.

As you want to add it to posts, enable ‘Posts’ and click ‘Save Changes’

Once you’ve enabled, you need to add the table of contents.

So go to WordPress Dashboard ► Posts ► All Posts

Now select the post for which you want to add the table of contents.

Now scroll down and enable ‘Insert table of contents’

Next, you need to select the headings of your posts which you want to display on your table and click ‘Update’.

So now you’ve successfully added the table of contents on your blog post.

Now instead of adding the table of contents to each post, you can
automatically add the table of contents to all the posts at same time.

So to do that, go to WordPress Dashboard ► Settings ► Table of Contents

Now go to ‘Auto Insert’ and enable ‘Posts’

Once you’ve enabled it, click ‘Save Changes’

So now you’ve successfully added the table of contents on all your blog posts.

Next let’s see how you can remove the table of contents from a particular post.

So to do that, go to WordPress Dashboard ► Settings ► Table of Contents

Now scroll down to see an option called ‘Limit Path’

Now just add the path link of the post for which you want to remove the table of contents then click ‘Save Changes’ and the table of contents will be removed from that particular post.

Now if you want to remove particular heading from the table of contents

Just copy the heading you want to remove.

Now go to ‘Edit Post’ and you will find an option called ‘Exclude Headings’

Now paste the heading you’ve copied and click ‘Update’

And now the heading will be removed from the table of contents.

=== Bonus Part : How to add the table of contents on the sidebar ===

So to add the table of contents on the sidebar

Go to WordPress Dashboard ► Appearance ► Widgets

Now just drag & drop the table of contents widget to the sidebar.

Now just give a title to it and click ‘Save’& ‘Done’

And now your table of contents will be added to the sidebar.

Now if you want to remove the table of contents on the posts

Just go to WordPress Dashboard ► Settings ► Table of Contents

Now disable the ‘Posts’.

Now if you want to fix the sidebar instead of scrolling up

You need to install the ‘Q2W3 Fixed Widgets’ plugin.

To install the plugin

Go to WordPress Dashboard ► Plugins ► Add New

Now search for ‘Q2W3 Fixed Widgets’ and click ‘Install’ & ‘Activate’.

Once you’ve installed the plugin

Go to WordPress Dashboard ► Appearance ► Widgets

Now click on the table of contents widget which you’ve added in the sidebar,

Then enable the ‘Fixed Widget’ option and click ‘Save’& ‘Done’.

And now your table of contents will be fixed on the sidebar.

So that’s it, guys

This is how you can add a table of contents on your wordpress website.

——————————-

📢 𝗧𝗵𝗲 𝗧𝗼𝗼𝗹𝘀 𝘄𝗲 𝘂𝘀𝗲:

𝗚𝗲𝘁 𝘁𝗵𝗲 𝗯𝗲𝘀𝘁 𝘁𝗼𝗼𝗹𝘀 𝗳𝗼𝗿 𝘆𝗼𝘂𝗿 𝘄𝗲𝗯𝘀𝗶𝘁𝗲 ➜ https://websitelearners.com/tools/

𝗩𝗶𝗱𝗲𝗼 𝗚𝗲𝗮𝗿 𝗪𝗲 𝗨𝘀𝗲 ➜ https://kit.co/websitelearners/video-gear-we-use/

𝗢𝘂𝗿 𝗩𝗶𝗱𝗲𝗼 𝗘𝗱𝗶𝘁𝗶𝗻𝗴 𝗧𝗼𝗼𝗹 ➜ https://bit.ly/2Od546p

🙌 𝗢𝗳𝗳𝗶𝗰𝗶𝗮𝗹𝗹𝘆:

𝗪𝗲❜𝗿𝗲 𝗛𝗶𝗿𝗶𝗻𝗴: https://websitelearners.com/careers/

Want your website developed by us? Email us your requirements to contact@websitelearners.com

💬 𝗙𝗼𝗹𝗹𝗼𝘄 & 𝗖𝗵𝗮𝘁 𝘄𝗶𝘁𝗵 𝘂𝘀:

𝗜𝗻𝘀𝘁𝗮𝗴𝗿𝗮𝗺: https://www.instagram.com/websitelearners/

𝗙𝗮𝗰𝗲𝗯𝗼𝗼𝗸: https://www.facebook.com/websitelearners/

𝗧𝘄𝗶𝘁𝘁𝗲𝗿: https://twitter.com/websitelearners/

Watch/Read More
Categories
Website Design

Responsive flexbox in html and css [Video]

Code with kd : How to create Responsive Flexbox container usind html and cssHow to use media query in cssIf you've enjoed this video, Like us and subscribe to our channel for more similar information video and more tutorial.more video link here:how to create neon button : https://www.youtube.com/watch?v=Rmh-wRvEfr8How to Create Resposive Navbar Using Html and Css:https://www.youtube.com/watch?v=s00U9DKBrqk&t=151sResponsive flexbox in html and css : https://www.youtube.com/watch?v=s00U9DKBrqk&t=151sflexbox in html and css : https://www.youtube.com/watch?v=s00U9DKBrqk&t=151sTrafic light Animation HTML and css : https://www.youtube.com/watch?v=s00U9DKBrqk&t=151show to create slider using css and html :https://www.youtube.com/watch?v=ovH6F4ncq80&t=3sThanks for watching.#codewithkd

Categories
Website Design

Create A Responsive Adventure & Tour Website Design Using HTML CSS / SASS & JavaScript Step By Step [Video]

how to make a complete responsive single page tour and travel adventure website design using html css / sass and javascript from scratch.create a complete responsive tour travel, adventure, hiking, mountaineer, climbing, travel agency website design using html css sass and vanilla javascript tutorial for beginners.the main feature of this website are:✅ responsive header section with navbar menu toggle and search bar using vanilla javascript.✅ responsive home touch slider using swiper.js.✅ responsive category section using css grid.✅ responsive about section using css flexbox.✅ responsive shop section with touch slider using swiper.js.✅ responsive packages section using css grid.✅ responsive review section with touch slider using swiper.js.✅ responsive services section using css grid.✅ responsive blogs section with touch slider using swiper.js.✅ responsive newsletter section.✅ responsive footer section using css grid.* SOURCE CODES *DOWNLOAD THE SOURCE CODE FROM GOOGLE DRIVE ( INCLUDES IMAGES ):https://drive.google.com/file/d/1CAKk59OYGiREBz1RNXcuz2R_kXEKUzsq/view?usp=sharing*How To Download*Step 1 :- click the google drive link ☝☝☝Step 2 :- click on download link in the google drive. Step 3 :- extract the zip file into your desired folder.Step 4 :- open the folder and then rename each coding files.Step 5 :- convert each coding files example ( index.txt to index.html ) - ( style.txt to style.css ) - ( script.txt to script.js ).Step 6 :- open the converted index.html file into your browser.Step 7 :- open your editor and put your converted into it and then edit it as you like. swiper.js link:https://swiperjs.com/font awesome cdn link:https://cdnjs.com/libraries/font-awesomegoogle fonts:https://fonts.google.com/specimen/Poppinsclip-path generator:https://bennettfeely.com/clippy/Editor : - visual studio code with Laetus: Dark Vibrant ThemeBrowser : - google chromeUI Tool : - FigmaImages / Video / SVG : - 01 - https://www.freepik.com/02 - https://storyset.com/03 - https://undraw.co/04 - https://pixabay.com/05 - https://unsplash.com/06 - https://pixabay.com/07 - https://www.flaticon.com/New To My Channel Subscribe Now And See More Stuff Like This:https://youtube.com/channel/UCKwgH3vASrD2brd1l2m6NHwTimestamp:0:00 demo3:46 file structure4:54 header section27:58 home section41:30 category section48:30 about section52:25 shop section1:03:22 packages1:10:40 services section1:16:58 reviews section1:24:27 blogs section1:32:19 newsletter section1:36:56 clients logo section1:39:18 footer section1:46:55 final demo#FrontEnd#TravelWebsite#SinglePage

Categories
Website Design

Simple example of the power of flex in CSS. Ongoing project with Flexbox, CSS Grid, Javascript.Subscribe and follow to see my progress working on certificates for Responsive Web Design, Javascript Algorithms & Data Structures, Front End - Back End Development & APIs, Python, Information Security and Associates Information Technology degree.

Categories
Website Design

Learn how to accept payment methods from around the globe with a single secure, embeddable UI component. Then enhance your integration by enabling automatic payment methods, allowing you to configure compatible payment methods directly from the Stripe Dashboard.This video includes a front section on how to integrate a Payment Element. If you've already watched our video on integrating the Payment Element (https://youtu.be/MfFCg7kYCa4), skip ahead to 07:34 on using automatic payment methods. ### PresenterCharles Watkins - Developer Advocate at Stripe - https://twitter.com/charlesw_dev​### Table of contents00:00 Introduction00:14 Integrate the Payment Element06:24 Add payment methods the manual way07:34 Add payment methods using automatic_payment_methods10:50 Conclusion ### ResourcesNode starter code: https://www.youtube.com/watch?v=rPR2aJ6XnAcPayment Element: https://stripe.com/payments/elementsDocumentation: https://stripe.com/docs/payments/payment-elementAPI reference: https://stripe.com/docs/api/payment_intents/object#payment_intent_object-automatic_payment_methods ### SupportIf you have a question, please feel free to reach out to our support team at https://support.stripe.com/​​​​​ or on Discord at https://stripe.com/go/developer-chat ### UpdatesSign up to stay updated with developer news: https://go.stripe.global/dev-digest​​ ### FeedbackIf you have any feedback about this or other episodes, let us know: https://forms.gle/VjNqzRhotM2snYo88​​