How does Kadence theme add article directories to desktop and mobile terminals?

Kadence Subject Article Directory The function is an advanced function, which can add different article directory functions for desktop and mobile access respectively. This saves an article directory plug-in. Next, Weiss notes will share how to achieve the above functions step by step.

If you don't know this topic, please move on How to quickly build a website with Kadence theme 。

1. Location of adding article directory on desktop and mobile

The article directory of the WordPress website is generally used for blog websites, information websites, etc. Enterprise websites and foreign trade websites are not available.

First, let's add the article directory to the desktop. There are generally two places to put the table of contents: behind the first paragraph of the article and the sidebar.

Domestic bloggers put plug-ins or manual codes behind the first paragraph; In addition, some bloggers in foreign countries put them on the sidebar to make the effect of sticky follow page scrolling up and down, so that visitors can view the directory and click jump at any time. The user experience is better than putting them behind the first paragraph.

Let's talk about adding the article directory on the mobile end: it can only be placed after the first paragraph of the article, not on the sidebar. Because the mobile terminal's screen is relatively small, the sidebar will be placed after the content of the article in order (almost at the back of the screen), losing the original meaning of the directory.

The location of adding directories on the desktop and mobile terminals is clarified, and Lao Wei will begin to operate.

2. Deploy Kadence pro plug-in

To enable the directory function of Kadence theme Purchase Kadence pro and Kadence block Pro plug-ins , upload it to the WordPress plug-in, install and enable it.

Enter WordPress background>Appearance>kadence, and in the Pro Addons area on the right, enable hooked elements. This is also a common hook element in many themes and page editors.

After completing the above two steps, we can officially add article directories to the desktop and mobile terminals.

3. Kadence theme adds directory to desktop

Click WordPress Background>Appearance>Kadence again, and you can see that elements appear below. After entering, click add new above, select the default element form, and start the journey of creating a directory.

As shown in the figure below, the screenshots of the two steps are merged.

As shown in the figure below, click Add to search for table of content or directory.

You can also use the shortcut command/in the editing area to add.

Set the directory style, as shown in the figure below, click the "Set" button to start setting in the block.

• Allowed titles: cancel h1, h4, h5, and h6, and retain h2 and h3. h1 means that only one article title is used, while most articles have at most h2 titles and h3 subtitles. Smaller titles are rarely used, and they have never written such complex content. That is to say, once you use it, you can start it.
• Title setting: whether to enable many setting options such as title, font size, line height, letter interval, text change, font model, etc.
• Collapse setting: whether the directory can be collapsed, whether it is collapsed by default, and select the collapsed small icon.
• List settings: directory line spacing, directory style, font parameter settings (the same as the title).
• Container setting: set content boundary width 2, turn on shadow and set the maximum width of 300.
• The title and list can set different parameters for PC, tablet and mobile phone respectively.
• The above parameters can be set according to personal preferences by inputting numbers to see the effect.

Set the display position of the directory, and start setting in the element settings on the right side of the page.

Placement: the location of the directory in the article. Generally, it is placed after the first paragraph, so select after first paragraph (the first to fourth paragraphs are optional). You can also choose to put it on the sidebar like foreign bloggers. The specific operations are described below.

Priority: 10.

Display settings: show on single article.

Select post by Select publisher: all.

Device settings: show on device is All by default. Here, select Desktop.

After setting the above catalog style and display location, remember to save and publish.

Lao Wei added some titles and contents to the article in advance, and the effect is shown in the following figure.

It can be clearly seen that directory borders and shadows have been added according to the above parameters. You can modify them according to your own preferences until you are satisfied.

What I said above is to put the directory after the first paragraph of content on the desktop.

How to put it on the sidebar like foreign bloggers?

Select after sidebar in element settings>placement.

The effect is as shown in the following figure, so that users can quickly click anywhere to locate the location of interest when browsing the page. Obviously, this experience is better.

The above method is to put the directory behind the sidebar (that is, outside). What can I do if I want to put it in the sidebar gadget and stick it to the page?

First, go element settings > placement， Click x to close the directory display function in the content section.

Go to the WordPress background>Appearance>Kadence>Elements list to obtain the Shortcode of the desktop element.

In WordPress background>Appearance>Widgets, add a short code to the sidebar, paste the above Shortcode, and save it.

Navigate to WordPress background>Appearance>Customize>General>Sidebar, enable the sticky sidebar, only stick last widget (sticky follow is only effective for the last widget), and close the only stick last widget if the sticky effect cannot be achieved later.

In this way, you can realize the sticky following effect of directories in the sidebar.

Now let's make it even more attractive and better user experience.

Go to WordPress Background>Appearance>Kadence>Elements, click the existing desktop directory element, and scroll through the settings on the right.

Turn on the two functions of "Smooth scrolling to ID" and "Enable highlighted title when scrolling in the active area", and list the attractive red color selection for item activation.

The effect is shown in the following figure. When the page scrolls to a title, the directory on the right will locate the corresponding entry and highlight it in red. If you are a visitor, is it comfortable to use this effect?

4. Kadence theme adds directory to mobile terminal

It is similar to the above steps for adding a directory to the desktop.

Navigate to WordPress background>Appearance>kadence, enter elements and click add new>default.

The element is named: Mobile terminal directory. Search and add the directory of Kadence.

The "Settings" of the editing area is the same as the desktop side above. Settings>Blocks>Container Settings>Maximum Width: 300 or 400, depending on the actual situation.

The only difference is that when you select Mobile in element settings>device settings, you only add directories to the mobile phone.

Remember to save and publish after setting.

Press F12 in Google Browser to view the effect in mobile mode. As shown in the figure below, the directory appears after the first paragraph. Click it to jump to the corresponding paragraph, which is perfect.

5. Summary

It is easy to add article directories to the desktop and mobile terminals in Kadence theme. You need to purchase, install and enable them Kadence pro and Kadence Pro Plug ins, using Hooked Elements and setting certain conditions, can be immediately displayed on the corresponding terminal. You can also customize the style and layout, and the effect is very good. The most important thing is that all these operations can be implemented without plug-ins, without adding much code, which has little impact on page speed and is also conducive to SEO optimization.