¿Te gustaría añadir estilos CSS personalizados a tu sitio? Este tutorial te dará múltiples opciones sobre cómo añadir estos fragmentos a tu sitio con instrucciones paso a paso para cada forma opcional que elijas para añadir tu CSS.
Con esta útil guía, podrás elegir fácilmente la forma en que deseas añadir los fragmentos a tu sitio. Una vez que hayas seleccionado el método de implementación, puedes empezar a explorar la documentación para desarrolladores y elegir los fragmentos CSS que te gustaría añadir a tu sitio.
Para consultar el conjunto de todos los fragmentos disponibles, explore nuestra documentación para desarrolladores.
Por favor, vea nuestro video tutorial para una visión más práctica de cómo lograr la adición de fragmentos CSS personalizados a su sitio.
Opciones de aplicación
CSS es una poderosa herramienta para dar estilo a tu sitio, así como a tus formularios. Hay 3 enfoques principales para añadir CSS personalizado a su sitio.
Uso del plugin WPCode (recomendado)
Usar el plugin WPCode es super rápido y fácil para añadir fragmentos CSS a tu sitio.
Una de las muchas razones por las que recomendamos encarecidamente el uso de este complemento para añadir fragmentos personalizados a su sitio es que incorpora una comprobación antes de guardar el fragmento. Si se omite un punto y coma o se añade un corchete de más, el fragmento no se guardará. Esto evita cualquier problema que pueda ocurrir en su sitio debido a un fragmento CSS copiado y pegado incorrectamente. Y sí, incluso con la versión gratuita, recibirás esta auditoría adicional antes de que tu fragmento se active.
Para obtener más información sobre este complemento, consulte el sitio web, que incluye documentación específica.
Una vez instalado el plugin, ve al menú Code Snippets (Fragmentos de código ) en el menú de la izquierda de tu panel de WordPress y selecciona + Add Snippet (Añadir fragmento). A continuación, haz clic en Añadir código personalizado (nuevo fragmento) y, después, en el botón azul Usar fragmento para crear un nuevo fragmento CSS.
Cuando aparezca la pantalla de su nuevo fragmento, asígnele un nombre que tenga sentido para usted, de modo que usted y los administradores de su sitio entiendan su propósito. En el menú desplegable Tipo de código, seleccione CSS, ya que sólo añadiremos CSS a este fragmento.
En la sección Vista previa del código, añada su CSS. A continuación se muestra un ejemplo a utilizar para el propósito de esta documentación.
/* write your CSS code here */
ul#wpforms-999-field_27 li label,
ul#wpforms-999-field_26 li label {
padding: 10px;
transition: all ease 0.3s;
background: linear-gradient(to right, #e27730 50%, #cd631d 50%);
background-size: 200% 100%;
background-position: left bottom;
color: white;
}
ul#wpforms-999-field_27 li.wpforms-selected label,
ul#wpforms-999-field_27 li label:hover,
ul#wpforms-999-field_26 li.wpforms-selected label,
ul#wpforms-999-field_26 li label:hover {
cursor: pointer;
border-radius: 2px;
background-position: right top;
}
ul#wpforms-999-field_27 li input,
ul#wpforms-999-field_26 li input {
display: none;
}
ul#wpforms-999-field_27 li,
ul#wpforms-999-field_26 li {
float: left;
width: auto;
display: inline-block;
padding: 10px 10px 10px 0!important;
}
A continuación, verá la sección Inserción. Ya que estamos añadiendo CSS, seleccionaremos Auto-Insertar para el Método de Inserción y Encabezado de Todo el Sitio para la Ubicación.
Una vez que haya añadido el fragmento, haga clic en Guardar fragmento. Esto guardará el fragmento, pero no lo activará automáticamente. Una vez guardado, observará que el estado del fragmento es Inactivo por defecto. Simplemente cambie el interruptor de Inactivo a Activo y haga clic en Actualizar para establecer el fragmento como Activo.
Uso de CSS Hero
Si prefiere no tocar ningún código, WPForms tiene un tutorial completo sobre cómo usar CSS Hero. Para saber más al respecto, sigue este tutorial.
Creación de un tema hijo
Los temas hijo se recomiendan para un desarrollo más avanzado. Puedes descubrir cómo crear un tema hijo siguiendo este tutorial.
En cada tema hijo es el estilo requerido .css, en este archivo es donde usted agregaría su CSS personalizado.
Uso del personalizador de WordPress
Desde la versión 4.5 de WordPress, WordPress nos ha proporcionado una herramienta integrada para añadir cualquier estilo CSS personalizado a tu tema o a cualquier plugin que tengas instalado, lo que lo convierte en una opción popular para añadir tu CSS.
Para obtener más información sobre el Personalizador de WordPress, consulte su documentación.
Puede encontrar el personalizador de WordPress navegando a Apariencia " Personalizar " CSS adicional.
Recuerda que después de añadir tu CSS debes hacer clic en el botón Publicar para guardar los cambios. Mientras el tema permanezca activo, se aplicará tu CSS personalizado.
Si desactiva su tema, su CSS personalizado se eliminará, ya que cualquier CSS personalizado añadido aquí se adjunta al propio tema.
Notas
Al añadir cualquier tipo de código personalizado a su sitio, es importante asegurarse de proteger su código. Así que, independientemente del enfoque que elijas, es una buena idea hacer siempre primero una copia de seguridad de tu sitio. De este modo, tendrás acceso a versiones anteriores de los archivos del sitio y de la base de datos en caso necesario.
Enlaces adicionales
Para obtener información adicional sobre CSS personalizado para WPForms, consulte estos enlaces de referencia:
- Documentación sobre estilos para WPForms
- Una lista completa de documentos para estilizar WPForms usando CSS
PREGUNTAS FRECUENTES
P: ¿Cómo me ayuda esto a añadir CSS personalizado para WPForms?
R: Este tutorial no es específicamente para CSS personalizado de WPForms, sino para cualquier CSS personalizado que desee agregar a su sitio.
Simplemente busque la opción de arriba que le resulte más fácil para añadir cualquier fragmento de código, incluidos los fragmentos de código de WPForms mencionados en la sección Tutoriales y fragmentos.