{"title":"Getting Started with Elementor Page Builder","id":55475,"link":"https:\/\/env.averta.net\/en\/step\/getting-started-with-elementor-page-builder\/","parent":[37224],"content":"

Another page builder plugin that is compatible with Phlox theme and Phlox Core Elements<\/strong> plugin, is Elementor Page Builder<\/strong>.
\nIt is one of the newest page builders lets you create and customize a page easily. It lets you create different responsive pages such as home, contact, about us, or any other page you need.<\/p>\n

This visual page builder, allows you to create a page with sections and add columns with different widgets to your page content. Inside each section, you have columns, and it is possible to drag columns and widgets into the same section or moving them between different sections. Each section is draggable, too. Beside drag and drop feature, almost everything is customizable and you can change attributes such as margin, padding, column width, content position, background color etc. via the page builder. On pro version of Elementor, you are able to write custom CSS on pro version of Page Builder.<\/p>\n

To install Elementor P<\/strong>age Builder Plugin<\/strong>:<\/p>\n

    \n
  1. Go to your?WordPress Admin Panel<\/strong><\/li>\n
  2. Click?Phlox<\/strong>?on the Dashboard Sidebar<\/strong><\/li>\n
  3. Navigate?Recommended Plugins?<\/strong>tab<\/li>\n
  4. Install Elementor<\/strong><\/li>\n<\/ol>\n

    To install?Phlox Elements<\/strong>:<\/p>\n

      \n
    1. Go to your?WordPress Admin Panel<\/strong><\/li>\n
    2. Click?Phlox<\/strong>?on the Dashboard<\/strong><\/li>\n
    3. Navigate?Recommended Plugins?<\/strong>tab<\/li>\n
    4. Install Auxin Elements<\/strong><\/li>\n<\/ol>\n

      You can take a look at this documentation to install all of the Recommended Plugins for Phlox<\/a>.<\/p>\n

      After installing, Page Builder adds an extra tab to the standard WordPress editor.?To find this tab and create a page or post with Page Builder:<\/p>\n

        \n
      1. Go to your WordPress Admin Panel<\/strong><\/span><\/li>\n
      2. Click the <\/span>Pages?<\/b>on the <\/span>Dashboard<\/b><\/li>\n
      3. Click the <\/span>Add New<\/b><\/li>\n
      4. Navigate to the top left hand of the WordPress text-box and find?Edit with Elementor?<\/strong>button.<\/li>\n<\/ol>\n
        \n

        Elementor Options<\/h3>\n

        On the right side of your page, you will see the editing screen. There you can add and edit elements, or even choose a layout for your page. Elementor panel is on the left side.
        \nYou can use the available widgets to add elements on your chosen structure of columns, or choose one of the prebuilt templates or block designs.<\/p>\n

        \"\"<\/a><\/p>\n

        Elementor Editing Screen<\/h3>\n

        Add New Section<\/h4>\n

        As we mentioned, with this page builder you can make your page of?sections<\/em>,?columns<\/em>, and?widgets<\/em>.<\/p>\n

        You can add new section and choose a column structure. Then you can drag widgets from Elementor panel to the columns.<\/p>\n

        \"\"<\/a><\/p>\n

        Inserting a Template<\/h4>\n

        Template Library is accessible on Elementor editing screen. Click Add Template button. The popped up window contains three tabs: Blocks, Pages,<\/strong>?and My Templates<\/strong>.<\/p>\n

        On the first tab, there are some pre-made sections and you can choose one of them instead of select a columns structure yourself.<\/p>\n

        \"\"<\/a><\/p>\n

        Many pre-designed templates are available on the Pages tab. Before you add a template, you can preview your desired template by hovering on thumbnail, then click on the little magnifying icon. To add the template, you can click on the INSERT<\/strong> button on the top right of its preview page. Or you can directly insert the template without previewing on the library.<\/p>\n

        \"\"<\/a><\/p>\n

        The third tabs is for your saved templates. preview, delete, and export JSON file to import and reuse it on another website. To import your template on another website, you can do that with Elementor Settings on WordPress Dashboard on backend.<\/p>\n

        Save Pages or Sections as Template\"\"<\/a><\/h3>\n

        To have your entire work as a template, you need to save it. On bottom right side of the panel, you can see the PUBLISH<\/strong> button. Click on the tooltip to see Save Options and save your page as template for further use. You can save your page as a template with publish button on the Elementor panel. Give your template a name and save it. Then it will be automatically added to My Templates area.<\/p>\n

        <\/div>\n

        To save a specific section, you can hover over it and select the save icon. Name this section and save it to add it to My Templates area.<\/p>\n

        \"\"<\/a><\/p>\n

        Elementor Panel\"\"<\/a><\/h3>\n

        There are plenty of widgets on the Elementor Panel that you can use them on your page by dragging them into the sections or columns. You can simply drag and drop each element inside the same section\/column, or move them into another section\/column. Beside available elements, Elementor has some settings. In the top left hand corner, you can find a burger icon. There are advanced configurations here that relate to the entire website, not to the individual pages. So you can change the global defaults here.<\/p>\n

        <\/div>\n

        Style<\/h4>\n

        \"\"<\/a>\"\"<\/a>\"\"<\/a>Default Colors<\/h5>\n

        On this section, you can see your website color palette. Also, there are some suggested palettes you can use instead of your current color palette.<\/p>\n

        Default Fonts<\/h5>\n

        This option lets you change your website font. You can change font family and font weight of headlines and body.<\/p>\n

        Color Picker<\/h5>\n

        With this option, you are able to select some colors to show in the editor’s color of each option and widget. You can do this to save time.<\/p>\n

        <\/div>\n

         <\/p>\n

        Settings<\/h4>\n

        Global Setting\"\"<\/a>s\"\"<\/a><\/h5>\n

        This section has two tabs: Style?<\/strong>and Lightbox<\/strong><\/p>\n

        On Style<\/strong> tab, you will find some options to change the default width of content area, or the default space between widgets. Also, you can set a default generic fonts, stretched section fit to, and page title selector.<\/p>\n

        On Lightbox<\/strong> tab, you can enable image lightbox on any link that leads to an image file, or enable lightbox in editor. Also, you can customize its background color, UI color, and UI hover color.<\/p>\n

        Dashboard Settings<\/h5>\n

        To access Elementor settings on WordPress Admin Panel<\/strong>, you can click on dashboard settings.<\/p>\n

        About Elementor<\/h5>\n

        About Elementor gives you more information about this plugin.<\/p>\n

         <\/p>\n

         <\/p>\n

         <\/p>\n

         <\/p>\n

         <\/p>\n

         <\/p>\n

        \n

        Section Options<\/h3>\n

        You can find some options to change on each section. Just hover over a section to see a blue line indicator. There are 6 icons to customize your section: Edit Section, Duplicate Section, Add Section, Save Section, Remove Section<\/p>\n

        \"\"<\/a><\/p>\n

        \"\"<\/a>
        \nEdit Section<\/h4>\n
        Stretch Section<\/h5>\n

        Enable this option to make a full-width section.<\/p>\n

        Content Width<\/h5>\n

        The width of content can be Boxed or Fullwidth. Also, you are able to change it manually by toggling the amount or type your desired value.<\/p>\n

        Columns Gap<\/h5>\n

        You can change the columns gap, too: Default, No Gap, Narrow, Extended, Wide, Wider<\/p>\n

        Height<\/h5>\n

        The height of your section can be Default, Fit to Screen, Min Height. If you choose min height, you are able to manually change the min height.<\/p>\n

        Content Position<\/h5>\n

        This option lets you to change the position of content. Default, Top, Middle, and Bottom are available positions.<\/p>\n

        HTML Tag<\/h5>\n

        HTML Tag of the section, can be changed to div, header, footer, article, section, aside, nav<\/p>\n

        Style<\/h4>\n

        Background and Background Overlay<\/h5>\n

        Section background can be Normal<\/strong> or Hover<\/strong>. Also, it can be Gradient<\/strong>, too. If you want, you are able to add Image<\/strong> as a background.<\/p>\n

        Border<\/h5>\n

        You can have Normal<\/strong> or Hover<\/strong> border and change the color. Beside, you can change the style of it to Solid<\/strong>, Double<\/strong>, Dotted<\/strong>, Dashed<\/strong>, and Groove<\/strong>. Other options are Border Radius<\/strong> and Box Shadow<\/strong>.<\/p>\n

        Shape Divider<\/h5>\n

        There are almost 20 available Shape Divider and you can add it to Top<\/strong> or Bottom<\/strong> of your section, Flip<\/strong> and Invert<\/strong> it or Bring it to Front<\/strong>. The Color<\/strong> and Height<\/strong> are editable, too.<\/p>\n

        Typography<\/h5>\n

        With this option, you can change typography parameters:?Text Alignment<\/strong>, and the color of section Heading<\/strong>, Text<\/strong>, Link<\/strong>, and?Link Hover<\/strong>.<\/p>\n

        Advanced<\/h4>\n
        Advanced<\/h5>\n

        On advanced tab, you can change Z-Index<\/strong>,?Margins<\/strong> and Paddings<\/strong> of the section. , Z-Index, There are many?Entrance Animation<\/strong> to add to the section.?Also, you can write CSS ID<\/strong> and CSS Classes<\/strong> on advanced tab.<\/p>\n

        Responsive<\/h5>\n

        Responsive options let you Reverse Columns<\/strong>. It means you can choose to reverse the order of your columns on mobile.
        \nYou can choose to Hide<\/strong> your section on Desktop<\/strong>, Mobile<\/strong>, or Tablet<\/strong>.<\/p>\n

        Custom CSS<\/h5>\n

        This option is available for pro users of Elementor.<\/p>\n

        Note: <\/strong>Duplicate, Add, and Remove are available for columns, too. Also, each widget have some options. You can take a look at Phlox Elements Options<\/strong> to know more.<\/p>\n","type":"solution"}