Maquetación en WordPress usando GeneratePress y Elementor

En esta reunión propongo un tema que nos puede servir a todos: Hacer páginas fáciles y rápidas con este tema y plugin que trabajan muy bien juntos (GeneratePress y Elementor)

Transcript

2. Maquetando con Elementor y GeneratePress
3. Fuente: Arturo Garcia
4. Por qué GeneratePress Código limpio Los mismos desarrolladores de WordPress han revisado el código de GeneratePress, garan<zando que es un codigo limpio y eficiente. El resultado de esto es un tema sin problemas de incompa<bilidades, sin bugs, rápido a la hora de cargar la página, y con un código amigable para los motores de búsqueda. GeneratePress se adapta perfectamente a todo <po de resoluciones de pantalla y disposi<vos. Los temas que salen en la actualidad, prác<camente son todos responsive, pero probablemente ninguno tan bien preparado como este.
5. Compa<bilidad con plugins y navegadores GeneratePress es compa<ble con los plugins más importantes de WordPress como son entre otros: WPML (para crear si<os mul<lingües) WooComerce (para comercios electrónicos) bbPress (para crear foros) Además GeneratePress es compa<ble con todos los principales navegadores (Safari, Chrome, IExplorer, Firefox, etc.)
6. Flexible y fácil de u<lizar GeneratePress es el tema más fácil de configurar y personalizar que he encontrado hasta el momento. Tanto para personas que no <enen conocimientos ni de código, como para usuarios más avanzados, más opciones de maquetación y desarrollo. GeneratePress es un tema que viene absolutamente pelado y sin opciones adicionales en su versión gratuita. Eres tu quien decide que opciones extras de configuración y personalización quieres añadir mediante sus addons. De esta manera no <enes elementos instalados que no vayas a u<lizar y ralen<cen el <empo de carga de tu pagina.
7. GeneratePress es un gran tema para usuarios no avanzados Lo primero que debes saber es que he elegido este tema pensando en los emprendedores o pequeños negocios que: Quieren tener una web atrac<va y funcional. La quieren hacer ellos mismos. No <enen <empo o ganas de meterle mano al código. Segundo. Sigo huyendo de los temas mul<purpose con paneles infinitos, irritablemente complejos, o que vengan cargados de extras que el 80% de la gente no necesita. Con estos temas es fácil tener problemas, muchas veces son diZciles de configurar por la gran can<dad de opciones que incorporan y a menudo son pesados y lentos.
8. Versión Gratuita + Addons Lo primero que debes saber de GeneratePress es que es un tema gratuito… y Premium. Tiene una versión básica que puedes descargar gra<s de la web del desarrollador y luego una serie de añadidos (addons) que cuestan 5$ cada uno, aunque puedes comprarlos todos juntos por 30$. En mi opinión gran parte de su potencial reside en los addons, por lo que te recomiendo que compres el paquete completo. Ver aqui
9. Para tener en cuenta Op<mizado de cara al SEO Buen código, seguro y estable Compa<bilidad con plugins y navegadores 8 zonas dónde añadir widgets
10. Personalizaciones disponibles mediante su panel de control Ya verás cómo puede cambiar tu página sin tocar ni una línea de código. Todos los cambios se realizan desde el panel “Apariencia” de WordPress o desde la propia página o entrada que estés editando. Ver video 1
11. Colors. Personaliza los colores de más de 50 elementos. Video2
12. Colors. Personaliza los colores de más de 50 elementos. Video2 Typography. Modifica las fuentes fácilmente. Video 3 Añadir secciones. Video 4 Menú plus. Opciones avanzadas para tus menús. Video 5 Backgrounds. Añade imágenes de fondo en diferentes ubicaciones. Video 6
13. Page Header. Añade cabeceras personalizables a tus páginas para conseguir efectos únicos. V 7 – 7A Spacing. Ges<ona los tamaños y espacios de los contenedores. Video 8 Secondary Nav. Añade un segundo menú de navegación personalizable. Video 9 Blog. Personaliza la forma en la que se muestran tus entradas. Video 10 Disable Elements. Oculta elementos en páginas concretas. Video 11
14. Elementor
15. Qué es y cómo funciona Elementor A día de hoy los elementos que se pueden añadir desde la barra lateral son los siguientes, aunque constantemente están añadiendo nuevos widgets que amplían las capacidades del plugin. Video 1 – /
16. Columnas Puedes añadir tantas columnas como quieras, pero lo realmente llama<vo es cómo puedes ajustar el ancho de las mismas simplemente arrastrando y soltando consiguiendo exactamente la composición que querías. Ya no <enes que limitarte a porcentajes preestablecidos, ni a estructuras predefinidas que no se pueden modificar. Aparte de eso puedes: Darles un color o imagen de fondo. Aplicarles una sombra alrededor. Redondear sus esquinas.
17. Herramientas de trabajo Encabezado de texto Pensado para añadir los rpicos H1, H2, H3, etc. Les puedes añadir un enlace, ajustar la <pograZa a tu antojo, alinear como quieras y algo que me parece interesante, puedes definir el espaciado entre los caracteres para darle un toque de diseño a tus rtulos. Imagen Puedes insertar imágenes en varios tamaños predefinidos, en su tamaño original o en el tamaño exacto que tú quieras. Una vez que la imagen está añadida también puedes redimensionarla ajustando el porcentaje de su tamaño que quieres que se reduzca. Las imágenes pueden llevar animaciones que se muestran cuando pasas el ratón por encima. Además puedes ajustar su opacidad, añadirles bordes, sombreados, redondearlas, etc. Editor de Texto Un editor de texto wysiwyg, igual que el editor de WordPress. Pensado para añadir párrafos de texto más extensos que el rpico encabezado. Puedes añadirle negritas, darle color a ciertas palabras y hacer todo aquello que puedes hacer mediante el editor de WordPress cuando
18. Herramientas de trabajo Vídeos Puedes añadir vídeos de Vimeo o Youtube simplemente poniendo la url del mismo. También puedes definir el formato (16:9, 3:2, 4:3) y definir los siguientes ajustes: Auto-reproducir el vídeo. Mostrar vídeos sugeridos al finalizar la reproducción. Mostrar u ocultar los controles del reproductor. Mostrar u ocultar el rtulo y acciones del reproductor. Botones Tienes todas las opciones habidas y por haber para personalizar tus botones en cuanto a tamaño, colores, <pograZa, espaciados, con borde, sin fondo, redondeados, animaciones cuando pasas el ratón por encima, con iconos de FontAwesome, etc. Separador Pensado para decorar o separa elementos tales como los encabezados. Puedes elegir entre diferentes es<los, definir su grosor, ancho, color, alineación, etc.
19. Herramientas de trabajo Espaciador A veces necesitas dejar aire por encima o debajo de ciertos elementos, esto lo puedes hacer aplicando cierto margin, pading o con este widget que te deja definir la altura en píxeles del espaciado. Cuadro de imagen Se trata de una composición prediseñada formada por una imagen, un encabezado y un párrafo de texto. Se edita muy fácil y rápido, pero no permite añadir nuevos elementos al conjunto ni cambiar su orden, por lo que personalmente considero que es mejor añadir una imagen, un encabezado y un párrafo de texto para tener más opciones de personalización. Google Maps Introduces una dirección, defines el nivel de Zoom, el alto del mapa y si quieres que el usuario pueda hacer scroll o no. Listo, ya <enes tu mapa insertado.
20. Herramientas de trabajo Icono Elige entre los más de 400 iconos de FontAwesome, dales un color, decide si quieres que tengan fondo o no, un marco, si deben enlazar a alguna url, la alineación, el tamaño, rótalos, o aplícales una animación cuando pases el ratón por encima. Caja de icono El mismo concepto y funcionamiento que el cuadro de imagen que hemos visto antes. Prefiero añadir los elementos por separado. Galería de imágenes U<liza el sistema na<vo de WordPress, que nunca me ha convencido, por lo que tampoco lo hace este widget. En caso de querer añadir una galería seguiré acudiendo a otros plugins. Carrusel de imágenes Ú<l si quieres añadir el rpico carrusel de logo<pos de empresas con las que colaboras o de medios en los que has aparecido.
21. Herramientas de trabajo Listado de iconos Muy ú<l, sencillo y conseguido. Puedes añadir tantos elementos como quieras, duplicar los existentes, cambiar iconos, texto, color del icono, separación con el texto. Lo u<lizaré mucho en páginas de contacto para poner direcciones, teléfono, email, etc. y también para hacer listas avanzadas. Contador El rpico contador numérico que te permite definir el número de inicio, el número de fin, la duración de la animación, la <pograZa, color, tamaño y demás ajustes de es<los. Barra de progreso Puedes mostrar el porcentaje de progreso, añadir un rtulo y aplicarle diferentes es<los. Recomendación Un widget pensado para mostrar tes<monios, puedes añadirle la imagen del cliente, cambiar su posición, mostrar su nombre, puesto de trabajo…
22. Herramientas de trabajo Pestañas, acordeones y desplegables Puedes añadir tantos bloques como quieras, cambiar su orden, el color del rtulo, del texto, del elemento ac<vo, del fondo del contenido… en fin, puedes hacer todo lo que se suele poder con este <po de elementos, pero con bastantes opciones de personalización y con un funcionamiento muy sencillo y fluido. Iconos sociales Una forma sencilla de añadir iconos de redes sociales vinculados a tus perfiles. Funciona casi igual que el listado de iconos, con la salvedad de que te permite elegir entre el color original de la red social o poner el color que tú quieras. Aparte de eso <enes todas las opciones de personalización que quieras en cuanto a espaciados, colores, <pograZas, etc. Alerta Una caja en la que mostrar un mensaje sin mayor historia, tan solo el hecho de que se puede cerrar pulsando en el aspa de la esquina superior derecha, pero por lo demás no <ene nada de par<cular.
23. Herramientas de trabajo SoundCloud Al igual que puedes añadir vídeos de Vimeo y Youtube puedes añadir audios desde SoundCloud. Puedes elegir si el audio se reproduce de manera automá<ca o no, personalizar los colores de los controles y configurar si se muestran o no los siguientes elementos: Botón Comprar. Botón Me Gusta. Botón Descarga. Botón Compar<r. Número de reproducciones. Nombre de usuario. Shortcodes y HTML Como no podía ser de otra manera Elementor nos permite añadir shortcodes y código HTML para poder añadir todavía más funcionalidades a las que ya trae incorporadas de serie. Sin embargo el único problema que me ha dado desde que empecé a probarlo fue con un shortcode, así que no te pierdas la parte de esta entrada en la que te explico qué me ocurrió, por qué y cómo puedes resolverlo.
24. Herramientas de trabajo Ancla de menú Mediante este elemento puedes vincular una determinada parte de tu web a un enlace, me explico. Imagina que quieres hacer una página de <po One Page, en la que no hay páginas interiores, sino que todo el contenido está en la home, pero aún así <enes un menú en el que haces click y te lleva mediante scroll a la sección donde se encuentra dicha información. Pues eso es lo que hace este widget. Te permite meter el enlace en un botón, en un texto, en el menú de WordPress o en cualquier parte de tu web que te deje insertar un enlace. Funciona muy bien y el efecto de scroll es suave y agradable. Barra lateral Lo añades y se te abre un cuadro en el que eliges qué sidebar de las que <enes en tu web quieres cargar. Una funcionalidad interesante que te permi<ría, entre otras cosas, cargar varias barras laterales en una misma página.