1
00:00:00,000 --> 00:00:03,890
Bienvenido a la segunda parte de rediseñar
el encabezado responsive. 

2
00:00:03,885 --> 00:00:06,785
Y olvidé mencionar
en un video anterior

3
00:00:06,780 --> 00:00:10,280
cuando cambié los signos
de los elementos del menú aquí,

4
00:00:10,275 --> 00:00:11,945
por alguna razón parece haber

5
00:00:11,940 --> 00:00:13,410
afectado la versión de escritorio. 

6
00:00:13,410 --> 00:00:14,610
Se puede ver en este momento que

7
00:00:14,610 --> 00:00:17,610
los textos y
ya no en mayúsculas,

8
00:00:17,610 --> 00:00:19,110
si algo como esto sucede,

9
00:00:19,110 --> 00:00:23,720
sólo tiene que volver a
editar el encabezado de la página de inicio. 

10
00:00:23,715 --> 00:00:26,075
Lo que quieres hacer
es simplemente ir

11
00:00:26,070 --> 00:00:28,020
al elemento menu. 

12
00:00:28,020 --> 00:00:30,650
Por lo que voy a hacer click en
muchos elementos aquí mismo. 

13
00:00:30,645 --> 00:00:34,225
Vaya a Estilo, vaya a la
tipografía aquí mismo,

14
00:00:34,225 --> 00:00:36,235
y simplemente haga clic en ella. 

15
00:00:36,230 --> 00:00:37,520
Eso es todo lo que puedes
ver aquí mismo. 

16
00:00:37,520 --> 00:00:38,810
Dice Transform a mayúsculas. 

17
00:00:38,810 --> 00:00:42,020
Así que
básicamente estamos reafirmando que,

18
00:00:42,020 --> 00:00:45,260
Hey, sí queremos que el
Vamos a ser mayúsculas. 

19
00:00:45,260 --> 00:00:47,480
Así que voy a seguir adelante las actualizaciones

20
00:00:47,480 --> 00:00:51,170
nuevo y vamos a volver
atrás, ver la página. 

21
00:00:51,170 --> 00:00:54,620
Vamos a la página de inicio. 

22
00:00:54,620 --> 00:00:56,420
Ok. Y ahí vas. 

23
00:00:56,420 --> 00:00:59,870
Entonces honestamente, no estoy muy
seguro por qué pasa eso,

24
00:00:59,870 --> 00:01:02,090
pero por si acaso te sucede
,

25
00:01:02,090 --> 00:01:04,900
simplemente haz lo que
acabo de hacer. Ok. 

26
00:01:04,895 --> 00:01:07,795
Ahora, anteriormente
pudimos conseguir que

27
00:01:07,790 --> 00:01:12,380
la vista de la tableta se
vea así,

28
00:01:12,380 --> 00:01:14,180
lo cual no está mal en absoluto. 

29
00:01:14,180 --> 00:01:16,090
Pero ahora es el momento
de que echemos un
vistazo

30
00:01:16,085 --> 00:01:18,145
a la vista móvil. 

31
00:01:18,140 --> 00:01:20,120
Y se puede ver
ahora mismo se ve realmente,

32
00:01:20,120 --> 00:01:22,420
realmente malo es un montón
de espacios

33
00:01:22,415 --> 00:01:26,485
y el logo y el menú,

34
00:01:26,480 --> 00:01:28,910
el menú de hamburguesas en línea,

35
00:01:28,910 --> 00:01:31,310
pero sí necesitamos
arreglar el espacio en blanco. 

36
00:01:31,309 --> 00:01:33,589
Ahora en realidad esta es
la segunda vez que estoy

37
00:01:33,590 --> 00:01:34,850
grabando este video en particular

38
00:01:34,850 --> 00:01:36,650
porque en el anterior,

39
00:01:36,650 --> 00:01:38,470
realidad
pude arreglar

40
00:01:38,465 --> 00:01:41,545
el encabezado móvil para tener exactamente
el mismo tipo de

41
00:01:41,540 --> 00:01:43,400
estilo allí 

42
00:01:43,400 --> 00:01:46,280
la pancarta mezclándose
en el fondo. 

43
00:01:46,280 --> 00:01:51,770
No obstante, he decidido ir
con una ruta diferente y

44
00:01:51,770 --> 00:01:56,330
en su lugar utilizar el mismo tipo

45
00:01:56,330 --> 00:01:59,630
de encabezado que tenemos para
el resto de las páginas,

46
00:01:59,630 --> 00:02:02,580
como la de aquí donde
tienes el fondo negro,

47
00:02:02,584 --> 00:02:05,724
decidí usar estas encabezado para

48
00:02:05,720 --> 00:02:09,500
la página de inicio
salir en vista móvil. 

49
00:02:09,499 --> 00:02:11,779
El motivo por el que es porque en realidad
quería

50
00:02:11,780 --> 00:02:13,430
aprovechar esta oportunidad para
mostrarte

51
00:02:13,430 --> 00:02:15,680
un truco muy cool que
puedes

52
00:02:15,680 --> 00:02:18,410
usar siempre que estés trabajando
con diseño responsive. 

53
00:02:18,410 --> 00:02:21,100
Volvamos a la página de inicio. 

54
00:02:21,095 --> 00:02:23,395
Y quiero
mostrarte algo, ¿verdad? 

55
00:02:23,390 --> 00:02:25,130
Voy a ir a Editar con

56
00:02:25,130 --> 00:02:28,010
Elementor editando el encabezado de
la página de inicio. 

57
00:02:28,010 --> 00:02:31,660
Aquí está la cosa. De acuerdo,
voy a seguir adelante

58
00:02:31,655 --> 00:02:36,175
y duplicar esta sección de
encabezado. 

59
00:02:36,170 --> 00:02:39,520
Voy a hacer clic derecho
aquí. Duplicados. 

60
00:02:39,515 --> 00:02:42,125
Básicamente ahora
tenemos dos encabezados. 

61
00:02:42,125 --> 00:02:45,355
La diferencia es que
voy a entrar aquí,

62
00:02:45,350 --> 00:02:47,680
ir a esta sección Editar. 

63
00:02:47,675 --> 00:02:49,725
Voy a ir al estilo,

64
00:02:49,729 --> 00:02:53,959
tipo de
fondo,
darle un color de negro. 

65
00:02:53,960 --> 00:02:57,920
Vale, ahora, mira esto. 

66
00:02:57,920 --> 00:02:59,740
Voy a ir a Advanced,

67
00:02:59,735 --> 00:03:02,755
bajar aquí a Responsive,

68
00:03:02,750 --> 00:03:06,970
y luego invitar aquí
tienes opciones de visibilidad. 

69
00:03:06,965 --> 00:03:09,205
Cuándo exactamente
te gustaría mostrar

70
00:03:09,200 --> 00:03:11,440
esta sección
en función de un tamaño de pantalla? 

71
00:03:11,435 --> 00:03:13,205
Voy a esconderlo en el escritorio. 

72
00:03:13,205 --> 00:03:14,465
Sí. 

73
00:03:14,465 --> 00:03:15,965
No queremos
rodarla en el escritorio

74
00:03:15,965 --> 00:03:17,155
todavía porque seguimos usando

75
00:03:17,150 --> 00:03:19,790
encabezado de
la página de inicio en la tableta. 

76
00:03:19,790 --> 00:03:21,910
También queremos
esconderlo hasta eso. 

77
00:03:21,905 --> 00:03:23,825
Pero entonces queremos mostrarlo

78
00:03:23,825 --> 00:03:26,855
cuando llegue a la vista móvil. 

79
00:03:26,855 --> 00:03:29,995
Como tal, ahora voy a ir a

80
00:03:29,990 --> 00:03:32,990
nuestro encabezado original
y hacer lo contrario. 

81
00:03:32,990 --> 00:03:36,370
Ir a avanzado,
Calma hetero sensible,

82
00:03:36,365 --> 00:03:38,605
y luego esconderse en el escritorio. 

83
00:03:38,600 --> 00:03:39,920
Nadie quiere mostrar,

84
00:03:39,920 --> 00:03:41,260
queremos mostrar hasta eso. 

85
00:03:41,255 --> 00:03:44,495
Pero cuando vaya a Hide on Mobile,

86
00:03:44,495 --> 00:03:47,155
déjame seguir adelante y ahora actualizaciones. 

87
00:03:47,150 --> 00:03:48,790
Y echa un vistazo a esto. 

88
00:03:48,785 --> 00:03:51,155
Vamos a seguir adelante ahora,
ver la página. 

89
00:03:51,155 --> 00:03:53,855
Vamos a la página de inicio. 

90
00:03:53,920 --> 00:03:57,560
Vale, para que veas que
aún tenemos el mismo encabezado. 

91
00:03:57,560 --> 00:04:00,950
Pero ahora para la vista de la tableta,

92
00:04:00,950 --> 00:04:02,720
se
puede ver
que todavía tenemos el mismo encabezado,

93
00:04:02,720 --> 00:04:04,550
el mismo encabezado en
el mismo encabezado. 

94
00:04:04,550 --> 00:04:08,890
Ahora, una vez que llega
a la vista móvil,

95
00:04:08,885 --> 00:04:12,175
ahora
tenemos el
fondo negro con

96
00:04:12,170 --> 00:04:14,120
la idea de logotipo del centro y

97
00:04:14,120 --> 00:04:16,480
luego el
menú de hamburguesas ahí abajo. 

98
00:04:16,475 --> 00:04:18,415
Y luego tenemos el banner de la
página de inicio. 

99
00:04:18,410 --> 00:04:19,640
Y ahí vas. 

100
00:04:19,640 --> 00:04:21,620
Por lo que este es un truco que
puedes

101
00:04:21,620 --> 00:04:23,900
usar siempre que estés trabajando
con diseño responsive. 

102
00:04:23,900 --> 00:04:25,340
Puede optar por mostrar

103
00:04:25,340 --> 00:04:27,920
una sección en particular en
específicamente en el escritorio. 

104
00:04:27,920 --> 00:04:30,320
Y puedes optar por
mostrar sección particular

105
00:04:30,320 --> 00:04:34,070
específicamente solo tal vez
en tablet o en móvil. 

106
00:04:34,070 --> 00:04:36,760
Una pregunta que podría tener
aún está bien, ¿

107
00:04:36,755 --> 00:04:39,455
por qué no simplemente
duplicé

108
00:04:39,455 --> 00:04:44,695
este
encabezado en particular y luego simplemente uso

109
00:04:44,690 --> 00:04:48,970
ese encabezado en la página de inicio

110
00:04:48,965 --> 00:04:51,175
y luego simplemente lo escondo

111
00:04:51,170 --> 00:04:53,950
en el escritorio y tableta y
luego se muestra en el móvil. 

112
00:04:53,945 --> 00:04:55,795
Puedes tener dos cabezales

113
00:04:55,790 --> 00:04:59,600
se muestran en
cualquier página con elemental,

114
00:04:59,600 --> 00:05:01,840
al
menos así es como funciona
este plug-in. 

115
00:05:01,835 --> 00:05:03,625
De acuerdo, Así que si estás pensando,

116
00:05:03,620 --> 00:05:05,060
simplemente
voy a
duplicar este encabezado

117
00:05:05,060 --> 00:05:06,710
y mostrar dos encabezados
en la misma página,

118
00:05:06,710 --> 00:05:08,620
esconderlo uno en escritorios o no
quieren un móvil,

119
00:05:08,615 --> 00:05:10,835
no va a funcionar
porque en realidad lo intentó. 

120
00:05:10,835 --> 00:05:14,585
Por eso tuve que ir
al encabezado de la página de inicio. 

121
00:05:14,585 --> 00:05:16,015
Y luego en ese mismo encabezado,

122
00:05:16,010 --> 00:05:18,970
crea una segunda
sección que ahora se

123
00:05:18,965 --> 00:05:22,915
mostrará específicamente
en la vista móvil. 

124
00:05:22,910 --> 00:05:24,280
Pero no hemos terminado. 

125
00:05:24,275 --> 00:05:26,035
En realidad quiero
hacer otra cosa. 

126
00:05:26,030 --> 00:05:29,450
Mira, no siempre tienes que
ir con este tomate. 

127
00:05:29,450 --> 00:05:32,150
Tienes el logotipo y el centro en
la parte superior,

128
00:05:32,150 --> 00:05:34,880
y luego el
menú de hamburguesas o debajo de él. 

129
00:05:34,880 --> 00:05:36,770
Todavía podemos usar
dos columnas aquí. 

130
00:05:36,770 --> 00:05:39,950
Cómo iniciar sesión a la izquierda y
tener el menú en la luz. 

131
00:05:39,950 --> 00:05:41,110
Hagamos eso. 

132
00:05:41,105 --> 00:05:43,075
Voy a volver
editar con Elementor,

133
00:05:43,070 --> 00:05:48,730
el encabezado de la página de inicio y

134
00:05:48,725 --> 00:05:53,135
paletas con para que esta página
se cargue, bien, algo de edición. 

135
00:05:53,134 --> 00:05:55,054
El segundo encabezado en este momento. 

136
00:05:55,055 --> 00:05:57,625
Pero
ahora voy a cambiar al modo de respuesta. 

137
00:05:57,620 --> 00:06:00,010
Vamos a la vista móvil. 

138
00:06:00,005 --> 00:06:04,805
Todo Kn tiene exactamente lo
que tenemos. Aquí mismo. 

139
00:06:04,805 --> 00:06:05,635
Voy a hacer esto. 

140
00:06:05,630 --> 00:06:07,070
Voy a hacer clic en la columna que

141
00:06:07,070 --> 00:06:09,200
sostiene el logotipo. Aquí mismo. 

142
00:06:09,200 --> 00:06:11,380
Voy a decir 50. 

143
00:06:11,375 --> 00:06:13,405
Entonces bajaré aquí a

144
00:06:13,400 --> 00:06:15,520
la columna del logo
sosteniendo el logotipo,

145
00:06:15,515 --> 00:06:17,215
lo
siento, todo en
el menú tampoco. 

146
00:06:17,210 --> 00:06:19,700
Y luego cambiar el uno a 50
también

147
00:06:19,700 --> 00:06:22,820
para que
estén de lado a lado. 

148
00:06:22,820 --> 00:06:24,800
Ahora, hagamos algunos cambios. 

149
00:06:24,800 --> 00:06:27,020
Voy a hacer click
en el menú Editar,

150
00:06:27,020 --> 00:06:29,750
icono, bajar, golpea diseño. 

151
00:06:29,750 --> 00:06:31,880
Tratemos de alinearnos con el blanco. 

152
00:06:31,879 --> 00:06:34,329
Y entonces
vamos a hacerlo grande. 

153
00:06:34,325 --> 00:06:36,205
Pasemos al estilo. 

154
00:06:36,200 --> 00:06:37,720
Aquí abajo tendrás

155
00:06:37,715 --> 00:06:40,615
el gatillo de menú y
cerrar el icono click en el interior. 

156
00:06:40,610 --> 00:06:42,140
Y ahora Icon Size,
voy a hacer

157
00:06:42,140 --> 00:06:45,730
este por encima de 40 pixeles. 

158
00:06:45,725 --> 00:06:47,395
Keda debería ser lo suficientemente grande. 

159
00:06:47,390 --> 00:06:48,620
Y luego para el logotipo,

160
00:06:48,620 --> 00:06:50,530
vamos a editar también el logotipo. 

161
00:06:50,525 --> 00:06:52,465
El tamaño de la imagen se establece en completo,

162
00:06:52,460 --> 00:06:53,750
alineado a la izquierda. 

163
00:06:53,750 --> 00:06:57,080
Vayamos al estilo
max con un 100%. 

164
00:06:57,080 --> 00:06:58,930
De acuerdo, sigamos adelante ahora. 

165
00:06:58,925 --> 00:07:01,805
Actualizaciones. En realidad antes de
que lo hagamos, aguantemos. 

166
00:07:01,805 --> 00:07:03,085
Hagamos también esto. 

167
00:07:03,080 --> 00:07:05,980
Al hacer clic en
el menú de hamburguesas. 

168
00:07:05,975 --> 00:07:07,645
Este va a
ser el trabajo hecho. 

169
00:07:07,640 --> 00:07:10,460
Pero ya se puede ver
que podemos ver el texto. 

170
00:07:10,460 --> 00:07:12,110
El texto es todo blanco,

171
00:07:12,110 --> 00:07:14,270
por lo que necesitamos hacer
algunos cambios aquí. 

172
00:07:14,270 --> 00:07:15,790
Esto es exactamente
lo que voy a hacer. 

173
00:07:15,785 --> 00:07:17,455
Voy a ir a caer

174
00:07:17,450 --> 00:07:20,030
en el
menú desplegable de letreros aquí mismo. 

175
00:07:20,030 --> 00:07:21,880
Y luego color de fondo. 

176
00:07:21,875 --> 00:07:23,615
Vamos a ir con negro,

177
00:07:23,615 --> 00:07:26,485
color de
texto,
vamos a ir con el blanco. 

178
00:07:26,480 --> 00:07:30,080
Y eso debería ser eso. 

179
00:07:30,080 --> 00:07:33,370
No sé por qué no
lo vemos aquí todavía, pero está bien. 

180
00:07:33,365 --> 00:07:35,395
Voy a seguir adelante las actualizaciones. 

181
00:07:35,390 --> 00:07:38,910
Volvamos, veamos la página. 

182
00:07:39,760 --> 00:07:44,350
Vuelve a la página de inicio,
minimice la ventana. 

183
00:07:44,345 --> 00:07:45,685
Muy bien, así que ahora
puedes decir, Ok,

184
00:07:45,685 --> 00:07:47,195
tenemos el logo a la izquierda,

185
00:07:47,195 --> 00:07:48,545
el menú en blanco. 

186
00:07:48,545 --> 00:07:51,565
Ahora si hacemos clic en el menú de
aquí mismo, se abre. 

187
00:07:51,560 --> 00:07:56,350
Bobby aún no puede ver el
texto que le interesa. 

188
00:07:56,345 --> 00:07:59,945
De acuerdo, volvamos a ver
qué pudo haber pasado. 

189
00:07:59,945 --> 00:08:03,155
Y esto va a
estar muy interesado. 

190
00:08:03,155 --> 00:08:05,525
No estoy muy seguro por qué no
vemos los textos. 

191
00:08:05,525 --> 00:08:06,805
Muy bien. No se preocupe. 

192
00:08:06,800 --> 00:08:09,500
Voy a entrar aquí
al modo de respuesta,

193
00:08:09,500 --> 00:08:11,110
cambiar de nuevo a Móvil. 

194
00:08:11,105 --> 00:08:13,195
Haga clic en el menú aquí mismo,

195
00:08:13,190 --> 00:08:14,900
haga clic en el menú desplegable. 

196
00:08:14,900 --> 00:08:17,230
¿ Por qué no vemos el texto? 

197
00:08:17,225 --> 00:08:18,805
Vayamos al estilo. 

198
00:08:18,800 --> 00:08:23,840
Vamos a bajar aquí
a la tipografía y wow,

199
00:08:23,840 --> 00:08:27,530
no
estoy del todo seguro
por qué el tamaño aquí

200
00:08:27,530 --> 00:08:30,800
en vez a uno,
pero no debería ser uno. 

201
00:08:30,800 --> 00:08:34,010
Debería ser un
poco más grande que uno. 

202
00:08:34,010 --> 00:08:36,260
Eso es un probablemente
fallas en píxeles. 

203
00:08:36,260 --> 00:08:38,000
Entonces mis disculpas, voy a

204
00:08:38,000 --> 00:08:42,110
contar tema por qué me un píxel,

205
00:08:42,110 --> 00:08:44,510
a veces siento
elemento está tratando

206
00:08:44,510 --> 00:08:47,120
de
evitar
que haga buenos videos. 

207
00:08:47,120 --> 00:08:48,680
Yo, honestamente no sé por qué. 

208
00:08:48,680 --> 00:08:49,760
Dijo que no lo hará pixel. 

209
00:08:49,760 --> 00:08:51,740
Eso es sólo, eso es
simplemente extraño. 

210
00:08:51,740 --> 00:08:53,990
De todos modos, se puede ver que
al menos

211
00:08:53,990 --> 00:08:58,390
los elementos del menú ahora
están mostrando,

212
00:08:58,385 --> 00:09:00,835
Wow, eso es muy,
muy interesado en,

213
00:09:00,830 --> 00:09:02,270
te
estoy diciendo que el
diseño web puede ser unas ocupaciones muy

214
00:09:02,270 --> 00:09:05,120
extrañas, muy extrañas. 

215
00:09:05,120 --> 00:09:06,290
A veces te sientes,
sientes que

216
00:09:06,290 --> 00:09:07,790
todos estos
elementos tienen en mente

217
00:09:07,790 --> 00:09:11,300
que no van a volver. 

218
00:09:11,300 --> 00:09:13,420
Muy bien, así que ahora
hago clic aquí. 

219
00:09:13,415 --> 00:09:14,215
Ahí va. 

220
00:09:14,210 --> 00:09:16,000
Ahora ya puedes ver que
tengo los elementos del menú

221
00:09:15,995 --> 00:09:18,225
y por supuesto ya puedes cerrar. 

222
00:09:18,229 --> 00:09:20,509
Entonces eso es básicamente todo

223
00:09:20,510 --> 00:09:22,750
para rediseñar el encabezado
sensible. 

224
00:09:22,745 --> 00:09:24,085
En realidad voy
a seguir adelante y hacer

225
00:09:24,080 --> 00:09:25,660
exactamente lo mismo para

226
00:09:25,655 --> 00:09:28,765
el encabezado global
para la vista móvil,

227
00:09:28,760 --> 00:09:32,420
donde voy a hacer la primera
columna 50% y luego hacer

228
00:09:32,420 --> 00:09:36,320
la segunda columna sosteniendo el ítem de
menú son el 50% también. 

229
00:09:36,320 --> 00:09:38,210
Y también hacer que el icono de la
hamburguesa del menú

230
00:09:38,210 --> 00:09:39,950
sea un
poco más grande. 

231
00:09:39,950 --> 00:09:42,980
Para que puedas seguir adelante
y hacer eso también. 

232
00:09:42,980 --> 00:09:45,230
Pero eso es todo por crear los

233
00:09:45,230 --> 00:09:47,300
responsivos o encabezados
para el sitio web. 

234
00:09:47,300 --> 00:09:48,920
Gracias por
ver evento alemán

235
00:09:48,920 --> 00:09:50,800
próximo video donde
ahora echaremos un vistazo a

236
00:09:50,795 --> 00:09:52,885
rediseñar el pie de página para

237
00:09:52,880 --> 00:09:56,460
ser un poco más
responsables. Entonces tú entonces.