Cómo Diseñar Páginas en WordPress con Elementor Page Builder

Categorias: Plugins, Wordpress

Cómo Diseñar Páginas en WordPress con Elementor Page Builder

¡¡¡¡ATENCIÓN!!!! Ampliamos la promoción descuento para hosting . Podrás contratar tu alojamiento web con un 50% de descuento (acumulable al 20% ya ofrecido en nuestra web) y beneficiarte de todas las ventajas y servicios que incluye nuestro alojamiento web.
Para poder beneficiarte de esta promoción descuento para la contratación de tu alojamiento web tan solo debes emplear el cupón promocional MIGRACIONHOSTINET a la hora de hacer tu pedido.

Contamos con diferentes tipos de hosting. Elige el que mejor te venga para alojar tu web

A la hora de crear un sitio web por primera vez hay que tener en cuenta ciertos aspectos, uno de los más importantes es el gestor de contenidos que vamos a usar, si es que vamos a usar uno.

Las estadísticas muestran que WordPress es la opción preferida por la mayoría de los usuarios y no es de extrañar, es sencillo de usar, muy configurable, con una gran comunidad detrás y con cientos de plugins y temas gratuitos disponibles para crear un sitio web perfecto para el proyecto que se tenga en mente.

Instalar WordPress es muy sencillo en Hostinet, ya que contamos con el instalador automático Softaculous en todos los alojamientos que cuenten con cPanel como panel de control, por cierto, todos los alojamientos (Linux compartidos) que ofrece Hostinet cuentan con cPanel como panel de control, así que instalar WordPress está al alcance de cualquiera.

Una vez instalado WordPress, lo normal es empezar a buscar el theme que más se adapte a las necesidades del proyecto que se tenga en mente. Una vez elegido, sólo hay que instalarlo.

Así que se tiene WordPress instalado en el alojamiento web y el theme elegido instalado, pero los themes hay que modificarlos y ahí puede llegar el problema.

Cambiar la cabecera y cosas así es muy sencillo en WordPress, pero si se quiere realizar un diseño o una modificación importante de una página habrá que lidiar con código HTML y CSS.

Esto es un problema para los usuarios que no tengan conocimientos en la materia, pero esto se puede solucionar con los llamados maquetadores visuales o Page Builder.

Con un maquetador visual se puede realizar el diseño de una web arrastrando elementos de un menú a la propia página, algo que se conoce como Drag & Drop (Arrastrar y Soltar).

Existen varios maquetadores visuales para WordPress en forma de plugin, pero hay uno que, pese al poco tiempo que está disponible, está ganándose la confianza de muchos usuarios, y se llama Elementor Page Builder.

Si buscas una guía básica para Elementor, puedes consultar nuestro tutorial.

Plugin Elementor Page Builder

El plugin Elementor Page Builder está calando en WordPress gracias a su facilidad de uso, a la limpieza de su código, diseño en vivo y varias características más que están gustando mucho a los usuarios de WordPress.

Además, es gratuito, tiene una opción PRO de pago por si se queda corto, pero en la mayoría de los casos la versión gratuita servirá.

Se puede instalar directamente del repositorio de plugins de WordPress o descargarlo desde aquí.


Una vez activado, podemos encontrar un nuevo apartado en el menú lateral de WordPress, desde donde podemos ir a Settings para determinar una configuración básica.

menu elementor Page Builder

La configuración puede cambiar dependiendo de cada uno, pero lo habitual es editar sólo las páginas en la pestaña General y determinar el ancho en la pestaña Style.

Por defecto, el ancho vienen con 1140 px. Si lo dejamos en blanco usará todo el espacio disponible.

editar paginas elementor plugin WordPress

 

Editando un Página con Elementor Page Builder

A la hora de empezar a utilizar Elementor para editar una página no existe perdida. Sólo tenemos que añadir una nueva página y veremos un enorme botón azul con la leyenda Edit with Elementor.

empezar editar pagina elementor WordPress

Al pulsar el botón nos levará a una nueva ventana donde cambiará toda la interface gráfica. Podemos ver una barra lateral con multitud de elementos (widgets) y una parte central donde se podrán añadir dichos elementos.

En la parte central también veremos un botón desde donde se pueden revisar templates por si alguno nos interesara para la página.

elementor interface WordPress

En la ventana de templates veremos varios modelos que podemos agregar, los que estén marcados con la palabra PRO no están disponibles en la versión gratuita, pero si alguno nos interesa solo hay que pasar el ratón por encima y pulsar en Insert.

Una vez cargada la el template la edición del mismo es muy intuitiva.

Si hacemos doble click sobre cualquier texto, podemos editarlo sin más.

editor texto prueba WordPress

Al pasar el ratón por cada elemento aparece un pequeño menú en la parte superior desde donde podemos editar dicho elemento. Si pulsamos en el icono de la izquierda (Edit Section), en el menú lateral izquierdo aparecerán distintas opciones de edición como el ancho, modificar la imagen, cambiar textos, colores, etc…

Se pueden tocar todas las opciones para saber que modifican sin ningún miedo, ya que existe un botón para resetear la sección como estaba.

opciones seccion elementor WordPress

Creando un Página con Elementor Page Builder

Si lo que buscamos es crear una página con un diseño propio y sin usar plantillas, sólo hay que volver a empezar pero esta vez usar las secciones de menú izquierdo.

Añadir una sección es muy sencillo en Elementor, tan sólo hay que hacer click con el ratón y arrastrarla hasta la zona marcada en la parte central.

anadir seccion elementor WordPress

Al añadir la sección aparecerán las opciones de la misma en el menú lateral. Desde ahí podremos editarla hasta dejarla como queramos.

Cada sección dispone de opciones distintas, ya que no es lo mismo editar un botón que editar una caja de texto.

editar boton elementor WordPRess

De esta forma, elemento a elemento, iremos construyendo la página de la forma que se quiera mientras se ve en vivo como va quedado.

Otras Opciones de Elementor

En la parte inferior del menú lateral tenemos un botón para guardar los cambios, importante para no perder trabajo por un cierre inesperado de la web, por ejemplo

También tenemos una opción muy interesante que es visualizar la página en un móvil o tableta

visualizar movil elementor plugin WordPress

Y es que otra de las cosas buenas que tiene Elementor, es que sus diseños son responsives para que puedan adaptarse a cualquier tipo de pantalla.

también tenemos un botón de historial, para volver hacia atrás respecto a las acciones que realicemos y otro botón por si queremos guardar el diseño como template para usarlo en otras páginas, algo muy útil para conseguir un diseño homogéneo.

Cosas a Tener en Cuenta

Sin duda el plugin Elementor Page Builder es una buena opción para trabajar el diseño de las páginas en WordPress sin tener que tocar una sola linea de código y la versión gratuita dispone de un montón de opciones para cumplir con las demandas de la mayoría de usuarios.

Si se necesitan más opciones o se usa WooCommerce, la opción de pago puede ser una buena idea, pero eso es algo que tiene que decidir cada uno.

Si se es cliente de Hostinet pero no se quiere usar WordPress, también se dispone de la posibilidad de usar un maquetador visual para desarrollar una página web sencilla.

En todos los planes de hosting, menos el Básico y SSD 1, existe la herramienta RV SiteBuilder, que funciona de una manera similar a Elementor.

Y desde Softaculous también se puede usar un maquetador llamado SitePad, aunque este está algo más limitado en la versión gratuita.

Para usar RV SiteBuilder, sólo hay que contratar un hosting SSD 2 en adelante:

  • SSD 12´00 / mes
  • SSD 54´00 / mes
  • SSD 258´00 / mes
  • SSD 5010´00 / mes
  • SSD 7512´00 / mes
  • SSD 12´00/mes
  • SSD 54´00/mes
  • SSD 258´00/mes
  • SSD 5010´00/mes
  • SSD 7512´00/mes
    • Una vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM ó .EU.Una vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM ó .EU.Una vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM ó .EU.Una vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM ó .EU.Una vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM ó .EU.
    • Almacenamiento en disco dura ultra rapido SSD
    • El espacio en disco es la suma del espacio que ocupan los archivos que forman la web y el correo electrónico.
    • La transferencia de datos mensual es la cantidad total de información que se descargan los visitantes de nuestra web en cada acceso más nuestro uso a través de FTP y correo.
    • Cada dominio alojado muestra un contenido único y diferente del resto
    • Tras evaluación de nuestro equipo de migraciones y nuevas altas de Hosting
    • Cuentas de correo gestionables a través de POP, IMAP y servicio WebmailSegún usoSegún usoSegún usoSegún usoSegún usoSegún uso
    • Todo lo que necesitas para sacar partido a tu Host
    • Bases de datos MySQL disponibles para su uso en cada alojamiento web
    • Contrata tu hosting web y consigue dominios gratisUna vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM ó .EU.Una vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM ó .EU.Una vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM ó .EU.Una vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM ó .EU.
    • Elige la versión de PHP que necesites
    • Certificado SSL autofirmadoCertificados Let's Encrypt. Mas Información AQUICertificados Let's Encrypt. Mas Información AQUICertificados Let's Encrypt. Mas Información AQUICertificados Let's Encrypt. Mas Información AQUICertificados Let's Encrypt. Mas Información AQUICertificados Let's Encrypt. Mas Información AQUI
    • Migramos tu web de tu actual host a HostinetMigramos tu web de tu actual host a HostinetMigramos tu web de tu actual host a HostinetMigramos tu web de tu actual host a HostinetMigramos tu web de tu actual host a Hostinet
    • Contrata tu hosting web y consigue dominios gratisUna vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM ó .EU.Una vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM ó .EU.Una vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM ó .EU.
    • Aparcando un dominio secundario en el alojamiento de nuestro dominio principal conseguimos que ambos dominios resuelvan indistintamente con la misma página que tenemos colgada.
    • Cuentas de correo gestionables a través de POP, IMAP y servicio Webmail
    • Tus buzones de correo y mails limpios de virus y con un potente filtro antispam
    • Centro de datos en Madrid (España)
    • Opcion de contratación de IP dedicadaPuedes contratar tu Ip dedicada por solo 11.95 € al año AQUIPuedes contratar tu Ip dedicada por solo 11.95 € al año AQUIPuedes contratar tu Ip dedicada por solo 11.95 € al año AQUIPuedes contratar tu Ip dedicada por solo 11.95 € al año AQUIPuedes contratar tu Ip dedicada por solo 11.95 € al año AQUI
    • Certificado SSL autofirmadoCertificados Let's Encrypt. Mas Información AQUICertificados Let's Encrypt. Mas Información AQUICertificados Let's Encrypt. Mas Información AQUICertificados Let's Encrypt. Mas Información AQUICertificados Let's Encrypt. Mas Información AQUI
    • Opción de contratación de certificados SSL Wildcard. Se requiere Ip dedicada.Puedes contratar tu certificado SSL desde solo 99.95 € al año AQUIPuedes contratar tu certificado SSL desde solo 99.95 € al año AQUIPuedes contratar tu certificado SSL desde solo 99.95 € al año AQUIPuedes contratar tu certificado SSL desde solo 99.95 € al año AQUIPuedes contratar tu certificado SSL desde solo 99.95 € al año AQUIPuedes contratar tu certificado SSL desde solo 99.95 € al año AQUI
    • Opción de contratación de certificados SSL Extended Validation (EV). Se requiere Ip dedicada.Puedes contratar tu certificado SSL desde solo 195.00 € al año AQUIPuedes contratar tu certificado SSL desde solo 195.00 € al año AQUIPuedes contratar tu certificado SSL desde solo 195.00 € al año AQUIPuedes contratar tu certificado SSL desde solo 195.00 € al año AQUIPuedes contratar tu certificado SSL desde solo 195.00 € al año AQUIPuedes contratar tu certificado SSL desde solo 195.00 € al año AQUI
    • Opción de contratación de certificados SSL Organization Validation (OV). Se requiere Ip dedicada.Puedes contratar tu certificado SSL desde solo 525.00 € al año AQUIPuedes contratar tu certificado SSL desde solo 525.00 € al año AQUIPuedes contratar tu certificado SSL desde solo 525.00 € al año AQUIPuedes contratar tu certificado SSL desde solo 525.00 € al año AQUIPuedes contratar tu certificado SSL desde solo 525.00 € al año AQUIPuedes contratar tu certificado SSL desde solo 525.00 € al año AQUI
    • Con nuestra herramienta WebFácil construye tu página web en solo 5 pasos.
    • Con la herramienta de instalación Softaculous tan solo deberás elegir la aplicación deseada y con tan solo un par de clicks y de forma totalmente automatizada tendrás tus herramientas favoritas instaladas en tu Host.
    • Bases de datos MySQL disponibles para su uso en cada alojamiento web
    • Supeditado al espacio total del alojamientoSupeditado al espacio total del alojamientoSupeditado al espacio total del alojamientoSupeditado al espacio total del alojamientoSupeditado al espacio total del alojamientoSupeditado al espacio total del alojamiento
    • ¿Quieres realizar desarrollos con Python? En Hostinet innovamos dia a dia en tu beneficio y por ello te presentamos como última novedad en todos nuestros servidores Web la posibilidad de desplegar tus aplicaciones con Python directamente desde el Plesk de tu Hosting.
    • ¿Quieres desarrollar tus aplicaciones con Ruby? En Hostinet te presentamos como última novedad en todos nuestros servicios de Hosting Web la posibilidad de desplegar tus aplicaciones con Ruby on Rails directamente desde el panel de control Plesk .
    • El fichero .htaccess permite modificar diferentes variables en la configuración de nuestra cuenta de alojamiento en el servidor.
    • El módulo mod_rewrite permite crear direcciones URL alternativas a las dinámicas generadas por la programación de nuestros sitio web (blog, foro, portal…), de tal modo que sean más legibles y fáciles de recordar
    • Te ayudamos vía email y teléfono en todas tus consultas sobre hosting web. Soporte en español por personal de Hostinet.
    • Completa recopilación de tutoriales sobre Hosting y Dominios
    • 30 dias para probar tu servicio de Hosting y si no te convence el servicio... te devolvemos el dinero!!
    • Copia diaria incremental realizada por HostinetCopia diaria incremental realizada por HostinetCopia diaria incremental realizada por HostinetCopia diaria incremental realizada por HostinetCopia diaria incremental realizada por Hostinet
    • Podrás hacer tus copias de seguridad desde tu panel de alojamiento webPodrás hacer tus copias de seguridad desde tu panel de alojamiento webPodrás hacer tus copias de seguridad desde tu panel de alojamiento webPodrás hacer tus copias de seguridad desde tu panel de alojamiento webPodrás hacer tus copias de seguridad desde tu panel de alojamiento webPodrás hacer tus copias de seguridad desde tu panel de alojamiento web
    • Precios para nuevas altas. Contratación anual.Precios para nuevas contrataciones. Contratación anual.Precios para nuevas contrataciones. Contratación anual.Precios para nuevas contrataciones. Contratación anual.Precios para nuevas contrataciones. Contratación anual.Precios para nuevas contrataciones. Contratación anual.Precios para nuevas contrataciones. Contratación anual.