上海综合网站设计: 如何在优雅的主题中添加标有“点导航”的自由版本

2019.05.28 关键词:

上海综合网站设计的点导航是一个很好的额外有在您的网页上。特别是如果你有一个相当长的页面,你想让访问者轻松浏览。在本教程中,我们将帮助您更进一步。而不是只在右边点,你将能够给你的所有相关部分的标签,将匹配的部分,它所代表的。这样,每当访问者出现在这个页面上时,他们就可以导航到特定的年份。

了解点导航

1. 点导航中的每个点表示剖面

2. 为了确保我们每年都连接到正确的点,我们将确保使用每年年初我们有一个新段

3. 点导航使用一个列表为每个部分分配一个数字

4. 清单本身不是从1开始而是从0开始,这意味着您的第一部分是列表中的“0”号,第二部分是“1”号,以此类推。

5. 您可以对任何类型的页面重用此策略,但是您需要根据标签的长度和正在导航的项的数量来修改CSS外观。

第1部分:下载优雅主题“免费10周年纪念时间表”

我们正在使用优雅主题的免费10周年时间线布局,您可以通过我们的十年之旅。如果你还不是一个优雅的主题会员,或者如果你想升级/更新你的帐户,现在是时候了!

第2部分:使用时间线布局创建新页面

步骤1:将时间线布局上传到Divi库

下载免费时间线布局后,您将需要将它上传到您的Divi库。要做到这一点,就去你的WordPress网站>divi>divi库并将JSON文件上传到您的压缩文件夹中。

上海综合网站设计

步骤2:添加一个新页面&启用点导航

现在您已经将布局添加到Divi库中,现在是创建新页面的时候了。添加标题后,请确保在Divi的页面设置中启用Dot导航。

上海综合网站设计

步骤3:切换到VisualUploader

现在我们可以切换到VisualBuilder了。

第4步:上传时间线布局

通过单击加号图标并在保存的布局选项卡中选择布局,上传时间线布局。

第3部分:以新的章节开始每年

步骤1:添加年数

为了知道在您的页面上导航到哪里,我们将每年给出我们的每个时间线项。我们只是使用优雅的主题从2008年到2018年的旅程。继续按时间顺序添加这些数字。在我们添加完新的部分之后,您可以将这些文本模块更改为您想要使用的任何文本。

第二步:在新段中放置介绍行

我们需要创建的第一个附加部分是导言部分。这样,第一个时间线项目就会有自己的部分。

步骤3:2011年地点在新部门

默认情况下,时间表项目2010和2011位于同一节中。为2011年创建一个单独的部分,并将该行放在其中。

第4部分:向页面自定义CSS添加CSS代码

步骤1:CSS代码

上海综合网站设计在我们将CSS代码添加到我们的页面之前,我将详细介绍其中的一些部分,这些部分也将帮助您为其他页面创建一个。您需要的整个CSS代码如下:

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

/*

################

1st year

################

*/

ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_3:before {

content: "2008";

}

 

/*

################

2nd year

################

*/

ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_4:before {

content: "2009";

}

 

/*

################

3rd year

################

*/

ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_5:before {

content: "2010";

}

/*

################

4th year

################

*/

ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_6:before {

content: "2011";

}

/*

################

5th year

################

*/

ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_7:before {

content: "2012";

}

/*

################

6th year

################

*/

 

ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_8:before {

content: "2013";

}

/*

################

7th year

################

*/

 

ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_11:before {

content: "2014";

}

 

/*

################

8th year

################

*/

 

ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_14:before {

content: "2015";

}

 

/*

################

9th year

################

*/

ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_17:before {

content: "2016";

}

 

/*

################

10th year

################

*/

ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_18:before {

content: "2017";

}

/*

################

11th year

################

*/

ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_19:before {

content: "2018";

}

 

/*

################

Hide irrelevant sections

################

*/

ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_0,

ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_1,

ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_2,

ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_9,

ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_10,

ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_12,

ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_13,

ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_15,

ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_16,

ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_20,

ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_21,

ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_22 {

display: none !important;

}

 

/*

################

Styling of list in its total

################

*/

ul.et_pb_side_nav li.side_nav_item {

margin-bottom: -19px;

line-height: 2.7;

margin-top: 5px;

}

 

/*

################

Styling of each item individually

################

*/

ul.et_pb_side_nav li.side_nav_item a {

 

-webkit-box-shadow: -4px 6px 39px -4px rgba(128,123,128,1);

-moz-box-shadow: -4px 6px 39px -4px rgba(128,123,128,1);

box-shadow: -4px 6px 39px -4px rgba(128,123,128,1);

padding-top: 10px;

padding-bottom: 10px;

font-weight: bold;

font-family: poppins;

font-size: 18px;

color: #F92C8B !important;

background-color: #F92C8B;

display: inline !important;

 

}

 

/*

################

Styling of each item individually when active

################

*/

ul.et_pb_side_nav li.side_nav_item a.active {

color: #000000 !important;

background-color: black !important;

}

 

/*

################

Styling of label

################

*/

ul.et_pb_side_nav li.side_nav_item a:before {

padding: 10px !important;

color: white !important;

}

 

/*

################

Styling of entire list

################

*/

ul.et_pb_side_nav {

width: 76px;

background: none;

top: 40%;

}

步骤2:决定要在点导航中包含哪些部分

在点导航列表中,每个节都有自己的项。此布局包括未链接到时间线的部分,因此也包括特定年份。这就是为什么没有必要将它们包含在点导航中,所以我们将在点导航中隐藏这些项目。在前面的步骤中提供给您的代码对于这个特定的布局是有功能的(在本文的第2部分之后)。但是,如果要在不同数量的节上使用此方法,则需要确定要显示的页面上的哪些节。每一页的第一节从零开始。这就是时间线布局上的结构:

· 第0节→不包括

· 第1节→不包括

· 第2节→不包括

· 第3节→包括

· 第4节→包括

· 第5节→包括

· 第6节→包括

· 第7节→包括

· 第8节→包括

· 第9节→不包括

· 第10节→不包括

· 第11节→包括

· 第12节→不包括

· 第13节→不包括

· 第14节→包括

· 第15节→不包括

· 第16节→不包括

· 第17节→包括

· 第18节→包括

· 第19节→包括

· 第20节→不包括

· 第21节→不包括

· 第22节→不包括

步骤3:正面部分(包括在点导航中)

在决定了要在点导航中包含哪些部分之后,您需要使用以下代码并根据需要修改内容,从而确定每个部分的标签:

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

/*

################

1st year

################

*/

ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_3:before {

content: "2008";

}

 

/*

################

2nd year

################

*/

ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_4:before {

content: "2009";

}

 

/*

################

3rd year

################

*/

ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_5:before {

content: "2010";

}

/*

################

4th year

################

*/

ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_6:before {

content: "2011";

}

/*

################

5th year

################

*/

ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_7:before {

content: "2012";

}

/*

################

6th year

################

*/

 

ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_8:before {

content: "2013";

}

/*

################

7th year

################

*/

 

ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_11:before {

content: "2014";

}

 

/*

################

8th year

################

*/

 

ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_14:before {

content: "2015";

}

 

/*

################

9th year

################

*/

ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_17:before {

content: "2016";

}

 

/*

################

10th year

################

*/

ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_18:before {

content: "2017";

}

/*

################

11th year

################

*/

ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_19:before {

content: "2018";

}

步骤4:负部分(隐藏在点导航中)

不想包含在Dot导航中的部分需要使用以下CSS代码行来隐藏:

01

02

03

04

05

06

07

08

09

10

11

12

13

14

ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_0,

ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_1,

ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_2,

ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_9,

ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_10,

ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_12,

ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_13,

ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_15,

ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_16,

ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_20,

ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_21,

ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_22 {

display: none !important;

}

步骤5:向页面添加自定义CSS代码

一旦您理解了代码并根据您的需要修改了它,您就可以通过单击以下按钮将其添加到您正在工作的页面中:

转到“高级”选项卡,并将您的CSS代码放在“自定义CSS”框中。

上海综合网站设计就这样!

如果您有任何问题或建议,请确保您在下面的评论部分留下评论!

 


关键词
最新推荐
联系电话 400-6065-301

微信咨询 寒总监