Cómo crear un diseño personalizado de WordPress (paso a paso)

diseños personalizados, constructor de castores


¿Desea crear diseños personalizados de WordPress para su sitio web para darle un aspecto único??

Independientemente de su conjunto de habilidades, es fácil crear un diseño personalizado de WordPress sin tener que contratar a un desarrollador.

En este artículo, le mostraremos cómo crear un diseño personalizado de WordPress mediante el uso de un plugin de renombre del creador de páginas de WordPress, Beaver Builder.

Muchos de ustedes deben estar preguntándose por qué crear un diseño personalizado cuando simplemente pueden elegir un tema premium y comenzar su página con uno de sus diseños preconstruidos.

¿Por qué crear diseños personalizados de WordPress?

Encontrarás una serie de temas premium de WordPress que ofrecen varios diseños integrados impresionantes, que están listos para usarse de inmediato. Definitivamente puede optar por estos hermosos diseños y darle a su sitio un aspecto atractivo.

Pero el problema con tales diseños es que, debido a su disponibilidad inmediata, son ampliamente utilizados por cientos y miles de usuarios en la web..

Eso significa que si está utilizando un diseño precompilado para su sitio de WordPress, no podrá darle un aspecto distinto a menos que lo personalice mucho. Además, estos diseños pueden no cumplir con sus requisitos tampoco. Crear un diseño personalizado es la mejor opción en estos casos.

Crear un diseño personalizado de WordPress

La mejor manera de crear diseños personalizados visualmente impresionantes para su sitio es usar el complemento Beaver Builder. Beaver Builder es un popular plugin de creación de páginas de arrastrar y soltar que te permite crear algunos de los diseños más impresionantes en cuestión de minutos..

Beaver Builder

Lo mejor de este complemento es el nivel de flexibilidad de las ofertas. Puedes tomar el control de casi cualquier cosa.

Colores, textos, fuentes, imágenes: todo se puede personalizar completamente para obtener el aspecto exacto que siempre ha soñado..

Otra cosa que te encantará de Beaver Builder es que, a diferencia de cualquier otro plugin de creador de páginas, es completamente amigable para principiantes y no tienes que pasar horas descubriendo cómo usarlo. Además, también ofrece docenas de plantillas visualmente impresionantes para ayudarlo a comenzar.

Mira nuestra reseña de Beaver Builder aquí. Veamos ahora cómo crear sus diseños personalizados con este complemento..

Paso 1: Instalación y configuración de Beaver Builder en WordPress

El primer paso es instalar y activar Beaver Builder en su sitio web. Puede descargar el complemento yendo al sitio de Beaver Builder. Una vez que esté activado, ve a Configuración »Generador de páginas.

Configuración de Beaver Builder

Aquí puede ingresar la clave de licencia para habilitar el soporte y recibir actualizaciones. Una vez hecho esto, estás listo para crear tu primer diseño personalizado.

Paso 2: Creando tu primer diseño personalizado

Para crear su primer diseño personalizado, vaya a Todas las páginas »Agregar nuevo en tu panel de WordPress. En su editor de texto, tendrá la opción de cambiar al generador de páginas.

Simplemente haga clic en esta opción y verá que se inicia la pestaña del generador de páginas. Verá varias opciones de plantilla aquí. Por lo tanto, seleccione el que más le guste para su diseño. También puede hacer clic en la flecha desplegable y seleccionar el tipo de diseño que desee. Esto puede ser para sus páginas de destino o sus páginas de contenido.

Una vez hecho esto, se lo dirigirá a su generador de arrastrar y soltar. Para editar un campo en particular, solo necesita pasar el cursor sobre esa área específica y luego hacer clic en él y comenzar a personalizar su diseño.

Puede agregar hasta 6 columnas, barras laterales, audios, imágenes, separadores y más a sus diseños. Para agregar filas y barras laterales, haga clic en Diseños de fila pestañas. Luego arrastre el número de columnas que desee y suéltelo en su generador visual.

Una vez que se agregan sus columnas, simplemente haga clic en ellas y personalícelas para que coincidan con sus requisitos. Puede cambiar el fondo, el color del texto, agregar enlaces, textos, bordes y más a sus columnas. Estas columnas y filas también se pueden guardar para su uso posterior. Para eso, simplemente haga clic en el Salvar botón al final de la ventana emergente.

Para otros elementos, debe usar el Módulos Básicos opción. También tiene varios otros elementos que puede agregar a su diseño, como botones, acordeones, tablas de precios, mapas, temporizadores de cuenta regresiva y mucho más..

Simplemente necesita arrastrar los elementos desde la derecha y soltarlos en el generador visual a su izquierda. Cada uno de estos elementos es personalizable. Entonces, por ejemplo, si desea agregar un nuevo encabezado, simplemente haga clic en Bóveda y arrástrelo y suéltelo en su diseño. Después de eso, haga clic en el elemento Encabezado para personalizarlo.

Tendrás 3 pestañas diferentes aquí. General, estilo y avance. El primero le permite agregar sus textos, enlaces, etc. a sus encabezados. La segunda pestaña le permite diseñar su encabezado con diferentes colores, fuentes, etc. Avanzado La opción le permite trabajar en los márgenes, visibilidad, capacidad de respuesta, animación, etc..

Puede agregar tantos elementos y módulos como desee utilizando el mismo método y luego personalizarlo para cumplir con sus requisitos.

Una vez que haya editado sus diseños, haga clic en el Hecho botón en la esquina superior derecha de su pantalla. Verás una nueva ventana emergente con varias opciones diferentes, como las que se muestran en la captura de pantalla a continuación..

Beaver Builder guardar diseño

Con estas opciones, puede guardar su borrador, publicarlo o descartarlo.

Paso 3: reutilizando su diseño

Beaver Builder también le permite guardar su diseño personalizado de WordPress y reutilizarlo cuando lo desee. Para usar esta opción, vaya a Herramientas en la esquina superior derecha de tu pantalla. Verás las siguientes opciones en tu pantalla.

herramientas del constructor del castor

Ahora, según sus requisitos, seleccione la opción. Si desea utilizar la plantilla para su uso posterior, haga clic en el Guardar plantilla opción y luego nombra tu diseño. Después de eso golpeó el Salvar botón.

los diseños de wordpress ahorran tempate

Paso 4: Administrar tus plantillas

Los diseños que crea con Beaver Builder se pueden usar en sitios web ilimitados. Las plantillas creadas por sus usuarios se almacenan en un tipo de publicación personalizado llamado plantillas.

Por defecto, esta opción está oculta. Puede hacerlo visible yendo a Configuración »Generador de páginas» Plantillas lengüeta.

Ahora haga clic en el Habilitar administrador de plantillas opción y presione el Guardar configuración de plantilla botón. Al hacer esto, notará que aparece un nuevo elemento de menú llamado Plantillas en su barra de administración de WordPress. Todos los diseños de página que guarde como plantilla aparecerán en esa página.

Exportando sus diseños de WordPress

Dado que los diseños que crea se guardan como un tipo de publicación personalizada, puede exportar fácilmente sus plantillas Beaver Builder. Para esto, tiene la función de exportación incorporada en WordPress. Para usar esta función, vaya a Herramientas »Exportar página.

exportación de diseño de wordpress

Ahora seleccione Plantillas. Haga clic en la flecha desplegable y seleccione la plantilla que desea exportar. Después de eso, presiona el Descargar archivo de exportación botón y WordPress enviará un archivo XML para que lo descargue.

Importación de diseños de Beaver Builder

Para importar un diseño, vaya al tablero del sitio web donde desea importar este diseño. Ahora ve a Configuración »Importar» WordPress. Haga clic en la opción Instalar ahora en la pestaña de WordPress. Esto descargará e instalará el complemento importador de WordPress.

Una vez que se descarga el complemento, puede cargar el archivo XML que acaba de descargar. Su diseño ahora está listo para ser utilizado en su otro sitio también.

Y eso es. Esperamos que les haya gustado nuestro artículo. Si lo hizo, es posible que también desee conocer algunas de las otras alternativas de Beaver Builder que puede probar.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map