Saltar al contenido

Cómo agregar un marco alrededor de las diapositivas en Slider Revolution

Cómo agregar un marco alrededor de las diapositivas en Slider Revolution

Este artículo es parte de nuestra serie continua de tutoriales de Slider Revolution. Puede encontrar todos los artículos de esta serie en nuestra Guía completa de revolución deslizante.

El uso de marcos de fotos (o bordes) en diapositivas no es infrecuente en el mundo del diseño. Pueden usarse para crear equilibrio visual y unidad, para atraer la atención del usuario hacia partes clave de una imagen, o incluso simplemente como elemento decorativo. Ya sea que esté usando marcos por una razón práctica o simplemente para crear una cierta impresión estilística, debe saber cómo agregarlos a sus diapositivas. Entonces, hoy, te mostraremos cómo agregar manualmente un marco a Slider Revolution.

Hay algunas formas en que se puede hacer esto, así que vamos a sumergirnos y comprobarlas.

Si planeas crear un marco monocromático sólido, quizás la forma más fácil de hacerlo es agregando un borde a la fila del control deslizante.

Cuando agrega un control deslizante a su página, generalmente debe colocarlo dentro de una fila. Siempre que su control deslizante sea el único código corto o contenido en esa fila, puede crear fácilmente un marco para él a través de la configuración de la fila. Esto puede parecer realmente impresionante. Solo echa un vistazo al control deslizante de paspartú sobre nuestro tema de Yvette.

Si está utilizando Yvette o cualquiera de nuestros temas premium de WordPress, puede agregue fácilmente un marco alrededor de su control deslizante a través de la configuración de la fila. Ahí, en la pestaña Opciones de diseño, verá todas las configuraciones de borde disponibles. El cuadro CSS le permite establecer un ancho para cada borde por separado, mientras que las opciones al lado le permiten modificar el color y el estilo de su borde.

Crear un marco mediante la configuración de Fila

Cómo agregar un marco como archivo .png en Slider Revolution

Si desea crear un marco más elaborado, algo que no sea solo un bloque sólido de color, tendrá que agregarlo como una capa separada en Slider Revolution. Sin embargo, esto no es tan simple como parece. De hecho, hay algunas trampas que desea evitar.

Por ejemplo, si descarga un marco que es un solo archivo .png transparente y luego lo agrega como una nueva capa en su control deslizante, corre el riesgo de que sucedan dos cosas. En primer lugar, el control deslizante reconocerá la capa del marco como una imagen completamente nueva que cubre todas las demás capas del control deslizante. Esto significa que no se podrá hacer clic en ningún botón, vínculo u otro elemento que esté debajo de la capa del control deslizante y no funcionará. En segundo lugar, dado que su control deslizante se verá en todo tipo de tamaños de pantalla, corre el riesgo de que su marco no sea visible o parezca sesgado, debido a que tiene diferentes proporciones del dispositivo en el que se está viendo.

Afortunadamente, existe una solución para esto. En lugar de importar su marco como un solo archivo .png con un centro transparente, todo lo que tiene que hacer es cortarlo en 4 archivos separados: uno para el borde superior del marco, uno para el borde inferior, uno para el izquierdo y otro para el derecho. Sólo asegúrese de usar las proporciones para su escenario principal (las dimensiones más grandes en las que se mostrará su control deslizante) al dividir su marco en cuatro partes.

Luego, puede importar los cuatro lados del marco como capas separadas y colocarlos alrededor de su diapositiva. Si tiene más de una diapositiva en su control deslizante, puede configurar estas cuatro capas para que sean capas estáticas, por lo que no tiene que agregarlas para cada diapositiva por separado.

Lo más importante que debe cuidar es establecer la alineación correcta para cada lado del marco.. Asegúrese de que el borde superior de su marco tenga su alineación establecida en “superior”, el borde derecho en “derecha”, etc.

Agregar un marco como archivo .png

De esta manera, se asegurará de que cada lado del marco esté siempre colocado correctamente y pegado al lado correcto de la pantalla.

Establecer la alineación correcta para cada lado del marco

Cómo agregar un marco a su imagen en Photoshop

Hay una forma más de agregar un marco a sus diapositivas en Slider Revolution, y es haciéndolo parte de su imagen real. Para hacer esto, necesitará algunas habilidades básicas de Photoshop, pero en realidad es realmente simple.

Primero, abra la imagen a la que le gustaría agregar un marco.

Agregar un marco a su imagen en Photoshop

Luego abre el archivo .png transparente que contiene tu imagen de marco. Vaya a Seleccionar> Todo (o presione CTRL + A en su teclado) y copie el marco.

Imagen de marco

Ahora vuelve a tu imagen original y pega el marco en su interior. Se agregará como una nueva capa.

Pega el marco

Si necesita ajustar el tamaño del marco para que se ajuste a los bordes de su imagen, simplemente vaya a Edición> Transformar> Escala y podrá arrastrarlo y soltarlo al tamaño requerido. Una vez que hayas terminado, solo guarde su nueva imagen e impórtela en Slider Revolution.

En conclusión

Los marcos pueden ser una gran herramienta visual, donde sea que se utilicen. Pero es especialmente importante saber cómo agregarlos a una parte tan prominente de su sitio como su control deslizante. Con estos tres métodos separados para agregar marcos a Slider Revolution en su caja de herramientas, puede crear hermosos bordes para sus diapositivas y estar seguro de que siempre se mostrarán perfectamente en todos los dispositivos y tamaños de pantalla.