El nuevo diseño de línea de tiempo se puede descargar de forma gratuita, pero SÓLO durante la oferta de aniversario de 10 años de Elegant Themes , que TERMINA HOY. Es un diseño elegante que lo ayudará a mostrar la línea de tiempo de su empresa o cualquier otro tipo de línea de tiempo que desee compartir con sus visitantes. Además del diseño gratuito, vamos a compartir un interesante tutorial que ayudará a sus visitantes a navegar por esta página utilizando la navegación de puntos.
La navegación de puntos es un buen extra para tener en tu página. Especialmente si tiene una página bastante larga por la que desea que los visitantes naveguen fácilmente. Y en este tutorial, lo ayudaremos a dar un paso más allá. En lugar de tener solo puntos en el lado derecho, podrá asignar a todas sus secciones relevantes una etiqueta que coincida con la sección que representa. De esa forma, los visitantes pueden navegar a un año específico siempre que estén en esta página.
Antes de sumergirnos en el tutorial, echemos un vistazo al diseño exacto que vamos a crear usando Divi .
- Cada punto en su navegación de puntos representa una sección
- Para asegurarnos de conectar cada año con el punto correcto, nos aseguraremos de que al comienzo de cada año tengamos una nueva sección.
- Dot Navigation utiliza una lista que asigna un número a cada sección
- La lista en sí no comienza desde 1 sino desde 0 , esto significa que su primera sección es el número ‘0’ en la lista, la segunda es el número ‘1’, etc.
- Puede reutilizar esta estrategia para cualquier tipo de página, pero deberá modificar la apariencia de CSS de acuerdo con la longitud de su etiqueta y la cantidad de elementos por los que navega.
Parte 1: descargue el diseño gratuito de la línea de tiempo del décimo aniversario de Elegant Themes
Estamos utilizando el diseño de línea de tiempo gratuito del décimo aniversario de Elegant Themes, que puede descargar yendo a nuestra página del viaje de los 10 años . Si aún no es miembro de Elegant Themes, o si desea actualizar/renovar su cuenta, ¡ahora es el momento! ¡Ofrecemos un descuento del 20 % , que es el doble de la cantidad de descuento que normalmente puede obtener! Mientras esté en la página del viaje de 10 años , también podrá descargar el diseño de línea de tiempo gratuito que se utilizó para crear esta hermosa página haciendo clic en el botón de descarga.
Parte 2: crear una nueva página usando el diseño de la línea de tiempo
Paso 1: Cargue el diseño de la línea de tiempo en su biblioteca Divi
Después de descargar el diseño de línea de tiempo gratuito, deberá cargarlo en su biblioteca Divi. Para hacer eso, vaya a su sitio web de WordPress> Divi> Biblioteca Divi y cargue el archivo JSON dentro de su carpeta comprimida.
Ahora que ha agregado el diseño a su Biblioteca Divi, es hora de crear una nueva página. Después de agregar un título, asegúrese de habilitar Dot Navigation dentro de la configuración de la página de Divi.
Paso 3: cambie a Visual Uploader
Ahora podemos cambiar a Visual Builder de inmediato.
Paso 4: Cargue el diseño de la línea de tiempo
Cargue el diseño de la línea de tiempo haciendo clic en el ícono más y seleccionando el diseño dentro de la pestaña Sus diseños guardados.
Parte 3: Comience cada año con una nueva sección
Paso 1: agregue números de año
En aras de saber a dónde navegar en su página, le daremos a cada uno de nuestros elementos de la línea de tiempo un año. Simplemente estamos usando el viaje de Elegant Themes de 2008 a 2018. Continúe y agregue estos números en orden cronológico. Una vez que hayamos terminado de agregar nuevas secciones, puede cambiar estos módulos de texto al texto que desee usar en su lugar.
Paso 2: coloque la fila de introducción en la nueva sección
La primera sección adicional que necesitaremos crear es una para la introducción. De esa forma, el primer elemento de la línea de tiempo tendrá su propia sección.
Paso 3: Colocar 2011 en Nueva Sección
Los elementos de la línea de tiempo 2010 y 2011 están ubicados de forma predeterminada en la misma sección. Cree una sección separada para 2011 y coloque la fila en ella.
Parte 4: agregar código CSS a la página CSS personalizada
Paso 1: el código CSS
Antes de agregar el código CSS a nuestra página, elaboraré algunas partes que lo ayudarán a crear uno para otras páginas también. El código CSS completo que necesitarás es el siguiente:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
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
sesenta y cinco
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%;} |
Cada sección tiene su propio elemento en la lista de Dot Navigation. Este diseño incluye secciones que no están vinculadas a la línea de tiempo y, por lo tanto, a un año específico. Es por eso que no es necesario incluirlos dentro de la navegación de puntos, por lo que vamos a ocultar estos elementos dentro de nuestra Navegación de puntos. El código que se le proporcionó en el paso anterior es funcional para este diseño en particular (después de leer la parte 2 de esta publicación). Sin embargo, si desea utilizar este método en un número diferente de secciones, deberá determinar qué secciones de su página desea que aparezcan. La primera sección de cada página comienza en cero. Así es como se ve la estructura en el diseño de la línea de tiempo:
- Sección 0 → no incluir
- Sección 1 → no incluir
- Sección 2 → no incluir
- Sección 3 → incluir
- Sección 4 → incluir
- Sección 5 → incluir
- Sección 6 → incluir
- Sección 7 → incluir
- Sección 8 → incluir
- Sección 9 → no incluir
- Sección 10 → no incluir
- Sección 11 → incluir
- Sección 12 → no incluir
- Sección 13 → no incluir
- Sección 14 → incluir
- Sección 15 → no incluir
- Sección 16 → no incluir
- Sección 17 → incluir
- Sección 18 → incluir
- Sección 19 → incluir
- Sección 20 → no incluir
- Sección 21 → no incluir
- Sección 22 → no incluir
Una vez que haya decidido las secciones que desea incluir en su navegación de puntos, deberá determinar la etiqueta para cada una de ellas utilizando el siguiente código y modificando el contenido según sus necesidades:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
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
sesenta y cinco
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";} |
Las secciones que no desea incluir en su Navegación de puntos deben ocultarse utilizando las siguientes líneas de código 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;} |
Paso 5: Agregar código CSS personalizado a la página
Una vez que comprenda el código y lo modifique según sus necesidades, puede agregarlo a la página en la que está trabajando haciendo clic en el siguiente botón:
Vaya a la pestaña Avanzado y coloque su código CSS en el cuadro CSS personalizado.
¡Y eso es!
¡Última oportunidad de obtener un 20 % de descuento!
Esperamos que hayas disfrutado este tutorial. ¡Asegúrese de consultar nuestro descuento limitado del 20 % por nuestro décimo aniversario! ¡Este descuento cuenta para nuevos miembros, usuarios existentes que desean actualizar o renovar y usuarios vencidos! Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!
¿Te perdiste la venta? No se preocupe, pruebe uno de estos complementos de línea de tiempo para sitios de WordPress.