Scribd Logo
Upload

Welcome to Scribd!

  • 113 views

    Page Builder - Elementor (PDFDrive) .Es - en

    Uploaded by

    Khushboo Mathur
    Elementor is a visual page builder plugin for WordPress that allows users to create and edit website pages without code. It has advantages over other plugins like live editing and compatibility with many themes. The interface contains sections, columns, and widgets that can be dragged and dropped to design pages. Sections are containers, columns help structure content, and widgets are elements like text, images, and buttons. The document provides instructions on downloading, installing, and using Elementor to build a basic page as a first project.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    Page Builder - Elementor (PDFDrive) .Es - en

    Uploaded by

    Khushboo Mathur
    113 views17 pages
    Elementor is a visual page builder plugin for WordPress that allows users to create and edit website pages without code. It has advantages over other plugins like live editing and compatibility with many themes. The interface contains sections, columns, and widgets that can be dragged and dropped to design pages. Sections are containers, columns help structure content, and widgets are elements like text, images, and buttons. The document provides instructions on downloading, installing, and using Elementor to build a basic page as a first project.

    Original Title

    page builder _ elementor ( PDFDrive ).es.en

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Elementor is a visual page builder plugin for WordPress that allows users to create and edit website pages without code. It has advantages over other plugins like live editing and compatibility with many themes. The interface contains sections, columns, and widgets that can be dragged and dropped to design pages. Sections are containers, columns help structure content, and widgets are elements like text, images, and buttons. The document provides instructions on downloading, installing, and using Elementor to build a basic page as a first project.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    113 views17 pages

    Page Builder - Elementor (PDFDrive) .Es - en

    Uploaded by

    Khushboo Mathur
    Elementor is a visual page builder plugin for WordPress that allows users to create and edit website pages without code. It has advantages over other plugins like live editing and compatibility with many themes. The interface contains sections, columns, and widgets that can be dragged and dropped to design pages. Sections are containers, columns help structure content, and widgets are elements like text, images, and buttons. The document provides instructions on downloading, installing, and using Elementor to build a basic page as a first project.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 17

    Translated from Spanish to English - www.onlinedoctranslator.

    com

    PAGE BUILDER : ELEMENT


    (WORKSHOP 3)

    #TRIBUCAMP2018 @RAIOLANETWORKS
    INDEX

    1. What is a web designer?


    1.1 Advantages and disadvantages.

    1.2 Web designers for WP: Free.


    1.3 Web designers for WP: Paid.
    2. What is Elementor?.
    3. How to download and install Elementor.
    4. Elementor interface.
    4.1 Initial configuration.
    4.2 Design tools: Basic components.
    4.2.1 Sections
    4.2.2 Columns
    4.2.3 Widgets
    5. My first steps with Elementor: case study

    #TRIBUCAMP2018 @RAIOLANETWORKS
    1. WHAT IS A WEB DEVELOPER?

    A web designer(also called “constructor” or “page builder”)is a


    tool that allows you to build a website quickly and easily(
    through a drag&drop system) improving the visualization of the
    contents and expanding the functionalities of the installed
    theme.

    Fig 1: Page Builder - Elementor

    #TRIBUCAMP2018 @RAIOLANETWORKS
    1. 1 ADVANTAGES AND DISADVANTAGES

    ADVANTAGES DISADVANTAGES

    1. You don't need to know 1. They generate code

    programming or CSS. inefficient.

    2. Shortcodes.
    2. Easy to use 3. They slow down your website.

    3. You savetime.

    4. You savemoney.

    #TRIBUCAMP2018 @RAIOLANETWORKS
    1.2 FREE

    Pagebuilder by SiteOrigin: Live Composer Site Builder: Elementor:


    https://siteorigin.com/page-builder/ https://livecomposerplugin.com/ https://elementor.com/

    Unyson by ThemeFusion:
    https://en.wordpress.org/plugins/unyson/

    #TRIBUCAMP2018 @RAIOLANETWORKS
    1.3 PREMIUM (PAID)

    Visual Composer Fusion Builder by Avada Elementor PRO DiviBuilder


    visualcomposer.io avada.theme-fusion.com/fusion-builder-2/ elementor.com elegantthemes.com/plugins/divi-builder/

    Themify Builder: Awesome Builder Thrive Architect Beaver Builder


    themify.me/builder codecanyon.net/item/awesome- thrivethemes.com/architect/ wpbeaverbuilder.com
    builderdrag-drop-page-builder/663958

    #TRIBUCAMP2018 @RAIOLANETWORKS
    2. WHAT IS ELEMENT? ( YO )

    Elementor is a visual web builderor “visual page builder”for


    WordPress created by Pojo.me. It allows you to create pages or
    entries in WordPress in a visual and direct way.

    Web page:https://elementor.com

    Available in several languages:Among them the Spanish

    FREE versionandPRO version(Premium)

    #TRIBUCAMP2018 @RAIOLANETWORKS
    2. WHAT IS ELEMENT? ( II )

    Advantages of Elementor over other plugins:

    • We design inlive and live, both for desktop, tablet and mobile.

    • Easy to use.
    • Isfast(its weight is less than that of other layout
    artists).
    • Compatible with many templates.*
    • Cancreate templatesand reuse them.

    *https://docs.elementor.com/article/78-themes

    #TRIBUCAMP2018 @RAIOLANETWORKS
    2.1 HOW TO DOWNLOAD AND INSTALL ELEMENTOR

    We can download the free version of Elementor from:

    • Web page:https://elementor.com
    We go to: Dashboard WordPress > Plugins > Add new > Upload plugin > select the file and click on install

    • From theplugin repositoryfrom WordPress


    We go to: Dashboard WordPress > Plugins > Add new > look for Elementor and install it.

    #TRIBUCAMP2018 @RAIOLANETWORKS
    2.2 INTERFACE : INITIAL CONFIGURATION

    My library:Template management.

    Settings:Management of general plugin


    settings.

    Tools:Version control, synchronization,


    maintenance mode...

    System information:Collect
    information about the system.

    #TRIBUCAMP2018 @RAIOLANETWORKS
    4.2 DESIGN TOOLS: BASIC COMPONENTS

    The design toolIt is made up of the following components:

    General options panel tools pane

    sections columns Widgets

    #TRIBUCAMP2018 @RAIOLANETWORKS
    4.2.1 SECTIONS

    A section is amain containerwherewe can add elements(


    widget)and columns. Within these sections you can make the
    following settings:

    • Provision: Height, width, width between columns...


    • Style: Colors, fonts, backgrounds...
    • Advanced: Margins, padding, CSS classes...

    #TRIBUCAMP2018 @RAIOLANETWORKS
    4.2.1 COLUMNS

    The columns are blocks that are created inside the sections and help to
    structure and store the elements of the web: text, images, videos... Although we
    separate it from the widgets because it is an essential component of the web
    designer, it really belongs to that group of elements.Columns also include specific
    settingslayout, styles and advanced.

    #TRIBUCAMP2018 @RAIOLANETWORKS
    4.2.3 WIDGETS

    They are the elements of the web: texts, images, icons,


    videos, buttons, maps...

    #TRIBUCAMP2018 @RAIOLANETWORKS
    5. MY FIRST STEPS WITH ELEMENTOR: CASE STUDY

    We can download the case study


    files at:

    raiolanetworks.es/tribucamp

    #TRIBUCAMP2018 @RAIOLANETWORKS
    5. MY FIRST STEPS WITH ELEMENTOR: CASE STUDY

    Thesection is full widthAnd containsa column with the


    content centered.
    6be58a
    e0083e
    ffcc46
    fcfcfc
    434264
    f7f7f7

    Qualification:Vidaloka normal, Caption:Roboto 100, 23px


    65px Button:Hind Vadodara, 18px

    #TRIBUCAMP2018 @RAIOLANETWORKS
    THANK YOU SO MUCH!

    #TRIBUCAMP2018 @RAIOLANETWORKS

    You might also like