homefinance blog
Muchas compañías incluirán un CTA “inicial” en la página principal allí. Por lo general, es el llamado principal a la acción en la página, porque llevará al usuario a través de un tipo de proceso intencional. Podría ser un botón simple “Inicio ahora” que conecta otra página. O podría ser una sección de una página que incluye instrucciones de “inicio” y / o diferentes opciones que el usuario puede tomar para comenzar el proceso intencional. En este tutorial, le mostraremos cómo crear un CTA de “inicio”, que revelará varias “nociones introductorias” en Hover. Usando DIV, diseñaremos una sección que aparezca como un botón grande. Luego, cuando pase el mouse sobre el botón, las opciones aparecerán como una diapositiva vertical que revelaría la siguiente diapositiva.
El diseño es elegante y la funcionalidad podría ser útil de muchas maneras. Vamos a empezar. Eche un vistazo rápido al “inicio” de CTA que construiremos en este tutorial.
Descargue el CTA Div “Inicio” de forma gratuita para obtener su mano en el diseño de este tutorial, primero debe 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 archivos
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!
Para importar la apariencia en su página, simplemente extraiga el archivo zip y extraiga el archivo JSON al Builder Div.
Pasemos al tutorial, ¿no? ¿Qué tienes que comenzar a comenzar? Deberás tener lo siguiente:
El tema instalado y activo
Una nueva página creada para construir desde cero en el frente (Visual Builder)
Imágenes que se utilizarán para contenido falso
Después de eso, tendrá un lienzo vacío para comenzar a diseñar en el Div. La implementación del proyecto CTA “Comience aquí” en la idea básica detrás de este diseño es mover el contenido de una sección cuando pasa por la sección. Para hacer esto, debemos asegurarnos de que nuestra sección tenga una altura fija, con un desbordamiento oculto. Esto ocultará las opciones de CTA antes del estado de viaje. Luego podemos usar el borde para colocar nuestros módulos y el relleno superior para mover el contenido a flotar.
Comencemos con la sección. Creando la sección Para comenzar las cosas, cree una sección regular con una fila con una columna. Luego, antes de agregar módulos, actualice la configuración de la sección. Abra la configuración de la sección y actualice lo siguiente: Color de fondo: # 2B87DA Ancho: 90% Ancho máximo: 1100 PX Alineación de la sección: MARGEN CENTRO: 6VW arriba, 6 VW a continuación (solo para darle un poco de espacio de respiración) Llenado (escritorio): 300 PX en la parte superior, 0 PX en el revestimiento inferior (tableta): 0 PX desde la parte superior, 15% desde abajo y luego agregue algunas esquinas redondeadas. Esto creará nuestro diseño de botones cada vez que le damos a la sección una altura máxima.
Esquinas redondeadas: 140 px (escritorio), 20 px (flotante), 10 px (tableta) y luego dale una sombra de caja (ver captura de pantalla).
No agregaremos todas las configuraciones necesarias para el diseño final en este momento. Tendremos que regresar y darle una altura fija y un efecto flotante. Pero por ahora, agregemos el contenido. Creación de la primera línea de contenido Abra la configuración para una fila en una columna que creó y actualice lo siguiente: Ancho: 100% revestimiento: 0 PX hacia arriba, 0 px, 5% izquierda, 5% derecho
Dentro de la fila con una columna, agregue un módulo de texto.
Luego agregue la siguiente sección H2 al contenido del cuerpo.
Empiece aquí …
Actualice la configuración de diseño de la siguiente manera: Fuente de la Sección 2: Nunito Título 2 Fuente de peso: Daring 2 Color de texto: #FFFFFF Título 2 Tamaño de texto: 78 PX (escritorio y tableta), 46 PX (teléfono) Ancho máximo: 500 PX Altura: 300 PX (escritorio), margen automático (tableta y teléfono): top -300px (escritorio), top 0px (tableta y teléfono): 7% superior
La altura de 300 PX y el margen superior de -300 PX elevan el módulo de texto hacia arriba para llenar el llenado superior de 300 PX de la sección. Más tarde, cada vez que eliminemos el llenado de la sección superior en el flotador, el módulo de texto se ejecutará por encima de la sección. La creación de la segunda línea de contenido es el lugar donde agregaremos nuestras opciones por CTA. Continúe y agregue una nueva fila con un aspecto de tres columnas.
Luego actualice la configuración de la fila de la siguiente manera: Ancho: 100% máximo ancho: 100% revestimiento: 0 px arriba, 0 px abajo
Luego agregue un módulo de propaganda a la columna 1.
Luego actualice la configuración de la propaganda de la siguiente manera: Elimine el texto predeterminado del cuerpo y deje el título. Luego agregue un icono de imagen (90 x 90). O puede usar un icono de división regular si lo desea.
Agregue un fondo y actualice el diseño de texto del título.
Color de fondo: #fffffffff Font: NUNITO Título de peso Peso Font: Ultra Bold Título de título Estilo: TT Alineación del texto: Color Center Título: # 2B87da Título Texto: 14 PX
Antes de que podamos hacer blurbbs circulares, primero debemos darle a la propaganda una altura y un ancho. Luego podemos usar el espacio para alinear la propaganda y el contenido de la propaganda en el centro. Ancho de contenido: 200 px (escritorio), 250 px (tableta) ancho: 250 px (escritorio), 300 px (tableta) Módulo de mezcla: altura Centro: 250 px (escritorio), 300 px (tableta) margen: 25 px arriba, 0 PX Down Lining: Top 50 PX (escritorio), Top 75 PX (tableta y teléfono)
Para completar el diseño del círculo, dale a la propaganda una esquina redondeada y un tono de caja. Esquinas redondeadas: 50% de sombra de caja: ver captura de pantalla
Que se encarga de nuestro primer discurso. Para crear los siguientes dos. Copie el texto y pegue en la columna 2 y la columna 3. Luego actualice el icono de la imagen para cada uno. Debe verse de la siguiente manera: Toques finales a la sección para completar el diseño de CTA “Inicio”, debemos actualizar la sección un poco más. Actualice la siguiente configuración de la sección: Altura: 300 PX (escritorio), automática (tableta y teléfono) Desbordamiento horizontal: Overflow vertical: Oculto
Esto mantendrá la sección a la misma altura que el contenido de la fila 1 y la fila 2. Ocultar el desbordamiento mantendrá el contenido de 2 filas ocultas hasta que la mostremos en la carrera. Para mostrar el contenido de la fila 2 en la vista, debemos eliminar el llenado superior de la sección de desplazamiento. Revestimiento (flotante): 0px en la parte superior
Ahora mira el resultado hasta ahora. El contenido se ejecutará para mostrar el contenido de la fila 2, que presenta las tres opciones CTA.
Para que la sección se vea más como un botón, podemos usar las opciones de transformación para reducirla y luego llevarla al tamaño habitual del cursor. Actualice las siguientes opciones de transformación para la sección. La escala de transformación (escritorio): escala de transformación del 70%: escala de transformación del 100% (tableta): 100%
Ahora agregue una imagen de fondo (500 x 500) para hacerse cargo del tamaño correcto de la sección. Imagen de fondo: inserte la imagen del tamaño de la imagen de fondo: el tamaño real de la imagen de fondo: centro derecho (escritorio), a la derecha (tableta), arriba a la izquierda (teléfono)
Agregar las URL de los enlaces en borrones y escalarlos en el flotador, ya que nuestro desenfoque realmente sirve como botones de círculo, debemos agregar enlaces de módulos URL a cada uno de los borrones. Por supuesto, deberá agregar el suyo para que se ajuste a sus necesidades. Debido a que las borrachas están ocultas en el generador visual, cambie el modo de visualización de estructura alámbrica y actualice cada una de las configuraciones de la propaganda con el enlace del módulo. Y abra la configuración de uno de los bordees para actualizar la configuración del elemento para los tres. Luego actualice la opción de transformación de la siguiente manera: la escala de transformación (viaje): 105%
¡Eso es todo! El resultado final para verificar el diseño final del “inicio” CTA.
Y aquí está el diseño en la tableta y el teléfono.
Pensamientos finales CTA “Inicio” es ordinario en la web hoy. Esperamos que este tutorial lo ayude a llevarlo al siguiente nivel. Y no tengas miedo de pensar en otras formas de usar esta funcionalidad. Piensa sobre esto. ¡Puede agregar cualquier contenido que desee a la sección! Siéntase libre de compartir nuestros pensamientos en los comentarios a continuación. Espero escuchar de usted. ¡Suerte!
