TechBlogSD - Todo para WordPress y desarrollo WEB
Instrucciones de WEB y WordPress, noticias, reseñas de temas y complementos

¿Cómo agregar y personalizar botones en el sitio de Weebly?

0

Los botones en un sitio de Weebly son uno de los elementos importantes que se utilizan con el propósito de llamar a la acción. Por ejemplo, puede agregar un botón que solicite a los usuarios que descarguen un documento PDF. Dado que Weebly tiene muy pocos temas, es un problema común que le guste todo el tema, pero el botón de ese tema puede tener un estilo intruso. En tal escenario, es fácil reemplazar el estilo del elemento de botón de Weebly predeterminado con su propio CSS personalizado o con el estilo de botón de otro tema. Este artículo explica las posibilidades de personalizar el elemento de botón de Weebly predeterminado.

Agregar elemento de botón predeterminado

Weebly de forma predeterminada ofrece un elemento de botón de arrastrar y soltar que se puede personalizar en cuatro tipos diferentes. El elemento de botón se agrupa en la categoría de elementos "estructura". De forma predeterminada, los usuarios pueden agregar dos estilos de botones pequeños y dos estilos de botones grandes.

¿Cómo agregar y personalizar botones en el sitio de Weebly?

Estilos de botones predeterminados de Weebly

En todos los temas que no responden, Weebly usa imágenes para crear un botón y en todos los temas que responden, el estilo de los botones se controla en el archivo "main.less". Una vez arrastrado y soltado, haga clic en el botón en su área de contenido para ver las siguientes opciones de personalización:

  • Texto del botón: texto que se mostrará en el botón.
  • Estilo de botón: elija uno de los cuatro estilos disponibles.
  • Posición: alineación central, derecha o izquierda del botón.
  • Enlace: agregue enlaces al texto del botón.
  • Espaciado: ajuste los márgenes superior e inferior.

¿Cómo agregar y personalizar botones en el sitio de Weebly?

Opciones de elementos del botón Weebly

Además del elemento de botón de arrastrar y soltar, Weebly también ofrece un botón de llamada a la acción en las plantillas de la página de destino.

Reemplace o modifique los estilos de los botones en "main.less" para personalizar los botones en su sitio Weebly utilizando temas receptivos.

Responsive Vs No Responsive

Antes de intentar cambiar el estilo de sus botones, verifique qué tipo de tema está utilizando actualmente. Hay tres tipos de botones que se utilizan en los temas de Weebly:

  • Botones CSS en temas receptivos: tema de ejemplo Slick, Cento.
  • Botones CSS en temas que no responden: tema de ejemplo Cleancut.
  • Botones de imagen en temas que no responden: ejemplo de tema Ciudad.

Temas que no responden con botones de imagen: aquí el elemento de botón usa imagen y el CSS simplemente llama a esta imagen como fondo, el tema de ejemplo es Ciudad.

Temas que no responden con botones CSS: los temas como Cleancut utilizan botones CSS completos sin imágenes, aunque es un tema que no responde.

Temas receptivos: todos los temas más recientes como Slick, Cento, Paper, etc.son completamente receptivos y el elemento del botón se genera a partir del código CSS.

Discutiremos cómo cambiar el estilo del botón tanto en temas receptivos como no receptivos.

Caso 1: Adición de imágenes de botones personalizados en temas que no responden

La característica importante del elemento de botón de Weebly es su capacidad para ajustarse a la longitud del texto. El botón se ajustará automáticamente de acuerdo con la longitud del texto ingresado. Esto se logra dividiendo un botón en dos imágenes. Antes de continuar, siga los pasos a continuación para comprender dónde están almacenadas las imágenes de los botones en un sitio de Weebly.

  • Inicie sesión en su cuenta de Weebly y elija el sitio para editarlo.
  • Vaya a la pestaña "Tema" y haga clic en el botón "Editar HTML / CSS".
  • En la sección "Activos", verá diferentes imágenes de botones como se muestra a continuación:

¿Cómo agregar y personalizar botones en el sitio de Weebly?

Imágenes de botones en temas no adaptables de Weebly

Notamos que todos los temas que no responden que usan imágenes para botones tienen 9 conjuntos de imágenes (18 en total) para botones más pequeños y más grandes, pero usan 2 imágenes específicas en CSS como fondo de un botón. Compruebe "main_style.css" y averigüe cuáles son las imágenes que se utilizan para los botones. El siguiente ejemplo sobre el tema Ciudad muestra que "button-highlight.png" y "button-highlight-large.png" se utilizan para botones más pequeños y más grandes, respectivamente.

¿Cómo agregar y personalizar botones en el sitio de Weebly?

Imágenes utilizadas para botones en temas que no responden

Si no le gustan estos botones, simplemente cambie la imagen a una de las imágenes disponibles de 9 conjuntos. Puede cambiar "button-highlight.png" a "button-purple.png". En caso de que no le guste ninguna de las imágenes de los botones existentes, cree sus propias imágenes personalizadas con tamaños y estilos de división similares y cárguelas en la sección "Activos". Asegúrese de utilizar el nombre de la imagen en "main_style.css" para la propiedad "background".

Caso 2: Personalización de botones CSS en temas que no responden

Si no encuentra ninguna imagen de botón en la sección "Activos" de su tema que no responde, consulte "main_style.css" para ver la sección "Botones". A continuación se muestra el código CSS del tema Cleancut que se puede personalizar con el fondo, los colores, el efecto de desplazamiento, etc., según lo necesite.

/* Buttons --------------------------------------------------------------------------------*/ /* Small structure & regular style */ .wsite-button { background: red; background: -moz-linear-gradient(top,#444 0,#333 100%); background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#444),color-stop(100%,#333)); background: -webkit-linear-gradient(top,#444 0,#333 100%); background: -o-linear-gradient(top,#444 0,#333 100%); background: -ms-linear-gradient(top,#444 0,#333 100%); background: linear-gradient(top,#444 0,#333 100%); border: 1px solid #000; box-shadow:inset 0 0 15px rgba(0,0,0,0.25); -moz-border-radius: 3px; border-radius: 3px; color: white !important; font-size: 13px; font-weight: 700; padding: 3px 25px; text-align: center; text-decoration: none !important; text-shadow: 0px -1px 1px rgba(0,0,0,0.7); } .wsite-button:hover { background-position:0 0; box-shadow:0 1px 4px rgba(0,0,0,0.3); } .wsite-button:active { background-position:0 0; } .wsite-button-inner { color: #fff !important; padding:0; background: none; } .wsite-button:hover .wsite-button-inner { background:none; } .wsite-button:active { padding:4px 25px 2px; } /* Large structure & regular style */ .wsite-button-large .wsite-button-inner { font-size:14px; padding:0; } .wsite-button-large .wsite-button-inner { background: none; } /* Highlighted styles */ .wsite-button-highlight, .wsite-button-large.wsite-button-highlight { background: #0370EA; background: -moz-linear-gradient(top,#0370EA 0,#0370EA 100%); background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#0370EA),color-stop(100%,#0370EA)); background: -webkit-linear-gradient(top,#0370EA 0,#0370EA 100%); background: -o-linear-gradient(top,#0370EA 0,#0370EA 100%); background: -ms-linear-gradient(top,#0370EA 0,#0370EA 100%); background: linear-gradient(top,#0370EA 0,#0370EA 100%); border: 1px solid #0052ad; box-shadow:inset 0 0 18px rgba(0,0,0,0.02); } .wsite-button-highlight:hover, .wsite-button-large.wsite-button-highlight:hover { box-shadow:0 1px 4px rgba(0,0,0,0.3); } .wsite-button-highlight .wsite-button-inner { background-image: none; } .wsite-button-large.wsite-button-highlight .wsite-button-inner { background-image: none; }

Ahora regrese al editor y arrastre el elemento del botón al área de contenido. Puede ver que el botón estará con el nuevo estilo que definió en "main.less".

Caso 3: personalización de botones de Weebly en temas adaptables

Todos los temas más recientes de Weebly responden y usan solo códigos CSS para generar botones. Como se explicó anteriormente, los estilos de botones CSS relevantes se definen en el archivo "main.less" en la sección "/ Botones /". Si su tema utiliza la función @import en CSS, consulte el archivo de botón correspondiente para CSS. Aquí debe reemplazar estos códigos con su propio código de botón CSS personalizado para cambiar el estilo de botón predeterminado.

A continuación se muestran las definiciones de estilo CSS para el botón Weebly:

  • .wsite-button – Botón pequeño
  • .wsite-button: hover – Efecto flotante para botón pequeño
  • .wsite-button: activo – Efecto al hacer clic en el botón pequeño
  • .wsite-button-inner: define el estilo de los elementos internos, como el tamaño y el color de la fuente

De manera similar, los botones más grandes usarán la clase CSS .wiste-button-large.

Nota: Si tiene una página de blog agregada en su sitio, algunos temas pueden agregar un botón .blog de clase CSS adicional para los botones en las publicaciones del blog.

Puede modificar estos códigos CSS por su cuenta o utilizar cualquier herramienta generadora de botones CSS en línea para obtener el CSS necesario. Por ejemplo, los estilos de los botones pequeños se pueden cambiar con degradado reemplazando los códigos predeterminados de los botones pequeños con el siguiente código CSS:

.wsite-button { border-top: 1px solid #96d1f8; background: #6594d6; background: -webkit-gradient(linear, left top, left bottom, from(#7a3e9c), to(#6594d6)); background: -webkit-linear-gradient(top, #7a3e9c, #6594d6); background: -moz-linear-gradient(top, #7a3e9c, #6594d6); background: -ms-linear-gradient(top, #7a3e9c, #6594d6); background: -o-linear-gradient(top, #7a3e9c, #6594d6); padding: 14.5px 29px; -webkit-border-radius: 39px; -moz-border-radius: 39px; border-radius: 39px; -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0; -moz-box-shadow: rgba(0,0,0,1) 0 1px 0; box-shadow: rgba(0,0,0,1) 0 1px 0; text-shadow: rgba(0,0,0,.4) 0 1px 0; color: white; font-size: 24px; font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif; text-decoration: none; vertical-align: middle; } .wsite-button:hover { border-top-color: #28597a; background: #28597a; color: #ccc; } .wsite-button:active { border-top-color: #1b435e; background: #1b435e; }

El cambio de elemento de botón con códigos CSS antiguos y nuevos se muestra en un tema de muestra como se muestra a continuación:

¿Cómo agregar y personalizar botones en el sitio de Weebly?

Nuevo botón CSS en Weebly

Nota: puede cambiar los estilos de los botones grandes de la misma manera. Asegúrese de cambiar los códigos CSS para los estilos de botones pequeños y grandes para evitar que los botones se rompan en el sitio publicado.

Para simplificar la tarea para los usuarios de Weebly, tenemos tres estilos de botones que usan clases de CSS de Weebly. Puede reemplazar el CSS en la sección "/ Botones /" de su "main.less" con uno de los siguientes códigos para cambiar el estilo de los botones.

Style1:

/* Buttons */ .wsite-button, .wsite-editor .wsite-button { height: auto; padding: 0; background: none; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .wsite-button .wsite-button-inner, .wsite-editor .wsite-button .wsite-button-inner { height: auto; padding: 8px 12px; background: #333333; color: #ffffff; border: 2px solid #333333; border-radius: 1px; text-transform: uppercase; letter-spacing: 0.05em; white-space: normal; font-family: 'Quattrocento Sans', sans-serif; font-size: 14px; font-weight: 700; line-height: normal; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .wsite-button-large, .wsite-editor .wsite-button-large { background: none; } .wsite-button-large .wsite-button-inner, .wsite-editor .wsite-button-large .wsite-button-inner { padding: 12px 16px; font-family: 'Quattrocento Sans', sans-serif; font-size: 16px; font-weight: 700; line-height: normal; } .wsite-button:hover .wsite-button-inner { background: #ffffff; color: #333333; border: 2px solid #333333; } .wsite-button-highlight, .wsite-button-large.wsite-button-highlight, .wsite-editor .wsite-button-highlight, .wsite-editor .wsite-button-large.wsite-button-highlight { background: none; } .wsite-button-highlight .wsite-button-inner, .wsite-button-large.wsite-button-highlight .wsite-button-inner, .wsite-editor .wsite-button-highlight .wsite-button-inner, .wsite-editor .wsite-button-large.wsite-button-highlight .wsite-button-inner { background: #b9b9b9; color: #ffffff; border: 2px solid #b9b9b9; } .wsite-button-highlight:hover .wsite-button-inner, .wsite-button-large.wsite-button-highlight:hover .wsite-button-inner { background: #a1a1a1; border: 2px solid #a1a1a1; }

Style2:

/* Buttons */ .wsite-button, .wsite-editor .wsite-button { height: auto; padding: 0; background: none; } .wsite-button .wsite-button-inner, .wsite-editor .wsite-button .wsite-button-inner { height: auto; padding: 10px 16px; background: #35A89A; color: white; border-radius: 0; text-transform: uppercase; letter-spacing: .07em; font-family: 'Roboto', sans-serif; font-size: 14px; font-weight: 500; line-height: normal; -webkit-transition: all 350ms ease-in; -moz-transition: all 350ms ease-in; -ms-transition: all 350ms ease-in; -o-transition: all 350ms ease-in; transition: all 350ms ease-in; } .wsite-button-large { background: none; } .wsite-button-large .wsite-button-inner { padding: 12px 20px; font-family: 'Roboto', sans-serif; font-size: 16px; font-weight: 500; line-height: normal; } .wsite-button:hover .wsite-button-inner { background: #177267; } .wsite-button-highlight, .wsite-button-large.wsite-button-highlight, .wsite-editor .wsite-button-highlight, .wsite-editor .wsite-button-large.wsite-button-highlight { background: none; } .wsite-button-highlight .wsite-button-inner, .wsite-button-large.wsite-button-highlight .wsite-button-inner, .wsite-editor .wsite-button-highlight .wsite-button-inner, .wsite-editor .wsite-button-large.wsite-button-highlight .wsite-button-inner { background: white; color: #35A89A; border: 2px solid #35A89A; } .wsite-button-highlight:hover .wsite-button-inner, .wsite-button-large.wsite-button-highlight:hover .wsite-button-inner { background: #35A89A; color: white; }

Style3:

/* Buttons */ .wsite-button, .wsite-editor .wsite-button { display: inline-block; height: auto; padding: 0; background: none; } .wsite-button:focus, .wsite-editor .wsite-button:focus { outline: none; } .wsite-button .wsite-button-inner, .wsite-editor .wsite-button .wsite-button-inner { display: inline-block; height: auto; padding: 8px 16px; background: #a1a1a1; color: white !important; border: 2px solid #a1a1a1; border-radius: 2px; text-transform: uppercase; letter-spacing: 0.05em; white-space: normal; font-family: 'Open Sans', sans-serif; font-size: 13px; font-weight: 400; line-height: normal; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .wsite-button-large, .wsite-editor .wsite-button-large { display: inline-block; height: auto; padding: 0; background: none; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .wsite-button-large .wsite-button-inner, .wsite-editor .wsite-button-large .wsite-button-inner { display: inline-block; height: auto; padding: 12px 24px; background: #a1a1a1; color: white !important; border: 2px solid #a1a1a1; border-radius: 2px; text-transform: uppercase; letter-spacing: 0.05em; white-space: normal; font-family: 'Open Sans', sans-serif; font-size: 15px; font-weight: 400; line-height: normal; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .wsite-button:hover .wsite-button-inner, .wsite-button-large:hover .wsite-button-inner { background: transparent; color: #a1a1a1 !important; } .wsite-button-highlight, .wsite-button-large.wsite-button-highlight, .wsite-editor .wsite-button-highlight, .wsite-editor .wsite-button-large.wsite-button-highlight { background: none; } .wsite-button-highlight .wsite-button-inner, .wsite-button-large.wsite-button-highlight .wsite-button-inner, .wsite-editor .wsite-button-highlight .wsite-button-inner, .wsite-editor .wsite-button-large.wsite-button-highlight .wsite-button-inner { background: transparent; color: #808080 !important; border: 2px solid #808080; } .wsite-button-highlight:hover .wsite-button-inner, .wsite-button-large.wsite-button-highlight:hover .wsite-button-inner { background: #808080; color: white !important; }

Adición de botones CSS personalizados mediante el elemento de código incrustado

Personalizar el elemento existente es una tarea difícil ya que Weebly cambia con frecuencia el código y el alcance del botón se limitará al estilo existente sin mucho atractivo. La forma más fácil y sencilla es agregar sus propios botones CSS personalizados en lugar de modificar los códigos existentes. Esto proporciona infinitas posibilidades de agregar diferentes tipos de botones CSS 2D y 3D a su sitio Weebly. Pero el problema es que debe agregar cada vez que use el elemento "Código incrustado" con un estilo predefinido en lugar de usar el elemento "Botón".

Por ejemplo, puede agregar botones de degradado con diferentes estilos, como se muestra a continuación, agregando el HTML descargado dentro del elemento " Código incrustado " y el CSS en la hoja de estilo principal ("main_style.css" para temas que no responden y "main.less" para temas receptivos temas).

Descargue el código CSS / HTML para este widget de botones de degradado de Weebly.

Fuente de grabación: webnots.com
Deja una respuesta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More