homefinance blog
El uso de iconos de propaganda como acentos de diseño puede dar a su página un diseño único en el que nunca ha pensado. Además de colocar el icono de un módulo de propaganda para superponer un módulo de texto, puede usar el fondo y el borde del módulo de texto para estilizar el icono. Esto crea un hermoso acento de diseño que enmarca el contenido, al tiempo que ofrece a sus íconos un diseño completamente único. En este tutorial, le mostraré cómo estilizar los íconos de la propaganda como acentos de diseño para su contenido en el DIV. ¡Vamos a bucear! Dibuja con el ojo aquí hay algunos ejemplos de diseño que construiremos en este tutorial.
Descargue los ejemplos de modelos para este tutorial para poner su mano en el aspecto gratuito del énfasis del módulo de la propaganda, primero deberá descargarlo con el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar el archivo
Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
Nociones introductorias sobre el diseño del edificio desde cero para comenzar, cree una nueva página y le dé un título a la página. Luego implementa el Builder Divi en el frente. Agregue una sección regular con una fila con una columna. Antes de agregar su primer módulo, actualice la configuración de la fila con lo siguiente:
Use el ancho personalizado de la canaleta: Sí, ancho personalizado de la canaleta: 1 Esto eliminará los bordes personalizados entre módulos. Creando el módulo de texto y luego agregue un módulo de texto dentro de la fila.
Actualice el módulo de texto con el siguiente texto de finalización:
Nuestros servicios
Tu contenido va aquí. Editar o eliminar este texto en línea o en la configuración del contenido del módulo.
El estilo del módulo de texto ahora actualiza el resto de la configuración del módulo de texto de la siguiente manera: Wallpaper: #fffff
2 Sección de fuentes: Nunito
Título 2 Fuente de peso: Bold
2 encabezado de estilo de fuente: TT
El color de 2 texto: # F24A5B
Título 2 Dimensión de texto: 42 PX (escritorio), 32 PX (tableta), 22 PX (teléfono)
Título 2 Carta SP [ACING: 16PX
Título 2 Altura de la línea: 1.3 Empleo: 500 PX (escritorio), 490 PX (tableta)
Alineación del módulo: centro
Trenza personalizada (escritorio): 40 px arriba, 40 px abajo, 50 px izquierda, 50 px a la derecha
Trenza personalizada (teléfono): 20 px izquierda, 20 px a la derecha
Ancho fronterizo: 10 PX
Color del borde: #ffffff
Debido a que se superpondremos al módulo de texto con los iconos de la propaganda, debemos asegurarnos de que el módulo de texto esté por encima de los iconos en el orden del espacio Z. Para hacer esto, primero debemos agregar el siguiente fragmento CSS al cuadro CSS del elemento principal del módulo de texto: Posición: relativo;
Luego establezca el valor del índice z en 1.
Ahora, este módulo de texto se mantendrá por encima de cualquier otro módulo superpuesto, lo cual es importante para el diseño. Creando el ícono de la propaganda ahora estamos listos para crear el primer icono de la propaganda. Para hacer esto, primero debemos agregar un módulo de propaganda y tirarlo en la parte superior del módulo de texto. Luego elimine el contenido simulado (el texto del título y el texto del cuerpo) y haga clic para usar un icono en lugar de una imagen para la propaganda.
Luego actualice la siguiente configuración de diseño:
Icono de color: # 2ea3f2
Use el tamaño de fuente de iconos: sí
Icono de tamaño de fuente: 100 PX
Margen personalizado: 0px hacia abajo (elimina el margen inferior predeterminado entre los módulos; no es necesario si usa un ancho de la fila de 1)
Luego, debido a que no usamos ningún texto con el módulo (solo el icono), podemos deshacernos del borde predeterminado debajo del icono de la propaganda. Para hacer esto, agregue el siguiente CSS personalizado a la caja CSS de la imagen de la propaganda:
Imagen de blurb CSS: Bottom de margen: 0px
Duplique el icono de la propaganda antes de comenzar la posición de la propaganda, continúe y duplique el módulo de la propaganda y tire del duplicado debajo del módulo de texto. Ahora debe tener un icono de propaganda en la parte superior y debajo del módulo de texto. Posicionamiento de iconos de propaganda Usando traducir a los iconos de propaganda de posición, utilizaremos las opciones de transformación DIV que nos permiten colocar el módulo de propaganda con el icono donde quiera en la página. Posicionar el icono de la propaganda # 1 para colocar el icono de la propaganda superior, abra la configuración del módulo de la propaganda y actualice lo siguiente:
Transformar el eje x traducido (escritorio): -242px
Transformar el eje Y traducido (escritorio): 50 px
Transformar el eje x traducido (teléfono): -170px
Posicionar el icono de la propaganda # 2 antes de colocar este icono de propaganda, para que sea un poco más grande. Para hacer esto, abra la configuración del módulo de propaganda y cambie el tamaño de la fuente de icono a 150 PX. Luego coloque el icono de la propaganda actualizando las siguientes opciones de transformación:
Transformar el eje x traducido (escritorio): 242 px
Gire el eje Y traducido (escritorio): -100px
Transformar el eje x traducido (teléfono): 190 PX
Creando la fila con dos columnas para crear la siguiente columna, copie la fila existente y cambie la apariencia de la fila en dos columnas (1/2 1/2).
Luego, use la característica de la división multiselección para seleccionar los tres módulos en la columna izquierda y luego copiarlos y pegarlos a la segunda columna.
Luego borre el icono de la propaganda en la parte inferior de la columna. Alineando los íconos de la propaganda en la columna 2 para los iconos de la propaganda en la columna 2, debemos mover el icono superior hacia el icono izquierdo e inferior hacia la derecha. Podemos hacer esto simplemente cambiando el valor del eje x transformado. Abra la configuración del módulo de la propaganda para el módulo de propaganda superior en la columna 2 y actualice lo siguiente: Transforme el eje X traducido (escritorio): 242 PX
Transformar el eje x traducido (teléfono): 170 px
Básicamente, todo lo que haces es cambiar estos valores de negativo a positivo para moverlos en la dirección opuesta a lo largo del eje x.
Luego actualice el valor de transformación de transformación para el módulo de propaganda inferior en la columna 2 de la siguiente manera:
Transformar el eje x traducido (escritorio): -242px
Transformar el eje x traducido (teléfono): -190px
Actualice los estilos de texto en segundo lugar, la segunda línea de contenido sirve como un subconjunto de servicios presentados. Por lo tanto, queremos que el tamaño de la fuente del título sea diferente y más pequeño que nuestro encabezado. Para actualizar los dos módulos de texto al mismo tiempo, use multiselect para seleccionar ambos módulos de texto. Luego actualice lo siguiente: cambie el contenido del título H2 para leer “Servicio”.
Título 2 Dimensión de texto: 28 PX (escritorio), 22 PX (tableta), 18 PX (teléfono)
Guarde la configuración. Ahora abra la configuración modal para el módulo de texto en la columna 2 y actualice lo siguiente:
Orientación del texto: correcto
Ajustar el espacio de apariencia en este momento es probablemente un poco de espacio blanco (o negativo) entre las dos líneas de contenido. Para eliminar parte del espacio, podemos agregar un margen inferior negativo al módulo de propaganda de la fila a continuación de la siguiente manera: Margen personalizado: -100px a continuación
Resultado final ahora para echar un vistazo al resultado final.
Probar otros íconos para probar diferentes iconos para su apariencia, puede usar la función de búsqueda y reemplazo. Abra la configuración de la propaganda para una de las blurbs que contiene el icono. Luego, haga clic en el icono en la configuración modal y seleccione Buscar y reemplazar.
En la ventana emergente que puede encontrar y reemplazar, actualice lo siguiente:
Dentro: esta sección
Reemplace con: [Seleccione el nuevo icono]
Después de eso, haga clic en el botón de reemplazo.
Esto cambiará todas las definiciones en su sección con una nueva. Aquí hay algunos ejemplos de apariencia usando diferentes iconos.
Los pensamientos finales que agregan iconos de propaganda como acentos de diseño a su contenido es un ejemplo de cómo se pueden combinar dos módulos para crear un diseño completamente único. En este caso, el fondo y el marco del módulo de texto sirven como una superposición parcial para los iconos circundantes. El resultado es único y abre la puerta para explorar varias variantes de diseño. Siéntase libre de explorar diferentes íconos y combinaciones de colores para crear algo para sus propias necesidades. Espero tener noticias suyas en los comentarios. ¡Suerte!
