--- title: "Cómo construir rápidamente un sitio de WordPress con el complemento Elementor" url: https://caribdis.net/2018/04/13/como-construir-un-sitio-de-wordpress-con-elementor/ date: 2018-04-13 modified: 2019-10-11 lang: es author: "Lana Miro" description: "Con la evolución creciente de los constructores web de “arrastrar y soltar”, crear un blog o un sitio web sin tener conocimientos de programación específicos ya no es un milagro..." categories: - "Elementor" tags: - "autores invitados" - "Elementor" - "español" - "plugin" - "tema" - "tutorial" - "WordPress" image: https://caribdis.net/wp-content/uploads/2018/04/elementor-page-builder.jpg word_count: 2171 --- # Cómo construir rápidamente un sitio de WordPress con el complemento Elementor Con la evolución creciente de los constructores web de “arrastrar y soltar”, crear un blog o un sitio web sin tener conocimientos de programación específicos ya no es un milagro para los principiantes y entusiastas del diseño web. Si tienes una idea clara de qué tipo de proyecto web te gustaría construir y cómo debería verse, puedes seguir adelante y construir tu propio sitio web sin mucho esfuerzo e inversiones adicionales. ¿Cómo es eso posible? Cuando se trata del desarrollo del sitio web por un webmaster principiante, **WordPress** parece ser el CMS más intuitivo y al mismo tiempo funcional que le ayudará a construir sitios web de cualquier dificultad. **WordPress** cuenta con la confianza de más del 30% de todas las empresas presentes en la Web. La comunidad de desarrolladores y diseñadores de **WordPress** no deja de lanzar nuevos temas y complementos que ayudan a hacer nuestros sitios web más potentes y utilizables. Una de esas herramientas innovadoras está en el foco de nuestra atención hoy. El constructor web de “arrastrar y soltar” [**Elementor**](https://caribdis.link/Elementor) es una solución innovadora y muy funcional que te permite crear páginas web únicas sin tener que contratar a freelancers o estudios de diseño web. Te permite manejar todo sin ayuda de los profesionales terceros y sin perder mucho tiempo en el aprendizaje avanzado. ![Constructor de páginas Elementor](//caribdis.net/images/elementor.gif) **Elementor** está disponible tanto gratis, como por un pago asequible. Si optas por la versión de pago, puedes elegir entre los siguientes planes: - **Personal:** $49 por 1 sitio (1 año de actualizaciones y soporte, todas las características pro se incluyen); - **Negocio:** $99 por 3 sitios (1 año de actualizaciones y soporte, todas las características pro se incluyen); - **Ilimitado:** $199 por número ilimitado de sitios (1 año de actualizaciones y soporte, todas las características pro se incluyen). [**Elementor Pro**](https://caribdis.link/ElementorPro) incluye todas las opciones de la versión gratuita y un amplio conjunto de herramientas profesionales para acelerar el flujo de trabajo. Estas herramientas son: - 24+ widgets profesionales; - 75+ temas profesionales; - herramientas de eCommerce; - herramientas de marketing avanzadas; - soporte premium y mucho más. Entre las características profesionales más importantes hay un constructor de formularios en vivo que te permite crear y editar formularios web de manera visual. También se incluye *CSS personalizado*, lo que será especialmente apreciado por los expertos en programación. La función mencionada anteriormente te permite añadir un código personalizado a cada elemento del diseño web y verlo en acción en el editor. También es 100% compatible con **WooCommerce**, por lo que te permite construir una tienda en línea completamente funcional en el modo visual. Así que, las posibilidades que te ofrece el constructor web **Elementor** son realmente impresionantes. Puedes elegir entre las versiones gratuitas y premium del complemento y elegir la más adecuada de acuerdo con tus necesidades personales y requisitos comerciales. ## Guía paso a paso para principiantes Hay dos maneras de añadir este constructor de páginas web a tu sitio: descargar el complemento e instalarlo directamente en tu sitio u optar por la instalación de un tema que ya integra **Elementor**. Vamos a examinar ambas. ### Opción #1 Para comenzar a construir un sitio web con la ayuda del constructor web de arrastrar y soltar **Elementor**, primero debes instalar **WordPress** en tu servidor web y elegir un nombre de dominio para tu futuro sitio web. Tan pronto como acabes de hacerlo, puedes seguir adelante y [descargar el constructor web](https://caribdis.link/Elementor) de forma gratuita de la página principal de **Elementor.** Después de descargar el archivo `.zip` a tu computadora, abre el panel de control de tu sitio y haz clic en *Plugins > Añadir nuevo > Subir plugin*. Selecciona el archivo `.zip` de **Elementor** y haz clic en *Instalar ahora*. Tan pronto como se instale el complemento, verás la notificación respectiva. A continuación haz clic en *Activar.* ¡Eso es! El complemento **Elementor** ha sido añadido a tu sitio web. Ahora puedes comenzar a crear páginas nuevas y modificar su apariencia en el modo visual. ### Opción #2 El constructor web **Elementor** es compatible con todos los temas de **WordPress** que están disponibles en la comunidad. Además, puedes construir un sitio web sobre la base de una plantilla **WordPress** que ya integra **Elementor.** En el mercado digital de [**TemplateMonster**](https://caribdis.link/TemplateMonster) puedes encontrar una colección creciente de más de 100 temas de **WordPress** que preintegran los módulos **Elementor** y [**JetElements**](https://caribdis.net/2017/11/21/jetelements-resena-del-mejor-complemento-premium-para-elementor/). Estos son conjuntos específicos de extensiones compatibles con el constructor de páginas web **Elementor.** Ellos son los [carruseles avanzados](http://jetelements.zemez.io/advanced-carousel/), formularios, entradas, efectos de animación, banners, funciones de **WooCommerce**, etc. Para encontrar el tipo necesario del tema prediseñado, abre la [categoría de plantillas **WordPress**](https://caribdis.link/TMWP). Hay una selección de filtros aplicables en la barra lateral izquierda. En la sección de características haz clic en **Elementor**. Así que, el filtro inteligente actualizará la página y presentará una lista de todos los temas de **WordPress** que ya integran este complemento. Estos son algunos de los ejemplos más populares: #### Art Deco - Plantilla WordPress para Sitio de Galería de Arte **Art Deco** es una plantilla **WordPress** que ha sido desarrollada especialmente para sitios web de arte y cultura. La estructura de *layout* creativa convierte este tema en una gran solución para desarrollar portafolios efectivos en línea. El tema incluye una amplia gama de páginas listas para usar que son adecuadas para una variedad de ocasiones. Es decir, el tema incluye las siguientes páginas: *Inicio*, *Acerca de nosotros*, *Servicios*, *Galería*, *Clientes* y *Blog*. Todos los *layouts* prediseñados se pueden modificar en el modo visual del constructor web **Elementor**. El tema está optimizado para los móviles, lo que garantiza que tu sitio web funcionará sin problemas incluso en las pantallas más pequeñas y que se ajustará automáticamente a las pantallas de los dispositivos de escritorio. La plantilla se basa en [**Cherry Framework**](http://www.cherryframework.com/) e integra una selección de extensiones inteligentes de [**Cherry**](http://www.cherryframework.com/plugins/). Está preparada para [**Ecwid**](https://www.ecwid.com/es/wordpress-ecommerce), lo que te permite aprovechar las funciones de comercio electrónico y vender productos/servicios directamente en tu página web. ![Art Deco](https://caribdis.net/wp-content/uploads/2018/04/artdeco.jpg) ## Demo | Detalles #### Happyones - Plantilla WordPress para Blog La estructura de diseño limpia y bien equilibrada de esta plantilla sirve bien para desarrollar blogs, portafolios, currículums y sitios de empresas pequeñas. El tema se basa en un marco totalmente *responsive*, lo que garantiza que todos los datos compartidos en la página web se ajustarán de manera impecable a todos los tamaños de pantalla. Un mega menú completamente editable tiene una posición fija en la parte superior de la página web. Los colores pastel suaves del tema lo hacen agradable a la vista. Todos los elementos del diseño del tema son totalmente personalizables, lo que te permite dar el aspecto deseado al diseño. El tema integra un conjunto de widgets de redes sociales y opciones de intercambio social. Además, te ofrece múltiples formatos de entrada, colecciones de plantillas prediseñadas de páginas adicionales, así como funciones de comercio electrónico. Se incluyen filtros inteligentes, el carrito *Ajax,* opciones de comparación y lista de deseos y muchas otras características para garantizar una experiencia de compra en línea agradable. ![Happyones](https://caribdis.net/wp-content/uploads/2018/04/happyones.jpg) ## Demo | Detalles --- ## Crear un sitio WordPress con un tema gratuito En la siguiente guía, veremos más de cerca cómo crear un sitio **WordPress** con la ayuda del tema [**Base**](https://es.wordpress.org/themes/sitepoint-base/) de **SitePoint** (cualquier tema que incluya una plantilla de página de ancho completo sirve por igual; por ejemplo, [**Astra**](https://caribdis.net/2017/08/31/astra-resena-y-tutorial-del-tema-gratuito-mas-prometedor-del-ano/) o [**GeneratePress**](https://caribdis.link/GeneratePress), entre tantos otros). Antes de comenzar, asegúrate de que hayas instalado **WordPress** y añadido el complemento **Elementor** a tu panel de control. Tan pronto como estés listo, puedes seguir adelante y crear tu primera página a través de *Páginas > Añadir nueva*. Escribe el título de la página, selecciona la plantilla *Page Builder Full-width*, guarda los cambios y haz clic en *Editar con Elementor*. [![Elementor - Página nueva](https://caribdis.net/wp-content/uploads/2018/04/elementor-pagina-nueva.png)](https://caribdis.net/wp-content/uploads/2018/04/elementor-pagina-nueva.png) A continuación, se te llevará a la página abierta en el editor visual. Pues, cuando abres el constructor web **Elementor**, verás la pantalla de edición de tu sitio. Hay dos opciones: *Añadir nueva sección* o *Añadir plantilla* (se recomienda primero probar de trabajar con una plantilla prediseñada para ver cómo se ven y funcionan diferentes elementos). A la izquierda hay un panel de **Elementor** que contiene múltiples widgets que puedes arrastrar y soltar a cualquier área de la página. También hay una búsqueda en vivo que te permite buscar elementos específicos por una palabra clave. [![Elementor - Widgets](https://caribdis.net/wp-content/uploads/2018/04/elementor-widgets.png)](https://caribdis.net/wp-content/uploads/2018/04/elementor-widgets.png) Si seleccionas la opción *Añadir nueva sección*, tendrás que crear una página web desde cero, mientras que la opción *Añadir plantilla* subirá un tema prediseñado al tablero que luego podrás personalizar. Puedes previsualizar cualquier plantilla antes de tomar la decisión final. Cuando encuentres el tema que te gusta, sigue adelante y haz clic en *Insertar.* ![Elementor - Plantillas](https://caribdis.net/wp-content/uploads/2018/04/elementor-plantillas.jpg) Toda página de **Elementor** se compone de secciones, columnas y widgets. Las secciones dividen las páginas en las filas horizontales, mientras que las columnas en las verticales, y los widgets se usan dentro de las columnas. Los tamaños, posiciones, textos, colores y otros elementos de página y su contenido se pueden modificar en el modo visual. Cada sección y widget se puede duplicar, reubicar o eliminar con un solo clic. Al hacer clic en cualquier sección, verás las opciones de configuración *Columna* y *Sección*. Cuando necesitas administrar el aspecto general de alguna sección, elige la opción correspondiente y verás las pestañas *Disposición*, *Estilo* y *Avanzado* en la barra lateral izquierda. En la pestaña *Disposición* puedes establecer el ancho del contenido, el espacio entre columnas, la posición del contenido, su estructura, etc. También puedes extender la sección para que su *layout* se extienda por completo al ancho de la pantalla (en caso de que el tema no incluya una plantilla de ancho completo). ![Elementor - Editar sección](https://caribdis.net/wp-content/uploads/2018/04/elementor-editar-seccion.png) La pestaña *Estilo* incluye las opciones para establecer el fondo, el borde y la tipografía de cada sección específica. Puedes añadir una imagen al fondo de una sección, establecer un color de fondo o dejarlo sin cambios. También se te permite establecer la posición del fondo de imagen o elegir si se desplazará mientras se navega por la página. También se puede establecer una superposición de fondo de color o de otra imagen. ![Elementor - Estilo](https://caribdis.net/wp-content/uploads/2018/04/elementor-seccion-estilo.jpg) Además, la pestaña *Estilo* dispone de las opciones para establecer el borde de cada sección y elegir entre un conjunto de sombras de borde y tipos de borde. Al elegir la opción *Columna* (![Elementor - Columna](https://caribdis.net/wp-content/uploads/2018/04/elementor-columna.png)), verás un panel de configuración de contenido en la barra lateral izquierda. Aquí es donde puedes configurar la disposición, el estilo (fondo y la tipografía) y algunos aspectos avanzados, tales como márgenes y bordes. El menú de configuración de fondo te deja elegir un tipo de fondo, su color, imagen, tipo de borde, radio de borde y sombra de cuadro. Para añadir una columna nueva a la sección, haz clic en la opción + (![](https://caribdis.net/wp-content/uploads/2018/04/elementor-agregar-columna.png)). Si deseas eliminar alguna, haz clic en la cruz del extremo derecho de las opciones de configuración de columna (![Elementor - Eliminar columna](https://caribdis.net/wp-content/uploads/2018/04/elementor-borrar-columna.png)). Ahora, después de revisar las herramientas y características de las pestañas *Disposición* y *Estilo*, sigamos adelante para ver qué hay detrás de la pestaña *Avanzado*. Las opciones de esta pestaña ahorrarán el tiempo de aquellas personas que tienen pocos o ningunos conocimientos de CSS, pero quieren construir un sitio inteligente y competitivo. Dentro de la pestaña *Avanzado* puedes configurar el relleno (*padding*) de cada sección y el margen fuera de ella. Además, puedes añadir una animación de entrada a cada sección de la página. Estas son las configuraciones de animación que los usuarios verán cuando se desplacen hacia abajo a la sección. Puedes elegir entre varios efectos de desvanecimiento u optar por la función de Zoom. Se te permite configurar la duración de la animación como lenta, normal o rápida, lo que determinará la velocidad a la que aparecerán los efectos de animación de la sección en la página. Si eres experto en CSS, puedes añadir diferentes clases CSS personalizadas al campo correspondiente dentro de la pestaña de configuración *Avanzado* (solo en la versión Pro). ![Elementor - Avanzado](https://caribdis.net/wp-content/uploads/2018/04/ajustes-seccion-avanzado.png) Los campos de edición de *Columa* y *Sección* contienen una pestaña *Responsive* que te permite administrar la forma en que el contenido aparecerá en las pantallas de diferentes tamaños. **Nota**: en últimas versiones de **Elementor** esta opción se reemplazó por los controles *Ancho de la columna (%)* en la pestaña *Disposición*. El constructor web **Elementor** permite deshacer los cambios aplicados a través del panel de configuración o simplemente volver a las versiones guardadas anteriormente. Para hacer esto, ve al panel inferior y busca el icono de *Historial*. Al hacer clic en él, podrás cambiar de versiones. ![Elementor - Historial](https://caribdis.net/wp-content/uploads/2018/04/elementor-deshacer.png) En la pestaña *Historial* puedes cambiar entre *Acciones* y *Revisiones*. Las Acciones son todos los pasos que tomaste al crear un sitio web. Las *Revisiones* muestran todas las versiones que guardaste después de aplicar algún cambio. ![Elementor - Revisiones - Acciones](https://caribdis.net/wp-content/uploads/2018/04/elementor-revisiones-acciones.png) Eso es prácticamente todo. La guía cubre los aspectos básicos que necesitas tener en cuenta para comenzar a crear un nuevo sitio web utilizando el constructor web **Elementor**. Su interfaz visual es bastante sencilla e intuitiva. Si este es el primer sitio web que creas, te recomendamos optar por una plantilla prediseñada. Crear páginas desde cero será tu próximo paso después de que conozcas cómo se hacen diferentes configuraciones dentro del constructor de páginas web. ¡Que tengas suerte con tu primer sitio web!